Organize CSS, SASS, images

Also begin restyling project cards

sass/covers.scss

@@ -0,0 +1,4 @@
+// covers.scss
+#sierra {
+    background-image: url("../images/ChuckNew.jpg");
+}

sass/style.scss

@@ -0,0 +1,174 @@
+//setup
+$width: 800px;
+$grey: #ccc;
+$pink: #ed1a76;
+$greybg: rgba(0, 0, 0, .5);
+.reset {
+    padding: 0px;
+    margin: 0px;
+    clear: both;
+}
+
+@import 'covers';
+
+/*
+ * sections
+ */
+
+body {
+    @extend .reset;
+    font-family: serif;
+    font-size: 1em;
+    line-height: 1.6;
+    transition: none;
+}
+
+#top {
+    padding-top: 10px;
+    width: 100%;
+    position: fixed;
+    background: black;
+    div {
+        margin: auto;
+        max-width: $width;
+    }
+}
+
+#mast {
+    margin-top: 10px;
+    background: none;
+    line-height: 1.2;
+    color: white;
+    a {
+        color: white;
+        font-style: italic;
+    }
+    a:hover {
+        color: $pink;
+    }
+    .sub {
+        font-style: italic;
+        color: $grey;
+    }
+    img {
+        transition-duration: .2s;
+    }
+    .hideable {
+        // transition-property: size;
+        // transition-duration: .2s;
+    }
+    h2 {
+        transition-property: size;
+        transition-duration: .2s;
+    }
+}
+
+//small and large classes are applied to #top
+.small {
+    .hideable {
+        display: none;
+        opacity: 0;
+    }
+    img {
+        max-width: 200px;
+    }
+    h2 {
+        font-size: 1em;
+    }
+}
+
+.large {
+    img {
+        width: 100%;
+        max-width: 400px;
+    }
+    .hideable {
+        opacity: 1;
+    }
+}
+
+.nojs {
+    body {
+        background: white;
+    }
+    #mast {
+        background: black;
+    }
+}
+
+
+/*
+ * standalone elements
+ */
+
+// the standard section element */
+.slide {
+    @extend .reset;
+    padding: 0px;
+    width: 100%;
+    /* width wrapping */
+    div {
+        max-width: $width;
+        margin: auto;
+        /* Project bits */
+        .project {
+            transition-duration: .2s;
+            width: $width/2 - 10;
+            border: 1px solid #aaa;
+            border-radius: 5px;
+            padding: 0px;
+            display: inline-block;
+            margin: 3px;
+            overflow: hidden;
+            .cover {
+                height: 300px;
+                background-position: center center;
+                background-size: cover;
+                margin: 0px;
+            }
+            h2 {
+                margin: .5em 0 0 1em;
+                padding: 0;
+            }
+            p {
+                margin: 0 0 0 1.5em;
+                text-indent: 0;
+            }
+        }
+        .project:hover {
+            box-shadow: 1px 1px 3px #333;
+        }
+    }
+    table {
+        line-height: 1.3;
+        margin: 0;
+        padding: 2px;
+        border-spacing: 0;
+        border-collapse: collapse;
+        vertical-align: text-top;
+    }
+    ul {
+        margin: 5px;
+    }
+    p {
+        text-indent: 1em;
+        max-width: $width;
+        margin: auto;
+    }
+    h1 {
+        font-size: 2em;
+        font-style: italic;
+        max-width: $width;
+        margin: auto;
+        margin-top: 1.7em;
+    }
+}
+
+h2 {
+    font-weight: normal;
+    font-style: italic;
+}
+
+a {
+    transition-duration: .2s;
+}