Add initial implementation of sidenotes

This commit is contained in:
Danila Fedorin 2019-12-06 00:10:26 -08:00
parent 3df9c57482
commit b0529a9124
5 changed files with 68 additions and 5 deletions

View File

@ -1,14 +1,13 @@
$basic-border: 1px solid #bfbfbf;
@import "style.scss";
.gmachine-instruction {
display: flex;
border: $basic-border;
border-radius: 2px;
@include bordered-block;
}
.gmachine-instruction-name {
padding: 10px;
border-right: $basic-border;
border-right: $standard-border;
flex-grow: 1;
flex-basis: 20%;
text-align: center;
@ -20,7 +19,7 @@ $basic-border: 1px solid #bfbfbf;
}
.gmachine-inner {
border-bottom: $basic-border;
border-bottom: $standard-border;
width: 100%;
&:last-child {

View File

@ -0,0 +1,45 @@
@import "style.scss";
$sidenote-width: 350px;
$sidenote-offset: 15px;
.sidenote {
&.right .sidenote-content {
right: 0;
margin-right: -($sidenote-width + $sidenote-offset);
}
&.left .sidenote-content {
left: 0;
margin-left: -($sidenote-width + $sidenote-offset);
}
&:hover {
.sidenote-label {
background-color: $primary-color;
color: white;
}
.sidenote-content {
border: 2px dashed;
padding: 9px;
border-color: $primary-color;
}
}
}
.sidenote-label {
border-bottom: 2px solid $primary-color;
}
.sidenote-content {
display: block;
position: absolute;
width: $sidenote-width;
margin-top: -1.5em;
@include bordered-block;
padding: 10px;
box-sizing: border-box;
text-align: left;
}

View File

@ -3,9 +3,16 @@ $primary-color: #36e281;
$primary-color-dark: darken($primary-color, 10%);
$code-color: #f0f0f0;
$code-color-dark: darken($code-color, 10%);
$border-color: #bfbfbf;
$font-heading: "Lora", serif;
$font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace;
$standard-border: 1px solid $border-color;
@mixin bordered-block {
border: $standard-border;
border-radius: 2px;
}
body {
font-family: $font-body;
@ -15,6 +22,10 @@ body {
text-align: justify;
}
main {
position: relative;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em;
margin-top: .5em;

View File

@ -6,7 +6,9 @@
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Lora|Raleway" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
{{ $sidenotes:= resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
<link rel="stylesheet" href="{{ $sidenotes.Permalink }}">
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
{{ template "_internal/google_analytics.html" . }}

View File

@ -0,0 +1,6 @@
<span class="sidenote {{ .Get 0 }}">
<label class="sidenote-label">{{ .Get 2 }}</label>
<span class="sidenote-content">
{{ .Inner }}
</span>
</span>