From b8f4efbdfe2b1a40af173b4ec0d172ea7c9e9bce Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Wed, 17 Jun 2020 19:53:42 +0800 Subject: [PATCH] change 404 page --- assets/scss/404.scss | 70 +++++++++++++++++- assets/scss/header.scss | 4 +- assets/scss/partner.scss | 47 +++++++++++- config/_default/config.toml | 8 +- i18n/en.yaml | 5 ++ layouts/404.html | 13 +++- layouts/partials/css.html | 10 +++ layouts/partials/header.html | 2 +- static/images/404/404.png | Bin 0 -> 726837 bytes static/images/404/combined-shape.svg | 3 + static/images/404/fill.svg | 3 + static/images/observability/observability.jpg | Bin 416061 -> 414441 bytes 12 files changed, 153 insertions(+), 12 deletions(-) create mode 100644 static/images/404/404.png create mode 100644 static/images/404/combined-shape.svg create mode 100644 static/images/404/fill.svg diff --git a/assets/scss/404.scss b/assets/scss/404.scss index 74df99a3d..248611fb4 100644 --- a/assets/scss/404.scss +++ b/assets/scss/404.scss @@ -1,4 +1,72 @@ +@import 'variables'; .section-1 { - padding-top: 100px; + position: relative; + box-sizing: border-box; + padding-top: 280px; + padding-bottom: 20px; text-align: center; + + @media only screen and (max-width: $mobile-max-width) { + padding-top: 200px; + } + + .img-1 { + position: absolute; + top: 94px; + right: 0; + @media only screen and (max-width: $mobile-max-width) { + display: none; + } + } + + .img-2 { + position: absolute; + bottom: 38px; + left: 84px; + + @media only screen and (max-width: $mobile-max-width) { + display: none; + } + } + + div { + position: relative; + z-index: 2; + text-align: center; + + img { + width: 500px; + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + } + } + + p { + font-size: 20px; + line-height: 1.6; + color: #919aa3; + } + + button { + width: 144px; + height: 40px; + margin-top: 15px; + border: none; + border-radius: 20px; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42); + font-size: 14px; + color: #ffffff; + cursor: pointer; + &:hover { + box-shadow: none; + } + } + } +} + +.navigation { + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9)); } \ No newline at end of file diff --git a/assets/scss/header.scss b/assets/scss/header.scss index 9948813ca..9232d2774 100644 --- a/assets/scss/header.scss +++ b/assets/scss/header.scss @@ -137,11 +137,11 @@ // } } - .menu-Scenario { + .menu-2 { width: 260px; } - .menu-Community { + .menu-5 { width: 120px; } diff --git a/assets/scss/partner.scss b/assets/scss/partner.scss index 5646d89a4..9082c4068 100644 --- a/assets/scss/partner.scss +++ b/assets/scss/partner.scss @@ -36,6 +36,11 @@ z-index: 2; top: -40px; box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06); + + @media only screen and (max-width: $mobile-max-width) { + flex-direction: column; + } + .left-div { position: relative; width: 470px; @@ -46,6 +51,7 @@ @media only screen and (max-width: $mobile-max-width) { width: 100%; height: auto; + box-sizing: border-box; border-radius: 10px; padding: 20px; } @@ -91,12 +97,21 @@ background-color: #3d3e49; @media only screen and (max-width: $mobile-max-width) { - display: none; + box-sizing: border-box; + width: 100%; + height: auto; + margin-top: 20px; + border-radius: 10px; } & > img { margin-top: 107px; margin-left: 45px; + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + margin-left: 0px; + } } .btn-div { @@ -112,6 +127,12 @@ background-image: linear-gradient(107deg, #fdba39 20%, #f2635e 99%); cursor: pointer; + @media only screen and (max-width: $mobile-max-width) { + width: 70px; + height: 20px; + line-height: 20px; + } + &:hover { & > div { display: block; @@ -129,12 +150,21 @@ border-radius: 10px; background: #ffffff; + @media only screen and (max-width: $mobile-max-width) { + width: 90px; + height: 40px; + } + img { width: 95px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + @media only screen and (max-width: $mobile-max-width) { + width: 70px; + } } &::after { @@ -155,16 +185,31 @@ top: 116px; left: 85px; background-image: linear-gradient(107deg, #f2635e 20%, #fdba39 99%); + + @media only screen and (max-width: $mobile-max-width) { + left: 15%; + transform: translateX(-50%); + } } .div-2 { top: 89px; left: 294px; + + @media only screen and (max-width: $mobile-max-width) { + left: 51.568%; + transform: translateX(-50%); + } } .div-3 { top: 92px; right: 97px; + + @media only screen and (max-width: $mobile-max-width) { + right: 12.718%; + transform: translateX(50%); + } } } } diff --git a/config/_default/config.toml b/config/_default/config.toml index 3d7d95a71..525496eba 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -35,23 +35,23 @@ languageName = "English" [[languages.en.menu.main]] weight = 2 -name = "Scenario" +name = "Scenarios" hasChildren = true [[languages.en.menu.main]] - parent = "Scenario" + parent = "Scenarios" name = "Embracing One-stop DevOps Workflow" URL = "devops" weight = 1 [[languages.en.menu.main]] - parent = "Scenario" + parent = "Scenarios" name = "Running Microservices on Kubernetes" URL = "service-mesh" weight = 2 [[languages.en.menu.main]] - parent = "Scenario" + parent = "Scenarios" name = "Building Cloud Native Observability" URL = "observability" weight = 3 diff --git a/i18n/en.yaml b/i18n/en.yaml index 349ec0f59..f501b4327 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -38,3 +38,8 @@ translation: Coming Soon - id: Read More translation: Read More +- id: We can’t find the page that you’re looking for :( + translation: We can’t find the page that you’re looking for :( +- id: Go To Home + translation: Go To Home + diff --git a/layouts/404.html b/layouts/404.html index 8a518af0f..450a153bb 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,6 +1,13 @@ {{ define "main" }} - -
-

404

+
+ + +
+ +

{{ i18n "We can’t find the page that you’re looking for :(" }}

+ + + +
{{ end }} \ No newline at end of file diff --git a/layouts/partials/css.html b/layouts/partials/css.html index 430b8109f..c0942420f 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -21,4 +21,14 @@ {{ end }} +{{ if eq .Site.Language.Lang "tr" }} +{{ $footer := resources.Get "scss/footer-tr.scss" | toCSS | minify | fingerprint }} + +{{ end }} + +{{ if strings.HasSuffix .Permalink "404.html" }} +{{ $style := resources.Get "scss/404.scss" | toCSS | minify | fingerprint }} + +{{ end }} + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 36f6b5c2f..4b85fc01e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -20,7 +20,7 @@
  • {{ .Name }} -