Browse Source

Modularise SCSS styling

TEC 9 months ago
parent
commit
56ce256c41

+ 1 - 1
fr/index.org

@@ -46,7 +46,7 @@
     <meta itemprop="screenshot" content="https://orgmode.org/resources/img/main.svg">
   </div>
   </div>
-  <div class="banner slim green inline">
+  <div class="banner slim grey faded inline">
     <p style="width: 90vw">
       Crée par
       <a target="new" href="https://staff.science.uva.nl/~dominik/">Carsten Dominik</a>

+ 1 - 1
index.org

@@ -44,7 +44,7 @@
     <meta itemprop="url" content="https://orgmode.org">
   </div>
   </div>
-  <div class="banner slim green inline">
+  <div class="banner slim grey faded inline">
     <p style="width:90vw; color:#515151">
       Created by
       <a target="new" href="https://staff.science.uva.nl/~dominik/"

+ 47 - 0
resources/style/_banner.scss

@@ -0,0 +1,47 @@
+$bg_banner_grey: mix($background, $text, 96.5%);
+
+div.banner {
+    margin-left: #{"min(calc(0px - var(--body-left) - var(--body-padding)), calc(30rem - 50vw - 0.5*var(--body-left) + 0.5*var(--body-right)))"};
+    width: 100vw;
+    padding: 10px 5px 10px 5px;
+    text-align: center;
+    font-size: 1.2rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    #a-quote {
+        flex-basis: 100%;
+        max-width: none;
+    }
+    &.slim {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        font-family: var(--sans);
+    }
+    &.inline {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        p {
+            display: inline-block;
+            margin: 0.2em;
+        }
+    }
+    &.grey {
+        background-color: $bg_banner_grey;
+        a {
+            color: mix($text, $background, 93%);;
+            font-weight: bold;
+        }
+    }
+    &.faded {
+        color: wcag-color(#888, $bg_banner_grey, 'AAA');
+        a {
+            color: wcag-color(#888, $bg_banner_grey, 'AAA', $bold: true);
+        }
+    }
+    p.small {
+        font-size: 0.7em;
+    }
+}

+ 107 - 0
resources/style/_code.scss

@@ -0,0 +1,107 @@
+code,kbd {
+    font-family: "Droid Sans Mono";
+    hyphens: none;
+    word-break: break-word;
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+code {
+    color: mix($text, $background, 80%);;
+    background-color: mix($background, $text, 92%);
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-size: 85%;
+}
+kbd { // verbatim
+    background-color: mix($background, $text, 98%);
+    border: 1px solid mix($text, $background, 80%);;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
+    color: mix($text, $background, 80%);;
+    line-height: 1.4;
+    margin: 0 .1em;
+    padding: .1em .6em;
+    text-shadow: 0 1px 0 #fff;
+    font-size: 75%;
+}
+
+pre {
+    font-family: "Droid Sans Mono", monospace;
+    font-size: .8em;
+    font-weight: normal;
+    line-height: 1.4em;
+    background-color: mix($background, $text, 95%);
+    border-left: 4px solid mix($background, $text, 68%);
+    margin-right: 1pt;
+    padding: 0.4em 0.6em;
+}
+pre.src {
+    padding: 0.4em 0.6em; // override from `org-html-style-default'
+    overflow-x: auto;
+    position: relative;
+    &::before {
+        display: none;
+        position: absolute;
+        right: 10px;
+        padding: 3px;
+        background-color: adjust-color(mix($background, $text, 95%), $alpha: -0.2);
+        color: mix($text, $background, 66%);
+        top: 0;
+    }
+    &:hover::before {
+        display: inline;
+    }
+}
+
+pre.src-org:before { content: 'Org mode'; }
+pre.src-shell:before { content: 'Shell'; }
+
+example, .src {
+    color: #2c3e50;
+}
+.example .org-keyword, .src .org-keyword {
+    color: $blue;
+}
+.example .org-variable-name, .src .org-variable-name {
+    color: $purple;
+}
+.example .org-rainbow-delimiters-depth-1,
+.example .org-rainbow-delimiters-depth-2,
+.example .org-rainbow-delimiters-depth-3,
+.example .org-rainbow-delimiters-depth-4,
+.example .org-rainbow-delimiters-depth-5,
+.example .org-rainbow-delimiters-depth-6,
+.example .org-rainbow-delimiters-depth-7,
+.example .org-rainbow-delimiters-depth-8,
+.example .org-rainbow-delimiters-depth-9,
+.src .org-rainbow-delimiters-depth-1,
+.src .org-rainbow-delimiters-depth-2,
+.src .org-rainbow-delimiters-depth-3,
+.src .org-rainbow-delimiters-depth-4,
+.src .org-rainbow-delimiters-depth-5,
+.src .org-rainbow-delimiters-depth-6,
+.src .org-rainbow-delimiters-depth-7,
+.src .org-rainbow-delimiters-depth-8,
+.src .org-rainbow-delimiters-depth-9 {
+    color: mix($text, $background, 66%);
+}
+.example .org-string, .src .org-string {
+    color: $green;
+}
+.example .org-comment,
+.example .org-comment-delimiter,
+.src .org-comment,
+.src .org-comment-delimiter {
+    color: mix($text, $background, 66%);
+}
+.example .org-function-name,
+.src .org-function-name {
+    color: #6c3163;
+}
+.example .org-constant,
+.example .org-highlight-numbers-number,
+.src .org-constant,
+.src .org-highlight-numbers-number {
+    color: #4e3163;
+}

+ 507 - 0
resources/style/_color-contrast.scss

@@ -0,0 +1,507 @@
+@function strip-unit($value) {
+    @return ($value / ($value * 0 + 1));
+}
+
+// From https://github.com/material-components/material-components-web/blob/master/packages/mdc-theme/_constants.scss
+//
+// Copyright 2017 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+// Precomputed linear color channel values, for use in contrast calculations.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+//
+// Algorithm, for c in 0 to 255:
+// f(c) {
+//   c = c / 255;
+//   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+// }
+//
+// This lookup table is needed since there is no `pow` in SASS.
+$linear-channel-values:
+    0
+    .0003035269835488375
+    .000607053967097675
+    .0009105809506465125
+    .00121410793419535
+    .0015176349177441874
+    .001821161901293025
+    .0021246888848418626
+    .0024282158683907
+    .0027317428519395373
+    .003035269835488375
+    .003346535763899161
+    .003676507324047436
+    .004024717018496307
+    .004391442037410293
+    .004776953480693729
+    .005181516702338386
+    .005605391624202723
+    .006048833022857054
+    .006512090792594475
+    .006995410187265387
+    .007499032043226175
+    .008023192985384994
+    .008568125618069307
+    .009134058702220787
+    .00972121732023785
+    .010329823029626936
+    .010960094006488246
+    .011612245179743885
+    .012286488356915872
+    .012983032342173012
+    .013702083047289686
+    .014443843596092545
+    .01520851442291271
+    .01599629336550963
+    .016807375752887384
+    .017641954488384078
+    .018500220128379697
+    .019382360956935723
+    .0202885630566524
+    .021219010376003555
+    .022173884793387385
+    .02315336617811041
+    .024157632448504756
+    .02518685962736163
+    .026241221894849898
+    .027320891639074894
+    .028426039504420793
+    .0295568344378088
+    .030713443732993635
+    .03189603307301153
+    .033104766570885055
+    .03433980680868217
+    .03560131487502034
+    .03688945040110004
+    .0382043715953465
+    .03954623527673284
+    .04091519690685319
+    .042311410620809675
+    .043735029256973465
+    .04518620438567554
+    .046665086336880095
+    .04817182422688942
+    .04970656598412723
+    .05126945837404324
+    .052860647023180246
+    .05448027644244237
+    .05612849004960009
+    .05780543019106723
+    .0595112381629812
+    .06124605423161761
+    .06301001765316767
+    .06480326669290577
+    .06662593864377289
+    .06847816984440017
+    .07036009569659588
+    .07227185068231748
+    .07421356838014963
+    .07618538148130785
+    .07818742180518633
+    .08021982031446832
+    .0822827071298148
+    .08437621154414882
+    .08650046203654976
+    .08865558628577294
+    .09084171118340768
+    .09305896284668745
+    .0953074666309647
+    .09758734714186246
+    .09989872824711389
+    .10224173308810132
+    .10461648409110419
+    .10702310297826761
+    .10946171077829933
+    .1119324278369056
+    .11443537382697373
+    .11697066775851084
+    .11953842798834562
+    .12213877222960187
+    .12477181756095049
+    .12743768043564743
+    .1301364766903643
+    .13286832155381798
+    .13563332965520566
+    .13843161503245183
+    .14126329114027164
+    .14412847085805777
+    .14702726649759498
+    .14995978981060856
+    .15292615199615017
+    .1559264637078274
+    .1589608350608804
+    .162029375639111
+    .1651321945016676
+    .16826940018969075
+    .1714411007328226
+    .17464740365558504
+    .17788841598362912
+    .18116424424986022
+    .184474994500441
+    .18782077230067787
+    .19120168274079138
+    .1946178304415758
+    .19806931955994886
+    .20155625379439707
+    .20507873639031693
+    .20863687014525575
+    .21223075741405523
+    .21586050011389926
+    .2195261997292692
+    .2232279573168085
+    .22696587351009836
+    .23074004852434915
+    .23455058216100522
+    .238397573812271
+    .24228112246555486
+    .24620132670783548
+    .25015828472995344
+    .25415209433082675
+    .2581828529215958
+    .26225065752969623
+    .26635560480286247
+    .2704977910130658
+    .27467731206038465
+    .2788942634768104
+    .2831487404299921
+    .2874408377269175
+    .29177064981753587
+    .2961382707983211
+    .3005437944157765
+    .3049873140698863
+    .30946892281750854
+    .31398871337571754
+    .31854677812509186
+    .32314320911295075
+    .3277780980565422
+    .33245153634617935
+    .33716361504833037
+    .3419144249086609
+    .3467040563550296
+    .35153259950043936
+    .3564001441459435
+    .3613067797835095
+    .3662525955988395
+    .3712376804741491
+    .3762621229909065
+    .38132601143253014
+    .386429433787049
+    .39157247774972326
+    .39675523072562685
+    .4019777798321958
+    .4072402119017367
+    .41254261348390375
+    .4178850708481375
+    .4232676699860717
+    .4286904966139066
+    .43415363617474895
+    .4396571738409188
+    .44520119451622786
+    .45078578283822346
+    .45641102318040466
+    .4620769996544071
+    .467783796112159
+    .47353149614800955
+    .4793201831008268
+    .4851499400560704
+    .4910208498478356
+    .4969329950608704
+    .5028864580325687
+    .5088813208549338
+    .5149176653765214
+    .5209955732043543
+    .5271151257058131
+    .5332764040105052
+    .5394794890121072
+    .5457244613701866
+    .5520114015120001
+    .5583403896342679
+    .5647115057049292
+    .5711248294648731
+    .5775804404296506
+    .5840784178911641
+    .5906188409193369
+    .5972017883637634
+    .6038273388553378
+    .6104955708078648
+    .6172065624196511
+    .6239603916750761
+    .6307571363461468
+    .6375968739940326
+    .6444796819705821
+    .6514056374198242
+    .6583748172794485
+    .665387298282272
+    .6724431569576875
+    .6795424696330938
+    .6866853124353135
+    .6938717612919899
+    .7011018919329731
+    .7083757798916868
+    .7156935005064807
+    .7230551289219693
+    .7304607400903537
+    .7379104087727308
+    .7454042095403874
+    .7529422167760779
+    .7605245046752924
+    .768151147247507
+    .7758222183174236
+    .7835377915261935
+    .7912979403326302
+    .799102738014409
+    .8069522576692516
+    .8148465722161012
+    .8227857543962835
+    .8307698767746546
+    .83879901174074
+    .846873231509858
+    .8549926081242338
+    .8631572134541023
+    .8713671191987972
+    .8796223968878317
+    .8879231178819663
+    .8962693533742664
+    .9046611743911496
+    .9130986517934192
+    .9215818562772946
+    .9301108583754237
+    .938685728457888
+    .9473065367331999
+    .9559733532492861
+    .9646862478944651
+    .9734452903984125
+    .9822505503331171
+    .9911020971138298
+    1;
+
+// luminance($color)
+// @requires $linear-channel-values [list]
+// Helper: Calculate Luminance of a single color
+// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
+// White luminance is 1, Black luminance is 0
+// To be used in other functions or mixins — creates non-standard CSS output:
+// Usage: 
+// .sample { luminance: luminance(#c00); }
+// Output:
+// .sample { luminance: 0.1283736922; }
+//
+@function luminance($color) {
+    // $linear-channel-values are our Lookup Table of constants
+    $red: nth($linear-channel-values, red($color) + 1);
+    $green: nth($linear-channel-values, green($color) + 1);
+    $blue: nth($linear-channel-values, blue($color) + 1);
+    $calculation: .2126 * $red + .7152 * $green + .0722 * $blue;
+    @return $calculation;
+}
+
+// color-contrast($fg, $bg)
+// Helper: Calculate "readability" as defined by WCAG 2.1
+// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+// To be used in other functions or mixins — creates non-standard CSS output:
+// Usage: 
+// .sample { color-contrast: color-contrast(#c00, #fff); }
+// Output:
+// .sample { color-contrast: 5.89; }
+//
+@function color-contrast($fg, $bg) {
+    $luminance1: luminance($fg) + 0.05;
+    $luminance2: luminance($bg) + 0.05;
+    $ratio: $luminance1 / $luminance2;
+    @if $luminance2 > $luminance1 {
+        $ratio: 1 / $ratio;
+    }
+    // Round to a hundreth because 6.96 should not pass a ratio of 7.0
+    $ratio: round($ratio * 100) / 100;
+    @return $ratio;
+}
+
+// validate-font-size($size)
+// Helper: Depending on the unit recalculate a font size value into pixels if possible
+// To be used in other functions or mixins — creates non-standard CSS output:
+// Usage: 
+// .sample { validate-font-size: validate-font-size(1em); }
+// Output: 
+// .sample { validate-font-size: 16; }
+//
+@function validate-font-size($size) {
+    @if unit($size) == 'em' or unit($size) == 'rem' or unit($size) == 'px' or unit($size) == '' {
+        // Check if a flexible unit
+        @if unit($size) == 'em' or unit($size) == 'rem' {
+            // Need to convert to a pixel value. Let's not overcomplicate it with possible EM inheritence scale factors
+            @return strip-unit($size * 16)
+        }
+        @if unit($size) == 'px' {
+            // We expect PX, so strip the value and return it
+            @return strip-unit($size);
+        }
+        @if unit($size) == '' {
+            @return $size;
+        }
+    } @else {
+        @error 'validate-font-size(): An unexpected font size unit was supplied.';
+    }
+}
+
+// get-ratio($level: 'AA', $size: 16, $bold: false)
+// Helper: Determine the correct ratio value to use based on font-size and WCAG Level
+// To be used in other functions or mixins — creates non-standard CSS output:
+// Usage: 
+// .sample { get-ratio: get-ratio('AAA', 19, true); }
+// Output: 
+// .sample { get-ratio: 4.5; }
+//
+@function get-ratio($level: 'AA', $size: 16, $bold: false) {
+    // Default ratio
+    $ratio: 4.5;
+    @if $level == 'AAA' {
+        $ratio: 7;
+    }
+    
+    // Make sure the size is valid. If the value is not EM, REM, or PX (preferred), we can't help
+    $size: validate-font-size($size);
+    
+    // Check font size
+    @if $size < 24 {
+        // Small text, use defaults
+        // But:
+        @if $size >= 19 and $bold == true {
+            // Special case: Small text but also bold
+            @if $level == 'AAA' {
+                $ratio: 4.5;
+            } @else {
+                $ratio: 3;
+            }
+        }
+    } @else {
+        // Larger than 24
+        $ratio: 3;
+        @if $level == 'AAA' {
+            $ratio: 4.5;
+        }
+    }
+    @return $ratio;
+}
+
+// light-or-dark($color)
+// Helper: Use contrast against background or text to determine if a color is "light" or "dark"
+// Adapted from: https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
+// To be used in other functions or mixins — creates non-standard CSS output:
+// Usage: 
+// .sample { light-or-dark: light-or-dark(#c00); }
+// Output: 
+// .sample { light-or-dark: "light"; }
+//
+@function light-or-dark($color) {
+    $light-contrast: color-contrast($color, $background);
+    $dark-contrast: color-contrast($color, $text);
+
+    @if $light-contrast > $dark-contrast {
+        // Contrast against background is higher than against text, so, this is a dark color
+        @return "dark";
+    } @else {
+        @return "light";
+    }
+}
+
+// most-legible-color($color)
+// Helper: In some cases, we simply want to use text or background text over a color, whichever is more appropriate
+// Usage: 
+// .sample {
+//   background-color: #c00;
+//   color: most-legible-color(#c00);
+// }
+// Output:
+// .sample {
+//   background-color: #c00;
+//   color: #fff;
+// }
+@function most-legible-color($color) {
+    $color-lod: light-or-dark($color);
+
+    @if ($color-lod == "dark") {
+        @return $background;
+    } @else {
+        @return $text;
+    }
+}
+
+// wcag-color($fg, $bg, $level: 'AA', $size: 16, $bold: false)
+// Goal: Return a color that passes for the chosen WCAG level without changing the Hue of the color
+// Usage:
+// .sample {
+//   background-color: #000;
+//   color: wcag-color(#c0c, #000);
+// }
+// Output:
+// .sample {
+//   background-color: #000;
+//   color: #d200d2;
+// }
+//
+@function wcag-color($fg, $bg, $level: 'AA', $size: 16, $bold: false) {
+    // Helper: make sure the font size value is acceptable
+    $font-size: validate-font-size($size);
+    // Helper: With the level, font size, and bold boolean, return the proper target ratio. 3.0, 4.5, or 7.0 expected
+    $ratio: get-ratio($level, $font-size, $bold);
+    // Calculate the first contrast ratio of the given pair
+    $original-contrast: color-contrast($fg, $bg);
+    
+    @if $original-contrast >= $ratio {
+        // If we pass the ratio already, return the original color
+        @return $fg;
+    } @else {
+        // Doesn't pass. Time to get to work
+        // Should the color be lightened or darkened?
+        $fg-lod: light-or-dark($fg);
+        $bg-lod: light-or-dark($bg);
+
+        // Set a "step" value to lighten or darken a color
+        // Note: Higher percentage steps means faster compile time, but we might overstep the required threshold too far with something higher than 5%
+        $step: 2%;
+        
+        // Run through some cases where we want to darken, or use a negative step value
+        @if $fg-lod == 'light' and $bg-lod == 'light' {
+            // Both are light colors, darken the fg
+            $step: - $step;
+        } @else if $fg-lod == 'dark' and $bg-lod == 'light' {
+            // bg is light, fg is dark but does not pass, darken more
+            $step: - $step;
+        }
+        // Keeping the rest of the logic here, but our default values do not change, so this logic is not needed
+        //@else if $fg-lod == 'light' and $bg-lod == 'dark' {
+        //  // bg is dark, fg is light but does not pass, lighten further
+        //  $step: $step;
+        //} @else if $fg-lod == 'dark' and $bg-lod == 'dark' {
+        //  // Both are dark, so lighten the fg
+        //  $step: $step;
+        //}
+        
+        // The magic happens here
+        // Loop through with a @while statement until the color combination passes our required ratio. Scale the color by our step value until the expression is false
+        // This might loop 100 times or more depending on the colors
+        @while color-contrast($fg, $bg) < $ratio {
+            $fg: scale-color($fg, $lightness: $step, $saturation: $step/2);
+        }
+        @return $fg;
+    }
+}

+ 57 - 0
resources/style/_columns.scss

@@ -0,0 +1,57 @@
+.columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: none;
+    width: 100%;
+    margin-top: 0;
+    position: relative;
+    &.no-heading {
+        h2 {
+            display: none;
+        }
+    }
+    h2 {
+        position: absolute;
+        left: 0;
+        top: -1.2em;
+    }
+    .outline-3 {
+        background: none;
+        border: none;
+        text-align: center;
+        width: 18rem;
+        min-height: 10rem;
+        margin-top: 1rem;
+        a {
+            display: block;
+            text-decoration: none;
+            color: inherit;
+            a {
+                display: initial;
+            }
+        }
+        figure {
+            margin: 0
+        }
+        .org-svg, img {
+            width: auto;
+            margin-left: 0;
+            height: 9rem;
+            max-width: 80%;
+            padding-bottom: 2.5rem;
+            pointer-events: none;
+        }
+        h3 {
+            display: block;
+            position: relative;
+            top: 7rem;
+            margin-bottom: -2.5rem;
+            pointer-events: none;
+            height: 1em;
+            // allow heading to slightly exceed bounding box
+            width: 110%;
+            margin-left: -5%;
+        }
+    }
+}

+ 40 - 0
resources/style/_font.scss

@@ -0,0 +1,40 @@
+@font-face {
+    font-family: 'Droid Serif';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Droid Serif Regular'), local('DroidSerif-Regular'), url(/resources/fonts/droid-serif.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'Droid Serif';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(/resources/fonts/droid-serif-italic.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'Droid Sans Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'), url(/resources/fonts/droid-sans-mono.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+// @font-face {
+//     font-family: 'Droid Sans';
+//     font-style: normal;
+//     font-weight: 400;
+//     src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(/resources/fonts/droid-sans.woff2) format('woff2');
+//     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+// }
+
+html {
+    font-family: "Droid Serif", Cambria, Big Carslon, Lucida Bright, Georgia, "DejaVu Serif", serif;
+    font-weight: 400;
+}
+
+:root {
+    --sans: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
+}

+ 16 - 0
resources/style/_footer.scss

@@ -0,0 +1,16 @@
+#postamble {
+    text-align: center;
+    background: darken($background, 6.2);
+    color: wcag-color(#888, darken($background, 6.2), 'AAA');
+    font-family: var(--sans);
+    font-family: var(--sans);
+    padding: 0.4rem 0;
+    margin: 5rem calc(0px - var(--body-right) - var(--body-padding)) 0 calc(0px - var(--body-left) - var(--body-padding));
+    p {
+        display: inline;
+        margin-left: 1rem;
+        a:hover {
+            text-decoration: none;
+        }
+    }
+}

+ 59 - 0
resources/style/_hero.scss

@@ -0,0 +1,59 @@
+div.banner {
+    &.hero {
+        background-color: #fff;
+        background-image: url(/resources/img/bgtile.webp);
+        text-align: left;
+        justify-content: center;
+        padding: 6rem 1rem 3rem 1rem;
+        > img {
+            height: 18rem;
+            @media(max-width:850px) {
+                max-height: 50vw;
+            }
+            @media(min-width:915px) {
+                margin-top: -5rem;
+            }
+            &[src="/resources/img/org-mode-unicorn.svg"] { // when we know the image, we can avoid page reflows on load
+                width: 16.3125rem;
+                @media(max-width:850px) {
+                    width: 45.3125vw;
+                }
+            }
+            margin: 0 3rem 0 2rem;
+        }
+        h2 {
+            font-family: var(--sans);
+            font-size: 3em;
+            line-height: 1.5;
+            margin: 0;
+            padding: 0;
+            .subtitle {
+                font-size: 0.4em;
+                margin: 0;
+            }
+        }
+        h2, p {
+            max-width: 40rem;
+        }
+        p {
+            line-height: 1.6;
+        }
+    }
+    p.bubble {
+        font-family: var(--sans);
+        color: inherit;
+        border: 1px solid currentColor;
+        a {
+            color: inherit;
+        }
+        // img.inline {
+        //     filter: brightness(100);
+        // }
+        margin-top: 2em;
+        border-radius: 2em;
+        padding: 0.3em 1em;
+        font-size: 1.2rem;
+        width: 95%;
+        text-align: center;
+    }
+}

+ 50 - 0
resources/style/_layout.scss

@@ -0,0 +1,50 @@
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    // body margins and padding
+    --body-left: 0px;
+    --body-right: 0px;
+    --body-padding: 10px;
+    @media(min-width:850px) and (max-width:1000px){
+        --body-left: 25px;
+        --body-right: 15px;
+    }
+    @media(min-width:1000px){
+        --body-left: 50px;
+        --body-right: 30px;
+        --body-padding: 20px;
+    }
+    @media(min-width:1600px){
+        --body-left: 80px;
+        --body-right: 50px;
+        --body-padding: 30px;
+    }
+}
+
+html {
+    margin: 0;
+    // because otherwise 100vw triggers a horizontal scrollbar >:(
+    // this is alright because we should never have anything more than 100vw wide
+    // centered elements will now become off-centre by scrollbarwidth/2, but that
+    // seems acceptable
+    overflow-x: hidden;
+}
+
+body {
+    margin: calc(2.0rem + 14px) var(--body-right) 0 var(--body-left);
+    padding: 0 var(--body-padding);
+    background-color: $background;
+}
+
+#content {
+    font-size: 1.2em;
+    line-height: 1.4;
+    max-width: 60rem;
+    margin: auto;
+}
+
+#content p {
+    padding-right: 7pt;
+}

+ 30 - 0
resources/style/_links.scss

@@ -0,0 +1,30 @@
+button.btn, a.btn {
+    display: inline-block;
+    padding: 8px 15px;
+    border-radius: 3px;
+    margin: 5px 0px;
+    color: $background;
+    background-color: $primary;
+    &:hover {
+        text-decoration: none;
+        color: $background;
+        background-color: $secondary;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: $secondary;
+}
+a:visited {
+    text-decoration: none;
+}
+a:not(.btn):hover {
+    text-decoration: underline;
+    filter: brightness(85%);
+}
+a:not(.btn)[href^="https://orgmode.org"], a:not(.btn):not([href^="https://"]):not([href^="http://"]) {
+    &:hover {
+        text-decoration: underline dashed;
+    }
+}

+ 20 - 0
resources/style/_nav-light.scss

@@ -0,0 +1,20 @@
+nav#main {
+    background-color: transparent;
+    background-image: none;
+    position: absolute;
+    a {
+        color: mix($text, $background, 73%);
+    }
+    label {
+        color: $text;
+    }
+    #translate {
+        color: $secondary;
+        a {
+            color: $secondary;
+        }
+    }
+    @media(max-width:850px) {
+        background-color: adjust-color($background, $alpha: -0.94) !important;
+    }
+}

+ 135 - 0
resources/style/_nav.scss

@@ -0,0 +1,135 @@
+nav#main {
+    background-color: mix($primary, $secondary, 50%);
+    background-image: url(/resources/img/greenteselatedband.png);
+    background-size: auto calc(2.5rem + 16px);
+    background-repeat: repeat-x;
+    padding: 8px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    font-size: 1.2rem;
+    font-family: var(--sans);
+    /* fix the position for now - easy solution */
+    position: fixed;
+    width: 100vw; // use over % to avoid scrollbar effect
+    top: 0;
+    left: 0;
+    z-index: 1;
+    line-height: 2em;
+    a {
+        padding: 0 10px;
+        text-decoration: none;
+        font-weight: 500;
+        color: #fff;
+        p.logo {
+            img {
+                height: 2em;
+                margin-bottom: -0.8em;
+                position: relative;
+                top: -0.2em;
+            }
+            display: inline-block;
+            font-weight: 700;
+            margin: 0;
+            color: mix($text, $background, 80%);
+        }
+    }
+    #translate {
+        position: absolute;
+        left: 1em;
+        color: mix($background, $text, 95%);
+        font-weight: bold;
+        a {
+            color: mix($background, $text, 85%);
+            font-weight: bold;
+            padding: 0px;
+            margin: 0 -2px 0 -2px;
+        }
+    }
+    // .view-source {
+    //     position: absolute;
+    //     @media(min-width:850px) {
+    //         right: 1em;
+    //         transform: scale(0.7,1);
+    //         font-weight: bold;
+    //         font-family: "Droid Sans Mono", monospace;
+    //     }
+    //     align-self: center;
+    //     color: #466259;
+    //     font-weight: bold;
+    //     line-height: 1.5;
+    //     padding: 0 4px 0px 4px;
+    //     border: none;
+    //     background: #fff;
+    //     border-radius: 2px;
+    //     &:hover {
+    //         background: #eee;
+    //         color: #304840;
+    //     }
+    // }
+    label, input {
+        display: none;
+    }
+    @media(max-width:850px) {
+        flex-direction: column;
+        label {
+            display: block;
+            font-weight: 700;
+            color: #fff;
+            line-height: 1;
+            font-size: 1.6em;
+        }
+        > a:first-of-type {
+            margin-top: -1.8em;
+        }
+        > a:last-child {
+            margin-bottom: -8px;
+        }
+        p {
+            align-self: center;
+            margin-bottom: -0.4em;
+        }
+        a,#translate {
+            display: none;
+            align-self: center;
+        }
+        #translate {
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin-top: 0.35em;
+            height: 1.9em;
+            line-height: 1.7;
+            text-align: right;
+            padding-right: 1em;
+            background-color: #fff4;
+        }
+        a.view-source {
+            position: relative;
+            align-self: baseline;
+            background-color: transparent;
+            font-size: 0.9em;
+            line-height: 1;
+            margin-left: 10pt;
+            padding-bottom: 3pt;
+            top: 2px;
+            &::after {
+                content: ' view source';
+                font-weight: 400;
+            }
+        }
+        input:checked {
+            ~ a, ~ #translate {
+                display: block;
+            }
+            ~ #translate a {
+                display: inline-block;
+            }
+        }
+    }
+}
+
+// to account for the navbar in scroll-to position
+h2[id]:target {
+    padding-top: calc(40px + 2rem); 
+}

+ 121 - 0
resources/style/_org-elements.scss

@@ -0,0 +1,121 @@
+h1.title {
+    display: none;
+}
+
+h3 {
+    display: none;
+    font-size: 1.4em;
+}
+
+.outline-3 {
+    background-color: mix($background, $text, 94%);
+    border-left: 4px solid $secondary;
+    padding: 5pt;
+    width: 27em;
+    max-width: 80%;
+    font-size: 1em;
+    margin-top: 20pt;
+}
+
+.outline-3 p {
+    margin:3pt; 
+    padding:0;
+}
+
+h2 {
+    display: block;
+    padding-top: 30px;
+    font-size: 1.8em;
+    margin-top: 0;
+    margin-bottom: 30pt;
+    line-height: 1.1;
+}
+
+.outline-2 {
+    font-size: 1em;
+    margin-top: 40px;
+    width: 100%;
+}
+
+*.outline-2 img {
+    margin-left: 50px;
+    max-width: 80%;
+}
+
+*.outline-2 p {
+    margin-right: 5px;
+    margin-left: 5px;
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+.org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
+.org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
+.org-center { margin-left: auto; margin-right: auto; text-align: center; }
+
+table {
+    border-collapse:collapse;
+}
+caption.t-above {
+    caption-side: top; }
+caption.t-bottom {
+    caption-side: bottom; }
+td, th {
+    vertical-align:top; }
+th.org-right  {
+    text-align: center; }
+th.org-left   {
+    text-align: center; }
+th.org-center {
+    text-align: center; }
+td.org-right  {
+    text-align: right; }
+td.org-left   {
+    text-align: left; }
+td.org-center {
+    text-align: center; }
+
+dt {
+    font-weight: bold; }
+dd {
+    margin-bottom: 0.5em; }
+
+.footpara {
+    display: inline; }
+.footdef  {
+    margin-bottom: 1em; }
+
+.figure {
+    padding: 1em; }
+.figure p {
+    text-align: center; }
+
+.equation-container {
+    display: table;
+    text-align: center;
+    width: 100%;
+}
+.equation {
+    vertical-align: middle;
+}
+.equation-label {
+    display: table-cell;
+    text-align: right;
+    vertical-align: middle;
+}
+
+// non-standard org elements
+
+img.inline {
+    height: 1em;
+    margin-bottom: -0.15em;
+}
+
+#a-quote {
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.inline {
+    display: inline-block;
+}

+ 13 - 0
resources/style/_page-src-view.scss

@@ -0,0 +1,13 @@
+#src {
+    position: fixed;
+    left: 0;
+    top: 0;
+    border: none;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    padding-top: calc(2.3rem + 16px);
+    @media(max-width:850px) {
+        padding-top: calc(1.4rem + 16px);
+    }
+}

+ 63 - 0
resources/style/_side-fig.scss

@@ -0,0 +1,63 @@
+div.side-fig {
+    max-width: 1600px;
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    justify-content: space-evenly;
+    position: relative;
+    padding-top: 5rem;
+    h2 {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @media(min-width:850px) {
+            width: 95%; // no idea why this is needed
+        }
+        left: 0;
+        text-align: center;
+        &:target {
+            top: calc(-10px - 3rem); // to account for added padding
+        }
+    }
+    > div.outline-text-2 { // figure & move
+        > figure {
+            width: #{"min(600px, 100vw)"};
+            margin: 26px 0 10px 0;
+            @media(min-width:850px) {
+                width: #{"min(700px, 50vw)"};
+            }
+            img,object {
+                width: 100%;
+                margin-left: 0;
+                max-height: 500px;
+                object-fit: contain;
+                object-position: left center;
+            }
+        }
+        .move {
+            position: absolute;
+            top: 5rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            @media(max-width:1800px) {
+                display: none;
+            }
+        }
+    }
+    > div.outline-3 { // description
+        border: none;
+        background-color: transparent;
+        width: 600px;
+        max-width: 100%;
+        > div.outline-4 { // more
+            background-color: mix($background, $text, 94%);
+            border-left: 4px solid $secondary;
+            padding: 5px;
+            h4 {
+                display: none;
+            }
+        }
+    }
+}

+ 17 - 0
resources/style/_starred.scss

@@ -0,0 +1,17 @@
+.starred {
+    position: relative;
+    &::before {
+        content: '🟊';
+        text-align: right;
+        padding: 0 1.5px 4px 2.5px;
+        line-height: 0.9;
+        width: 22px;
+        height: 22px;
+        background: mix($blue, $background, 70%);
+        color: $background;
+        position: absolute;
+        top: 0;
+        right: 0;
+        clip-path: polygon(0 0, 100% 100%, 100% 0);
+    }
+}

+ 13 - 0
resources/style/_variables.scss

@@ -0,0 +1,13 @@
+$primary: #77aa99;
+$secondary: #587e72;
+$contrast: #aa8b77;
+
+$background: #fafafa;
+$text: #000;
+
+$blue: #3a81c3;
+$green: #2d9574;
+$red: #ba2f59;
+$orange: #dc752f;
+$cyan: #2aa1ae;
+$purple: #715ab1;

+ 12 - 7
resources/style/index.css

@@ -6,17 +6,16 @@ nav#main {
   background-image: none;
   position: absolute; }
   nav#main a {
-    color: #444; }
+    color: #444444; }
   nav#main label {
     color: #000; }
+  nav#main #translate {
+    color: #587e72; }
+    nav#main #translate a {
+      color: #587e72; }
   @media (max-width: 850px) {
     nav#main {
-      background-color: #f9f9f9ee !important; } }
-.columns .outline-3 {
-  width: 15rem; }
-  @media (max-width: 950px) {
-    .columns .outline-3 {
-      width: 12rem; } }
+      background-color: rgba(250, 250, 250, 0.06) !important; } }
 div.banner.hero {
   background-color: #fff;
   background-image: url(/resources/img/bgtile.webp);
@@ -63,3 +62,9 @@ div.banner p.bubble {
   text-align: center; }
   div.banner p.bubble a {
     color: inherit; }
+
+.columns .outline-3 {
+  width: 15rem; }
+  @media (max-width: 950px) {
+    .columns .outline-3 {
+      width: 12rem; } }

File diff suppressed because it is too large
+ 1 - 2
resources/style/index.min.css


File diff suppressed because it is too large
+ 1 - 9
resources/style/index.min.css.map


+ 7 - 77
resources/style/index.scss

@@ -1,86 +1,16 @@
+@import 'variables';
+
 body {
     margin-top: 0;
 }
-nav#main {
-    background-color: transparent;
-    background-image: none;
-    position: absolute;
-    a {
-        color: #444;
-    }
-    label {
-        color: #000;
-    }
-    @media(max-width:850px) {
-        background-color: #f9f9f9ee !important;
-    }
-}
+
+@import 'nav-light';
+
+@import 'hero';
+
 .columns .outline-3 {
     width: 15rem;
     @media (max-width:950px) {
         width: 12rem;
     }
 }
-
-div.banner {
-    &.hero {
-        // background-color: var(--dark-green);
-        // color: #eee;
-        background-color: #fff;
-        background-image: url(/resources/img/bgtile.webp);
-        text-align: left;
-        justify-content: center;
-        padding: 6rem 1rem 3rem 1rem;
-        > img {
-            height: 18rem;
-            @media(max-width:850px) {
-                max-height: 50vw;
-            }
-            @media(min-width:915px) {
-                margin-top: -5rem;
-            }
-            &[src="/resources/img/org-mode-unicorn.svg"] { // when we know the image, we can avoid page reflows on load
-                width: 16.3125rem;
-                @media(max-width:850px) {
-                    width: 45.3125vw;
-                }
-            }
-            margin: 0 3rem 0 2rem;
-        }
-        h2 {
-            font-family: var(--sans);
-            font-size: 3em;
-            line-height: 1.5;
-            margin: 0;
-            padding: 0;
-            .subtitle {
-                font-size: 0.4em;
-                margin: 0;
-            }
-        }
-        h2, p {
-            max-width: 40rem;
-        }
-        p {
-            line-height: 1.6;
-        }
-    }
-    p.bubble {
-        font-family: var(--sans);
-        color: inherit;
-        border: 1px solid currentColor;
-        a {
-            color: inherit;
-        }
-        // img.inline {
-        //     filter: brightness(100);
-        // }
-        margin-top: 2em;
-        border-radius: 2em;
-        padding: 0.3em 1em;
-        font-size: 1.2rem;
-        width: 95%;
-        text-align: center;
-    }
-}
-

+ 16 - 18
resources/style/org-demo.css

@@ -1,15 +1,15 @@
 #org-demo {
-  background: #eee;
+  background: #eeeeee;
   padding: 0.5rem 1rem; }
   #org-demo asside.left, #org-demo asside.right {
-    background-color: #7a94;
+    background-color: #e0eae7;
     line-height: 1.4;
     border-radius: 3px;
     padding: 0 1rem 0.3em 1rem; }
     #org-demo asside.left h4, #org-demo asside.right h4 {
       margin: 0 -1rem 0.1em -1rem;
       padding: 0.2em 1rem;
-      background-color: #7a95; }
+      background-color: #c6dad3; }
     @media (max-width: 1000px) {
       #org-demo asside.left, #org-demo asside.right {
         display: block;
@@ -30,7 +30,7 @@
   #org-demo asside.label-left {
     float: left;
     transform: translateX(-100%);
-    color: #aa8b77;
+    color: #896c5a;
     margin-right: -100%;
     font-family: var(--sans);
     padding-right: 2rem; }
@@ -67,39 +67,37 @@
   #org-demo pre.br {
     margin-top: 1em; }
   #org-demo .org-document-title, #org-demo .org-document-info {
-    color: var(--dark-green); }
+    color: #527469; }
   #org-demo .org-level-1 {
-    color: var(--green); }
+    color: #4e7367; }
   #org-demo .org-level-2 {
-    color: #ab8867; }
+    color: #806656; }
   #org-demo .org-level-1, #org-demo .org-level-2 {
     cursor: pointer; }
   #org-demo .org-done, #org-demo .org-special-keyword, #org-demo .org-block-begin-line, #org-demo .org-block-end-line {
     color: #62686e; }
   #org-demo .org-date {
-    color: #ab8867; }
+    color: #806656; }
     #org-demo .org-date:hover {
-      color: #eee;
-      background-color: #ab8867; }
+      color: #eeeeee;
+      background-color: #aa8b77; }
   #org-demo .org-todo-active, #org-demo .org-table {
-    color: #9289ab; }
+    color: #715ab1; }
   #org-demo .org-todo, #org-demo .org-checkbox, #org-demo .org-checkbox-statistics-todo {
-    color: #6fab75; }
+    color: #29785f; }
   #org-demo .org-link {
-    color: #80a2ab;
+    color: #3c6f9f;
     text-decoration: underline; }
     #org-demo .org-link:hover {
-      color: #eee;
-      background-color: #80a2ab;
+      color: #eeeeee;
+      background-color: #3c6f9f;
       cursor: pointer; }
     #org-demo .org-link a {
       color: inherit; }
   #org-demo .org-list-dt {
-    color: #80a2ab; }
+    color: #3c6f9f; }
   #org-demo .org-document-title, #org-demo .org-level-1, #org-demo .org-level-2 {
     font-weight: bold; }
-  #org-demo .org-code {
-    color: #ab8867; }
   #org-demo > details, #org-demo details.br {
     margin-top: 1em; }
   #org-demo details:not([open]) pre .org-level-1::after, #org-demo details:not([open]) pre .org-level-2::after {

File diff suppressed because it is too large
+ 1 - 2
resources/style/org-demo.min.css


File diff suppressed because it is too large
+ 1 - 9
resources/style/org-demo.min.css.map


+ 34 - 26
resources/style/org-demo.scss

@@ -1,22 +1,33 @@
+@import 'variables';
+@import 'color-contrast';
+
+$demo_bg: mix($background, $text, 95%);
+
+$demo_primary: wcag-color($primary, $demo_bg, $bold: true);
+$demo_secondary: wcag-color($secondary, $demo_bg, $bold: true);
+$demo_blue: wcag-color(mix($blue, $background, 80%), $demo_bg);
+$demo_purple: wcag-color($purple, $demo_bg);
+$demo_green: wcag-color($green, $demo_bg);
+
 #org-demo {
-    background: #eee;
+    background: $demo_bg;
     padding: 0.5rem 1rem;
     // box-shadow:
     //     0 -1px 1px rgba(0,0,0,0.15),
-    //     0 -10px 0 -5px #eee,
+    //     0 -10px 0 -5px $demo_bg,
     //     0 -10px 1px -4px rgba(0,0,0,0.15),
-    //     0 -20px 0 -10px #eee,
+    //     0 -20px 0 -10px $demo_bg,
     //     0 -20px 1px -9px rgba(0,0,0,0.15);
 
     asside.left, asside.right {
-        background-color: #7a94;
+        background-color: mix($primary,$background,20%);
         line-height: 1.4;
         border-radius: 3px;
         padding: 0 1rem 0.3em 1rem;
         h4 {
             margin: 0 -1rem 0.1em -1rem;
             padding: 0.2em 1rem;
-            background-color: #7a95;
+            background-color: mix($primary,$background,40%);
         }
         @media (max-width:1000px) {
             display: block;
@@ -41,11 +52,11 @@
             margin-left: -40%;
         }
     }
-    
+
     asside.label-left {
         float: left;
         transform: translateX(-100%);
-        color: #aa8b77;
+        color: wcag-color($contrast, $background);
         margin-right: -100%;
         font-family: var(--sans);
         padding-right: 2rem;
@@ -71,13 +82,13 @@
     }
 
     pre.label-left, details.label-left pre {
-        box-shadow: -4px 0px 0px 0px #fafafa,
-                    -8px 0px 0px 0px #aa8b77;
+        box-shadow: -4px 0px 0px 0px $background,
+                    -8px 0px 0px 0px $contrast;
         transform: translateX(-1rem);
         padding-left: 1rem;
         margin-right: -2rem;
     }
-    
+
     pre {
         font-size: 1.2rem;
         border: none;
@@ -91,32 +102,32 @@
     }
 
     .org-document-title, .org-document-info {
-        color: var(--dark-green); }
+        color: $demo_secondary; }
     .org-level-1 {
-        color: var(--green); }
+        color: $demo_primary; }
     .org-level-2 {
-        color: #ab8867; }
+        color: wcag-color($contrast, $demo_bg, $bold: true); }
     .org-level-1, .org-level-2 {
         cursor: pointer; }
     .org-done, .org-special-keyword, .org-block-begin-line, .org-block-end-line {
-        color: #62686e; }
+        color: wcag-color(#62686e, $demo_bg); }
     .org-date {
-        color: #ab8867;
+        color: wcag-color($contrast, $demo_bg);
         &:hover {
-            color: #eee;
-            background-color: #ab8867;
+            color: $demo_bg;
+            background-color: $contrast;
         }
     }
     .org-todo-active, .org-table {
-        color: #9289ab; }
+        color: $demo_purple; }
     .org-todo, .org-checkbox, .org-checkbox-statistics-todo {
-        color: #6fab75;}
+        color: $demo_green;}
     .org-link {
-        color: #80a2ab;
+        color: $demo_blue;
         text-decoration: underline;
         &:hover {
-            color: #eee;
-            background-color: #80a2ab;
+            color: $demo_bg;
+            background-color: $demo_blue;
             cursor: pointer;
         }
         a {
@@ -124,13 +135,10 @@
         }
     }
     .org-list-dt {
-        color: #80a2ab;
+        color: $demo_blue;
     }
     .org-document-title, .org-level-1, .org-level-2 {
         font-weight: bold; }
-    .org-code {
-        color: #ab8867; 
-    }
 
     > details, details.br {
         margin-top: 1em;

+ 259 - 303
resources/style/org.css

@@ -24,54 +24,41 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
 
 html {
-  margin: 0;
-  font: 400 .9em/1.6em "Droid Serif", "Open Sans", Cambria, Georgia, "DejaVu Serif", serif;
-  overflow-x: hidden; }
-
-#searchgmane {
-  margin-left: 10pt; }
-
-#logo {
-  position: absolute;
-  top: 12px;
-  left: 20px; }
-
-#buttons {
-  display: block;
-  font-size: 1.2em;
-  position: absolute;
-  top: 20pt;
-  right: 10pt;
-  text-align: right;
-  padding: .2em 1em;
-  background: #EEE;
-  border-radius: 10px; }
+  font-family: "Droid Serif", Cambria, Big Carslon, Lucida Bright, Georgia, "DejaVu Serif", serif;
+  font-weight: 400; }
 
-button.btn, a.btn {
-  display: inline-block;
-  padding: 8px 15px;
-  border-radius: 3px;
-  margin: 5px 0px;
-  color: #fff;
-  background-color: var(--green); }
-  button.btn:hover, a.btn:hover {
-    text-decoration: none;
-    color: #fff;
-    background-color: var(--dark-green); }
-
-a {
-  text-decoration: none;
-  color: var(--dark-green); }
+:root {
+  --sans: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; }
 
-a:visited {
-  text-decoration: none; }
+* {
+  box-sizing: border-box; }
 
-a:not(.btn):hover {
-  text-decoration: underline;
-  filter: brightness(85%); }
+:root {
+  --body-left: 0px;
+  --body-right: 0px;
+  --body-padding: 10px; }
+  @media (min-width: 850px) and (max-width: 1000px) {
+    :root {
+      --body-left: 25px;
+      --body-right: 15px; } }
+  @media (min-width: 1000px) {
+    :root {
+      --body-left: 50px;
+      --body-right: 30px;
+      --body-padding: 20px; } }
+  @media (min-width: 1600px) {
+    :root {
+      --body-left: 80px;
+      --body-right: 50px;
+      --body-padding: 30px; } }
+html {
+  margin: 0;
+  overflow-x: hidden; }
 
-a[href^="https://orgmode.org"]:not(.btn):hover, a:not(.btn):not([href^="https://"]):not([href^="http://"]):hover {
-  text-decoration: underline dashed; }
+body {
+  margin: calc(2.0rem + 14px) var(--body-right) 0 var(--body-left);
+  padding: 0 var(--body-padding);
+  background-color: #fafafa; }
 
 #content {
   font-size: 1.2em;
@@ -90,8 +77,8 @@ h3 {
   font-size: 1.4em; }
 
 .outline-3 {
-  background-color: #eaeaea;
-  border-left: 4px solid var(--dark-green);
+  background-color: #ebebeb;
+  border-left: 4px solid #587e72;
   padding: 5pt;
   width: 27em;
   max-width: 80%;
@@ -119,120 +106,12 @@ h2 {
   margin-left: 50px;
   max-width: 80%; }
 
-.iframe {
-  float: right; }
-
 *.outline-2 p {
   margin-right: 5px;
   margin-left: 5px;
   padding-right: 5px;
   padding-left: 5px; }
 
-code, kbd {
-  font-family: "Droid Sans Mono";
-  hyphens: none;
-  word-break: break-word;
-  white-space: normal;
-  word-wrap: break-word; }
-
-code {
-  color: #333;
-  background-color: #e8e8e8;
-  border-radius: 4px;
-  padding: 2px 4px;
-  font-size: 85%; }
-
-kbd {
-  background-color: #f7f7f7;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-  color: #333;
-  line-height: 1.4;
-  margin: 0 .1em;
-  padding: .1em .6em;
-  text-shadow: 0 1px 0 #fff;
-  font-size: 75%; }
-
-pre {
-  font-family: "Droid Sans Mono", monospace;
-  font-size: .8em;
-  font-weight: normal;
-  line-height: 1.4em;
-  background-color: #eeeeee;
-  border-left: 4px solid #aaa;
-  margin-right: 1pt;
-  padding: 0.4em 0.6em; }
-
-pre.src {
-  padding: 0.4em 0.6em;
-  overflow-x: auto;
-  position: relative; }
-  pre.src::before {
-    display: none;
-    position: absolute;
-    right: 10px;
-    padding: 3px;
-    background-color: #eeec;
-    color: #555;
-    top: 0; }
-  pre.src:hover::before {
-    display: inline; }
-
-pre.src-org:before {
-  content: 'Org mode'; }
-
-pre.src-shell:before {
-  content: 'Shell'; }
-
-example, .src {
-  color: #2c3e50; }
-
-.example .org-keyword, .src .org-keyword {
-  color: #3a81c3; }
-
-.example .org-variable-name, .src .org-variable-name {
-  color: #715ab1; }
-
-.example .org-rainbow-delimiters-depth-1,
-.example .org-rainbow-delimiters-depth-2,
-.example .org-rainbow-delimiters-depth-3,
-.example .org-rainbow-delimiters-depth-4,
-.example .org-rainbow-delimiters-depth-5,
-.example .org-rainbow-delimiters-depth-6,
-.example .org-rainbow-delimiters-depth-7,
-.example .org-rainbow-delimiters-depth-8,
-.example .org-rainbow-delimiters-depth-9,
-.src .org-rainbow-delimiters-depth-1,
-.src .org-rainbow-delimiters-depth-2,
-.src .org-rainbow-delimiters-depth-3,
-.src .org-rainbow-delimiters-depth-4,
-.src .org-rainbow-delimiters-depth-5,
-.src .org-rainbow-delimiters-depth-6,
-.src .org-rainbow-delimiters-depth-7,
-.src .org-rainbow-delimiters-depth-8,
-.src .org-rainbow-delimiters-depth-9 {
-  color: #555555; }
-
-.example .org-string, .src .org-string {
-  color: #2d9574; }
-
-.example .org-comment,
-.example .org-comment-delimiter,
-.src .org-comment,
-.src .org-comment-delimiter {
-  color: #555555; }
-
-.example .org-function-name,
-.src .org-function-name {
-  color: #6c3163; }
-
-.example .org-constant,
-.example .org-highlight-numbers-number,
-.src .org-constant,
-.src .org-highlight-numbers-number {
-  color: #4e3163; }
-
 .org-right {
   margin-left: auto;
   margin-right: 0px;
@@ -309,136 +188,22 @@ dd {
   text-align: right;
   vertical-align: middle; }
 
-#orgquote {
-  z-index: 1000;
-  position: fixed;
-  margin: 0;
-  bottom: 0;
-  right: 0;
-  font-size: 100%;
-  padding: 20px;
-  background-color: #eee;
-  -moz-opacity: 0;
-  opacity: 0;
-  filter: alpha(opacity=0); }
-
-#orgquote:hover {
-  -moz-opacity: 1;
-  opacity: 1;
-  filter: alpha(opacity=100); }
-
-.move {
-  font-weight: 800;
-  color: var(--dark-green);
-  position: relative; }
-  .move a {
-    color: inherit;
-    text-transform: capitalize; }
-    .move a:hover {
-      opacity: 0.9;
-      text-decoration: none; }
-
-.outline-text-2 > .move {
-  top: -30px; }
-
-#postamble {
-  text-align: center;
-  background: #eaeaea;
-  color: #515151;
-  font-family: var(--sans);
-  font-family: var(--sans);
-  padding: 0.4rem 0;
-  margin: 5rem calc(0px - var(--body-right) - var(--body-padding)) 0 calc(0px - var(--body-left) - var(--body-padding)); }
-  #postamble p {
-    display: inline;
-    margin-left: 1rem; }
-    #postamble p a:hover {
-      text-decoration: none; }
-
-div.side-fig {
-  max-width: 1600px;
-  margin: auto;
-  display: flex;
-  flex-wrap: wrap-reverse;
-  flex-direction: row-reverse;
-  justify-content: space-evenly;
-  position: relative;
-  padding-top: 5rem; }
-  div.side-fig h2 {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    left: 0;
-    text-align: center; }
-    @media (min-width: 850px) {
-      div.side-fig h2 {
-        width: 95%; } }
-    div.side-fig h2:target {
-      top: calc(-10px - 3rem); }
-  div.side-fig > div.outline-text-2 > figure {
-    width: min(600px, 100vw);
-    margin: 26px 0 10px 0; }
-    @media (min-width: 850px) {
-      div.side-fig > div.outline-text-2 > figure {
-        width: min(700px, 50vw); } }
-    div.side-fig > div.outline-text-2 > figure img, div.side-fig > div.outline-text-2 > figure object {
-      width: 100%;
-      margin-left: 0;
-      max-height: 500px;
-      object-fit: contain;
-      object-position: left center; }
-  div.side-fig > div.outline-text-2 .move {
-    position: absolute;
-    top: 5rem;
-    left: 0;
-    width: 100%;
-    text-align: center; }
-    @media (max-width: 1800px) {
-      div.side-fig > div.outline-text-2 .move {
-        display: none; } }
-  div.side-fig > div.outline-3 {
-    border: none;
-    background-color: transparent;
-    width: 600px;
-    max-width: 100%; }
-    div.side-fig > div.outline-3 > div.outline-4 {
-      background-color: #eaeaea;
-      border-left: 4px solid var(--dark-green);
-      padding: 5px; }
-      div.side-fig > div.outline-3 > div.outline-4 h4 {
-        display: none; }
+img.inline {
+  height: 1em;
+  margin-bottom: -0.15em; }
 
-:root {
-  --sans: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
-  --body-left: 0px;
-  --body-right: 0px;
-  --body-padding: 10px;
-  --green: #77aa99;
-  --dark-green: #587e72; }
-  @media (min-width: 850px) and (max-width: 1000px) {
-    :root {
-      --body-left: 25px;
-      --body-right: 15px; } }
-  @media (min-width: 1000px) {
-    :root {
-      --body-left: 50px;
-      --body-right: 30px;
-      --body-padding: 20px; } }
-  @media (min-width: 1600px) {
-    :root {
-      --body-left: 80px;
-      --body-right: 50px;
-      --body-padding: 30px; } }
-* {
-  box-sizing: border-box; }
+#a-quote {
+  font-style: italic;
+  opacity: 0.7; }
 
-body {
-  margin: calc(2.0rem + 14px) var(--body-right) 0 var(--body-left);
-  padding: 0 var(--body-padding);
-  background-color: #fafafa; }
+.inline {
+  display: inline-block; }
 
 nav#main {
-  background-color: var(--green);
+  background-color: #689486;
+  background-image: url(/resources/img/greenteselatedband.png);
+  background-size: auto calc(2.5rem + 16px);
+  background-repeat: repeat-x;
   padding: 8px;
   margin-bottom: 20px;
   display: flex;
@@ -461,7 +226,7 @@ nav#main {
       display: inline-block;
       font-weight: 700;
       margin: 0;
-      color: #333; }
+      color: #323232; }
       nav#main a p.logo img {
         height: 2em;
         margin-bottom: -0.8em;
@@ -470,10 +235,10 @@ nav#main {
   nav#main #translate {
     position: absolute;
     left: 1em;
-    color: #5a8073;
+    color: #eeeeee;
     font-weight: bold; }
     nav#main #translate a {
-      color: #5a8073;
+      color: #d5d5d5;
       font-weight: bold;
       padding: 0px;
       margin: 0 -2px 0 -2px; }
@@ -524,6 +289,193 @@ nav#main {
         display: block; }
       nav#main input:checked ~ #translate a {
         display: inline-block; } }
+h2[id]:target {
+  padding-top: calc(40px + 2rem); }
+
+button.btn, a.btn {
+  display: inline-block;
+  padding: 8px 15px;
+  border-radius: 3px;
+  margin: 5px 0px;
+  color: #fafafa;
+  background-color: #77aa99; }
+  button.btn:hover, a.btn:hover {
+    text-decoration: none;
+    color: #fafafa;
+    background-color: #587e72; }
+
+a {
+  text-decoration: none;
+  color: #587e72; }
+
+a:visited {
+  text-decoration: none; }
+
+a:not(.btn):hover {
+  text-decoration: underline;
+  filter: brightness(85%); }
+
+a[href^="https://orgmode.org"]:not(.btn):hover, a:not(.btn):not([href^="https://"]):not([href^="http://"]):hover {
+  text-decoration: underline dashed; }
+
+code, kbd {
+  font-family: "Droid Sans Mono";
+  hyphens: none;
+  word-break: break-word;
+  white-space: normal;
+  word-wrap: break-word; }
+
+code {
+  color: #323232;
+  background-color: #e6e6e6;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-size: 85%; }
+
+kbd {
+  background-color: whitesmoke;
+  border: 1px solid #323232;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+  color: #323232;
+  line-height: 1.4;
+  margin: 0 .1em;
+  padding: .1em .6em;
+  text-shadow: 0 1px 0 #fff;
+  font-size: 75%; }
+
+pre {
+  font-family: "Droid Sans Mono", monospace;
+  font-size: .8em;
+  font-weight: normal;
+  line-height: 1.4em;
+  background-color: #eeeeee;
+  border-left: 4px solid #aaaaaa;
+  margin-right: 1pt;
+  padding: 0.4em 0.6em; }
+
+pre.src {
+  padding: 0.4em 0.6em;
+  overflow-x: auto;
+  position: relative; }
+  pre.src::before {
+    display: none;
+    position: absolute;
+    right: 10px;
+    padding: 3px;
+    background-color: rgba(238, 238, 238, 0.8);
+    color: #555555;
+    top: 0; }
+  pre.src:hover::before {
+    display: inline; }
+
+pre.src-org:before {
+  content: 'Org mode'; }
+
+pre.src-shell:before {
+  content: 'Shell'; }
+
+example, .src {
+  color: #2c3e50; }
+
+.example .org-keyword, .src .org-keyword {
+  color: #3a81c3; }
+
+.example .org-variable-name, .src .org-variable-name {
+  color: #715ab1; }
+
+.example .org-rainbow-delimiters-depth-1,
+.example .org-rainbow-delimiters-depth-2,
+.example .org-rainbow-delimiters-depth-3,
+.example .org-rainbow-delimiters-depth-4,
+.example .org-rainbow-delimiters-depth-5,
+.example .org-rainbow-delimiters-depth-6,
+.example .org-rainbow-delimiters-depth-7,
+.example .org-rainbow-delimiters-depth-8,
+.example .org-rainbow-delimiters-depth-9,
+.src .org-rainbow-delimiters-depth-1,
+.src .org-rainbow-delimiters-depth-2,
+.src .org-rainbow-delimiters-depth-3,
+.src .org-rainbow-delimiters-depth-4,
+.src .org-rainbow-delimiters-depth-5,
+.src .org-rainbow-delimiters-depth-6,
+.src .org-rainbow-delimiters-depth-7,
+.src .org-rainbow-delimiters-depth-8,
+.src .org-rainbow-delimiters-depth-9 {
+  color: #555555; }
+
+.example .org-string, .src .org-string {
+  color: #2d9574; }
+
+.example .org-comment,
+.example .org-comment-delimiter,
+.src .org-comment,
+.src .org-comment-delimiter {
+  color: #555555; }
+
+.example .org-function-name,
+.src .org-function-name {
+  color: #6c3163; }
+
+.example .org-constant,
+.example .org-highlight-numbers-number,
+.src .org-constant,
+.src .org-highlight-numbers-number {
+  color: #4e3163; }
+
+div.side-fig {
+  max-width: 1600px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap-reverse;
+  flex-direction: row-reverse;
+  justify-content: space-evenly;
+  position: relative;
+  padding-top: 5rem; }
+  div.side-fig h2 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+    text-align: center; }
+    @media (min-width: 850px) {
+      div.side-fig h2 {
+        width: 95%; } }
+    div.side-fig h2:target {
+      top: calc(-10px - 3rem); }
+  div.side-fig > div.outline-text-2 > figure {
+    width: min(600px, 100vw);
+    margin: 26px 0 10px 0; }
+    @media (min-width: 850px) {
+      div.side-fig > div.outline-text-2 > figure {
+        width: min(700px, 50vw); } }
+    div.side-fig > div.outline-text-2 > figure img, div.side-fig > div.outline-text-2 > figure object {
+      width: 100%;
+      margin-left: 0;
+      max-height: 500px;
+      object-fit: contain;
+      object-position: left center; }
+  div.side-fig > div.outline-text-2 .move {
+    position: absolute;
+    top: 5rem;
+    left: 0;
+    width: 100%;
+    text-align: center; }
+    @media (max-width: 1800px) {
+      div.side-fig > div.outline-text-2 .move {
+        display: none; } }
+  div.side-fig > div.outline-3 {
+    border: none;
+    background-color: transparent;
+    width: 600px;
+    max-width: 100%; }
+    div.side-fig > div.outline-3 > div.outline-4 {
+      background-color: #ebebeb;
+      border-left: 4px solid #587e72;
+      padding: 5px; }
+      div.side-fig > div.outline-3 > div.outline-4 h4 {
+        display: none; }
+
 div.banner {
   margin-left: min(calc(0px - var(--body-left) - var(--body-padding)), calc(30rem - 50vw - 0.5*var(--body-left) + 0.5*var(--body-right)));
   width: 100vw;
@@ -548,28 +500,18 @@ div.banner {
     div.banner.inline p {
       display: inline-block;
       margin: 0.2em; }
-  div.banner.green {
-    background-color: #f2f2f2; }
-    div.banner.green a {
-      color: #111;
+  div.banner.grey {
+    background-color: #f1f1f1; }
+    div.banner.grey a {
+      color: #121212;
       font-weight: bold; }
+  div.banner.faded {
+    color: #505050; }
+    div.banner.faded a {
+      color: #505050; }
   div.banner p.small {
     font-size: 0.7em; }
 
-img.inline {
-  height: 1em;
-  margin-bottom: -0.15em; }
-
-#a-quote {
-  font-style: italic;
-  opacity: 0.7; }
-
-h2[id]:target {
-  padding-top: calc(40px + 2rem); }
-
-.inline {
-  display: inline-block; }
-
 .columns {
   display: flex;
   flex-wrap: wrap;
@@ -625,13 +567,27 @@ h2[id]:target {
     line-height: 0.9;
     width: 22px;
     height: 22px;
-    background: #77aaff;
-    color: #fff;
+    background: #74a5d4;
+    color: #fafafa;
     position: absolute;
     top: 0;
     right: 0;
     clip-path: polygon(0 0, 100% 100%, 100% 0); }
 
+#postamble {
+  text-align: center;
+  background: #eaeaea;
+  color: #4d4d4d;
+  font-family: var(--sans);
+  font-family: var(--sans);
+  padding: 0.4rem 0;
+  margin: 5rem calc(0px - var(--body-right) - var(--body-padding)) 0 calc(0px - var(--body-left) - var(--body-padding)); }
+  #postamble p {
+    display: inline;
+    margin-left: 1rem; }
+    #postamble p a:hover {
+      text-decoration: none; }
+
 #src {
   position: fixed;
   left: 0;

File diff suppressed because it is too large
+ 1 - 2
resources/style/org.min.css


File diff suppressed because it is too large
+ 1 - 9
resources/style/org.min.css.map


+ 16 - 758
resources/style/org.scss

@@ -1,758 +1,16 @@
-@font-face {
-    font-family: 'Droid Serif';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local('Droid Serif Regular'), local('DroidSerif-Regular'), url(/resources/fonts/droid-serif.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-    font-family: 'Droid Serif';
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(/resources/fonts/droid-serif-italic.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-    font-family: 'Droid Sans Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'), url(/resources/fonts/droid-sans-mono.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-// @font-face {
-//     font-family: 'Droid Sans';
-//     font-style: normal;
-//     font-weight: 400;
-//     src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(/resources/fonts/droid-sans.woff2) format('woff2');
-//     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-// }
-
-html {
-    margin: 0;
-    font: 400 .9em/1.6em "Droid Serif", "Open Sans", Cambria, Georgia, "DejaVu Serif", serif;
-    // because otherwise 100vw triggers a horizontal scrollbar >:(
-    // this is alright because we should never have anything more than 100vw wide
-    // centered elements will now become off-centre by scrollbarwidth/2, but that
-    // seems acceptable
-    overflow-x: hidden;
-}
-
-#searchgmane {
-    margin-left: 10pt;
-}
-
-#logo {
-    position: absolute;
-    top: 12px;
-    left: 20px;
-}
-
-#buttons {
-    display:block;
-    font-size: 1.2em;
-    position:absolute;
-    top:20pt;
-    right:10pt;
-    text-align: right;
-    padding: .2em 1em;
-    background: #EEE;
-    border-radius: 10px;
-}
-
-
-button.btn, a.btn {
-    display: inline-block;
-    padding: 8px 15px;
-    border-radius: 3px;
-    margin: 5px 0px;
-    color: #fff;
-    background-color: var(--green);
-    &:hover {
-        text-decoration: none;
-        color: #fff;
-        background-color: var(--dark-green);
-    }
-}
-
-a {
-    text-decoration: none;
-    color: var(--dark-green);
-}
-a:visited {
-    text-decoration: none;
-}
-a:not(.btn):hover {
-    text-decoration: underline;
-    filter: brightness(85%);
-}
-a:not(.btn)[href^="https://orgmode.org"], a:not(.btn):not([href^="https://"]):not([href^="http://"]) {
-    &:hover {
-        text-decoration: underline dashed;
-    }
-}
-
-#content {
-    font-size: 1.2em;
-    line-height: 1.4;
-    max-width: 60rem;
-    margin: auto;
-}
-
-#content p {
-    padding-right: 7pt;
-}
-
-h1.title {
-    display: none;
-}
-
-h3 {
-    display: none;
-    font-size: 1.4em;
-}
-
-.outline-3 {
-    background-color: #eaeaea;
-    border-left: 4px solid var(--dark-green);
-    padding: 5pt;
-    width: 27em;
-    max-width: 80%;
-    font-size: 1em;
-    margin-top: 20pt;
-}
-
-.outline-3 p {
-    margin:3pt; 
-    padding:0;
-}
-
-h2 {
-    display: block;
-    padding-top: 30px;
-    font-size: 1.8em;
-    margin-top: 0;
-    margin-bottom: 30pt;
-    line-height: 1.1;
-}
-
-.outline-2 {
-    font-size: 1em;
-    margin-top: 40px;
-    width: 100%;
-}
-
-*.outline-2 img {
-    margin-left: 50px;
-    max-width: 80%;
-}
-
-.iframe {
-    float: right;
-}
-
-*.outline-2 p {
-    margin-right: 5px;
-    margin-left: 5px;
-    padding-right: 5px;
-    padding-left: 5px;
-}
-
-code,kbd {
-    font-family: "Droid Sans Mono";
-    hyphens: none;
-    word-break: break-word;
-    white-space: normal;
-    word-wrap: break-word;
-}
-
-code {
-    color: #333;
-    background-color: #e8e8e8;
-    border-radius: 4px;
-    padding: 2px 4px;
-    font-size: 85%;
-}
-kbd { // verbatim
-    background-color: #f7f7f7;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
-    color: #333;
-    line-height: 1.4;
-    margin: 0 .1em;
-    padding: .1em .6em;
-    text-shadow: 0 1px 0 #fff;
-    font-size: 75%;
-}
-
-pre {
-    font-family: "Droid Sans Mono", monospace;
-    font-size: .8em;
-    font-weight: normal;
-    line-height: 1.4em;
-    background-color: #eeeeee;
-    border-left: 4px solid #aaa;
-    margin-right: 1pt;
-    padding: 0.4em 0.6em;
-}
-pre.src {
-    padding: 0.4em 0.6em; // override from `org-html-style-default'
-    overflow-x: auto;
-    position: relative;
-    &::before {
-        display: none;
-        position: absolute;
-        right: 10px;
-        padding: 3px;
-        background-color: #eeec;
-        color: #555;
-        top: 0;
-    }
-    &:hover::before {
-        display: inline;
-    }
-}
-
-pre.src-org:before { content: 'Org mode'; }
-pre.src-shell:before { content: 'Shell'; }
-
-example, .src {
-    color: #2c3e50;
-}
-.example .org-keyword, .src .org-keyword {
-    color: #3a81c3;
-}
-.example .org-variable-name, .src .org-variable-name {
-    color: #715ab1;
-}
-.example .org-rainbow-delimiters-depth-1,
-.example .org-rainbow-delimiters-depth-2,
-.example .org-rainbow-delimiters-depth-3,
-.example .org-rainbow-delimiters-depth-4,
-.example .org-rainbow-delimiters-depth-5,
-.example .org-rainbow-delimiters-depth-6,
-.example .org-rainbow-delimiters-depth-7,
-.example .org-rainbow-delimiters-depth-8,
-.example .org-rainbow-delimiters-depth-9,
-.src .org-rainbow-delimiters-depth-1,
-.src .org-rainbow-delimiters-depth-2,
-.src .org-rainbow-delimiters-depth-3,
-.src .org-rainbow-delimiters-depth-4,
-.src .org-rainbow-delimiters-depth-5,
-.src .org-rainbow-delimiters-depth-6,
-.src .org-rainbow-delimiters-depth-7,
-.src .org-rainbow-delimiters-depth-8,
-.src .org-rainbow-delimiters-depth-9 {
-    color: #555555;
-}
-.example .org-string, .src .org-string {
-    color: #2d9574;
-}
-.example .org-comment,
-.example .org-comment-delimiter,
-.src .org-comment,
-.src .org-comment-delimiter {
-    color: #555555;
-}
-.example .org-function-name,
-.src .org-function-name {
-    color: #6c3163;
-}
-.example .org-constant,
-.example .org-highlight-numbers-number,
-.src .org-constant,
-.src .org-highlight-numbers-number {
-    color: #4e3163;
-}
-
-.org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
-.org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
-.org-center { margin-left: auto; margin-right: auto; text-align: center; }
-
-table {
-    border-collapse:collapse;
-}
-caption.t-above {
-    caption-side: top; }
-caption.t-bottom {
-    caption-side: bottom; }
-td, th {
-    vertical-align:top; }
-th.org-right  {
-    text-align: center; }
-th.org-left   {
-    text-align: center; }
-th.org-center {
-    text-align: center; }
-td.org-right  {
-    text-align: right; }
-td.org-left   {
-    text-align: left; }
-td.org-center {
-    text-align: center; }
-
-dt {
-    font-weight: bold; }
-dd {
-    margin-bottom: 0.5em; }
-
-.footpara {
-    display: inline; }
-.footdef  {
-    margin-bottom: 1em; }
-
-.figure {
-    padding: 1em; }
-.figure p {
-    text-align: center; }
-
-.equation-container {
-    display: table;
-    text-align: center;
-    width: 100%;
-}
-.equation {
-    vertical-align: middle;
-}
-.equation-label {
-    display: table-cell;
-    text-align: right;
-    vertical-align: middle;
-}
-
-#orgquote {
-    z-index: 1000;
-    position: fixed;
-    margin: 0;
-    bottom: 0;
-    right: 0;
-    font-size:100%;
-    padding: 20px;
-    background-color: #eee;
-    -moz-opacity:0;
-    opacity:0;
-    filter:alpha(opacity=0);
-}
-
-#orgquote:hover {
-    -moz-opacity:1;
-    opacity:1;
-    filter:alpha(opacity=100);
-}
-
-.move {
-    
-    font-weight: 800;
-    color: var(--dark-green);
-    position: relative;
-    a {
-        color: inherit;
-        text-transform: capitalize;
-        &:hover {
-            opacity: 0.9;
-            text-decoration: none;
-        }
-    }
-}
-.outline-text-2 > .move {
-    top: -30px;
-}
-
-#postamble {
-    text-align: center;
-    background: #eaeaea;
-    color: #515151;
-    font-family: var(--sans);
-    font-family: var(--sans);
-    padding: 0.4rem 0;
-    margin: 5rem calc(0px - var(--body-right) - var(--body-padding)) 0 calc(0px - var(--body-left) - var(--body-padding));
-    p {
-        display: inline;
-        margin-left: 1rem;
-        a:hover {
-            text-decoration: none;
-        }
-    }
-}
-
-div.side-fig {
-    max-width: 1600px;
-    margin: auto;
-    display: flex;
-    flex-wrap: wrap-reverse;
-    flex-direction: row-reverse;
-    justify-content: space-evenly;
-    position: relative;
-    padding-top: 5rem;
-    h2 {
-        position: absolute;
-        top: 0;
-        width: 100%;
-        @media(min-width:850px) {
-            width: 95%; // no idea why this is needed
-        }
-        left: 0;
-        text-align: center;
-        &:target {
-            top: calc(-10px - 3rem); // to account for added padding
-        }
-    }
-    > div.outline-text-2 { // figure & move
-        > figure {
-            width: #{"min(600px, 100vw)"};
-            margin: 26px 0 10px 0;
-            @media(min-width:850px) {
-                width: #{"min(700px, 50vw)"};
-            }
-            img,object {
-                width: 100%;
-                margin-left: 0;
-                max-height: 500px;
-                object-fit: contain;
-                object-position: left center;
-            }
-        }
-        .move {
-            position: absolute;
-            top: 5rem;
-            left: 0;
-            width: 100%;
-            text-align: center;
-            @media(max-width:1800px) {
-                display: none;
-            }
-        }
-    }
-    > div.outline-3 { // description
-        border: none;
-        background-color: transparent;
-        width: 600px;
-        max-width: 100%;
-        > div.outline-4 { // more
-            background-color: #eaeaea;
-            border-left: 4px solid var(--dark-green);
-            padding: 5px;
-            h4 {
-                display: none;
-            }
-        }
-    }
-}
-
-
-:root {
-    --sans: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
-    // body margins and padding
-    --body-left: 0px;
-    --body-right: 0px;
-    --body-padding: 10px;
-    --green: #77aa99;
-    --dark-green: #587e72;
-    @media(min-width:850px) and (max-width:1000px){
-        --body-left: 25px;
-        --body-right: 15px;
-    }
-    @media(min-width:1000px){
-        --body-left: 50px;
-        --body-right: 30px;
-        --body-padding: 20px;
-    }
-    @media(min-width:1600px){
-        --body-left: 80px;
-        --body-right: 50px;
-        --body-padding: 30px;
-    }
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    margin: calc(2.0rem + 14px) var(--body-right) 0 var(--body-left);
-    padding: 0 var(--body-padding);
-    background-color: #fafafa;
-}
-
-nav#main {
-    background-color: var(--green);
-    padding: 8px;
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    font-size: 1.2rem;
-    font-family: var(--sans);
-    /* fix the position for now - easy solution */
-    position: fixed;
-    width: 100vw; // use over % to avoid scrollbar effect
-    top: 0;
-    left: 0;
-    z-index: 1;
-    line-height: 2em;
-    a {
-        padding: 0 10px;
-        text-decoration: none;
-        font-weight: 500;
-        color: #fff;
-        p.logo {
-            img {
-                height: 2em;
-                margin-bottom: -0.8em;
-                position: relative;
-                top: -0.2em;
-            }
-            display: inline-block;
-            font-weight: 700;
-            margin: 0;
-            color: #333;
-        }
-    }
-    #translate {
-        position: absolute;
-        left: 1em;
-        color: #5a8073;
-        font-weight: bold;
-        a {
-            color: #5a8073;
-            font-weight: bold;
-            padding: 0px;
-            margin: 0 -2px 0 -2px;
-        }
-    }
-    // .view-source {
-    //     position: absolute;
-    //     @media(min-width:850px) {
-    //         right: 1em;
-    //         transform: scale(0.7,1);
-    //         font-weight: bold;
-    //         font-family: "Droid Sans Mono", monospace;
-    //     }
-    //     align-self: center;
-    //     color: #466259;
-    //     font-weight: bold;
-    //     line-height: 1.5;
-    //     padding: 0 4px 0px 4px;
-    //     border: none;
-    //     background: #fff;
-    //     border-radius: 2px;
-    //     &:hover {
-    //         background: #eee;
-    //         color: #304840;
-    //     }
-    // }
-    label, input {
-        display: none;
-    }
-    @media(max-width:850px) {
-        flex-direction: column;
-        label {
-            display: block;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1;
-            font-size: 1.6em;
-        }
-        > a:first-of-type {
-            margin-top: -1.8em;
-        }
-        > a:last-child {
-            margin-bottom: -8px;
-        }
-        p {
-            align-self: center;
-            margin-bottom: -0.4em;
-        }
-        a,#translate {
-            display: none;
-            align-self: center;
-        }
-        #translate {
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin-top: 0.35em;
-            height: 1.9em;
-            line-height: 1.7;
-            text-align: right;
-            padding-right: 1em;
-            background-color: #fff4;
-        }
-        a.view-source {
-            position: relative;
-            align-self: baseline;
-            background-color: transparent;
-            font-size: 0.9em;
-            line-height: 1;