garth-jekyll-theme 0.3.0 → 0.4.0

data/_sass/sassline-base/_modular-scale.scss

@@ -0,0 +1,66 @@
+// Modular scale
+// ---------------------------------------
+
+// Setting responsive modular-scales. Use appropriate scales for viewport sizes.
+$modular-scale: (
+  // Major Third http://www.modularscale.com/?16,28&px&1.25&web&text
+  scale-0: (
+    alpha:   28.0,
+    beta:    25.0,
+    gamma:   22.4,
+    delta:   20.0,
+    epsilon: 17.9,
+    zeta:    16.0,
+    eta:     14.3,
+    theta:   12.8,
+    iota:    11.5
+  ),
+  // Major Third http://www.modularscale.com/?17,30&px&1.25&web&text
+  scale-1: (
+    alpha:   30.0,
+    beta:    26.6,
+    gamma:   24.0,
+    delta:   21.3,
+    epsilon: 19.2,
+    zeta:    17.0,
+    eta:     15.3,
+    theta:   13.6,
+    iota:    12.8
+  ),
+  // Major Third http://www.modularscale.com/?18,32&px&1.25&web&text
+  scale-2: (
+    alpha:   32.0,
+    beta:    28.1,
+    gamma:   25.6,
+    delta:   22.5,
+    epsilon: 20.5,
+    zeta:    18.0,
+    eta:     16.3,
+    theta:   14.4,
+    iota:    13.1
+  ),
+  // Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text
+  scale-3: (
+    alpha:   40.0,
+    beta:    35.5,
+    gamma:   30.0,
+    delta:   26.7,
+    epsilon: 22.5,
+    zeta:    20.0,
+    eta:     16.9,
+    theta:   15.0,
+    iota:    12.7
+  ),
+  // Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text
+  scale-4: (
+    alpha:   50.0,
+    beta:    43.9,
+    gamma:   35.3,
+    delta:   31.1,
+    epsilon: 25.0,
+    zeta:    22.0,
+    eta:     17.6,
+    theta:   15.6,
+    iota:    12.5
+  )
+);

data/_sass/sassline-base/_reset.scss

@@ -0,0 +1,13 @@
+// Reset
+// ---------------------------------------
+
+// Reset all the things
+* { box-sizing: border-box; }
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
+html, body { height: 100%; }
+a img { border: none; }
+blockquote { quotes: none; }
+blockquote:before, blockquote:after { content: ''; content: none; }
+table { border-collapse: collapse; border-spacing: 0; }
+caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

data/_sass/sassline-base/_typography.scss

@@ -0,0 +1,363 @@
+// Typography
+// ---------------------------------------
+
+// Setting root sizes and base styles.
+html {
+  @include rootsize;
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+// Site-wide base styles.
+body {
+  @include fontsize(zeta, all);
+
+  font-family: unquote(map-get($bodytype, font-family));
+  font-style: normal;
+  font-weight: map-get($bodytype, regular);
+  line-height: 2rem;
+}
+
+// Links.
+a {
+  color: $linkColour;
+  text-decoration: none;
+  transition: color .1s, background-color .1s;
+
+  &:hover, &:active, &:focus {
+    color: $hoverColour;
+    text-decoration: none;
+  }
+}
+
+// Styles for typeset text.
+.typeset {
+
+  // Nice underlines for text links.
+  p a, li a {
+    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($linkColour,20%) 50%);
+    background-position: 0 93%;
+    background-repeat: repeat-x;
+    background-size: 100% 0.15rem;
+    text-shadow: 0.1rem 0 $backgroundColour,
+                 0.15rem 0 $backgroundColour,
+                -0.1rem 0 $backgroundColour,
+                -0.15rem 0 $backgroundColour;
+
+    &:hover, &:active, &:focus {
+      background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($hoverColour,20%) 50%);
+    }
+  }
+
+  // Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
+  p {
+    @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
+
+    font-feature-settings: 'kern', 'onum', 'liga';
+  }
+
+  // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
+  h1, h2, h3, h4, h5, h6 {
+    color: $headingColour;
+    font-family: unquote(map-get($headingtype, font-family));
+    font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    font-style: normal;
+    font-weight: map-get($headingtype, bold);
+  }
+
+  // Heading level 1.
+  h1, .alpha {
+    @include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all);
+  }
+
+  // Heading level 2.
+  h2, .beta {
+    @include sassline(beta, $headingtype, 3, 1, all);
+  }
+
+  // Heading level 3.
+  h3, .gamma {
+    @include sassline(gamma, $headingtype, 3, 1, all);
+  }
+
+  // Heading level 4.
+  h4, .delta {
+    @include sassline(delta, $headingtype, 2, 0, all);
+  }
+
+  // Heading level 5.
+  h5, .epsilon {
+    @include sassline(epsilon, $headingtype, 2, 0, all);
+  }
+
+  // Heading level 6.
+  h6, .zeta {
+    @include sassline(zeta, $headingtype, 2, 0, all);
+  }
+
+  // Lists.
+  ul, ol {
+    @include baseline(zeta, $bodytype, 2, 2, all);
+
+    li {
+      font-feature-settings: 'kern', 'onum', 'liga';
+      margin-left: 2rem;
+
+      @include breakpoint(break-1) {
+        margin-left: 0;
+      }
+
+      ol, ul {
+        padding-top: 1rem;
+        margin-bottom: 1rem;
+        margin-left: 2rem;
+      }
+    }
+  }
+
+  // Ordered lists.
+  ol {
+    list-style-type: none;
+
+    li {
+      counter-increment: top-level;
+
+      &:before {
+        content: counter(top-level) '.';
+        font-feature-settings: 'lnum', 'tnum';
+        margin-left: -3rem;
+        position: absolute;
+        text-align: right;
+        width: 2em;
+      }
+
+      ul {
+
+        li {
+
+          &:before {
+            content: '';
+          }
+
+          ol {
+
+            li {
+              counter-increment: alt-level;
+
+              &:before {
+                content: counter(alt-level) '.';
+              }
+            }
+          }
+        }
+      }
+
+      ol {
+
+        li {
+          counter-increment: sub-level;
+
+          &:before {
+            content: counter(top-level) '.' counter(sub-level);
+          }
+
+          ul {
+
+            li {
+
+              &:before {
+                content: '';
+              }
+            }
+          }
+
+          ol {
+
+            li {
+              counter-increment: sub-sub-level;
+
+              &:before {
+                content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Definition lists.
+  dl {
+    @include baseline(zeta, $bodytype, 2, 2, all);
+
+    dt, dd {
+      font-feature-settings: 'kern', 'onum', 'liga';
+      margin-left: 2rem;
+
+      @include breakpoint(break-1) {
+        margin-left: 0;
+      }
+    }
+
+    dt {
+      font-weight: map-get($bodytype, bold);
+    }
+
+    dd + dt {
+      padding-top: 1rem;
+    }
+  }
+
+  // Tables.
+  table {
+    @include sassline(eta, $headingtype, 2, 0, all);
+
+    font-family: unquote(map-get($headingtype, font-family));
+    font-feature-settings: 'liga', 'lnum', 'tnum', 'kern';
+    font-style: normal;
+    font-weight: map-get($headingtype, regular);
+    width: 100%;
+
+    thead {
+
+      th {
+        @include sassline(zeta, $headingtype, 2, 0, all);
+        padding-bottom: 1px;
+      }
+    }
+  }
+
+  // Bold.
+  b, strong, .bold {
+    font-weight: map-get($bodytype, bold);
+  }
+
+  // Italic.
+  em, i, .italic {
+    font-style: map-get($bodytype, italic);
+  }
+
+  // Caption and inline small text.
+  small, .caption {
+    @include fontsize(theta, all);
+
+    font-family: unquote(map-get($headingtype, font-family));
+    font-style: normal;
+    font-weight: map-get($headingtype, regular);
+  }
+
+  small {
+    line-height: 1rem;
+  }
+
+  .caption {
+    @include baseline(theta, $headingtype, 2, 2, all);
+
+    color: $captionColour;
+  }
+
+  // Nice spacing for captions.
+  h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption {
+    margin-top: -1rem;
+  }
+
+  .delta + .caption, .epsilon + .caption, .zeta + .caption {
+    margin-top: 0rem;
+  }
+
+  // Quotes.
+  blockquote {
+
+    p {
+      border-left: 0.15rem solid $linkColour;
+      font-style: map-get($bodytype, italic);
+      padding-left: 1rem;
+
+      // Add spacing below blockquote paragraphs to align to baseline grid.
+      $get-scale: map-get($modular-scale, scale-0);
+      $get-size: map-get($get-scale, zeta);
+      $rootsize: nth($sizes, 1);
+      $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
+      $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-bottom: #{$baseline-shift}rem;
+
+      @for $i from 2 through $breakpoints-limit {
+        $get-scale: map-get($modular-scale, scale-#{$i - 1});
+        $get-size: map-get($get-scale, zeta);
+        $rootsize: nth($sizes, $i);
+        $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
+        $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
+
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          margin-bottom: #{$baseline-push}rem;
+          padding-bottom: #{$baseline-shift}rem;
+        }
+      }
+    }
+
+    @include breakpoint(break-1) {
+      margin-left: -1rem;
+    }
+  }
+
+  // Horizontal rule.
+  hr {
+    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%);
+    background-position: 0 50%;
+    background-repeat: repeat-x;
+    background-size: 100% 0.15rem;
+    border: 0;
+    margin: 0;
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+
+  // Code block.
+  code, pre {
+    background-color: $codeBackgroundColour;
+    font-family: unquote(map-get($monospacetype, font-family));
+  }
+
+  pre {
+    display: block;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    white-space: pre;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  code {
+    @include fontsize(theta, all);
+
+    line-height: 1rem;
+  }
+
+  // Letter space those capitals people, Jan Tschichold would be proud.
+  .upper {
+    font-kerning: normal;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  // Real small caps.
+  .small-caps {
+    font-feature-settings: 'smcp', 'kern';
+    font-kerning: normal;
+    letter-spacing: 0.1rem;
+  }
+
+  // Consistent height numbers with OpenType.
+  .lining-numerals {
+    font-feature-settings: 'lnum', 'kern';
+  }
+
+  // Ascending and descending numbers with OpenType.
+  .oldstyle-numerals {
+    font-feature-settings: 'onum', 'kern';
+  }
+}

data/_sass/sassline-base/_variables.scss

@@ -0,0 +1,108 @@
+// SCSS variables
+// ---------------------------------------
+
+// Note: For the following Sass maps enter values as if they would be px units.
+
+// Breakpoint sizes from px to ems. Add more values here to add more breakpoints.
+// Change names if you prefer, it wont break the mixin as long as they are strings not just numbers.
+$breakpoints: (
+  break-0: 0,     // 0px       Mobile first
+  break-1: 640,   // 640px   ~ Small tablet up
+  break-2: 800,   // 800px   ~ Large tablet up
+  break-3: 1024,  // 1024px  ~ Desktop up
+  break-4: 1600   // 1600px  ~ Large desktop up
+) !default;
+
+// Root font-sizes for each breakpoint. Set to half desired line-height of body text.
+// ! Make sure to have as many sizes as breakpoints above.
+$rootsizes: (
+  rootsize-0: 12,   // 24px line-height body text
+  rootsize-1: 14,   // 28px line-height body text
+  rootsize-2: 15,   // 30px line-height body text
+  rootsize-3: 17,   // 34px line-height body text
+  rootsize-4: 19    // 38px line-height body text
+) !default;
+
+// Set the optimum line-length for your text (based on typeface).
+// Aim for 75–100 characters a line when possible, at smaller sizes type size is more important.
+// ! Make sure to have as many widths as breakpoints above.
+// Note: this was 'maxwidths' in previous versions.
+$measures: (
+  measure-0: 500,  // 500px wide
+  measure-1: 550,  // 550px wide
+  measure-2: 600,  // 600px wide
+  measure-3: 680,  // 680px wide
+  measure-4: 750   // 750px wide
+) !default;
+
+// Set the max-widths for containers (based on design).
+// ! Make sure to have as many widths as breakpoints above.
+$maxwidths: (
+  width-0: 500,  // 500px wide
+  width-1: 600,  // 600px wide
+  width-2: 800,  // 800px wide
+  width-3: 1100, // 110px wide
+  width-4: 1300  // 1300px wide
+) !default;
+
+// Gutter widths
+$gutterwidths: (
+  small: 1rem,
+  medium: 2rem,
+  large: 4rem
+) !default;
+
+// Add typefaces here.
+// Add weight and style details too.
+// ! Set cap height to set to the baseline.
+$bodytype: (
+  font-family: '"Alegreya Sans", sans-serif',
+  regular: 400,
+  bold: 700,
+  italic: italic,
+  cap-height: 0.66
+) !default;
+
+$headingtype: (
+  font-family: '"Neuton", serif',
+  regular: 400,
+  bold: 700,
+  cap-height: 0.66
+) !default;
+
+$monospacetype: (
+  font-family: 'Menlo, monospace',
+  regular: 400,
+  cap-height: 0.68
+) !default;
+
+// Here are some local fonts cap-height sizes to get you started:
+// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
+// Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76
+
+// Selection of Typekit fonts cap-height sizes:
+// Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36
+
+// Text colours. British English.
+$headingColour: #2E2E2E !default;
+$bodyColour: #494949 !default;
+$linkColour: #0E58F5 !default;
+$hoverColour: #0B348B !default;
+$captionColour: #BDC8CC !default;
+$white: #FFFFFF !default;
+
+// Background colours.
+$backgroundColour: #FCFCFC !default;
+$codeBackgroundColour: #F5F4F2 !default;
+
+
+// Alembic reassigned variables
+$headingColour: $color__site--heading;
+$bodyColour: $color__site--body;
+$linkColour: $color__site--link;
+$hoverColour: $color__site--link--hover;
+$captionColour: $color__site--captions;
+$white: #fff;
+
+$backgroundColour: $color__site--background;
+$codeBackgroundColour: darken($color__site--background, 5%);