summaryrefslogtreecommitdiff
path: root/design/sass
diff options
context:
space:
mode:
Diffstat (limited to 'design/sass')
-rw-r--r--design/sass/_content.scss236
-rw-r--r--design/sass/_fonts.scss35
-rw-r--r--design/sass/_footer.scss54
-rw-r--r--design/sass/_global.scss243
-rw-r--r--design/sass/_header.scss135
-rw-r--r--design/sass/_mixins.scss107
-rw-r--r--design/sass/_queries.scss23
-rw-r--r--design/sass/screenv1.scss7
8 files changed, 840 insertions, 0 deletions
diff --git a/design/sass/_content.scss b/design/sass/_content.scss
new file mode 100644
index 0000000..9a81b64
--- /dev/null
+++ b/design/sass/_content.scss
@@ -0,0 +1,236 @@
+.hero-wrapper {
+ @include fancy_sans;
+ padding: 5rem 0 0;
+ &:after {
+ @include faded_line_after;
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ padding: 0;
+ }
+}
+.circle-pic {
+ border-radius: 50%;
+ border: 5px solid #000;
+}
+.btn {
+ @include fontsize(14);
+ display: inline-block;
+ border-radius: 4px;
+ @include fancy_sans;
+ @include smcaps;
+ -webkit-appearance: none;
+ text-decoration: none;
+ cursor: pointer;
+ background: $link_color;
+ color: #fff !important;
+ border: 1px solid $link_color;
+ padding: 7px 9px;
+ white-space: nowrap;
+ &:hover {
+ background: $link_hover_color;
+ border: 1px solid $link_hover_color;
+ }
+}
+.btn-small {
+ @include fontsize(10);
+ @include smcaps;
+}
+.btn-hollow {
+ @include fontsize(17);
+ padding: 6px 8px;
+ border: none; //1px solid $body_font_light;
+ color: $link_color !important;
+ outline: $link_color !important;
+ background: white;
+ border: 1px solid $link_color;
+ &:hover {
+ background: $link_color !important;
+ color: white !important;
+ }
+}
+.hed-alpha {
+ @include fancy_serif;
+ line-height: 1.2;
+ font-weight: 600;
+}
+.hed-beta {
+ line-height: 1.4;
+}
+.hed-gamma {
+ line-height: 1.4;
+ @include fontsize(20);
+ @include fancy_sans;
+ text-align: center;
+ letter-spacing: 1px;
+ margin: 0 auto;
+}
+.hed-delta {
+ @include fancy_sans;
+ @include fontsize(22);
+ font-weight: bold;
+ margin-bottom: .5em;
+}
+.hed-epsilon {
+ @include fontsize(14);
+ @include fancy_sans;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-weight: bold;
+ color: $body_font_light;
+ line-height: 1.2;
+ text-align: center;
+ margin: 0;
+}
+.hed-border {
+ display: inline-block;
+ border-bottom: 3px solid #efefef;
+ width: auto;
+}
+.hero {
+ .hero-pic {
+ max-width: 50%;
+ margin: 1.5rem auto;
+ }
+ h3.hed-alpha {
+ @include fontsize(24);
+ }
+ .hed-beta {
+ @include fancy_sans;
+ @include fontsize(22);
+ margin: .5rem auto;
+ text-align: center;
+ &:last-of-type:after {
+ @include faded_line_after;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ }
+ @include breakpoint(beta) {
+ display: flex;
+ align-items: flex-start;
+ align-content: flex-start;
+ .hero-text {
+ margin-left: 5rem;
+ & > * {
+ text-align: left;
+ }
+ }
+ p {
+ width: 90%;
+ @include fontsize(20);
+ }
+ .btn {
+ margin-top: 1.5rem;
+ }
+ }
+}
+.home {
+ h4 {
+ @include fancy_sans;
+ text-align: center;
+ letter-spacing: 1px;
+ }
+ hr {
+ border-top: 3px solid #efefef;
+ margin: 5em auto;
+ width: 40%;
+ }
+}
+.border-wrapper {
+ margin: 2rem auto 0;
+}
+.home-logos {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ li {
+ margin: 0 .5rem;
+ }
+ img {
+ max-width: 80px;
+ }
+ @include breakpoint(gamma) {
+ @include constrain_wide;
+ margin: 0 auto;
+ img {
+ max-width: 120px;
+ }
+ }
+}
+
+
+.home-border-wrapper {
+ @include breakpoint(beta) {
+ margin-top: 4rem;
+ .btn {
+ margin-bottom: 4rem;
+ }
+ }
+ &:before {
+ @include faded_line_after;
+ margin-top: 0;
+ margin-bottom: 5rem;
+ }
+}
+
+.card-image {
+ max-height: 10rem;
+ overflow: hidden;
+ border: 4px $body_font_color solid;
+ img {
+ width: 100%;
+ margin-top: -14%;
+ }
+}
+.home-card-wrapper {
+ @include breakpoint(beta) {
+ margin-top: 4rem;
+ .btn {
+ margin-bottom: 4rem;
+ }
+ }
+ &:after {
+ @include faded_line_after;
+ margin-top: 0;
+ margin-bottom: 5rem;
+ }
+}
+.card {
+ margin: 4rem auto;
+ p {
+ margin-top: .5rem;
+ @include fontsize(18);
+ }
+ h5 {
+ @include fontsize(24);
+ text-align: center;
+ margin: 1rem 0 0 0;
+ }
+ &:after {
+ @include faded_line_after;
+ }
+ &:last-of-type:after {
+ display: none;
+ }
+ @include breakpoint(beta) {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: 0;
+ margin-top: 0;
+ margin-right: 2rem;
+ &:last-of-type {
+ margin-right: 0;
+ }
+ &:after {
+ display: none;
+ }
+ }
+}
+.flex {
+ @include breakpoint(gamma) {
+ display: flex;
+ justify-content: center ;
+ }
+}
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..77f6f7c
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,35 @@
+@font-face {
+ font-family: 'carrois_gothicregular';
+ src: url('/media/fonts/carroisgothic-regular-webfont.eot');
+ src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'),
+ url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
+@font-face {
+ font-family: 'mffweb';
+ src: url('/media/fonts/ffmpb.woff2') format('woff2');
+ src: url('/media/fonts/ffmpb.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'mffweb';
+ src: url('/media/fonts/ffmbi.woff2') format('woff2');
+ src: url('/media/fonts/ffmbi.woff') format('woff');
+ font-weight: 400;
+ font-style: italic;
+}
+
+
+@font-face {
+ font-family: 'mffnweb';
+ src: url('/media/fonts/ffmn.woff2') format('woff2');
+ src: url('/media/fonts/ffmn.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+}
+
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..1ff56b9
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,54 @@
+footer {
+ margin-top: 5em;
+ @include breakpoint(gamma) {
+ max-width: 960;
+ }
+ &:before {
+ @include breakpoint(beta) {
+ @include faded_line_after;
+ margin-bottom: 1.2em;
+ }
+ }
+ .footer-nav {
+ list-style-type: none !important;
+ margin-left: 0 !important;
+ border-top: 1px $body_font_color dotted;
+ border-bottom: 1px $body_font_color dotted;
+ padding: .5rem 0;
+ @include breakpoint(beta) {
+ border: none;
+ }
+ }
+ li {
+ display: inline;
+ margin: 0 .25em;
+ &:after {
+ content: "\00b7";
+ color: #999999;
+ padding-left: 0.75em;
+ }
+ a {
+ color: $secondary-link-color;
+ text-decoration: none;
+ }
+ ul { display:inline;}
+ }
+ li:last-of-type {
+ margin-right: 0;
+ &:after {
+ content: " ";
+ }
+ }
+ p {
+ @include fontsize(10);
+ text-align: center;
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+ }
+}
+#license {
+ @include fancy_sans;
+ @include fontsize(12);
+ text-transform: none;
+ letter-spacing: normal;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
new file mode 100644
index 0000000..719d23a
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,243 @@
+html {
+ border-top: 0.25em solid $body_font_color;
+}
+
+body {
+ margin: 0 auto;
+ padding: 0;
+ overflow-x: hidden;
+ font:$body_p_font;
+ color: $body_font_color;
+ text-align: center;
+ background-color: transparent
+}
+ul {
+ padding: 0;
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+ touch-action: manipulation;
+}
+a {
+ color: $body_font_color;
+ -webkit-transition: all 0.1s ease;
+ -moz-transition: all 0.1s ease;
+ -ms-transition: all 0.1s ease;
+ transition: all 0.1s ease;
+ text-decoration-color: $link_color;
+ &:hover {
+ text-decoration: none;
+ }
+ &:visited {
+ color: $body_font_color;
+ }
+}
+p {
+ @include fancy_serif;
+ @include fontsize(20);
+ text-align: left;
+ @include breakpoint(alpha){
+ @include fontsize(22);
+ line-height: 1.5;
+ }
+ @include breakpoint(beta){
+ @include fontsize(24);
+ 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;
+}
+audio {
+ max-width: 100%;
+ width: 100%;
+}
+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: -1.35rem;
+ 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(16);
+ 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 {
+ @include fancy_serif;
+ @include fontsize(36);
+ font-weight: normal;
+}
+h2 {
+ @include fancy_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);
+ text-align: left;
+ @include breakpoint(gamma){
+ @include fontsize(28);
+ line-height: 1.4;
+ }
+}
+h4 {
+ @include fontsize(20);
+ text-align: left;
+ @include breakpoint(gamma){
+ @include fontsize(22);
+ line-height: 1.4;
+ }
+}
+h5 {
+ @include fontsize(16);
+ text-align: left;
+ @include breakpoint(gamma){
+ @include fontsize(18);
+ line-height: 1.4;
+ }
+}
+.subhead {
+ font-size: 26px !important;
+ font-style: italic;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.subhead + p {
+ margin-top: .75rem !important;
+}
+.essay-intro .subhead + p:first-of-type {
+ margin-top: .75rem !important;
+}
+//************** Universals ************************
+.hide {
+ display: none;
+}
+.strike {
+ text-decoration: line-through;
+}
+.yes {
+ background: green !important;
+ color: white;
+}
+.no {
+ background: red !important;
+ color: white;
+}
+.alert {
+ color: red !important;
+}
+.small {
+ font-size: 90%;
+}
+.content {
+ @include constrain_wide;
+}
+.narrow {
+ @include constrain_narrow;
+}
+//**************** Page Breadcrumbs ************************
+
+#breadcrumbs {
+ @include constrain_wide();
+ padding: 0;
+ list-style-type: none;
+ text-align: center;
+ li {
+ display: inline;
+ }
+ a {
+ color: $secondary-link-color;
+ }
+ @include breakpoint(gamma) {
+ text-align: left;
+ }
+}
+
+
+.list-inline {
+ @extend %clearfix;
+ list-style-type: none;
+ padding: none;
+ li {
+ margin: 1rem;
+ }
+}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..431897e
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,135 @@
+.header-wrapper {
+}
+
+#logo {
+ a {
+ @include fontsize(32);
+ line-height: 1;
+ text-decoration: none;
+ display: block;
+ font-weight: 300;
+ font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+ color: $body_font_color;
+ }
+ .tagline {
+ display: block;
+ @include fancy_sans;
+ @include smcaps;
+ @include fontsize(12);
+ font-style: normal;
+ margin-left: 2px;
+ }
+}
+.site-banner {
+ @extend %clearfix;
+ margin: 0 auto;
+ @include constrain_wide;
+ @include smcaps;
+ nav {
+ border-top: 1px #444444 dotted;
+ border-bottom: 1px #444444 dotted;
+ //box-shadow: 0 3px 8px 0 #e6e6e6
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-right: -20px;
+ margin-left: -20px;
+ margin-top: 1em;
+ padding: 0.25em 0.5em;
+ a {
+ text-decoration: none;
+ color: #505050;
+ &:visited {
+ color: #505050
+ }
+ }
+ ul {
+ @include smcaps;
+ @include fancy_sans;
+ @include fontsize(15);
+ max-width: 100%;
+ font-weight: 600;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em !important;
+ padding: 0;
+ @include constrain(85%);
+ }
+ li {
+ display: inline;
+ margin: 0 0.25em;
+ &:after {
+ content: "\00b7";
+ color: #999999;
+ padding-left: 0.75em;
+ }
+ &:last-of-type {
+ margin-right: 0;
+ &:after {
+ content: " ";
+ }
+ }
+ }
+ @include breakpoint(beta) {
+ }
+ }
+ @include breakpoint(beta) {
+ height: 90px;
+ position: relative;
+ #logo {
+ float: left;
+ position: absolute;
+ bottom: 28%;
+ text-align: left;
+ a {
+ width: 360px;
+ &:before {
+ display: inline-block;
+ background-size: 102px;
+ //if sox
+ #background: url("img/soxlogo.svg") center bottom no-repeat;
+ #background-size: 70px;
+ height: 85px;
+ width: 105px;
+ //if sox
+ #width: 80px;
+ margin-right: 10px;
+ }
+ }
+ .sitesubtitle {
+ margin-left: 116px;
+ //if sox
+ #margin-left: 90px;
+ margin-top: -30px;
+ }
+ }
+ nav {
+ float: right;
+ border: none;
+ margin: 22px 0 0 0;
+ padding: 0;
+ ul {
+ max-width: 50em;
+ }
+ }
+ }
+}
+
+.header-wrapper {
+ @extend %clearfix;
+ @include breakpoint(beta) {
+ border-bottom: 1px #f3efef solid;
+ position: relative;
+ }
+ @include breakpoint(gamma) {
+ max-width: $breakpoint-gamma;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ @include breakpoint(delta) {
+ margin-top: 1.3rem;
+ max-width: $breakpoint-delta;
+ }
+ @include breakpoint(epsilon) {
+ margin-top: 1.3rem;
+ max-width: $max_width;
+ }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..f12888e
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,107 @@
+
+$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+$body_font_color: #222;
+$link_color: #b53a04;
+$body_font_light: #787474;
+$secondary-link-color: #838383;
+$narrow-beta-width: 720px;
+$narrow-max-width: 750px;
+$max_width: 1140px;
+$link_hover_color: #b53a04;
+
+$home-palette-primary: #14cfe7;
+
+@mixin smcaps {
+ @include fancy_sans;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+@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 generic-serif {
+ font-family: Georgia, 'Times New Roman', serif;
+}
+@mixin fancy-sans {
+ font-family: mffnweb, Helvetica, sans-serif;
+}
+@mixin fancy-serif {
+ font-family: mffweb, Georgia, 'Times New Roman', 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));
+}
+
+//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: 94%;
+ 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: 94%;
+ 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..5b7dadc
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,23 @@
+$breakpoint-alpha: 420px;
+$breakpoint-beta: 728px;
+$breakpoint-gamma: 824px;
+$breakpoint-delta: 960px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+ @if $point == "alpha" {
+ @media screen and (min-width:$breakpoint-alpha ){ @content; }
+ }
+ @else if $point == "beta" {
+ @media screen and (min-width: $breakpoint-beta) { @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..f1a1f72
--- /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 "_content.scss";
+@import "_footer.scss";
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-02-22 22:25:43 +0000