More style and layout tweaking

site/assets/style/_colours.sass

 
 $code-border: $light-gray
 $code-background: $lightest-gray
+
+$link-color: #1d78bd
+$link-underline-color: lighten($link-color, 25%)
+
+$visited-link-color: #6a4c96
+$visited-link-underline-color: lighten($visited-link-color, 25%)
+
+$active-link-color: darken($link-color, 25%)
+$active-link-underline-color: darken($link-color, 25%)

site/assets/style/_fonts.sass

 
 $font-dir: '/res/fonts/'
 $text-font: 'Source Sans Pro'
+$header-font: 'League Spartan'
+$fa-font: 'FontAwesome'
 
 // Provides src properties for woff2 and woff font files.
 @mixin woff-font-src($file-name)

site/assets/style/modules/_articles.sass

 // Deals with article-specific layouts
 
+@import ../colours
+
 article
 
   & + article
-    padding-top: 100px
-    border-top: 10px solid rgba(200, 200, 200, 0.3)
-    margin-top: 100px
-
-    @media screen and (max-width: 1800px)
-      padding-top: 50px
-      margin-top: 50px
+    padding-top: 50px
+    border-top: 4px double $gray
+    margin-top: 50px
 
   header p
     position: relative
 
   img
     max-width: 100%
+
+  p a
+    color: $link-color
+    text-decoration-color: $link-underline-color
+    text-decoration-skip-ink: auto
+    font-weight: bold
+    transition: all 0.1s linear
+
+    &:visited
+      color: $visited-link-color
+      text-decoration-color: $visited-link-underline-color
+
+    &:hover, &:focus
+      color: $active-link-color
+      text-decoration-color: $active-link-underline-color
+
+.readmore
+  text-align: right
+
+  a
+    display: inline-block
+    background-color: $dark-gray
+    border-radius: 2em
+    color: #fff
+    padding: 0.5em 2em
+    text-decoration: none
+    transition: background-color 0.1s linear
+
+
+    &:hover
+      background-color: $cyan

site/assets/style/modules/_blockquotes.sass

 // Blockquotes
 
+@import ../colours
+
 blockquote
   border-left: solid 6px $light-gray
   font-style: italic

site/assets/style/modules/_fontawesome.sass

 // Font awesome, used for icons in the header
 
+@import ../fonts
+
 .fa-key:before
   content: '\e800'
 
 
 .fa
   display: inline-block
-  font: normal normal normal 14px/1 FontAwesome
+  font: normal normal normal 14px/1 $fa-font
   text-rendering: auto
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale

site/assets/style/_general.sass → site/assets/style/modules/_general.sass

+// General elements and overall layout
+
+@import colours
+
 body
   background: #ffffff
   min-width: 400px

site/assets/style/modules/_headings.sass

 // Header elements (h1..h6)
 
+@import ../colours
+@import ../fonts
+
 h1, h2, h3, h4, h5, h6
   color: $darkest-gray
   font-weight: 800
-  font-family: "League Spartan", sans-serif
+  font-family: $header-font, sans-serif
   line-height: 1.5em
   margin: 0 0 1em 0
 

site/assets/style/modules/_tables.sass

 // Basic tables
 
+@import ../colours
+
 .table-wrapper
   -webkit-overflow-scrolling: touch
   overflow-x: auto

site/assets/style/_text.sass → site/assets/style/modules/_text.sass

 // Properties relating to text
 
+@import colours
+@import fonts
+
 body
   color: $text
   font-family: $text-font, Helvetica, sans-serif

site/assets/style/modules/_updates.sass

 // Blocks used to describe updates to posts
 
+@import ../colours
+
 aside.update
   display: block
   border-left: solid 10px $update-border

site/assets/style/style.sass

-@import fonts
-@import reset
-@import colours
-@import general
-@import text
+@import modules/reset
 
 @import modules/articles
 @import modules/blockquotes
 @import modules/code
 @import modules/figures
 @import modules/fontawesome
+@import modules/general
 @import modules/header
 @import modules/headings
 @import modules/hire
 @import modules/lists
 @import modules/tables
+@import modules/text
 @import modules/updates

site/layouts/partials/list.html

     </div>
   </header>
   {{ .Summary }}
-  <footer>
+  <footer class="readmore">
     <a href="{{ .RelPermalink }}">Read more &raquo;</a>
   </footer>
 </article>