FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor 404 page CSS

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-26 23:41:21 +06:00
parent cb0ae29984
commit bd8c8f8af3
1 changed files with 40 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

111
assets/styles/layouts/404.scss
View file

@ -2,94 +2,63 @@ body.kind-404 {
#sidebar-toggler { #sidebar-toggler {
display: none; display: none;
} }
.notFound { .notFound {
padding-top: 5rem; padding-top: 5rem;
text-align: center; text-align: center;
padding-bottom: 8rem; padding-bottom: 8rem;
img {
height: 500px;
}
h1 {
font-style: italic;
}
.message {
position: absolute;
max-width: 20rem;
top: 40%;
left: 30%;
}
} }
.notFound img { @include media('<=very-large') {
height: 500px;
}
.notFound h1 {
font-style: italic;
}
.notFound .message {
position: absolute;
max-width: 20rem;
top: 40%;
left: 30%;
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@media only screen and (min-width: 1824px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
}
@media (max-width: 1200px) {
.notFound .message { .notFound .message {
top: 50%; top: 50%;
left: 25%; left: 25%;
} }
} }
/* IPad Pro */ @include media('<=large') {
@media (max-width: 1024px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
.notFound .message { .notFound .message {
top: 46%; top: 46%;
left: 25%; left: 25%;
} }
} }
/* Medium devices (tablets, 768px and up) */ @include media('<=medium') {
.notFound {
@media only screen and (max-width: 768px) { img {
.notFound img { height: 400px;
height: 400px; }
} .message {
top: 20rem;
.notFound .message { left: 4rem;
top: 20rem; }
left: 4rem;
} }
} }
/* Small devices (landscape phones, 576px and up) */ @include media('<=small') {
.notFound {
@media only screen and (max-width: 576px) { img {
.notFound img { height: 250px;
height: 250px; }
} .message {
top: 20rem;
.notFound .message { left: 2rem;
top: 20rem; }
left: 2rem;
} }
} }
/* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) {
}
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
}
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}
} }