Compare commits
No commits in common. "e7d56dd4bd9d6f852c8e9b84d1fb742e309686a4" and "ef3c61e9e6af81303cd9effd5f6cc7dd52775e64" have entirely different histories.
e7d56dd4bd
...
ef3c61e9e6
|
@ -2,21 +2,20 @@
|
||||||
@import "mixins.scss";
|
@import "mixins.scss";
|
||||||
|
|
||||||
$margin-width: 30rem;
|
$margin-width: 30rem;
|
||||||
$margin-inner-offset: 0.5rem;
|
$margin-offset: 1.5rem;
|
||||||
$margin-outer-offset: 1rem;
|
|
||||||
|
|
||||||
@mixin below-two-margins {
|
@mixin below-two-margins {
|
||||||
@media screen and
|
@media screen and
|
||||||
(max-width: $container-width-threshold +
|
(max-width: $container-width +
|
||||||
2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
|
2 * ($margin-width + 2 * $margin-offset)) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin below-one-margin {
|
@mixin below-one-margin {
|
||||||
@media screen and
|
@media screen and
|
||||||
(max-width: $container-width-threshold +
|
(max-width: $container-width +
|
||||||
($margin-width + $margin-inner-offset + $margin-outer-offset)) {
|
($margin-width + 3 * $margin-offset)) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -30,7 +29,7 @@ $margin-outer-offset: 1rem;
|
||||||
|
|
||||||
@mixin margin-content-left {
|
@mixin margin-content-left {
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
|
margin-left: -($margin-width + $margin-offset);
|
||||||
|
|
||||||
@include below-two-margins {
|
@include below-two-margins {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -39,7 +38,7 @@ $margin-outer-offset: 1rem;
|
||||||
|
|
||||||
@mixin margin-content-right {
|
@mixin margin-content-right {
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
|
margin-right: -($margin-width + $margin-offset);
|
||||||
|
|
||||||
@include below-one-margin {
|
@include below-one-margin {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin below-container-width {
|
@mixin below-container-width {
|
||||||
@media screen and (max-width: $container-width-threshold){
|
@media screen and (max-width: $container-width){
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
@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;
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
@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;
|
||||||
|
@ -45,7 +44,6 @@ 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;
|
||||||
|
@ -64,17 +62,15 @@ div.highlight table {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@include below-container-width {
|
@include below-container-width {
|
||||||
padding: 0 $container-min-padding 0 $container-min-padding;
|
padding: 0rem 1rem 0rem 1rem;
|
||||||
margin: 0;
|
|
||||||
max-width: $container-width + 2 * $container-min-padding;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include below-two-margins {
|
@include below-two-margins {
|
||||||
left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
|
left: -($margin-width + $margin-offset)/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include below-one-margin {
|
@include below-one-margin {
|
||||||
left: 0;
|
position: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +79,8 @@ div.highlight table {
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
transition: color 0.25s, background-color 0.25s;
|
transition: color 0.25s;
|
||||||
|
transition: background-color 0.25s;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
@ -242,3 +239,54 @@ 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,49 +0,0 @@
|
||||||
@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%;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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: $standard-border-width solid $code-border-color;
|
$code-border: 0.0375rem solid $code-border-color;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user