jekyll-wren 0.4

data/_sass/wren/initialize.scss

@@ -0,0 +1,118 @@
+@charset "utf-8";
+
+// This file is the hub from which the rest of the SASS is
+// controlled. It defines all of the variables used in the
+// other files (and which can be redefined by the users in
+// `style.scss`), defines mixin shortcuts, and imports the
+// other SASS files in the theme.
+
+
+// Default Variables
+// =================
+
+// General content font related default values
+$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Helvetica, Roboto, Arial, sans-serif !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+// Extra font tweaks for headers 
+$base-header-weight: 600 !default;
+$base-h1-alignment: center;
+
+// Spacing related default values
+$spacing-unit:     30px !default;
+$table-text-align: left !default;
+$content-width:    800px !default;
+$nav-bar-height:   48px !default;  // BUG SVGs themselves don't resize
+
+// Border radius for page content, code blocks, and tables
+$base-border-radius: 12px !default ;
+
+// Theme color default variables
+$brand-color:       #828282 !default;
+$brand-color-light: lighten($brand-color, 40%) !default;
+$brand-color-dark:  darken($brand-color, 25%) !default;
+$text-color:        #3d3d3d !default;
+$background-color:  #9b9da3 !default;
+$page-color:        #fdfdfd !default;
+$nav-color:         $page-color !default;
+$border-color:      $brand-color-light !default;
+
+// Shadows for elements and icons
+$base-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1) !default;
+$base-drop-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) !default;
+
+// Colors for link formatting
+$link-base-color:    #2a7ae2 !default;
+$link-visited-color: darken($link-base-color, 15%) !default;
+$link-hover-color:   $text-color !default;
+
+// Colors for table formatting
+$table-text-color:      lighten($text-color, 18%) !default;
+$table-zebra-color:     lighten($brand-color, 46%) !default;
+$table-header-bg-color: lighten($brand-color, 43%) !default;
+$table-header-border:   lighten($brand-color, 37%) !default;
+$table-border-color:    $border-color !default;
+
+// Fonts and colors for code blocks and syntax highlighting
+$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
+$code-background-color:   #eeeeff !default;  // background color for blocks and inline code 
+// Variables relating to snippets which change font color
+$syntax-comment-color:    #998 !default;     // comments in all their forms
+$syntax-string-color:     #d14 !default;     // literal strings, exc. regex & symbols
+$syntax-number-color:     #099 !default;     // all the numbers 
+$syntax-variable-color:   #008080 !default;  // variables, constants, etc
+$syntax-error-color:      #a61717 !default;  // various errors and exceptions
+$syntax-function-color:   #900 !default;     // functions (prev. included exceptions)
+// Variables relating to snippets which change background and font colors
+$syntax-ins-del-color:    #000 !default;     // font for insertions and deletions
+$syntax-ins-background:   #afa !default;     // background color for insertions
+$syntax-del-background:   #faa !default;     // background color for deletions
+$syntax-err-background:   #e3d2d2 !default;  // background for errors
+// Variables which are only used once for fairly niche snippets
+$syntax-builtin-color:    #0086B3 !default;  // builtins
+$syntax-entity-color:     #800080 !default;  // entities
+$syntax-tag-color:        #000080 !default;  // tags
+$syntax-symbol-color:     #990073 !default;  // string.symbols
+$syntax-regex-color:      #009926 !default;  // string.regex
+$syntax-whitespace-color: #bbb !default;     // text.whitespace
+$syntax-output-color:     #888 !default;     // generic output 
+$syntax-subhead-color:    #aaa !default;     // subheadings
+// Variables which are used for two distinct snippets
+$syntax-class-color:      #458 !default;     // classes and keywords
+$syntax-prompt-color:     #555 !default;     // prompt and namespace
+
+// Size at which to switch to large screen interface
+$large-width: 800px !default;
+
+
+// SASS Mixins
+// ===========
+
+@mixin media-query($device) {
+  // Use @content SASS only if displaying a screen
+  // with a width of at least $device pixels.
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin if-large {
+  // Query Wren uses to switch to the large screen interface
+  @include media-query($large-width) { @content; }
+}
+
+@mixin relative-font-size($ratio) {
+  // Scale the font by $ratio
+  font-size: #{$ratio}rem;
+}
+
+
+// SASS Imports
+// ============
+
+@import
+  "wren/content",  // Styling for the base html content
+  "wren/layout"    // Sets the layout of the website
+;

data/_sass/wren/layout.scss

@@ -0,0 +1,295 @@
+// The layout file, as the name suggests, controls the structure of the
+// website pages themselves. It starts with the header which is used as
+// a container for the navigation tools, then the footer, and finally
+// the main content itself working inwards and downwards through its
+// components: .page-content to paginator controls.
+
+
+// Header
+// ======
+
+.site-header {
+  // Most the styles that were here were for .site-nav
+  display: inline-block;
+}
+
+.site-nav {
+  // Horizontal navigation bar on small screens
+  position: fixed;  // don't want navigation icons moving
+  width: 100%;
+  height: $nav-bar-height;
+  border-bottom: 1px solid $border-color;
+  background-color: $nav-color;
+  display: block;
+  box-shadow: $base-shadow;
+  @extend %clearfix;
+
+  // Buttons on the nav bar
+  .page-link {
+    svg {
+      padding: $nav-bar-height/4;
+      width: $nav-bar-height/2;
+      height: $nav-bar-height/2;
+      fill: $brand-color-dark;
+      filter: $base-drop-shadow;
+    }
+    margin: auto;
+    display: inline-block;
+    text-decoration: none;
+    width:  $nav-bar-height;
+    height: $nav-bar-height;
+  }
+  // make it obvious which button is inspected
+  .page-link:hover, .page-link:active {
+    svg { fill: lighten($brand-color-dark, 5%) }
+    background-color: darken($nav-color, 10%);
+    border-bottom: 1px solid darken($border-color, 10%);
+  }
+
+  // Vertical nav buttons on large screen
+  @include if-large {
+    background-color: transparent;
+    border-bottom: 0;
+    margin-left: $spacing-unit;
+    width: $nav-bar-height;
+    box-shadow: none;
+    align-items: right;
+    float: right;
+    margin-top: 30px;
+
+    .page-link {
+      display: block;
+      margin-left: auto;
+    }
+
+    .page-link:hover, .page-link:active {
+      svg { fill: lighten($brand-color-dark, 10%) }
+      background-color: transparent;
+      border-bottom: 0;
+    }
+  }
+}
+
+
+// Site footer
+// ===========
+
+.site-footer {
+  padding: 2*$spacing-unit $spacing-unit $spacing-unit;
+  @include relative-font-size(0.6);
+  color: $text-color;
+  text-align: center;
+  margin-top: auto;
+
+  a {
+    // Means there's no distinction for footer links
+    color: $link-visited-color;
+  }
+}
+
+.social-list {
+  display: table;
+  margin: $spacing-unit/2 auto 0 auto;
+  a {
+    text-decoration: none;
+    padding: $spacing-unit / 4;
+
+    svg {
+      fill: $text-color;
+      filter: $base-drop-shadow;
+      width: 16px;
+      height: 16px;
+    }
+
+    svg:hover, svg:active {
+      fill: lighten($brand-color-dark, 10%)
+    }
+  }
+}
+
+
+// Page content
+// ============
+
+.page-content {
+  // set size
+  width: $content-width;
+  max-width: 70%;
+  display: inline-block;  // NOTE Minima set this in default.html
+  // make it pretty
+  background-color: $page-color;
+  border-radius: $base-border-radius;
+  box-shadow: $base-shadow;
+  // external margins
+  margin: $spacing-unit+1.5*$nav-bar-height auto auto;
+  // internal padding
+  padding: $spacing-unit $spacing-unit 0 $spacing-unit;
+  // TODO find out what this does
+  @extend %clearfix;
+  // remove extra space for navigation bar if not on mobile
+  @include if-large {
+    margin-top: $spacing-unit;
+  }
+}
+
+.page-heading {
+  @include relative-font-size(2);
+}
+
+.post-meta {
+  font-size: $small-font-size;
+  color: $brand-color;
+
+  a {
+    color: $brand-color;
+    text-decoration: none;
+  }
+  a:hover, a:active {
+    text-decoration: underline dotted;
+  }
+
+  svg {
+    fill: $brand-color;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.post-link {
+  display: block;
+  @include relative-font-size(1.1);
+}
+
+
+// Post Lists
+// =========
+
+.post-list-page {
+  // post lists pages have a special header class
+  .post-list-header {
+    // they have slightly smaller font
+    @include relative-font-size(1.5);
+
+    // they need less space
+    margin-top: $spacing-unit * 1.5;
+    margin-bottom: $spacing-unit / 2;
+
+    // we wanted to hide their anchor links...
+    a {
+      color: $text-color;
+      text-decoration: none;
+    }
+    // ...unless they're being inspected
+    a:hover, a:active {
+      text-decoration: underline dotted;
+    }
+  }
+
+  .post-list {
+    margin-left: 0;
+    list-style: none;
+
+    > li {
+      margin-bottom: $spacing-unit;
+    }
+  }
+}
+
+.tag-cloud {
+  text-align: center;
+  margin-top: -$spacing-unit/2;
+  margin-bottom: $spacing-unit/2;
+}
+
+
+// Posts
+// =====
+
+.post-header {
+  margin-bottom: $spacing-unit;
+}
+
+.post-title,
+.post-content h1 {
+  @include relative-font-size(2.625);
+  letter-spacing: -1px;
+  line-height: 1.15;
+
+  @media in-large {
+    @include relative-font-size(2.625);
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  h1, h2, h3 { margin-top: $spacing-unit * 2 }
+  h4, h5, h6 { margin-top: $spacing-unit }
+
+  h2 {
+    @include relative-font-size(1.75);
+
+    @media in-large {
+      @include relative-font-size(2);
+    }
+  }
+
+  h3 {
+    @include relative-font-size(1.375);
+
+    @media if-large {
+      @include relative-font-size(1.625);
+    }
+  }
+
+  h4 {
+    @include relative-font-size(1.25);
+  }
+
+  h5 {
+    @include relative-font-size(1.125);
+  }
+  h6 {
+    @include relative-font-size(1.0625);
+  }
+}
+
+
+// Error Pages
+// ===========
+
+.error {
+  text-align: center;
+
+  h1 {
+    margin: $spacing-unit/2 0;
+    font-size: 4em;
+  }
+}
+
+
+// Pagination navbar
+// =================
+
+.pagination {
+  margin: 1.5*$spacing-unit 0 $spacing-unit 0;
+  text-align: center;
+  font-size: $small-font-size;
+
+  // links, separators, and edges
+  a, div {
+    color: $brand-color;
+    display: inline;
+    padding: $spacing-unit / 4;
+
+    // edgers are lighter
+    &.pager-edge {
+      color: $brand-color-light;
+    }
+  }
+
+  // distinguish link with dotted underline on inspection
+  a:hover, a:active {
+    text-decoration: underline dotted;
+  }
+}

data/assets/flav.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m8 1-8 8h2v6h12v-6h2l-3-3v-4h-2v2z" color="#000000" fill="#9b9da3" stroke-width=".66667"/>
+</svg>

data/assets/nav-icons/about.svg

@@ -0,0 +1,3 @@
+<svg id="nav" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m12 1c-6.0751 0-11 4.9249-11 11 0 6.0751 4.9249 11 11 11 6.0751 0 11-4.9249 11-11 0-6.0751-4.9249-11-11-11zm-0.0098 2h0.0098c4.9706 0 9 4.0294 9 9-4.14e-4 1.7929-0.53634 3.5449-1.5391 5.0312-0.54952-2.1115-1.3794-2.8592-2.9609-3.0312-1.5 1.4693-2.7592 1.9991-4.5 2-1.7415-2.37e-4 -3-0.49194-4.5-2-1.5808 0.17292-2.4118 0.92143-2.9609 3.0332-1.0031-1.4869-1.539-3.2396-1.5391-5.0332-2.9e-6 -4.9668 4.0235-8.9946 8.9902-9zm0.0098 2c-2.7614 0-5 2.2386-5 5 0 2.7614 2.2386 5 5 5 2.7614 0 5-2.2386 5-5 0-2.7614-2.2386-5-5-5z"/>
+</svg>

data/assets/nav-icons/blog.svg

@@ -0,0 +1,3 @@
+<svg id="nav" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4 2v2h-4v15.273c-1.4803e-16 0.75757 0.21875 1.4013 0.65625 1.9316s0.96875 0.79492 1.5938 0.79492h18.75c2 0 3-1 3-3v-17h-20zm2 2h16v15a1 1 0 0 1-1 1h-15v-16zm-4 2h2v13a1 1 0 0 1-1 1 1 1 0 0 1-1-1v-13zm7 0v2h10v-2h-10zm-1 4v2h12v-2h-12zm0 3v2h12v-2h-12zm0 3v2h12v-2h-12z"/>
+</svg>

data/assets/nav-icons/comments.svg

@@ -0,0 +1,3 @@
+<svg id="nav" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 2c-2 0-4 2-4 4v10c0 2 2.2262 4 4 4h3.666l-0.66602 2c0 0.76861 0.44591 0.77704 1 0.5l5-2.5h3c2 0 4-2 4-4v-10c0-2-2-4-4-4h-12zm0 2h12c1 0 2 1 2 2v10c0 1-0.99653 2-2 2h-12c-1 0-2-1-2-2v-10c0-1 1-2 2-2zm2 3c-0.554 0-1 0.446-1 1s0.446 1 1 1h8c0.554 0 1-0.446 1-1s-0.446-1-1-1h-8zm0 3c-0.554 0-1 0.446-1 1s0.446 1 1 1h8c0.554 0 1-0.446 1-1s-0.446-1-1-1h-8zm0 3c-0.554 0-1 0.446-1 1s0.446 1 1 1h8c0.554 0 1-0.446 1-1s-0.446-1-1-1h-8z"/>
+</svg>

data/assets/nav-icons/default.svg

@@ -0,0 +1,3 @@
+<svg id="nav" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m3 0c-0.554 0-1 0.446-1 1v22c0 0.554 0.446 1 1 1h18c0.554 0 1-0.446 1-1v-16.418c0-0.582-0.37462-0.95665-0.56641-1.1484l-4.748-4.748c-0.22181-0.22181-0.68603-0.68555-1.1855-0.68555h-12.5zm1 2h9v5c0 1.1046 0.89543 2 2 2h5v13h-16v-20zm11 0 5 5h-5v-5zm-7 9a1 1 0 0 0-1 1 1 1 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-8zm0 3a1 1 0 0 0-1 1 1 1 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-8zm0 3a1 1 0 0 0-1 1 1 1 0 0 0 1 1h8a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-8z"/>
+</svg>

data/assets/nav-icons/home.svg

@@ -0,0 +1,4 @@
+<svg id="nav" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="m12 7-8 8v6a1 1 0 0 0 1 1h5v-6h4v6h5a1 1 0 0 0 1-1v-6l-8-8z"/>
+ <path d="m12 2-11 11 1.3398 1.3398 9.6602-9.3398 9.5 9.5 1.5-1.5-3-3v-4c0-0.554-0.446-1-1-1h-1c-0.554 0-1 0.446-1 1v1z"/>
+</svg>