Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

1 files changed, 206 insertions, 0 deletions

diff --git a/design/sass/_projects.scss b/design/sass/_projects.scss
new file mode 100644
index 0000000..fb3f530
--- /dev/null
+++ b/design/sass/_projects.scss
@@ -0,0 +1,206 @@
+.projects, .projects--intro p {
+    @include constrain_wide;
+}
+@include breakpoint(gamma) {
+    .projects--intro {
+        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;
+    }
+}
+.projects--list {
+    margin-top: 2em;
+    li { @extend %clearfix; margin-bottom: 2em; }
+    h1 {
+        @include fontsize(32);
+        a {
+            color: $body_font;
+            text-decoration: none;
+        }
+    }
+    @include breakpoint(gamma) {
+        h1 {
+            @include fontsize(24);
+            text-align: left;
+            font-weight: bold;
+            width: 40%;
+            float: left;
+            margin-top: -4px;
+            }
+        img { 
+            float: right; 
+            margin-left: 30px;
+        }
+        p { 
+            @include constrain_wide; 
+            @include fontsize(17);
+            margin-right: 1em;
+            clear: left;
+        }
+    }
+    .projects--button { text-align: left; margin-left: 0}
+}
+
+//################# NATIONAL PARKS PROJECT #######################
+
+.main--full {
+    @include constrain_wide;
+    margin-top: 3em;
+    article { max-width: 100%; position: relative; margin-bottom: 3em;}
+    img { max-width: 100%; padding: 0;}
+    .buttons li {
+        display: inline;
+        @include fontsize(11);
+        text-transform: uppercase;
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        font-weight: 500;
+        margin: 5px;
+        line-height: 2.6em;
+        a {
+            color: $body_font_light;
+        }
+    }
+    @include breakpoint(beta) {
+        h2  { 
+            text-align: left;
+            @include fontsize(14);
+        }
+        .buttons {
+            margin: 2px 10px .5em 0;
+            line-height: 2.6em;
+            float: right;
+            li {
+                a { 
+                    text-decoration: none; 
+                    padding: 0.75em 1.5em 0.65em;
+                    background: #463215;
+                    -moz-border-radius: 25px;
+                    -webkit-border-radius: 25px;
+                    border-radius: 25px;
+                }
+            }
+        }
+    @include breakpoint(gamma) {
+        h2 {         @include fontsize(20);
+        }
+        .buttons {
+            margin: 0.5em 10px 0 0;
+            li a {
+                padding: 0.875em 1.75em 0.75em;
+            }
+        }
+    }
+
+}
+    .meta {height: 0;}
+}
+
+.park--title {
+    @include fontsize(18);
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    color: white;
+    @include breakpoint(beta) {
+        @include transparent_class;
+        @include fontsize(32);
+        position: absolute;
+        top: 0px;
+        background: #201a11;
+        z-index: 1000;
+        margin: 0;
+        width: 100%;
+        text-align: left;
+        line-height: 2em;
+        font-size: 2em;
+        padding-left: 0.25em;
+}
+}
+.park--subtitle {
+    @include fontsize(16);
+    @include breakpoint(beta) {
+        @include fontsize(20);
+        font-family: Helvetica Neue, Helvetica, sans-serif;
+        font-weight: normal;
+        line-height: 2.5;
+        color: white;
+        margin: 0 0 0 1em;
+        float: left;
+        padding: 0.3em 0;
+    }
+}
+.park--legend {
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    line-height: .6;
+    @include breakpoint(beta) {
+        @include transparent_class;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        margin: 0;
+        background: #201a11;
+    }
+}
+.map-container {
+  width: 469px;
+  height: 392px;
+  position: absolute;
+  right: 20px;
+  bottom: 60px;
+  z-index: 2000;
+  margin: 0;
+  padding: 0;
+  background: url("/media/img/mapbg-dark.png") no-repeat top left;
+}
+
+.map-wrapper {
+  width: 400px;
+  height: 328px;
+  margin: 37px 0 0 44px;
+}
+
+.more-container {
+  width: 405px;
+  height: 260px;
+  position: absolute;
+  right: -30px;
+  bottom: 40px;
+  z-index: 2000;
+  background: url("/media/img/parkbg.png") no-repeat top left;
+  font: normal 0.9em / 25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif;
+  dl {
+    margin-top: 45px;
+    margin-left: 45px;
+    text-align: left;
+    dt,dd {
+      margin: 4px 0;
+      color: white;
+    }
+    dt {
+      clear: left;
+      float: left;
+      width: 65px;
+      //border-bottom: 1px solid #999
+      font-weight: bold;
+      line-height: 25px;
+      font-size: 0.7em;
+      text-transform: uppercase;
+      text-align: right;
+      margin-right: 8px;
+    }
+    dd {
+      float: left;
+      width: 250px;
+      overflow: hidden;
+      //border-bottom: 1px solid #999
+      a:hover {
+        color: $orange;
+      }
+    }
+  }
+}