From a0b95dc2dfb84c682bb8f677e5d471f84e5028fe Mon Sep 17 00:00:00 2001 From: luxagraf Date: Wed, 14 Nov 2018 13:17:42 -0600 Subject: wrote out basic notes skeleton --- design/sass/_fonts.scss | 10 +++ design/sass/_footer.scss | 24 ++++++ design/sass/_forms.scss | 85 ++++++++++++++++++++ design/sass/_global.scss | 196 ++++++++++++++++++++++++++++++++++++++++++++++ design/sass/_header.scss | 55 +++++++++++++ design/sass/_mixins.scss | 136 ++++++++++++++++++++++++++++++++ design/sass/_queries.scss | 29 +++++++ design/sass/screenv1.scss | 7 ++ 8 files changed, 542 insertions(+) create mode 100644 design/sass/_fonts.scss create mode 100644 design/sass/_footer.scss create mode 100644 design/sass/_forms.scss create mode 100644 design/sass/_global.scss create mode 100644 design/sass/_header.scss create mode 100644 design/sass/_mixins.scss create mode 100644 design/sass/_queries.scss create mode 100644 design/sass/screenv1.scss (limited to 'design/sass') 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"; -- cgit v1.2.3-70-g09d2