jp/www.byjp.me
1
0
Fork 0
mirror of https://github.com/by-jp/www.byjp.me.git synced 2025-08-09 22:16:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Some hacky CSS for mobile homepage

Browse source
This commit is contained in:
JP Hastings-Spital 2024-03-18 06:29:51 +00:00
parent bcaebf0a3d
commit 1fdb286a21
1 changed files with 40 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
assets/scss/_main.scss
View file

@ -859,9 +859,15 @@ mark {
margin: 1em 1.5em; margin: 1em 1.5em;
list-style: none; list-style: none;
@media #{$media-size-phone} {
font-size: 1rem;
padding: 0;
width: fit-content;
max-width: calc(100% - 2em);
margin-inline: auto;
}
li { li {
&::before{ &::before{
position: absolute; position: absolute;
left: -1.5em; left: -1.5em;
@ -895,6 +901,10 @@ mark {
li:hover .summary { li:hover .summary {
display: block; display: block;
@media #{$media-size-phone} {
display: none;
}
} }
} }
@ -908,22 +918,47 @@ mark {
text-align: right; text-align: right;
text-wrap: balance; text-wrap: balance;
color: $light-color-dim; color: $light-color-dim;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: $dark-color-dim; color: $dark-color-dim;
} }
@media #{$media-size-phone} {
position: relative;
width: 100%;
text-align: center;
margin: 0 0 2em 0;
padding: 0;
}
} }
.passing { .passing {
display: flex; display: flex;
flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
& > * { & > * {
max-width: 50%; max-width: 50%;
@media #{$media-size-phone} {
max-width: 100%;
width: 100%;
&:not(:last-child)::after {
content: ' ';
border-top: 1px solid $light-border-color;
height:1px;
display:block;
margin: 1.5em;
width: 3em;
margin-inline: auto;
}
}
} }
figure { figure {
margin: 1em 0; margin: 1em 0;
margin-inline: auto;
} }
} }
@ -931,4 +966,4 @@ mark {
font-size: 0.8rem; font-size: 0.8rem;
opacity: 0.6; opacity: 0.6;
} }
} }