Web-Projects/blog-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add special table style and factor out media queries
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Danila Fedorin 2020-03-01 16:07:38 -08:00
parent 6712c0064a
commit 2d6aab6b71
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
themes/vanilla/assets/scss/sidenotes.scss
View File

@ -6,6 +6,22 @@ $sidenote-offset: 1.5rem;
$sidenote-padding: 1rem; $sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem; $sidenote-highlight-border-width: .2rem;
@mixin below-two-sidenotes {
@media screen and
(max-width: $container-width +
2 * ($sidenote-width + 2 * $sidenote-offset)) {
@content;
}
}
@mixin below-one-sidenote {
@media screen and
(max-width: $container-width +
($sidenote-width + 3 * $sidenote-offset)) {
@content;
}
}
.sidenote { .sidenote {
&:hover { &:hover {
.sidenote-label { .sidenote-label {
@ -64,8 +80,7 @@ $sidenote-highlight-border-width: .2rem;
} }
} }
@media screen and @include below-two-sidenotes {
(max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
.sidenote-content.sidenote-left { .sidenote-content.sidenote-left {
@include hidden-sidenote; @include hidden-sidenote;
margin-left: 0rem; margin-left: 0rem;
@ -77,8 +92,7 @@ $sidenote-highlight-border-width: .2rem;
} }
} }
@media screen and @include below-one-sidenote {
(max-width: $container-width + ($sidenote-width + 3 * $sidenote-offset)) {
.post-content { .post-content {
max-width: 100%; max-width: 100%;
} }

20
themes/vanilla/assets/scss/style.scss
View File

@ -18,6 +18,12 @@ $standard-border: $standard-border-width solid $border-color;
border-radius: .2rem; border-radius: .2rem;
} }
@mixin below-container-width {
@media screen and (max-width: $container-width){
@content;
}
}
body { body {
font-family: $font-body; font-family: $font-body;
font-size: 1.0rem; font-size: 1.0rem;
@ -64,8 +70,8 @@ pre code {
max-width: $container-width; max-width: $container-width;
box-sizing: border-box; box-sizing: border-box;
@media screen and (max-width: $container-width){ @include below-container-width {
padding: 0rem 1rem 0rem 1rem; padding: 0rem 1rem 0rem 1rem;
} }
} }
@ -156,6 +162,16 @@ table {
padding: 0.5rem; padding: 0.5rem;
} }
tr {
@include below-container-width {
display: flex;
flex-direction: column;
}
}
td { td {
@include below-container-width {
overflow-x: auto;
}
padding: 0.5rem; padding: 0.5rem;
} }