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, 113 insertions, 0 deletions

diff --git a/design/sassold/_forms.scss b/design/sassold/_forms.scss
new file mode 100644
index 0000000..4e0227b
--- /dev/null
+++ b/design/sassold/_forms.scss
@@ -0,0 +1,113 @@
+.generic-form {
+    margin: 2rem 0;
+    @extend %clearfix;
+    fieldset {
+        padding: 0;
+        border: none;
+        width: 100%;
+        position: relative;
+    }
+    input[type=email] {
+        width: 210px;
+        @include fontsize(18);
+        background-color: #fff;
+        border: 2px solid darken(#efefef, 10);
+        border-radius: 5px;
+        height: 2.2rem;
+        padding: 4px 4px 4px 8px;
+        margin-right: .5rem;
+        @include breakpoint(omega){
+            width: 92%;
+        }
+        @include breakpoint(alpha){
+            width: 96%;
+        }
+    }
+    label { 
+        display: block;
+        visibility: hidden;
+        width: 0;
+        height: 0;
+    }
+    .btn-hollow {
+        @include fontsize(16);
+        display: inline-block;
+        padding: 10px 15px;
+        margin-bottom: 0;
+        line-height: 20px;
+        text-align: center;
+        vertical-align: middle;
+        cursor: pointer;
+        color: #ddd;
+        border: 0;
+        border-radius: 5px;
+        font-weight: bold;
+        transition: all 0.2s ease;
+        background: $orange;
+        &:hover {
+            color: white;
+        }
+    }
+}
+.flex {
+    display: flex;
+    .btn, .btn-hollow {
+        flex-basis: 10%;
+    }
+}
+
+
+form fieldset {
+    margin: 1rem 0;
+    padding: 0;
+    border: none;
+    width: 100%;
+    position: relative;
+}
+form fieldset label {
+    position: absolute;
+    -webkit-transform: translate3d(10px, 100%);
+    -moz-transform: translate3d(10px, 100%);
+    -ms-transform: translate3d(10px, 100%);
+    -o-transform: translate3d(10px, 100%);
+    transform: translate3d(10px, 100%);
+    @include fontsize(14);
+    @include fancy_sans;
+    color: lighten($body_font_color, 25);
+    line-height: 14px;
+    top: .7rem;
+    left: .75rem;
+    z-index: 1;
+}
+input, .textarea-rounded textarea {
+    border: 1px solid #dedddd;
+    border-radius: 4px;
+    padding: 2.2rem  0 .75rem .75rem;
+    width: 96%;
+    @include fontsize(24);
+    @include fancy_sans;
+}
+
+.btn {
+    @include fontsize(15);
+    display: inline-block;
+    border-radius: 4px;
+    -webkit-appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    background: $link_color;
+    color: #fff;
+    border: 1px solid $link_color;
+    padding: 7px 14px;
+    white-space: nowrap;
+    &:hover {
+        background: $link_color;
+        border: 1px solid $link_color;
+    }
+}
+.newsletter-subscribe {
+    margin: 3rem 0;
+    fieldset {
+        margin: 0;
+    }
+}