Start tidying up CSS into nice SASS files

site/assets/style.sass

@@ -1,4 +1,14 @@
+@import style/fonts
+@import style/reset
+@import style/colours
+@import style/headings
+@import style/text
+
+@import style/modules/code
+@import style/modules/figures
+@import style/modules/header
+@import style/modules/updates
+
 @import style/font-awesome
 @import style/font-awesome.min
-@import style/monokai
-@import style/legacy
+@import style/legacy

site/assets/style/_colours.sass

@@ -0,0 +1,11 @@
+// Site-wide colour definitions
+
+$dark-gray: #565656
+$light-gray: #787878
+$cyan: #49bf9d
+
+$light-green: #eeffee
+$green: #669966
+
+$update-border: $green
+$update-background: $light-green

site/assets/style/_fonts.sass

@@ -0,0 +1,32 @@
+// Defines font families
+
+$font-dir: '/res/fonts/'
+
+// Provides src properties for woff2 and woff font files.
+@mixin woff-font-src($file-name)
+  $font: $font-dir + $file-name
+  src: url($font + '.woff2') format('woff2'), url($font + '.woff') format('woff')
+
+// Provides src properties for all types of font with some hacks to support IE.
+@mixin full-font-src($file-name, $svg-name)
+  $font: $font-dir + $file-name
+  src: url($font + '.eot')
+  src: url($font + '.eot?#iefix') format('embedded-opentype'), url($font + '.woff2') format('woff2'), url($font + '.woff') format('woff'), url($font + '.ttf') format('truetype'), url($font + '.svg#' + $svg-name) format('svg')
+
+@font-face
+  font-family: 'Aileron Regular'
+  font-weight: normal
+  font-style: normal
+  @include woff-font-src('aileron-regular-webfont')
+
+@font-face
+  font-family: 'League Spartan'
+  font-weight: bold
+  font-style: normal
+  @include full-font-src('leaguespartan-bold', 'league_spartanbold')
+
+@font-face
+  font-family: 'FontAwesome'
+  font-weight: normal
+  font-style: normal
+  @include full-font-src('fontawesome-chameth-1', 'fontawesome-chameth')

site/assets/style/_headings.sass

@@ -0,0 +1,33 @@
+// Header elements (h1..h6)
+
+h1, h2, h3, h4, h5, h6
+  color: $dark-gray
+  font-weight: 800
+  font-family: "League Spartan", sans-serif
+  line-height: 1.5em
+  margin: 0 0 1em 0
+
+  a
+    transition: color 0.2s ease-in-out
+    color: inherit
+
+    &:hover
+      color: $cyan
+
+h1
+  font-size: 2em
+
+h2
+  font-size: 1.5em
+
+h3
+  font-size: 1.1em
+
+h4
+  font-size: 0.9em
+
+h5
+  font-size: 0.7em
+
+h6
+  font-size: 0.7em

site/assets/style/_reset.sass

@@ -0,0 +1,36 @@
+// Resets styles to known defaults to work around weird user agents.
+// Based on http://meyerweb.com/eric/tools/css/reset/
+
+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
+
+body
+  line-height: 1
+
+ol, ul
+  list-style: none
+
+blockquote, q
+  quotes: none
+
+blockquote:before, blockquote:after, q:before, q:after
+  content: ''
+  content: none
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+// Consistent box models
+*, *:before, *:after
+  -moz-box-sizing: border-box
+  -webkit-box-sizing: border-box
+  box-sizing: border-box

site/assets/style/_text.sass

@@ -0,0 +1,29 @@
+// Properties relating to text
+
+body
+  color: $dark-gray
+  font-family: "Aileron Regular", Helvetica, sans-serif
+  font-size: 16pt
+  font-weight: 400
+  line-height: 1.75em
+
+a
+  color: $cyan
+  text-decoration-skip-ink: auto
+
+strong, b
+  color: $light-gray
+  font-weight: 400
+
+em, i
+  font-style: italic
+
+sub
+  font-size: 0.8em
+  position: relative
+  top: 0.5em
+
+sup
+  font-size: 0.8em
+  position: relative
+  top: -0.5em

site/assets/style/font-awesome.css

@@ -1,15 +1,3 @@
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('/res/fonts/fontawesome-chameth-1.eot');
-  src: url('/res/fonts/fontawesome-chameth-1.eot#iefix') format('embedded-opentype'),
-       url('/res/fonts/fontawesome-chameth-1.woff2') format('woff2'),
-       url('/res/fonts/fontawesome-chameth-1.woff') format('woff'),
-       url('/res/fonts/fontawesome-chameth-1.ttf') format('truetype'),
-       url('/res/fonts/fontawesome-chameth-1.svg#fontawesome-chameth') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
 .fa-key:before { content: '\e800' !important; }
 .fa-twitter:before { content: '\f099' !important; }
-.fa-github:before { content: '\f09b' !important; }
+.fa-github:before { content: '\f09b' !important; }

site/assets/style/modules/_code.sass

@@ -0,0 +1,217 @@
+// Syntax highlighted code blocks
+
+.highlight
+  border-radius: 0.35em
+
+  pre
+    -webkit-overflow-scrolling: touch
+    font-family: "Courier New", monospace
+    font-size: 0.9em
+    margin: 0 0 2em 0
+
+    code
+      display: block
+      line-height: 1.75em
+      padding: 1em 1.5em
+      overflow-x: auto
+      background: transparent
+      border-radius: 0.35em
+      border: 0
+      font-family: "Courier New", monospace
+      font-size: 0.9em
+      margin: 0 0.25em
+
+  // Monokai style from https://xyproto.github.io/splash/docs/monokai.html
+  color: #f8f8f2
+  background-color: #272822
+
+  .err
+    color: #960050
+    background-color: #1e0010
+
+  .lntd
+    vertical-align: top
+    padding: 0
+    margin: 0
+    border: 0
+
+  .lntable
+    border-spacing: 0
+    padding: 0
+    margin: 0
+    border: 0
+    width: auto
+    overflow: auto
+    display: block
+
+  .hl
+    display: block
+    width: 100%
+    background-color: #3c3d38
+
+  .lnt
+    margin-right: 0.4em
+    padding: 0 0.4em 0 0.4em
+    color: #7f7f7f
+
+  .ln
+    margin-right: 0.4em
+    padding: 0 0.4em 0 0.4em
+    color: #7f7f7f
+
+  .k
+    color: #66d9ef
+
+  .kc
+    color: #66d9ef
+
+  .kd
+    color: #66d9ef
+
+  .kn
+    color: #f92672
+
+  .kp
+    color: #66d9ef
+
+  .kr
+    color: #66d9ef
+
+  .kt
+    color: #66d9ef
+
+  .na
+    color: #a6e22e
+
+  .nc
+    color: #a6e22e
+
+  .no
+    color: #66d9ef
+
+  .nd
+    color: #a6e22e
+
+  .ne
+    color: #a6e22e
+
+  .nf
+    color: #a6e22e
+
+  .nx
+    color: #a6e22e
+
+  .nt
+    color: #f92672
+
+  .l
+    color: #ae81ff
+
+  .ld
+    color: #e6db74
+
+  .s
+    color: #e6db74
+
+  .sa
+    color: #e6db74
+
+  .sb
+    color: #e6db74
+
+  .sc
+    color: #e6db74
+
+  .dl
+    color: #e6db74
+
+  .sd
+    color: #e6db74
+
+  .s2
+    color: #e6db74
+
+  .se
+    color: #ae81ff
+
+  .sh
+    color: #e6db74
+
+  .si
+    color: #e6db74
+
+  .sx
+    color: #e6db74
+
+  .sr
+    color: #e6db74
+
+  .s1
+    color: #e6db74
+
+  .ss
+    color: #e6db74
+
+  .m
+    color: #ae81ff
+
+  .mb
+    color: #ae81ff
+
+  .mf
+    color: #ae81ff
+
+  .mh
+    color: #ae81ff
+
+  .mi
+    color: #ae81ff
+
+  .il
+    color: #ae81ff
+
+  .mo
+    color: #ae81ff
+
+  .o
+    color: #f92672
+
+  .ow
+    color: #f92672
+
+  .c
+    color: #75715e
+
+  .ch
+    color: #75715e
+
+  .cm
+    color: #75715e
+
+  .c1
+    color: #75715e
+
+  .cs
+    color: #75715e
+
+  .cp
+    color: #75715e
+
+  .cpf
+    color: #75715e
+
+  .gd
+    color: #f92672
+
+  .ge
+    font-style: italic
+
+  .gi
+    color: #a6e22e
+
+  .gs
+    font-weight: bold
+
+  .gu
+    color: #75715e
+

site/assets/style/modules/_figures.sass

@@ -0,0 +1,31 @@
+// Figures displayed in articles
+
+figure
+  border: 2px solid rgba(200, 200, 200, 0.7)
+  border-radius: 0.35em
+  margin: 0 1em 1em 1em
+  display: inline-block
+  position: relative
+  overflow: hidden
+  top: 0.25em
+
+  img
+    display: block
+    width: 100%
+
+  figcaption
+    display: block
+    background-color: rgba(200, 200, 200, 0.7)
+    text-align: center
+    font-style: italic
+    font-size: small
+
+  &.left
+    float: left
+    margin-right: 1.5em
+    max-width: 40%
+
+  &.right
+    float: right
+    margin-left: 1.5em
+    max-width: 40%

site/assets/style/modules/_header.sass

@@ -0,0 +1,83 @@
+// The site-wide header, with title, recent posts, and identity links
+
+#header
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+  justify-content: space-between
+
+  background-color: #1f1815
+  background-attachment: scroll, fixed
+  background-image: url("/res/images/overlay.png"), url("/res/images/background.jpg")
+  background-position: top left, top left
+  background-repeat: repeat, no-repeat
+  background-size: auto, auto 100%
+
+  color: rgba(255, 255, 255, 0.4)
+
+  width: 20%
+  height: 100%
+  left: 0
+  top: 0
+
+  position: fixed
+  padding: 8em 2em 8em 1em
+  text-align: right
+
+  & > *
+    flex-shrink: 0
+    width: 100%
+
+  & > .inner
+    flex-grow: 1
+    margin: 0 0 2em 0
+
+  section
+    padding: 20px 0
+
+  a
+    text-decoration: none
+
+  h1
+    font-size: 1.35em
+    line-height: 1.75em
+    margin: 0
+    text-transform: uppercase
+    color: #3c3c3c
+
+
+// Recent posts list
+
+#posts ul
+  list-style-type: none
+
+  li
+    margin: 20px 0
+    font-size: 0.9em
+    line-height: 1.3em
+
+    &.recent a
+      background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%)
+      display: inline-block
+      width: 100%
+      padding: 0 0.7em 0 2em
+
+
+// Identity links
+
+#identities
+  position: absolute
+  bottom: 20px
+  left: 20px
+  text-align: left
+
+  ul
+    margin-bottom: 0
+
+  li
+    font-size: 0.8em
+    line-height: 1.4em
+    margin: 0.4em 0
+
+    &#pgp
+      font-family: monospace

site/assets/style/modules/_updates.sass

@@ -0,0 +1,14 @@
+// Blocks used to describe updates to posts
+
+aside.update
+  display: block
+  border-left: solid 10px $update-border
+  background-color: $update-background
+  padding: 1em
+  margin: 0 0 2em 0
+
+  h5
+    margin-bottom: 0.2em
+
+  ins
+    text-decoration: none

site/assets/style/monokai.css

@@ -1,210 +0,0 @@
-.highlight table td { padding: 5px; }
-.highlight table pre { margin: 0; }
-.highlight .c, .highlight .cd {
-  color: #75715e;
-  font-style: italic;
-}
-.highlight .cm {
-  color: #75715e;
-  font-style: italic;
-}
-.highlight .c1 {
-  color: #75715e;
-  font-style: italic;
-}
-.highlight .cp {
-  color: #75715e;
-  font-weight: bold;
-}
-.highlight .cs {
-  color: #75715e;
-  font-weight: bold;
-  font-style: italic;
-}
-.highlight .err {
-  color: #960050;
-  background-color: #1e0010;
-}
-.highlight .gi {
-  color: #ffffff;
-  background-color: #324932;
-}
-.highlight .gd {
-  color: #ffffff;
-  background-color: #493131;
-}
-.highlight .ge {
-  color: #000000;
-  font-style: italic;
-}
-.highlight .gr {
-  color: #aa0000;
-}
-.highlight .gt {
-  color: #aa0000;
-}
-.highlight .gh {
-  color: #999999;
-}
-.highlight .go {
-  color: #888888;
-}
-.highlight .gp {
-  color: #555555;
-}
-.highlight .gs {
-  font-weight: bold;
-}
-.highlight .gu {
-  color: #aaaaaa;
-}
-.highlight .k, .highlight .kv {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kc {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kd {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kp {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kr {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kt {
-  color: #66d9ef;
-  font-weight: bold;
-}
-.highlight .kn {
-  color: #f92672;
-  font-weight: bold;
-}
-.highlight .ow {
-  color: #f92672;
-  font-weight: bold;
-}
-.highlight .o {
-  color: #f92672;
-  font-weight: bold;
-}
-.highlight .mf {
-  color: #ae81ff;
-}
-.highlight .mh {
-  color: #ae81ff;
-}
-.highlight .il {
-  color: #ae81ff;
-}
-.highlight .mi {
-  color: #ae81ff;
-}
-.highlight .mo {
-  color: #ae81ff;
-}
-.highlight .m, .highlight .mb, .highlight .mx {
-  color: #ae81ff;
-}
-.highlight .se {
-  color: #ae81ff;
-}
-.highlight .sb {
-  color: #e6db74;
-}
-.highlight .sc {
-  color: #e6db74;
-}
-.highlight .sd {
-  color: #e6db74;
-}
-.highlight .s2 {
-  color: #e6db74;
-}
-.highlight .sh {
-  color: #e6db74;
-}
-.highlight .si {
-  color: #e6db74;
-}
-.highlight .sx {
-  color: #e6db74;
-}
-.highlight .sr {
-  color: #e6db74;
-}
-.highlight .s1 {
-  color: #e6db74;
-}
-.highlight .ss {
-  color: #e6db74;
-}
-.highlight .s {
-  color: #e6db74;
-}
-.highlight .na {
-  color: #a6e22e;
-}
-.highlight .nc {
-  color: #a6e22e;
-  font-weight: bold;
-}
-.highlight .nd {
-  color: #a6e22e;
-  font-weight: bold;
-}
-.highlight .ne {
-  color: #a6e22e;
-  font-weight: bold;
-}
-.highlight .nf {
-  color: #a6e22e;
-  font-weight: bold;
-}
-.highlight .no {
-  color: #66d9ef;
-}
-.highlight .bp {
-  color: #f8f8f2;
-}
-.highlight .nb {
-  color: #f8f8f2;
-}
-.highlight .ni {
-  color: #f8f8f2;
-}
-.highlight .nn {
-  color: #f8f8f2;
-}
-.highlight .vc {
-  color: #f8f8f2;
-}
-.highlight .vg {
-  color: #f8f8f2;
-}
-.highlight .vi {
-  color: #f8f8f2;
-}
-.highlight .nv {
-  color: #f8f8f2;
-}
-.highlight .w {
-  color: #f8f8f2;
-}
-.highlight .nl {
-  color: #f8f8f2;
-  font-weight: bold;
-}
-.highlight .nt {
-  color: #f92672;
-}
-.highlight {
-  color: #f8f8f2;
-  background-color: #49483e;
-}