Improve 404 page.

This commit is contained in:
Henry Hiles 2023-05-17 10:29:41 -04:00
parent a34f4e8c7f
commit a94d01ed75
5 changed files with 60 additions and 56 deletions

34
src/styles/404.module.css Normal file
View file

@ -0,0 +1,34 @@
#notFound {
margin: 50px 20px;
display: flex;
padding: 60px 30px;
border-radius: 20px;
background: #1d2e3d;
align-items: center;
gap: 5px;
justify-content: center;
text-align: center;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.5) 2px 10px 15px;
}
#notFound a {
color: var(--text-primary);
}
#header {
font-size: 3em;
}
#description {
font-size: 1.3em;
width: 50%;
}
@media (min-width: 800px) {
.notFound {
width: 60vw;
border-radius: 20px;
height: 65vh;
}
}

View file

@ -1,35 +1,35 @@
.container {
width: 100%;
display: flex;
justify-content: center;
width: 100%;
display: flex;
justify-content: center;
}
.dividerIcon {
margin: 10px 0 15px;
position: relative;
margin: 10px 0 15px;
position: relative;
}
.dividerIcon svg {
height: 2rem;
width: 2rem;
color: inherit;
height: 2rem;
width: 2rem;
color: inherit;
}
.dividerIcon::before,
.dividerIcon::after {
border-bottom: 0.5rem solid var(--text-primary);
border-radius: 5em;
content: "";
margin: 0 1em;
position: absolute;
top: 50%;
width: 7rem;
border-bottom: 0.5rem solid var(--text-primary);
border-radius: 5em;
content: "";
margin: 0 1em;
position: absolute;
top: 50%;
width: 7rem;
}
.dividerIcon::before {
right: 100%;
right: 100%;
}
.dividerIcon::after {
left: 100%;
left: 100%;
}

View file

@ -14,5 +14,6 @@
}
#jumbo #shortAbout {
padding: 20px 0;
display: block;
padding: 20px 10px;
}

View file

@ -1,33 +0,0 @@
#notFound {
display: flex;
padding: 50px 0px;
border-radius: 20px;
background: #161f27;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#notFound a {
color: var(--text-primary);
}
#header {
font-size: 2.5em;
}
#description {
font-size: 1.2em;
width: 50%;
}
@media (min-width: 800px) {
.notFound {
width: 60vw;
border-radius: 20px;
height: 65vh;
}
}