Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

1 files changed, 186 insertions, 0 deletions

diff --git a/design/sassold/_src.scss b/design/sassold/_src.scss
new file mode 100644
index 0000000..1896979
--- /dev/null
+++ b/design/sassold/_src.scss
@@ -0,0 +1,186 @@
+pre{
+    white-space: pre-wrap;    
+}
+.latest {
+    @include constrain_narrow;
+    @include fontsize(12);
+    @include smcaps;        
+    font-weight: 400;
+}
+.src-archive {
+    @include constrain_narrow;
+    .topic-hed {
+        @include fontsize(20);
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+        @include breakpoint(beta) {
+            @include fontsize(28);
+            margin-top: 1em;
+        }
+    }
+    article {
+        margin-bottom: 3em;
+        p { 
+            color: lighten($body_font_color, 15);
+        }
+    }
+    h2 {
+        @include fontsize(22);
+        font-weight: 400;
+        margin-bottom: .25em;
+        a {
+            color: $body_font_color;
+            color: lighten($body_font_color, 15);
+            text-decoration: none;
+        }
+    }
+
+    p {
+        text-align: left;
+        @include fontsize(16);
+    }
+
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.src-topics {
+    @include smcaps;
+    @include fontsize(11);
+}
+.src article {
+    ul { 
+        @include constrain_narrow;
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+    ul li {
+        text-align: left;
+        list-style: none;
+        margin-left: .5rem;
+        padding-left: .5rem;
+        font-size: 1.5rem;
+    }
+    ul li:before {
+         content:"·";
+         display: inline-block;
+         vertical-align: bottom;
+         font-size: 2.8rem;
+         margin-right: 1rem;
+         line-height: 2.8rem;
+    }
+    ol {
+        text-align: left;
+        @include constrain_narrow;
+        padding-left: 1em;
+        @include fontsize(18);
+        @include breakpoint(beta) {
+            max-width: 580px;
+            @include fontsize(17);
+        }
+        li {
+            margin-top: .75em;
+        }
+    }
+    .footnote ol {
+        list-style-position: outside;
+        @include breakpoint(beta) {
+            max-width: 680px;
+        }
+    }
+    p code, li code {
+        @include fontsize(20);
+        padding: 3px;
+        background: #eaeaea;
+    }
+    h3 {
+        font-family: $fancy_serif;
+        @include fontsize(32);
+        margin: 3.5rem 0 1rem;
+        //letter-spacing: 1px;
+        //border-bottom: 1px #a19d9d dotted;
+        //text-transform: uppercase;
+    }
+    h5 {
+        @include fontsize(22);
+        margin: 3rem 0 -.75rem 0;
+        text-transform: uppercase;
+        border-bottom: 1px #a19d9d dotted;
+        @include fancy_sans;
+        text-align: left;
+    }
+}
+
+.highlight {
+    padding: 1rem;
+    margin-bottom: 1em;
+    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
+    // I tweaked it slightly to add a bit of margin
+    width: 50vw;
+    position: relative;
+    left: 33%;
+    right: 33%;
+    margin-left: -20vw;
+    margin-right: -20vw;
+    pre {
+    }
+}
+.go:before {
+    content: "$ ";
+}
+code > .comment::after {
+    display:none;
+}
+#book-page .book-list {
+    @include constrain_narrow;
+    @include breakpoint(beta) {
+        .book-list-item {
+            width: 45%; 
+        }
+    }
+}
+#book-page section {
+    @include constrain_narrow;
+    max-width: 100%;
+    @include breakpoint(gamma) {
+        margin-left: 80px;
+        p {
+            margin-left: 0;
+        }
+    }
+}
+.paypal-form-wrapper {
+    @include constrain_narrow;
+    text-align: left;
+        @include breakpoint(gamma) {
+        form {
+            margin: 2em 5em;
+        }
+    }
+}
+
+@include breakpoint(beta) {
+    .btn-top {
+        margin-left: 1.2em
+    }
+    .btn-bottom {
+        margin-left: 5em;
+    }
+}
+
+.dotted {
+    list-style-type: disc;
+    li {
+        margin-top: .5em;
+        margin-bottom: .5em;
+    }
+    @include breakpoint(gamma) {
+        font-size: 1.25rem;
+        line-height: 1.6;
+    }
+}
+#donate p {
+    @include fancy_sans;
+    @include fontsize(18);
+    line-height: 1.4;
+}