summaryrefslogtreecommitdiff
path: root/design/sass
diff options
context:
space:
mode:
Diffstat (limited to 'design/sass')
-rw-r--r--design/sass/_fonts.scss15
-rw-r--r--design/sass/_footer.scss18
-rw-r--r--design/sass/_global.scss22
-rw-r--r--design/sass/_header.scss14
-rw-r--r--design/sass/_homepage.scss138
-rw-r--r--design/sass/_mailing-list.scss39
-rw-r--r--design/sass/_mixins.scss7
-rw-r--r--design/sass/_writing_details.scss6
-rw-r--r--design/sass/screenv8.scss3
9 files changed, 235 insertions, 27 deletions
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index 5f96654..2553e22 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -10,9 +10,18 @@
}
@font-face {
- font-family: "trumpgoteasmed";
- src: url("trumpgoteasmed-webfont.eot");
- src: url("trumpgoteasmed-webfont.eot?#iefix") format("embedded-opentype"), url("trumpgoteasmed-webfont.woff") format("woff"), url("trumpgoteasmed-webfont.ttf") format("truetype"), url("trumpgoteasmed-webfont.svg#trumpgoteasmed") format("svg");
+ font-family: "robotoslab";
+ src: url("robotoslab-regular-webfont.eot");
+ src: url("robotoslab-regular-webfont.eot?#iefix") format("embedded-opentype"), url("robotoslab-regular-webfont.woff") format("woff"), url("robotoslab-regular-webfont.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+@font-face {
+ font-family: "robotoslab-bold";
+ src: url("robotoslab-bold-webfont.eot");
+ src: url("robotoslab-bold-webfont.eot?#iefix") format("embedded-opentype"), url("robotoslab-bold-webfont.woff") format("woff"), url("robotoslab-bold-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index 84def82..27ccd20 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -19,17 +19,31 @@ footer[role="contentinfo"] {
}
li {
display: inline;
- margin: 0 .125em;
+ margin: 0 .25em;
+ &:after {
+ content: "\00b7";
+ color: #999999;
+ padding-left: 0.75em;
+ }
a {
color: $brown;
text-decoration: none;
}
}
+ li:last-of-type {
+ margin-right: 0;
+ &:after {
+ content: " ";
+ }
+ }
p {
@include fontsize(10);
+ text-align: center;
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
}
}
-.dark footer[role="contentinfo"] {
+.black footer[role="contentinfo"], .dark footer[role="contentinfo"] {
&:before {
@include light_faded_line_after;
}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 346f44b..7b47418 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -85,6 +85,26 @@ h1 {
@include fontsize(11);
}
+.mailing-list--wrapper {
+ @include constrain_narrow;
+ @include breakpoint(gamma) {
+ margin-top: 6em;
+ max-width: 580px;
+ h5 {
+ margin-bottom: .5em;
+ margin-top: 5em;
+ }
+ }
+ h5 {
+ font-weight: normal;
+ text-align: left;
+ @include fontsize(18);
+ }
+ &:before {
+ @include faded_line_after;
+ margin-top: 5em;
+ }
+}
//**************** Page Breadcrumbs ************************
@@ -100,7 +120,7 @@ h1 {
}
}
-.dark #breadcrumbs a, .black #breadcrumbs a {
+.black #breadcrumbs a {
color: $body_font_light;
}
//************* Dark Pages *********************
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index a89636c..da9e41a 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -59,15 +59,9 @@ header[role="banner"] {
}
.black header h1 a, .dark header h1 a {
color: $body_font_light;
- &:before {
- background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
- background-size: 90px;
- }
- @include breakpoint(beta) {
- &:before {
- background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
- background-size: 92px;
- }
+ &:before {
+ background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
+ background-size: 92px;
}
}
@@ -111,7 +105,7 @@ nav[role="navigation"] {
}
}
@include breakpoint(beta) {
- float: left;
+ float: right;
border: none;
margin: 52px 0 0 0;
padding: 0;
diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss
new file mode 100644
index 0000000..d153cf6
--- /dev/null
+++ b/design/sass/_homepage.scss
@@ -0,0 +1,138 @@
+.homepage--bottom-wrapper {
+ @include constrain_wide;
+ @extend %clearfix;
+ &:before {
+ @include faded_line_after;
+ }
+}
+.homepage--arc-header {
+ @include fontsize(14);
+ font-family: sans-serif;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ margin-bottom: 2em;
+ @include breakpoint(beta) {
+ text-align: left;
+ }
+}
+.archive--homepage {
+ @include breakpoint(beta) {
+ article {
+ display: block;
+ width: 100%;
+ text-align: left;
+ }
+ }
+ @include breakpoint(gamma) {
+ float: left;
+ margin-top: 0;
+ margin-right: 3em;
+ article {
+ width: 620px;
+ margin-left: 0;
+ }
+ }
+ @include breakpoint(delta) {
+ article {
+ width: 780px;
+ margin-left: 0;
+ }
+ }
+}
+.dark .archive--homepage {
+
+}
+.homepage--bright {
+ @include breakpoint(gamma) {
+ float: left;
+ width: 250px;
+ }
+}
+.homepage--next {
+ padding: 6px 0;
+ @include smcaps;
+ text-decoration: none;
+ &:after {
+ content: "\21E2";
+ margin-left: 4px;
+ }
+}
+.has-hero {
+ .header-wrapper {
+ margin-bottom: 0;
+ }
+ .homepage--hero {
+ border: 0;
+ padding: 0;
+ max-width: 100%;
+ position: relative;
+ z-index: 1;
+ }
+ .post--image { margin-left: 5px;}
+ .hero--wrapper {
+ @include constrain_wide;
+ position: relative;
+ z-index: 100;
+ background: rgb(0, 0, 0);
+ background: rgba(0, 0, 0, 0.6);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+ filter: alpha(opacity = 70);
+ color: $body_font_light;
+ font-weight: 400;
+ padding-bottom: 30px;
+ p { max-width: 100%; }
+ a { color: $body_font_light;}
+ time {display: none;}
+ .btn {text-decoration: none; color: white; }
+ @include breakpoint(gamma) {
+ margin-top: -218px;
+ max-width: 100%;
+ padding-left: 5px;
+ .btn { margin-top: -15px}
+ }
+ }
+ .main--header {
+ margin-bottom: 12px;
+ font-family: 'robotoslab', Georgia, Times;
+ padding-top: .25em;
+ a {
+ color: white;
+ text-decoration: none;
+ }
+ }
+ .main--location {
+ @include fontsize(9);
+ text-align: center;
+ margin-top: -12px;
+ margin-bottom: 22px;
+ }
+ .main--tag {
+ color: white;
+ text-align: center;
+ @include breakpoint(gamma) {
+ margin-top: -10px;
+ }
+ }
+}
+.homepage--about {
+ &:after, &:before {
+ @include faded_line_after;
+ }
+ @include breakpoint(gamma) {
+ p {
+ @include fontsize(18);
+ }
+}
+}
+.black .archive--homepage .post--title a {
+ color: white;
+}
+.black .archive--homepage .post--location a {
+ color: $body_font_light;
+}
+.black .homepage--about {
+ &:after, &:before {
+ @include lighter_faded_line_after;
+ }
+}
diff --git a/design/sass/_mailing-list.scss b/design/sass/_mailing-list.scss
index 71df3e4..95366b8 100644
--- a/design/sass/_mailing-list.scss
+++ b/design/sass/_mailing-list.scss
@@ -1,11 +1,34 @@
//Flexbox mixins rely on https://github.com/timhettler/compass-flexbox
-
-.b-form {}
-.b-form__object--flex { @include display-flex; }
-.b-form__object--fillspace {
- /* This element will receive priority of size.
- /* All other elements will be sized at the size dictated by their display type */
+.mailing-list {
+ text-align: left;
+ .form--flex-container {
+ @include display-flex;
+ }
+}
+.form--label {
+ display: block;
+ font-weight: 600;
+ letter-spacing: 1px;
+ font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+ @include fontsize(12);
+ margin-bottom: 6px;
+}
+.form--input {
@include flex-grow(1);
- & + .b-form__object--fillspace-gap { margin-left: .5em; }
+ padding: .25em;
+ border: #c5c5c5 1px solid;
+ border-radius: .125em;
+ color: darken($body_font_light, 20);
+}
+.btn {
+ display: inline-block;
+ margin-left: 5px;
+ border-radius: .25em;
+ border: none;
+ padding: 8px 12px 7px;
+ max-width: 8.75em;
+ background: $orange;
+ color: white;
+ font: bold .75em Verdana,sans-serif;
+ text-transform: uppercase;
}
-.b-form__label { display: block;}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 737f157..71246bb 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -59,6 +59,13 @@ $body_font_light: #b3aeae;
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;
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index ce44693..8f0a9a9 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -111,9 +111,9 @@
max-width: 960px;
}
@include breakpoint(delta) {
- margin-left: -220px;
- width: 1170px;
- max-width: 1170px;
+ margin-left: -245px;
+ width: 1155px;
+ max-width: 1155px;
}
}
diff --git a/design/sass/screenv8.scss b/design/sass/screenv8.scss
index 58bd5af..931f107 100644
--- a/design/sass/screenv8.scss
+++ b/design/sass/screenv8.scss
@@ -1,3 +1,4 @@
+@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox
@import "_normalize.scss";
@import "_fonts.scss";
@import "_mixins.scss";
@@ -12,6 +13,8 @@
@import "_leaflet.scss";
@import "_map.scss";
@import "_projects.scss";
+@import "_homepage.scss";
+@import "_mailing-list.scss";
//@import "_tablet.sass";
//@import "_inbox.scss";
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-03-02 22:33:37 +0000