Compare commits

..

3 Commits

Author SHA1 Message Date
e7d56dd4bd Clean up some styles. 2020-07-15 13:56:03 -07:00
a4fedb276d Adjust margin spacing. 2020-07-15 13:18:34 -07:00
277c0a2ce6 Rework sidenote spacing and TOC. 2020-07-15 13:13:47 -07:00
6 changed files with 69 additions and 69 deletions

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: 0.5rem;
$margin-outer-offset: 1rem;
@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;

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;
} }
} }

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;

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;
@ -44,6 +45,7 @@ pre code {
div.highlight table { div.highlight table {
border: $code-border !important; border: $code-border !important;
border-radius: 0px;
pre { pre {
margin: 0; margin: 0;
@ -62,15 +64,17 @@ 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 {
position: initial; left: 0;
} }
} }
@ -79,8 +83,7 @@ div.highlight table {
background-color: $primary-color; background-color: $primary-color;
border: none; border: none;
color: white; color: white;
transition: color 0.25s; transition: color 0.25s, background-color 0.25s;
transition: background-color 0.25s;
text-align: left; text-align: left;
&:focus { &:focus {
@ -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;
}
}
}

View File

@ -0,0 +1,49 @@
@import "variables.scss";
@import "mixins.scss";
$toc-color: $code-color;
$toc-border-color: $code-border-color;
.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: 0.5rem;
}
#TableOfContents > ul {
padding-left: 0;
}
nav {
margin: 0px;
}
ul {
list-style: none;
padding-left: 2rem;
margin: 0px;
}
a {
padding: 0;
}
div.wrapper {
@include bordered-block;
padding: 1rem;
background-color: $toc-color;
border-color: $toc-border-color;
box-sizing: border-box;
max-width: 100%;
}
}

View File

@ -1,16 +1,16 @@
$container-width: 45rem; $container-width: 45rem;
$container-min-padding: 1rem;
$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;