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

Rework sidenote spacing and TOC.

This commit is contained in:
Danila Fedorin 2020-07-15 13:13:47 -07:00
parent ef3c61e9e6
commit 277c0a2ce6
6 changed files with 83 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
themes/vanilla/assets/scss/margin.scss
View File

@ -2,20 +2,21 @@
@import "mixins.scss"; @import "mixins.scss";
$margin-width: 30rem; $margin-width: 30rem;
$margin-offset: 1.5rem; $margin-inner-offset: 0rem;
$margin-outer-offset: 1.5rem;
@mixin below-two-margins { @mixin below-two-margins {
@media screen and @media screen and
(max-width: $container-width + (max-width: $container-width-threshold +
2 * ($margin-width + 2 * $margin-offset)) { 2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
@content; @content;
} }
} }
@mixin below-one-margin { @mixin below-one-margin {
@media screen and @media screen and
(max-width: $container-width + (max-width: $container-width-threshold +
($margin-width + 3 * $margin-offset)) { ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
@content; @content;
} }
} }
@ -29,7 +30,7 @@ $margin-offset: 1.5rem;
@mixin margin-content-left { @mixin margin-content-left {
left: 0; left: 0;
margin-left: -($margin-width + $margin-offset); margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
@include below-two-margins { @include below-two-margins {
display: none; display: none;
@ -38,7 +39,7 @@ $margin-offset: 1.5rem;
@mixin margin-content-right { @mixin margin-content-right {
right: 0; right: 0;
margin-right: -($margin-width + $margin-offset); margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
@include below-one-margin { @include below-one-margin {
display: none; display: none;

2
themes/vanilla/assets/scss/mixins.scss
View File

@ -6,7 +6,7 @@
} }
@mixin below-container-width { @mixin below-container-width {
@media screen and (max-width: $container-width){ @media screen and (max-width: $container-width-threshold){
@content; @content;
} }
} }

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

@ -2,8 +2,6 @@
@import "mixins.scss"; @import "mixins.scss";
@import "margin.scss"; @import "margin.scss";
$sidenote-width: 30rem;
$sidenote-offset: 1.5rem;
$sidenote-padding: 1rem; $sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem; $sidenote-highlight-border-width: .2rem;

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

@ -1,6 +1,7 @@
@import "variables.scss"; @import "variables.scss";
@import "mixins.scss"; @import "mixins.scss";
@import "margin.scss"; @import "margin.scss";
@import "toc.scss";
body { body {
font-family: $font-body; font-family: $font-body;
@ -62,11 +63,13 @@ div.highlight table {
box-sizing: border-box; box-sizing: border-box;
@include below-container-width { @include below-container-width {
padding: 0rem 1rem 0rem 1rem; padding: 0 $container-min-padding 0 $container-min-padding;
margin: 0;
max-width: $container-width + 2*$container-min-padding;
} }
@include below-two-margins { @include below-two-margins {
left: -($margin-width + $margin-offset)/2; left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
} }
@include below-one-margin { @include below-one-margin {
@ -239,54 +242,3 @@ figure {
text-align: center; text-align: center;
} }
} }
.table-of-contents {
@include margin-content;
@include margin-content-left;
display: flex;
flex-direction: column;
align-items: end;
em {
font-style: normal;
font-weight: bold;
font-size: 1.2em;
display: block;
margin-bottom: 1rem;
}
#TableOfContents > ul {
padding-left: 0;
}
nav {
width: auto;
margin: 0px;
}
ul {
position: relative;
list-style: none;
padding-left: 2rem;
margin: 0px;
}
li {
position: relative;
}
a {
padding: 0;
}
div.wrapper {
@include bordered-block;
padding: 1rem;
background-color: $toc-color;
border-color: $toc-border-color;
@include below-two-margins {
width: auto;
}
}
}

66
themes/vanilla/assets/scss/toc.scss Normal file
View File

@ -0,0 +1,66 @@
@import "variables.scss";
@import "mixins.scss";
$toc-color: $code-color;
$toc-border-color: $code-border-color;
$toc-float-max-width: 20rem;
@mixin below-max-toc-width {
@media screen and (max-width: 2.5rem + 1.5 * $toc-float-max-width + 2 * $container-min-padding){
@content;
}
}
.table-of-contents {
@include margin-content;
@include margin-content-left;
display: flex;
flex-direction: column;
align-items: end;
margin-bottom: 1rem;
em {
font-style: normal;
font-weight: bold;
font-size: 1.2em;
display: block;
margin-bottom: 1rem;
}
#TableOfContents > ul {
padding-left: 0;
}
nav {
width: auto;
margin: 0px;
}
ul {
position: relative;
list-style: none;
padding-left: 2rem;
margin: 0px;
}
li {
position: relative;
}
a {
padding: 0;
vertical-align: top;
overflow-x: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
div.wrapper {
@include bordered-block;
padding: 1rem;
background-color: $toc-color;
border-color: $toc-border-color;
box-sizing: border-box;
max-width: 100%;
}
}

6
themes/vanilla/assets/scss/variables.scss
View File

@ -1,16 +1,16 @@
$container-width: 45rem; $container-width: 45rem;
$container-min-padding: 1.5rem;
$container-width-threshold: $container-width + 2 * $container-min-padding;
$standard-border-width: .075rem; $standard-border-width: .075rem;
$primary-color: #36e281; $primary-color: #36e281;
$border-color: #bfbfbf; $border-color: #bfbfbf;
$code-color: #f0f0f0; $code-color: #f0f0f0;
$code-border-color: darken($code-color, 10%); $code-border-color: darken($code-color, 10%);
$toc-color: $code-color;
$toc-border-color: $code-border-color;
$font-heading: "Lora", serif; $font-heading: "Lora", serif;
$font-body: "Raleway", serif; $font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace; $font-code: "Inconsolata", monospace;
$standard-border: $standard-border-width solid $border-color; $standard-border: $standard-border-width solid $border-color;
$code-border: 0.0375rem solid $code-border-color; $code-border: $standard-border-width solid $code-border-color;