Browse Source

Add initial implementation of sidenotes

sidenotes
Danila Fedorin 2 years ago
parent
commit
b0529a9124
  1. 9
      assets/scss/gmachine.scss
  2. 45
      themes/vanilla/assets/scss/sidenotes.scss
  3. 11
      themes/vanilla/assets/scss/style.scss
  4. 2
      themes/vanilla/layouts/partials/head.html
  5. 6
      themes/vanilla/layouts/shortcodes/sidenote

9
assets/scss/gmachine.scss

@ -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 {

45
themes/vanilla/assets/scss/sidenotes.scss

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

11
themes/vanilla/assets/scss/style.scss

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

2
themes/vanilla/layouts/partials/head.html

@ -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" . }}

6
themes/vanilla/layouts/shortcodes/sidenote

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