mirror of
https://github.com/kubesphere/website.git
synced 2025-12-30 09:42:53 +00:00
change 404 page
This commit is contained in:
liuboaibc
parent
64f2cb036c
commit
b8f4efbdfe
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -137,11 +137,11 @@
|
|||
// }
|
||||
}
|
||||
|
||||
.menu-Scenario {
|
||||
.menu-2 {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.menu-Community {
|
||||
.menu-5 {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section style="text-align: center; margin-top: 200px;">
|
||||
<h2>404</h2>
|
||||
<section class="section-1">
|
||||
<img class="img-1" src="/images/404/combined-shape.svg" alt="">
|
||||
<img class="img-2" src="/images/404/fill.svg" alt="">
|
||||
<div class="common-layout">
|
||||
<img src="/images/404/404.png" alt="">
|
||||
<p>{{ i18n "We can’t find the page that you’re looking for :(" }}</p>
|
||||
<a href="{{ site.Home.RelPermalink }}">
|
||||
<button>{{ i18n "Go To Home" }}</button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -21,4 +21,14 @@
|
|||
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||
{{ end }}
|
||||
|
||||
{{ if eq .Site.Language.Lang "tr" }}
|
||||
{{ $footer := resources.Get "scss/footer-tr.scss" | toCSS | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $footer.Permalink }}">
|
||||
{{ end }}
|
||||
|
||||
{{ if strings.HasSuffix .Permalink "404.html" }}
|
||||
{{ $style := resources.Get "scss/404.scss" | toCSS | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
|
||||
<span class='menu-span'>{{ .Name }}</span>
|
||||
<ul class="dropdown-menu menu-{{ .Name }}">
|
||||
<ul class="dropdown-menu menu-{{ .Weight }}">
|
||||
{{ range .Children }}
|
||||
<li {{ if eq $section .URL }} class="active"{{ end}}>
|
||||
{{ if hasPrefix .URL "http" }}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 710 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="641" height="533" viewBox="0 0 641 533">
|
||||
<path fill="#D5DEE7" fill-rule="evenodd" d="M158.163-130.828c27.791-18.048 64.951-10.15 82.999 17.642L341.315 41.036c11.684 17.992 12.873 40.852 3.12 59.959l-30.658 60.055c-4.71 9.227-6.9 19.534-6.35 29.88 1.725 32.452 29.432 57.36 61.884 55.635l67.333-3.58c21.422-1.14 41.822 9.245 53.506 27.237L590.3 424.44c5.728 8.82 9.037 18.99 9.596 29.49 1.76 33.09-23.637 61.343-56.728 63.103l-285.465 15.187c-21.423 1.14-41.824-9.245-53.508-27.237L10.545 206.79c-11.684-17.992-12.873-40.852-3.12-59.958l129.977-254.62c4.781-9.367 11.941-17.312 20.761-23.04zm424.752-22.198c27.792-18.048 64.951-10.15 83 17.642L783.338 45.435c5.72 8.807 9.028 18.962 9.593 29.448 1.784 33.089-23.593 61.36-56.682 63.143l-215.854 11.639c-10.578.57-21.118-1.67-30.55-6.494-29.503-15.088-41.188-51.236-26.1-80.739l98.429-192.458c4.781-9.35 11.933-17.28 20.74-23zm-292.927-53.748l216.719-11.978-99.09 193.111-117.629-181.133z" opacity=".542"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1013 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="200" viewBox="0 0 231 200">
|
||||
<path fill="#EFF4F9" fill-rule="evenodd" d="M143.232 16.625l84.555 146.859c6.614 11.486 2.663 26.16-8.824 32.774-3.642 2.097-7.772 3.2-11.975 3.2H24.012c-13.255 0-24-10.744-24-24 0-4.202 1.104-8.332 3.201-11.974l84.555-146.86C96.586 1.31 116.151-3.958 131.467 4.86c4.89 2.815 8.95 6.874 11.765 11.765z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 404 B |
Binary file not shown.
|
Before Width: | Height: | Size: 406 KiB After Width: | Height: | Size: 405 KiB |
Loading…
Reference in New Issue