Update styling

app/assets/stylesheets/themes/default.css.sass

@@ -12,6 +12,24 @@
 //
 ///////////////////////////////
 
+=blurb($lines: 3, $margin-right: 0)
+  height: $line-height * $lines
+  overflow: hidden
+  &:after
+    background-color: #FFFFFF
+    border-left: 1px solid #000
+    bottom: -3px
+    content: ''
+    font-family: fontello
+    font-size: 14px
+    margin-right: $margin-right
+    padding-left: 5px
+    position: absolute
+    right: 0
+
+=debug-bg
+  background: url('/resources/static/debug-bg.png') 0 0 repeat
+
 =embed-font($font-name, $font-variant)
   @font-face
     font-family: $font-name
@@ -20,26 +38,12 @@
     font-weight: normal
     font-style: normal
 
-=transition($duration: 1s)
-  transition: all $duration ease-out
-  -webkit-transition: all $duration ease-out
-  -moz-transition: all $duration ease-out
-  -o-transition: all $duration ease-out
-
 =fade($opacity: 0)
   opacity: $opacity
   +transition
 
-=place($push: 0, $columns: 1, $pull: 0)
-  +column($columns)
-  +push($push)
-  +pull($pull)
-
-=push($offset: 1, $columns: $columns)
-  margin-left: $total-width * ($gutter-width + $column-width) * $offset / gridsystem-width($columns) + $total-width * $gutter-width * 0.5 / gridsystem-width($columns)
-
-=debug-bg
-  background: url('/resources/static/debug-bg.png') 0 0 repeat
+=fixed-column-gap
+  +column-gap($gutter-width * 1px)
 
 =pass_media_query($media-query)
   body
@@ -48,20 +52,19 @@
       line-height: 0
       visibility: hidden
 
-=blurb($lines: 3, $margin-right: 0)
-  height: $line-height * $lines
-  overflow: hidden
-  &:after
-    background-color: #FFFFFF
-    border-left: 1px solid #000
-    bottom: -3px
-    content: ''
-    font-family: fontello
-    font-size: 14px
-    margin-right: $margin-right
-    padding-left: 5px
-    position: absolute
-    right: 0
+=place($push: 0, $columns: 1, $pull: 0)
+  +column($columns)
+  +push($push)
+  +pull($pull)
+
+=push($offset: 1, $columns: $columns)
+  margin-left: $total-width * ($gutter-width + $column-width) * $offset / gridsystem-width($columns) + $total-width * $gutter-width * 0.5 / gridsystem-width($columns)
+
+=transition($duration: 1s)
+  transition: all $duration ease-out
+  -webkit-transition: all $duration ease-out
+  -moz-transition: all $duration ease-out
+  -o-transition: all $duration ease-out
 
 ///////////////////////////////
 //
@@ -569,17 +572,22 @@ section.links
     ul.notes, ul.citations
       +column(12)
 
-  ul.notes, ul.citations
+  ul.notes
     li
       position: relative
       a
-        padding-right: 30%
-        +blurb(4, 30%)
+        padding-right: 34.38889% // OPTIMIZE: We get these measurements from the columns.
+        +blurb(4, 34.38889%)     //  Ideally, we would sue the semantic.gs algorithm.
       img
         position: absolute
         width: auto
         right: 0
         height: $line-height * 4
+    &.citations
+      li
+        position: relative
+        a
+          padding-right: 34.38889%
 
   #note-content
     figure
@@ -748,25 +756,34 @@ section.links
   .home-index
     ul.notes
       +columns(3)
-      +column-gap($gutter-width * 1px)
+      +fixed-column-gap
       a
         +blurb(7)
 
   .notes-index, .citations-index
     ul.notes, ul.citations
       +column(9)
+      li
+        a
+          +blurb(5, 34.38889%)
+        img
+          width: 240px // OPTIMIZE: We get these measurements from the columns.
+          height: $line-height * 5
 
   .books-index, .links-index
     ul
       +columns(2)
+      +fixed-column-gap
 
   .tags-index
     ul
       +columns(6)
+      +fixed-column-gap
 
   .tags-show
     ul.tags
       +columns(3)
+      +fixed-column-gap
 
   #note-content
     figure
@@ -795,6 +812,7 @@ section.links
   footer
     ul
       +columns(6)
+      +fixed-column-gap
 
 //@media only screen and (min-width: 1200px)
 

config/nembrot.yml

@@ -140,7 +140,7 @@ defaults: &defaults
         aspect:
           x: 16
           y: 9
-        width: 2
+        width: 3
       expanded:
         width: 1400