shadowfacts/v6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix non-inline asides on mobile

Browse Source
This commit is contained in:
Shadowfacts 2025-01-12 16:17:21 -05:00
parent f0ef67f9a0
commit 4601874c64
1 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
site_test/css/main.scss
View File

@ -129,6 +129,7 @@ header {
.article-meta { .article-meta {
margin-top: 0; margin-top: 0;
color: var(--secondary-text-color); color: var(--secondary-text-color);
text-wrap: pretty;
} }
.article-content { .article-content {
@ -154,7 +155,7 @@ header {
> a { > a {
text-decoration: none; text-decoration: none;
&[href^="#fnref-"] { &[href^="#fn-"] {
display: none; display: none;
} }
} }
@ -179,7 +180,7 @@ aside:not(.inline) {
line-height: 1.25; line-height: 1.25;
color: var(--secondary-text-color); color: var(--secondary-text-color);
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
display: none; display: block;
.sidenote-p { .sidenote-p {
margin: 20px 0; margin: 20px 0;
@ -198,10 +199,13 @@ aside:not(.inline) {
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;
} }
p:last-child {
margin-bottom: 0;
}
} }
.footnote { .footnote {
display: flex; display: none;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
font-size: 1rem; font-size: 1rem;
@ -226,7 +230,6 @@ aside:not(.inline) {
aside.inline { aside.inline {
font-size: 1rem; font-size: 1rem;
/* background-color: #d8d7fe; */
background-color: lighten($link-color, 43%); background-color: lighten($link-color, 43%);
padding: 1rem; padding: 1rem;
@ -240,21 +243,29 @@ aside.inline {
// 1.5 to account for -50% margin-right on .sidenote // 1.5 to account for -50% margin-right on .sidenote
// plus page-horizontal-margin to effectively use that as the margin // plus page-horizontal-margin to effectively use that as the margin
@media (min-width: calc(1.5 * $container-max-width + 2 * $page-horizontal-margin)) { @media (max-width: calc(1.5 * $container-max-width + 2 * $page-horizontal-margin)) {
.footnote-reference { .footnote-reference {
> a[href^="#fn-"] { > a[href^="#fn-"] {
display: none;
}
> a[href^="#fnref-"] {
display: inline; display: inline;
} }
> a[href^="#fnref-"] {
display: none;
}
} }
.sidenote, .sidenote {
aside:not(.inline) { display: none;
display: block;
} }
.footnote { .footnote {
display: none; display: flex;
}
aside:not(.inline) {
float: none;
margin-right: 0;
width: auto;
line-height: initial;
transform: none;
background-color: lighten($link-color, 43%);
padding: 1rem;
} }
} }