Stylesheet

Table of Contents

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

Font Size / Spacing Constants 

@charset "utf-8";

$ratio: 1.272; // sqrt(golden_ratio)

// Typographic Scale
$base-font-size:   18px !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;

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;

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

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

Styling of TODO Keywords 

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

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

If you have an idea how this page could be improved or a comment send me a mail.