mobile view fix

This commit is contained in:
sundae 2025-08-10 18:07:17 +03:00
parent f20b697aed
commit bc8100b101
No known key found for this signature in database
2 changed files with 35 additions and 28 deletions

View file

@ -1,7 +1,11 @@
@import url("./variables.css"); @import url("./variables.css");
@import url("../default/variables.css"); @import url("../default/variables.css");
@import url("./nav.css"); @import url("./nav.css");
#bio, #interests, #badges, #artworks, #art { #bio,
#interests,
#badges,
#artworks,
#art {
font-family: "Pangolin", sans-serif; font-family: "Pangolin", sans-serif;
} }
body { body {
@ -50,7 +54,12 @@ body > nav {
} }
} }
& details { & details {
background-image: linear-gradient(-45deg, var(--citrus-primary), var(--citrus-secondary), var(--citrus-primary)); background-image: linear-gradient(
-45deg,
var(--citrus-primary),
var(--citrus-secondary),
var(--citrus-primary)
);
} }
} }
article { article {
@ -81,7 +90,7 @@ article {
box-shadow: var(--shadow); box-shadow: var(--shadow);
background: color-mix(in lch, yellow, white); background: color-mix(in lch, yellow, white);
&:nth-child(odd) { &:nth-child(odd) {
transform: rotate(1deg) transform: rotate(1deg);
} }
} }
ul:not([role]) li::before { ul:not([role]) li::before {
@ -199,13 +208,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
&::before { &::before {
content: ""; content: "";
display: flex; display: flex;
height: 100%; height: 32px;
width: calc(100% + var(--pad-xl) * 2); width: calc(100% + var(--pad-xl) * 2);
margin: -4rem 0 0 calc(var(--pad-xl) * -1); margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
background-image: var(--border), var(--lined); background-image: var(--border), var(--lined);
background-size: 32px, 32px; background-size: 32px, 32px;
background-blend-mode: darken; background-blend-mode: darken;
padding: var(--pad-xl);
} }
} }
} }
@ -232,3 +240,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
content: none; content: none;
} }
} }
@media screen and (max-width: 450px) {
#artworks & article {
&::before {
width: calc(100% + var(--pad-l) * 2) !important;
margin: -3rem 0 0 -16px;
}
}
}

View file

@ -48,7 +48,8 @@ h3 {
border-radius: 0 var(--round) var(--round) 0; border-radius: 0 var(--round) var(--round) 0;
} }
main article[id] { main article[id] {
& p, li { & p,
li {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
@ -170,15 +171,14 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
} }
@media screen and (max-width: 920px) { @media screen and (max-width: 920px) {
main {
padding: var(--pad-l);
}
body > nav { body > nav {
position: initial; position: initial;
width: 100%; width: 100%;
} }
main {
padding: var(--pad-l);
}
main > section { main > section {
flex-direction: column; flex-direction: column;
} }
@ -213,15 +213,6 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
main {
padding: var(--pad-sm);
}
article {
padding: var(--pad-l);
border: 0;
}
body > nav { body > nav {
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;