1 files changed, 230 insertions, 0 deletions
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
new file mode 100644
index 0000000..ce44693
--- /dev/null
+++ b/design/sass/_writing_details.scss
@@ -0,0 +1,230 @@
+// ##############################################
+// Most of the basic formatting for paragraphs is
+// handled in _global.scss. This just handles the 
+// bits specific to article detail pages
+// e.g. header, footnotes, images, page nav, two
+// col and dark page
+// ##############################################
+.post--header {
+    @include constrain_narrow();
+    @include breakpoint(beta) {
+        text-align: left;
+        margin-top: 3em;
+        margin-bottom: .75em;
+    }
+    @include breakpoint(delta) {
+        margin-top: 4em;
+    }
+}
+.post--location {
+    @include smcaps;
+    @include fontsize(11);
+}
+.post--article {
+    h2, h3 {
+        @include constrain_narrow;
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        text-align: left;
+    }
+    blockquote {
+        @include constrain_narrow;
+        text-align: left;
+        padding: 20px;
+        font-style: italic;
+        p {
+            margin-left: 1em;
+            margin-right: 1em;
+        }
+    }
+    .notes {
+        @include smcaps;
+        @include constrain_narrow;
+        font-weight: normal;
+        text-align: left;
+        &:before {
+            @include faded_line_after;
+            margin-bottom: 3em;
+        }
+    }
+    .addendum {
+        @include constrain_narrow;
+        text-align: left;
+        dt { 
+            margin-left: -30px;
+            font-style: italic;
+            padding-left: 30px;
+            text-indent: -30px;    
+            margin-bottom: .5em;
+        }
+        dd { margin-left: 0; margin-bottom: 1.5em;}
+    }
+}
+
+//### FOOTNOTES ###
+.footnote {
+    @include constrain_narrow();
+    margin: 1em auto 0 auto;
+    padding:0;
+    list-style-position:inside;
+    list-style-type: none;
+    &:before {
+        @include breakpoint(beta) {
+            @include faded_line_after;
+            margin-bottom: 2em;
+        }
+    }
+    p {
+        font-size: 0.875em;
+        line-height: 1.4
+    }
+}
+.dark .footnote:before {
+    @include light_faded_line_after;
+}
+
+//### IMAGES AND FIGURES ###
+.postpic, .postpicright {
+  display: block;
+  width: auto;
+}
+.postpic {
+  float: left;
+  margin: 0.3em 10px 10px 0;
+}
+.postpicright {
+  float: right;
+  margin: 0.3em 0 10px 10px;
+}
+.postpicleft {
+  float: left;
+  margin: 5px;
+}
+.picfull {
+  margin-top: 20px;
+}
+.picwide {
+    clear: both;
+    margin: 1em 0;
+    @include breakpoint(gamma) {
+    margin-left: -140px;
+    width: 960px;
+    max-width: 960px;
+    }
+    @include breakpoint(delta) {
+        margin-left: -220px;
+        width: 1170px;
+        max-width: 1170px;
+    }
+}
+
+
+.figure {
+  position: relative;
+  max-width: 90%;
+  margin: 0 auto;
+    @include breakpoint(gamma) {
+        max-width: 640px;
+    }
+    @include breakpoint(delta) {
+        max-width: 680px;
+    }
+  .legend {
+    display: block;
+    @include transparent_class;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    font-size: 13px;
+    padding: 8px 0 8px 2%;
+    width: 98%;
+    background: $brown;
+    color: #999999;
+  }
+}
+
+
+//### PAGE NAVIGATION ###
+#page-navigation {
+    margin: 2em auto;
+    @include constrain_narrow();
+    text-align: center;
+    display: table;
+    ul {
+        margin: 0 auto;
+        width: 100%;
+        text-align: center;
+        padding: 0;
+    }
+    li {
+        margin: 6px auto;
+        clear: both;
+        line-height: 24px;
+        text-align: center;
+    }
+    span {
+        min-width: 70px;
+        display: block;
+        text-align: right;
+        margin-right: 10px;
+        margin-top: 2px;
+        float: left;
+    }
+    a {
+        display: block;
+        float: left;
+        text-align: left;
+        font-style: italic;
+        color: $brown;
+        text-decoration: none;
+    }
+}
+
+// ##############################################
+// On double and double-dark make the top wide
+// with two columns of text (nothing for ie9-
+// ##############################################
+@include breakpoint(gamma) {
+    .post--header--double {
+        float: left;
+        max-width: 200px;
+        margin-right: 2em;
+        .post--title, .post--date, .post--location {
+            text-align: right;
+        }
+        .post--title {
+            line-height: 1.1;
+            margin-top: 4px;
+        }
+    }
+    .col {
+        margin-top: 3rem;
+        -moz-column-count: 2;
+        -moz-column-gap: 30px;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 30px;
+        column-count: 2;
+        column-gap: 30px;
+        p { margin-top: 0; margin-bottom: 2em;}
+        p:first-of-type:first-letter {
+                @include fontsize(60);
+                line-height: 42px;
+                display: block;
+                float: left;
+                padding: 11px 8px 5px 0;
+        }
+    }
+}
+.post--article--double {
+    @include constrain_wide();
+}
+
+// ##############################################
+// On dark and double-dark pages we invert the 
+// colors, most of which happens in _global but
+// the page nav links need to be done here
+// ##############################################
+.dark #page-navigation a {
+    color: $body_font_light;
+}
+
+