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 {
display: none;
}
.notFound {
padding-top: 5rem;
text-align: center;
padding-bottom: 8rem;
img {
height: 500px;
}
h1 {
font-style: italic;
}
.message {
position: absolute;
max-width: 20rem;
top: 40%;
left: 30%;
}
}
.notFound img {
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) {
@include media('<=very-large') {
.notFound .message {
top: 50%;
left: 25%;
}
}
/* IPad Pro */
@media (max-width: 1024px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
@include media('<=large') {
.notFound .message {
top: 46%;
left: 25%;
}
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
.notFound img {
height: 400px;
}
.notFound .message {
top: 20rem;
left: 4rem;
@include media('<=medium') {
.notFound {
img {
height: 400px;
}
.message {
top: 20rem;
left: 4rem;
}
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.notFound img {
height: 250px;
}
.notFound .message {
top: 20rem;
left: 2rem;
@include media('<=small') {
.notFound {
img {
height: 250px;
}
.message {
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) {
}
}