mobile view fix
This commit is contained in:
parent
f20b697aed
commit
bc8100b101
2 changed files with 35 additions and 28 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue