shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Fix asides not collapsing to inline for small viewports

This commit is contained in:
Shadowfacts 2021-07-07 23:03:50 -04:00
parent 3e23336622
commit 49c721d0b9
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
site/css/main.scss
View File

@ -229,16 +229,8 @@ article {
border: 1px solid var(--aside-border); border: 1px solid var(--aside-border);
padding: 15px; padding: 15px;
font-size: 1rem; font-size: 1rem;
left: 100%;
box-sizing: border-box; box-sizing: border-box;
&:not(.inline) {
width: 50%;
position: absolute;
margin-left: 15px;
transform: translateY(-50%);
}
p:first-child { margin-top: 0; } p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; } p:last-child { margin-bottom: 0; }
} }
@ -734,11 +726,16 @@ table {
} }
} }
@media (max-width: 1455px) { // 720 + 30 + 720 + 15
article .article-content aside { // main content, l/r container padding, aside width (50% on each side), outer edge margin
position: initial; // inner edge margin overlaps with container padding
width: 100%; @media (min-width: 1485px) {
margin: 0; article .article-content aside:not(.inline) {
transform: unset; width: 50%;
position: absolute;
left: 100%;
margin-left: 15px;
margin-right: 15px;
transform: translateY(-50%);
} }
} }