_____________

                               STYLESHEET

                              Leon Rische
                             _____________


                         [2019-12-27 Fri 16:44]


Table of Contents
_________________

1. Font Size / Spacing Constants
2. Color Constants
3. Define Mixins for Responsive Styling
4. Main Styling
5. Styling of TODO Keywords
6. Syntax Highlighting for Source Blocks


The stylesheet for this website is generated by combining (tangling) the
`scss' code blocks in this file, then converting them to `css'.

It should have the aesthetic of unstyled html while adding minimal
styling to make sure the website looks good on large screens.

,----
| (org-babel-tangle-file (buffer-file-name))
`----

,----
| cd ~/org/static
| sassc style.scss > style.css
| cp style.css ~/org/website_html/static/style.css
`----


1 Font Size / Spacing Constants
===============================

  ,----
  | @charset "utf-8";
  |
  | $ratio: 1.272; // sqrt(golden_ratio)
  |
  | // Typographic Scale
  | $base-font-size:   16px !default;
  | $small-font-size:  $base-font-size / $ratio !default;
  | $h3-font-size: $base-font-size * $ratio;
  | $h2-font-size: $h3-font-size * $ratio;
  | $h1-font-size: $h2-font-size * $ratio;
  |
  | $base-line-height: 1.6 !default;
  | $spacing-unit:     30px !default;
  `----


2 Color Constants
=================

  Color scheme: [base16] IA light.

  ,----
  | $base00: #f6f6f6;
  | $base01: #dedede;
  | $base02: #bde5f2;
  | $base03: #898989;
  | $base04: #767676;
  | $base05: #181818;
  | $base06: #e8e8e8;
  | $base07: #f8f8f8;
  | $base08: #9c5a02;
  | $base09: #c43e18;
  | $base0A: #c48218;
  | $base0B: #38781c;
  | $base0C: #2d6bb1;
  | $base0D: #48bac2;
  | $base0E: #a94598;
  | $base0F: #8b6c37;
  `----

  Use these colors to define color constants.

  ,----
  | $border-color:     $base04;
  | $text-color:       $base05 !default;
  | // So that images with white background don't look bad
  | $background-color: #ffffff !default;
  `----


[base16] <http://chriskempson.com/projects/base16/>


3 Define Mixins for Responsive Styling
======================================

  ,----
  | @mixin on-large-screen() {
  |   @media screen and (min-width: 1000px) {
  |     @content;
  |   }
  | }
  |
  | @mixin relative-font-size($ratio-small, $ratio-large) {
  |   font-size: $base-font-size * $ratio-small;
  |   @include on-large-screen() {
  |     font-size: $base-font-size * $ratio-large;
  |   }
  | }
  `----


4 Main Styling
==============

  ,----
  | body {
  |   margin: auto;
  |   max-width: 60em;
  |   padding: 10px 20px;
  |   // font-family: "Open Sans", sans-serif;
  |   font-family: serif;
  |   font-size: 1rem;
  |   line-height: $base-line-height;
  |   color: $text-color;
  |   background-color: $background-color;
  | }
  |
  | h1 {
  |   font-size: $h1-font-size;
  | }
  |
  | h2 {
  |   font-size: $h2-font-size;
  | }
  |
  | h3 {
  |   font-size: $h3-font-size;
  | }
  |
  | h1, h2, h3, h4, h5, h6,
  | p, blockquote, pre,
  | ul, ol, dl, figure,
  | %vertical-rhythm {
  |   margin-bottom: $spacing-unit / 2;
  | }
  |
  | img {
  |   max-width: 100%;
  |   vertical-align: middle;
  | }
  |
  | figure > img {
  |   display: block;
  | }
  |
  | figcaption {
  |   font-size: $small-font-size;
  | }
  |
  | ul, ol {
  |   margin-left: $spacing-unit;
  |   padding: 0;
  | }
  |
  | li {
  |   > ul, > ol {
  |     margin-bottom: 0;
  |   }
  | }
  |
  | a {
  |   text-decoration: none;
  |
  |   &:hover {
  |     text-decoration: underline;
  |   }
  | }
  |
  | article {
  |   header {
  |     margin-bottom: $spacing-unit;
  |     // h1 {
  |       // @include relative-font-size(1.75, 2.0);
  |       // line-height: 1;
  |     // }
  |   }
  | }
  |
  | .image--small {
  |   width: 32.99%;
  | }
  |
  | .image--medium {
  |   width: 49.99%;
  | }
  |
  | blockquote {
  |   color: lighten($text-color, 20);
  |   border-left: 2px solid $border-color;
  |   padding: 0 $spacing-unit;
  |   margin-left: 0;
  |
  |   > :last-child {
  |     margin-bottom: 0;
  |   }
  | }
  |
  | pre, code {
  |   font-size: $small-font-size;
  |   background: $background-color;
  |   font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
  | }
  |
  | code {
  |   padding: 1px 5px;
  | }
  |
  | pre {
  |   border-left: 2px solid $border-color;
  |   padding: 0 $spacing-unit;
  |   overflow-x: auto;
  |
  |   > code {
  |     background: $background-color;
  |     border: 0;
  |     padding-right: 0;
  |     padding-left: 0;
  |   }
  | }
  `----


5 Styling of TODO Keywords
==========================

  ,----
  | span.TODO, span.NEXT {
  |   color: $base09;
  | }
  `----


6 Syntax Highlighting for Source Blocks
=======================================

  ,----
  | .org-src-container {
  |   .org-keyword { font-weight: bold }
  |   .org-function-name { color: $base0D; font-weight: bold }
  |   .org-variable-name { color: $base08 }
  |   .org-comment { color: $base03; font-style: italic }
  |   .org-comment-delimiter { color: $base02; font-style: italic }
  |   .org-type { color: $base0A; font-weight: bold }
  | }
  `----