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

Rework sidenote spacing and TOC.

Browse Source
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";
$margin-width: 30rem;
$margin-offset: 1.5rem;
$margin-inner-offset: 0rem;
$margin-outer-offset: 1.5rem;
@mixin below-two-margins {
@media screen and
(max-width: $container-width +
2 * ($margin-width + 2 * $margin-offset)) {
(max-width: $container-width-threshold +
2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
@content;
}
}
@mixin below-one-margin {
@media screen and
(max-width: $container-width +
($margin-width + 3 * $margin-offset)) {
(max-width: $container-width-threshold +
($margin-width + $margin-inner-offset + $margin-outer-offset)) {
@content;
}
}
@ -29,7 +30,7 @@ $margin-offset: 1.5rem;
@mixin margin-content-left {
left: 0;
margin-left: -($margin-width + $margin-offset);
margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
@include below-two-margins {
display: none;
@ -38,7 +39,7 @@ $margin-offset: 1.5rem;
@mixin margin-content-right {
right: 0;
margin-right: -($margin-width + $margin-offset);
margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
@include below-one-margin {
display: none;

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

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

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

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

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

@ -1,6 +1,7 @@
@import "variables.scss";
@import "mixins.scss";
@import "margin.scss";
@import "toc.scss";
body {
font-family: $font-body;
@ -62,11 +63,13 @@ div.highlight table {
box-sizing: border-box;
@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 {
left: -($margin-width + $margin-offset)/2;
left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
}
@include below-one-margin {
@ -239,54 +242,3 @@ figure {
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-min-padding: 1.5rem;
$container-width-threshold: $container-width + 2 * $container-min-padding;
$standard-border-width: .075rem;
$primary-color: #36e281;
$border-color: #bfbfbf;
$code-color: #f0f0f0;
$code-border-color: darken($code-color, 10%);
$toc-color: $code-color;
$toc-border-color: $code-border-color;
$font-heading: "Lora", serif;
$font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace;
$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;