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