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 {
margin-top: 0;
color: var(--secondary-text-color);
text-wrap: pretty;
}
.article-content {
@ -154,7 +155,7 @@ header {
> a {
text-decoration: none;
&[href^="#fnref-"] {
&[href^="#fn-"] {
display: none;
}
}
@ -179,7 +180,7 @@ aside:not(.inline) {
line-height: 1.25;
color: var(--secondary-text-color);
transition: color 0.2s ease-in-out;
display: none;
display: block;
.sidenote-p {
margin: 20px 0;
@ -198,10 +199,13 @@ aside:not(.inline) {
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
.footnote {
display: flex;
display: none;
flex-direction: row;
gap: 8px;
font-size: 1rem;
@ -226,7 +230,6 @@ aside:not(.inline) {
aside.inline {
font-size: 1rem;
/* background-color: #d8d7fe; */
background-color: lighten($link-color, 43%);
padding: 1rem;
@ -240,21 +243,29 @@ aside.inline {
// 1.5 to account for -50% margin-right on .sidenote
// 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 {
> a[href^="#fn-"] {
display: none;
}
> a[href^="#fnref-"] {
display: inline;
}
> a[href^="#fnref-"] {
display: none;
}
.sidenote,
aside:not(.inline) {
display: block;
}
.sidenote {
display: none;
}
.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;
}
}