wrote out basic notes skeleton

8 files changed, 542 insertions, 0 deletions

diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..dfe632a
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('carroisgothic-regular-webfont.eot');
+    src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('carroisgothic-regular-webfont.woff') format('woff'),
+         url('carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..e525c36
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,24 @@
+footer {
+    @include constrain_wide;
+    margin-top: 5em;
+    &:before {
+            @include faded_line_after;
+            margin-bottom: 1.2em;
+    }
+    nav {
+        text-align: center;
+    }
+    h4 {
+        @include fontsize(13);
+        font-family: helvetica,arial,sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin: 0 0 10px;
+    }
+    p {
+        @include fontsize(14);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+    }
+}
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
new file mode 100644
index 0000000..3dc8ee4
--- /dev/null
+++ b/design/sass/_forms.scss
@@ -0,0 +1,85 @@
+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);
+    color: lighten($body_font_color, 25);
+    line-height: 14px;
+    top: .7rem;
+    left: .75rem;
+    z-index: 1;
+}
+input {
+    border: 1px solid #b3b3b3;
+    border-radius: 4px;
+    padding: 2.2rem  0 .75rem .75rem;
+    width: 99%;
+    @include fontsize(24);
+}
+form .error input {
+    border: 1px solid $link_color;
+}
+.helptext {
+    @include fontsize(14);
+    color: lighten($body_font_color, 25);
+}
+.errorlist {
+    color: $link_color;
+    list-style-type: none;
+    padding: 0 0 0 1rem;
+    position: relative;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    tr {
+        margin: 2rem 0;
+    }
+    td, th {
+        display: table-cell;
+        vertical-align: inherit;
+        margin: 0;
+        padding: 16px .25rem 14px;
+        border-bottom: 1px solid #b3b3b3;
+    }
+    th {
+        @include fontsize(13);
+        @include smcaps;
+        width: 200px;
+    }
+    td {
+        width: 200px;
+    }
+    &:after {
+        display: block;
+        @extend %clearfix;
+    }
+    .btn { float: right;}
+}
+.btn {
+    @include fontsize(15);
+    display: inline-block;
+    border-radius: 4px;
+    -webkit-appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    background: $link_color;
+    color: #fff !important;
+    border: 1px solid $link_color;
+    padding: 5px 9px;
+    white-space: nowrap;
+    &:hover {
+        background: $link_hover_color;
+        border: 1px solid $link_hover_color;
+    }
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
new file mode 100644
index 0000000..9a01c61
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,196 @@
+body {
+    margin: 0 auto;
+    padding: 0;
+    overflow-x: hidden;
+    font:$body_p_font;
+    color: $body_font_color;
+    text-align: left;
+    background-color: transparent
+}
+ul {
+    padding: 0;
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $link_color;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    &:hover {
+        text-decoration: none;
+        color: $link_color;
+    }
+    &:visited {
+        color: $link_color;
+    }
+}
+p {
+    text-align: left;
+    @include fontsize(18);
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}
+blockquote {
+    @include fontsize(18);
+    display: block;
+    border-top: 4px solid lighten($body_font_light, 20);
+    border-bottom: 4px solid lighten($body_font_light, 20);
+    margin: 3rem 0;
+    position: relative;
+    text-align: left;
+    font-style: italic;
+    cite {
+      display: block;
+      text-align: right;
+    }
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+blockquote:before {
+    @include fancy_sans;
+    @include fontsize(68);
+    content: '\201C';
+    position: absolute;
+    top: -1rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3rem;
+    height: 2rem;
+    color: #666;
+    text-align: center;
+}
+hr {
+    border: 0; 
+    height: 1px;
+    @include faded_line_after;
+    margin: 3rem 0;
+}
+img {
+    max-width: 100%;
+}
+figure {
+    margin: 0;
+}
+figcaption {
+    text-align: left;
+}
+figcaption, figcaption a {
+    @include fancy_sans;
+    @include fontsize(14);
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px lighten($body_font_light, 20) solid;
+    margin-bottom: 1rem;
+}
+figcaption a:visited {
+    color: #666;
+}
+h1 {
+    font-family: $headline_font_serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+h2 {
+    font-family: $headline_font_serif;
+    @include fontsize(28);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(30);
+        line-height: 1.6;
+    }
+}
+h3 {
+    @include fancy_sans;
+    @include fontsize(24);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(28);
+        line-height: 1.4;
+    }
+}
+.wrapper {
+    @include constrain_wide;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+.alert, .error {
+    color: red !important;
+}
+//**************  other global classes ************************
+.sans {
+    @include generic_sans;
+}
+.bl {
+    @include smcaps;
+    @include fontsize(11);
+}
+.italic {
+    font-style: italic;
+}
+.small {
+    font-size: 90%;
+}
+.divide-after:after {
+    margin-bottom: 3em;
+    @include faded_line_after;
+}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..8b8c3da
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,55 @@
+.head-wrapper {
+    height: 65px;
+    box-shadow: 0 -1px 0 #e7e2ee inset;
+    background: #fff;
+}
+header {
+    @include constrain_wide;
+    .left {
+        float: left;
+        a {
+            display: inline-block;
+            padding-left: 0;
+        }
+    }
+    .right {
+        float: right;
+    }
+}
+nav {
+    @include fancy-sans-bold;
+    letter-spacing: 1px;
+    margin: 0 0 10px;
+    ul {
+        list-style-type: none;
+        padding: 0;
+        li {
+            display: inline;
+        }
+    }
+    a {
+        @include fontsize(14);
+        text-decoration: none;
+        color: #444;
+        font-weight: normal;
+        padding: 6px;
+        &:visited {
+            color: #444;
+        }
+        &:hover {
+            color: $link_color;
+        }
+    }
+    .btn {
+        display: inline-block;
+        background: transparent;
+        color: $link_color !important;
+        border: 1px solid $link_color;
+        border-radius: 4px;
+        &:hover {
+            color: white !important;
+            border-color: $link_color;
+            background-color: $link_color;
+        }
+    }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..1aeeb83
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,136 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #FC5D2B;
+$link_hover_color: #BD3039;
+$headline_font_serif: Georgia, 'Times New Roman', serif;
+
+$body_p_font: normal 100% / 1.5 "proxima-nova",helvetica,arial,sans-serif;
+$body_font_color: #6a6a6a;
+$body_font_light: #b3aeae;
+
+$archive_p_line_height: 1.6;
+//$light;
+$narrow-beta-width: 640px;
+$narrow-max-width: 700px;
+$max_width: 1280px;
+
+@mixin smcaps {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+@mixin plain_a {
+  border: none;
+  text-decoration: none;
+  color: $body_font_color;
+}
+
+@function calc-rem($size) {
+  $remsize: $size/16;
+  @return #{$remsize}rem;
+}
+
+@mixin fontsize($size) {
+  font-size: $size + px;
+  font-size: calc-rem($size);
+}
+
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+@mixin fancy-sans {
+    font-family: "proxima-nova",helvetica,arial,sans-serif;
+}
+@mixin fancy-sans-bold {
+    font-family: "proxima-nova",helvetica,arial,sans-serif;
+    font-weight: 600;
+}
+@mixin fancy-serif {
+    font-family: Georgia, Palatino, serif;
+}
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin faded_line_after {
+    display: block;
+    content: "";
+    margin-top: 3em;
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
+
+
+
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
new file mode 100644
index 0000000..3ea883f
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,29 @@
+$breakpoint-alpha: 728px; //728
+$breakpoint-beta: 824px; //784
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @if $point == "alpha-2" {
+        @media screen and (min-width:$breakpoint-alpha-2 ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "beta-2" {
+        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
new file mode 100644
index 0000000..a9e582e
--- /dev/null
+++ b/design/sass/screenv1.scss
@@ -0,0 +1,7 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_footer.scss";
+@import "_forms.scss";