summaryrefslogtreecommitdiff
path: root/design/sass
diff options
context:
space:
mode:
Diffstat (limited to 'design/sass')
-rw-r--r--design/sass/_fonts.scss20
-rw-r--r--design/sass/_footer.scss40
-rw-r--r--design/sass/_global.scss116
-rw-r--r--design/sass/_header.scss151
-rw-r--r--design/sass/_inbox.scss0
-rw-r--r--design/sass/_mailing-list.scss11
-rw-r--r--design/sass/_map.scss73
-rw-r--r--design/sass/_mixins.scss94
-rw-r--r--design/sass/_normalize.scss1
-rw-r--r--design/sass/_notes.scss167
-rw-r--r--design/sass/_photos.scss203
-rw-r--r--design/sass/_projects.scss206
-rw-r--r--design/sass/_queries.scss23
-rw-r--r--design/sass/_writing_archive.scss111
-rw-r--r--design/sass/_writing_details.scss230
-rw-r--r--design/sass/screenv8.scss20
-rw-r--r--design/sass/v6/_480.sass456
-rw-r--r--design/sass/v6/_768.sass440
-rw-r--r--design/sass/v6/_992.sass169
-rw-r--r--design/sass/v6/_leaflet.scss1
-rw-r--r--design/sass/v6/_mixins.sass16
-rw-r--r--design/sass/v6/_typography.sass318
-rw-r--r--design/sass/v6/ie.sass49
-rw-r--r--design/sass/v6/stylesv6.sass50
24 files changed, 2965 insertions, 0 deletions
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..5f96654
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,20 @@
+@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;
+
+}
+
+@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-weight: normal;
+ font-style: normal;
+}
+
+
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..84def82
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,40 @@
+footer[role="contentinfo"] {
+ margin-top: 5em;
+ @include breakpoint(gamma) {
+ max-width: 960;
+ }
+ &:before {
+ @include breakpoint(beta) {
+ @include faded_line_after;
+ margin-bottom: 1.2em;
+ }
+ }
+ ul {
+ border-top: 1px $brown dotted;
+ border-bottom: 1px $brown dotted;
+ padding: .5rem 0;
+ @include breakpoint(beta) {
+ border: none;
+ }
+ }
+ li {
+ display: inline;
+ margin: 0 .125em;
+ a {
+ color: $brown;
+ text-decoration: none;
+ }
+ }
+ p {
+ @include fontsize(10);
+ }
+}
+.dark footer[role="contentinfo"] {
+ &:before {
+ @include light_faded_line_after;
+ }
+ a {
+ color: $body_font_light;
+}
+}
+
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
new file mode 100644
index 0000000..346f44b
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,116 @@
+html {
+ border-top: 0.25em solid $brown;
+}
+
+body {
+ border-top: 1px solid #fbf9f7;
+ margin: 0 auto;
+ padding: 0;
+ overflow-x: hidden;
+ font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+ color: $body_font;
+ text-align: center;
+ background-color: transparent
+}
+
+a {
+ color: $orange;
+ -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;
+ }
+}
+
+p {
+ @include constrain_narrow();
+ text-align: left;
+ @include breakpoint(alpha){
+ @include fontsize(18);
+ line-height: 1.5;
+ }
+ @include breakpoint(gamma){
+ @include fontsize(20);
+ line-height: 1.6;
+ }
+}
+time {
+ @include smcaps;
+ @include fontsize(11);
+ display: block;
+ span {
+ @include fontsize(13);
+ }
+}
+
+object, embed {
+ max-width: 100%;
+ height: auto;
+}
+
+img {
+ max-width: 100%;
+ max-width:98%;
+ padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
+ background: $brown;
+}
+
+h1 {
+ font-family: Georgia, 'Times New Roman', serif;
+ @include fontsize(36);
+ font-weight: normal;
+}
+
+//************** Universals ************************
+.hide {
+ display: none;
+}
+
+.yes {
+ background: green !important;
+ color: white;
+}
+
+.no {
+ background: red !important;
+ color: white;
+}
+
+//************** other global classes ************************
+
+.bl {
+ @include smcaps;
+ @include fontsize(11);
+}
+
+
+//**************** Page Breadcrumbs ************************
+
+#breadcrumbs {
+ @include constrain_wide();
+ text-align: center;
+ li {
+ display: inline;
+ }
+ a { color: $brown;}
+ @include breakpoint(gamma) {
+ text-align: left;
+ }
+}
+
+.dark #breadcrumbs a, .black #breadcrumbs a {
+ color: $body_font_light;
+}
+//************* Dark Pages *********************
+
+.dark body {
+ background: $brown;
+ color: $body_font_light
+}
+
+.black body {
+ background: #000;
+ color: $body_font_light
+}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..a89636c
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,151 @@
+header[role="banner"] {
+ margin: 0 auto;
+ @include smcaps;
+ a {
+ text-decoration: none;
+ }
+ h1 {
+ margin: -10px 0 0 0;
+ padding: 0;
+ }
+ h1 a {
+ display: block;
+ margin: 0.25em auto 0 auto;
+ font-size: 0.875em;
+ font-weight: 300;
+ font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+ line-height: 0.75em;
+ color: $brown;
+ }
+ h1 a:before {
+ content: "home-icon";
+ text-indent: -9999em;
+ width: 95px;
+ height: 75px;
+ background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+ background-size: 95px;
+ background-size: 85px;
+ display: block;
+ margin: 0.75em auto 0;
+ }
+ h2 {
+ margin-top: 0.25em;
+ font-size: 0.675em;
+ font-style: italic;
+ font-weight: 300;
+ }
+ @include breakpoint(beta) {
+ float: left;
+ position: relative;
+ bottom: 0;
+ h1, h2 {
+ text-align: left;
+ }
+ h1 {
+ width: 360px;
+ }
+ h1 a { line-height: 2.5em;}
+ h1 a:before {
+ display: inline-block;
+ background-size: 102px;
+ height: 85px;
+ width: 105px;
+ margin-right: 10px;
+ }
+ h2 { margin-left: 116px;
+ margin-top: -30px;
+ }
+ }
+}
+.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;
+ }
+ }
+}
+
+
+nav[role="navigation"] {
+ 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;
+ }
+ ul {
+ @include smcaps;
+ max-width: 100%;
+ font-weight: 300;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ padding: 0;
+ @include constrain(85%);
+ }
+ li {
+ display: inline;
+ margin: 0 0.25em;
+ &:after {
+ content: "\00b7";
+ color: #999999;
+ padding-left: 0.75em;
+ }
+ }
+ li.last {
+ margin-right: 0;
+ &:after {
+ content: " ";
+ }
+ }
+ @include breakpoint(beta) {
+ float: left;
+ border: none;
+ margin: 52px 0 0 0;
+ padding: 0;
+ ul {
+ max-width: 50em;
+ }
+ }
+}
+.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
+ color: $body_font_light;
+}
+
+
+.header-wrapper {
+ @extend %clearfix;
+ margin-bottom: 1em;
+ @include breakpoint(beta) {
+ border-bottom: 1px $brown solid;
+ position: relative;
+ }
+ @include breakpoint(gamma) {
+ max-width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ @include breakpoint(delta) {
+ margin-top: 1.5em;
+ max-width: 1170px;
+ }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+ @include breakpoint(beta) {
+ border-bottom: 1px $body_font_light solid;
+ }
+}
+
diff --git a/design/sass/_inbox.scss b/design/sass/_inbox.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/design/sass/_inbox.scss
diff --git a/design/sass/_mailing-list.scss b/design/sass/_mailing-list.scss
new file mode 100644
index 0000000..71df3e4
--- /dev/null
+++ b/design/sass/_mailing-list.scss
@@ -0,0 +1,11 @@
+//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 */
+ @include flex-grow(1);
+ & + .b-form__object--fillspace-gap { margin-left: .5em; }
+}
+.b-form__label { display: block;}
diff --git a/design/sass/_map.scss b/design/sass/_map.scss
new file mode 100644
index 0000000..f7d958b
--- /dev/null
+++ b/design/sass/_map.scss
@@ -0,0 +1,73 @@
+.map--wrapper {
+ @include constrain_wide;
+ max-width: 99%;
+ margin-top: 2em;
+}
+#map-canvas {
+ height: 300px;
+ img { max-width: 100%; padding: 0; margin: 0; background: none;}
+ @include breakpoint(alpha) {
+ height: 400px;
+ }
+ @include breakpoint(beta) {
+ height: 500px;
+ }
+ @include breakpoint(gamma) {
+ border: 10px $brown solid;
+ width: 80%;
+ float: right;
+ }
+ @include breakpoint(delta) {
+ height: 600px;
+ width: 84%;
+ }
+}
+
+.map-legend {
+ @include constrain_wide;
+ text-align: left;
+ &:after {
+ content: " ";
+ display: table;
+ clear: both;
+ }
+ h4 {
+ font-family: sans-serif;
+ @include fontsize(14);
+ @include smcaps;
+ font-weight: bold;
+ margin: 1em 0 0.25em;
+ @include breakpoint(gamma) {
+ @include fontsize(13);
+ }
+ }
+ a { color: $body_font;}
+ li {
+ display: inline;
+ &:after {
+ content: ",";
+ }
+ @include breakpoint(gamma) {
+ display: block;
+ @include fontsize(13);
+ &:after {
+ content: "";
+ }
+ }
+ }
+}
+
+.infowin {
+ h4 {
+ margin: 0 0 5px 0;
+ font-weight: normal;
+ }
+ .date {
+ text-transform: uppercase;
+ font-size: 11px;
+ letter-spacing: 1px;
+ }
+ p {
+ font-size: 1em;
+ }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..737f157
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,94 @@
+$brown: #201a11;
+$light: #ccc;
+$orange: #b53a04;
+$body_font: $brown;
+$body_font_light: #b3aeae;
+//$light;
+
+
+@mixin smcaps {
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+@function calc-em($target-px, $context) {
+ @return $target-px / $context * 1em;
+}
+
+@mixin fontsize($size: 24, $base: 16) {
+ font-size: $size + px;
+ font-size: ($size / $base) * 1rem;
+}
+
+%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));
+}
+
+//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: 640px;
+ }
+ @include breakpoint(gamma) {
+ max-width: 680px;
+ }
+}
+
+//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: 960px;
+ }
+ @include breakpoint(delta) {
+ max-width: 1170px;
+ }
+}
diff --git a/design/sass/_normalize.scss b/design/sass/_normalize.scss
new file mode 100644
index 0000000..c451141
--- /dev/null
+++ b/design/sass/_normalize.scss
@@ -0,0 +1 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}ul{list-style-type: none;margin:0;padding:0} \ No newline at end of file
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
new file mode 100644
index 0000000..8add4e5
--- /dev/null
+++ b/design/sass/_notes.scss
@@ -0,0 +1,167 @@
+//**************** Notes Structure ************************
+
+.notes main {
+ @include constrain_narrow();
+ margin-top: 1em;
+ h1 {
+ margin-bottom: 0;
+ @include fontsize(28);
+ @include breakpoint(beta) {
+ @include fontsize(36);
+ text-align: left;
+ }
+ }
+}
+
+.notes .h-entry {
+ @extend %clearfix;
+ border: none;
+ padding: 0;
+ margin-top: 3em;
+ @include breakpoint(beta) {
+ margin-top: 2em;
+ }
+ &:first-of-type {
+ margin-top: 1em;
+ }
+ &:after {
+ @include faded_line_after;
+ @include breakpoint(beta) {
+ margin-top: 8.5em;
+ }
+ }
+}
+.note--date {
+ @include smcaps;
+ @include fontsize(11);
+ text-align: center;
+ margin-bottom: 4px;
+ @include breakpoint(beta) {
+ float: right;
+ margin-top: 0;
+ }
+ a {
+ color: $brown;
+ text-decoration: none;
+ }
+}
+.note--location {
+ text-align: center;
+ margin-top: 0;
+ @include breakpoint(beta) {
+ float: left;
+ }
+}
+.note--actions {
+ font-size: 0.75em;
+ text-align: center;
+ @include breakpoint(beta) {
+ float: right;
+ clear: both;
+ margin-top: .5em;
+ }
+ li {
+ display: inline-block;
+ }
+ li:after {
+ content: "\2219";
+ margin-left: 0.25em;
+ padding-right: 0.35em;
+ padding-left: 0.35em;
+ }
+ li:last-child:after {
+ content: "";
+ padding-right: 0;
+ padding-left: 0;
+ margin-left: 0;
+ }
+ a {
+ color: $brown;
+ }
+}
+.note--footer {
+ margin-top: 1.7em;
+ @include breakpoint(beta) {
+ margin-top: 0;
+ }
+}
+.month--divider {
+ margin-top: 2em;
+}
+.month--header {
+ @include constrain_narrow();
+ @include smcaps;
+ @include fontsize(12);
+ font-weight: normal;
+ font-family: sans-serif;
+ text-align: left;
+ margin-bottom: 3em;
+ border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+}
+.notes--permalink {
+ .h-entry {
+ margin-top: 3em;
+ @include breakpoint(gamma) {
+ margin-top: 5em;
+ }
+ }
+ &:after {
+ background: none;
+ }
+ .note--title {
+ // @include fontsize(24);
+ }
+ .note--footer {
+ margin-top: 2em;
+ @include constrain_narrow();
+ @include breakpoint(beta) {
+ margin-top: 1em;
+ }
+ }
+ #page-navigation {
+ clear: both;
+ margin-top: 10em;
+ }
+}
+/*
+@include breakpoint(beta) {
+ .notes {
+ main h1 {
+ float: none;
+ margin-bottom: 1em;
+ width: 100%;
+ }
+ main {
+ @include constrain(680px);
+ margin-bottom: 5em;
+ }
+ article footer {
+ margin-top: 1em;
+ }
+ article p {
+ float: none;
+ }
+ .note--location {
+ float: left;
+ }
+ .note--date {
+ float: right;
+ }
+ .note--twitter {
+ clear: both;
+ float: right;
+ padding-top: 1em;
+ }
+ time {
+ display: inline;
+ float: right;
+ }
+ }
+
+ .permalink {
+ main {
+ margin-top: 5em;
+ }
+ }
+}
+*/
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
new file mode 100644
index 0000000..664b892
--- /dev/null
+++ b/design/sass/_photos.scss
@@ -0,0 +1,203 @@
+// ##############################################
+// Photo Gallery pages
+// ##############################################
+
+// Add padding and create grid layout at various widths:
+.image-gallery--list {
+ @include constrain_wide;
+ margin-top: 3em;
+ li {
+ display: inline-block;
+ margin-bottom: 10px;
+ }
+}
+@include breakpoint(alpha) {
+ .first, .third {
+ padding-right: 10px;
+ }
+}
+@include breakpoint(gamma) {
+ .first, .third {
+ padding-right: 0;
+ }
+ .one {
+ padding-right: 6px;
+ }
+ .two {
+ padding-left: 6px;
+ padding-right: 6px;
+ }
+ .three {
+ padding-left: 6px;
+ }
+}
+@include breakpoint(delta) {
+ .one, .two, .three {
+ padding: 0;
+ }
+ .first {
+ padding-right: 6px;
+ }
+ .second, .third {
+ padding-left: 6px;
+ padding-right: 6px;
+ }
+ .fourth {
+ padding-left: 6px;
+ }
+}
+
+//########### GALLERY FIGURES AND CAPTIONS ################
+.image-gallery--figure {
+ position: relative;
+ margin: 0;
+ width: 280px;
+ .image-gallery--legend {
+ display: block;
+ @include transparent_class;
+ position: absolute;
+ left: 0;
+ bottom: 8px;
+ width: 100%;
+ background: $brown;
+ color: #999999;
+ }
+ h1 {
+ @include smcaps;
+ @include fontsize(13);
+ margin: 8px 0 4px 8px;
+ text-align: left;
+ color: white;
+ }
+ p {
+ @include fontsize(12);
+ margin: 8px 0 4px 8px;
+ padding-bottom: 6px;
+ }
+}
+
+.image-gallery--wrapper {
+ @include constrain_wide;
+ .figcaption {
+ background: lighten(#000, 12);
+ margin: -6px 0 0 0;
+ padding: 1em 1em .5em 1em;
+ border-radius: 0 0 0.5em 0.5em;
+ &:after {
+ content: " ";
+ display: table;
+ clear: both;
+ }
+ }
+ h6 a {
+ color: darken($body_font_light, 20);
+ text-decoration: none;
+ font-family: sans-serif;
+ }
+ img { background: none; max-width: 100%; padding: 0;}
+}
+.directions {
+ color: darken($body_font_light, 35);
+ text-align: center;
+ @include fontsize(13);
+ margin-top: 3em;
+ display: none;
+}
+.caption {
+ float: left;
+ font-family: sans-serif;
+ min-height: 32px;
+ padding-right: 1.5em;
+ @include breakpoint(beta) {
+ width: 50%;
+ border-right: darken($body_font_light, 45) 1px solid;
+ min-height: 55px;
+ }
+ @include breakpoint(gamma) {
+ width: 65%;
+ padding-right: 2.5em;
+ }
+ @include breakpoint(delta) {
+ width: 70%;
+ }
+}
+.figcaption--title, .figcaption--date {
+ float: left;
+ font-weight: normal;
+ line-height: 24px;
+ vertical-align: bottom;
+ margin: 0;
+ display: block;
+}
+.figcaption--title {
+ margin-right: 1em;
+}
+.figcaption--date {
+ margin-top: 4px;
+}
+.caption .map-link {
+ @include smcaps;
+ @include fontsize(13);
+ float: right;
+ text-decoration: none;
+ padding: 7px 14px 5px;
+ background: lighten(#000, 18);
+ color: $body_font_light;
+ border-radius: 25px;
+ &:hover {
+ background: $orange;
+ }
+}
+.figcaption--desc {
+ @include fontsize(13);
+ padding-top: .5em;
+ margin-bottom: 0;
+ clear: left;
+ margin-left: 0;
+ text-align: left;
+}
+.photo-options {
+ float: right;
+ font-family: sans-serif;
+ p{
+ @include fontsize(13);
+ margin-top: 12px;
+ margin-bottom: 2px;
+ color: darken($body_font_light, 35);
+ &:first-of-type {
+ margin-top: 4px;
+ }
+ }
+ a { color: darken($body_font_light, 35);}
+}
+.photo-options, .caption .map-link {
+ display: none;
+}
+@include breakpoint(beta) {
+ .photo-options, .caption .map-link, .directions {
+ display: block;
+ }
+}
+
+
+//.figcaption {
+// clear: both;
+// background: #1a1713;
+// -moz-border-radius: 0 0 0.5em 0.5em;
+// -webkit-border-radius: 0 0 0.5em 0.5em;
+// border-radius: 0 0 0.5em 0.5em;
+// color: white;
+// margin: -0.25em 0 0 0;
+// padding: 1em 0 1em 0;
+// z-index: 100;
+//}
+//
+//.caption {
+// width: 100%;
+// float: none;
+// p {
+// font: normal 0.75em Helvetica, Verdana, sans-serif;
+// margin: 0.5em 0 0 0.75em;
+// padding-bottom: 0.25em;
+// }
+//}
diff --git a/design/sass/_projects.scss b/design/sass/_projects.scss
new file mode 100644
index 0000000..fb3f530
--- /dev/null
+++ b/design/sass/_projects.scss
@@ -0,0 +1,206 @@
+.projects, .projects--intro p {
+ @include constrain_wide;
+}
+@include breakpoint(gamma) {
+ .projects--intro {
+ margin-top: 3rem;
+ -moz-column-count: 2;
+ -moz-column-gap: 30px;
+ -webkit-column-count: 2;
+ -webkit-column-gap: 30px;
+ column-count: 2;
+ column-gap: 30px;
+ }
+ p {
+ margin-top: 0;
+ }
+}
+.projects--list {
+ margin-top: 2em;
+ li { @extend %clearfix; margin-bottom: 2em; }
+ h1 {
+ @include fontsize(32);
+ a {
+ color: $body_font;
+ text-decoration: none;
+ }
+ }
+ @include breakpoint(gamma) {
+ h1 {
+ @include fontsize(24);
+ text-align: left;
+ font-weight: bold;
+ width: 40%;
+ float: left;
+ margin-top: -4px;
+ }
+ img {
+ float: right;
+ margin-left: 30px;
+ }
+ p {
+ @include constrain_wide;
+ @include fontsize(17);
+ margin-right: 1em;
+ clear: left;
+ }
+ }
+ .projects--button { text-align: left; margin-left: 0}
+}
+
+//################# NATIONAL PARKS PROJECT #######################
+
+.main--full {
+ @include constrain_wide;
+ margin-top: 3em;
+ article { max-width: 100%; position: relative; margin-bottom: 3em;}
+ img { max-width: 100%; padding: 0;}
+ .buttons li {
+ display: inline;
+ @include fontsize(11);
+ text-transform: uppercase;
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ font-weight: 500;
+ margin: 5px;
+ line-height: 2.6em;
+ a {
+ color: $body_font_light;
+ }
+ }
+ @include breakpoint(beta) {
+ h2 {
+ text-align: left;
+ @include fontsize(14);
+ }
+ .buttons {
+ margin: 2px 10px .5em 0;
+ line-height: 2.6em;
+ float: right;
+ li {
+ a {
+ text-decoration: none;
+ padding: 0.75em 1.5em 0.65em;
+ background: #463215;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ }
+ }
+ }
+ @include breakpoint(gamma) {
+ h2 { @include fontsize(20);
+ }
+ .buttons {
+ margin: 0.5em 10px 0 0;
+ li a {
+ padding: 0.875em 1.75em 0.75em;
+ }
+ }
+ }
+
+}
+ .meta {height: 0;}
+}
+
+.park--title {
+ @include fontsize(18);
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ color: white;
+ @include breakpoint(beta) {
+ @include transparent_class;
+ @include fontsize(32);
+ position: absolute;
+ top: 0px;
+ background: #201a11;
+ z-index: 1000;
+ margin: 0;
+ width: 100%;
+ text-align: left;
+ line-height: 2em;
+ font-size: 2em;
+ padding-left: 0.25em;
+}
+}
+.park--subtitle {
+ @include fontsize(16);
+ @include breakpoint(beta) {
+ @include fontsize(20);
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ font-weight: normal;
+ line-height: 2.5;
+ color: white;
+ margin: 0 0 0 1em;
+ float: left;
+ padding: 0.3em 0;
+ }
+}
+.park--legend {
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ line-height: .6;
+ @include breakpoint(beta) {
+ @include transparent_class;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ margin: 0;
+ background: #201a11;
+ }
+}
+.map-container {
+ width: 469px;
+ height: 392px;
+ position: absolute;
+ right: 20px;
+ bottom: 60px;
+ z-index: 2000;
+ margin: 0;
+ padding: 0;
+ background: url("/media/img/mapbg-dark.png") no-repeat top left;
+}
+
+.map-wrapper {
+ width: 400px;
+ height: 328px;
+ margin: 37px 0 0 44px;
+}
+
+.more-container {
+ width: 405px;
+ height: 260px;
+ position: absolute;
+ right: -30px;
+ bottom: 40px;
+ z-index: 2000;
+ background: url("/media/img/parkbg.png") no-repeat top left;
+ font: normal 0.9em / 25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif;
+ dl {
+ margin-top: 45px;
+ margin-left: 45px;
+ text-align: left;
+ dt,dd {
+ margin: 4px 0;
+ color: white;
+ }
+ dt {
+ clear: left;
+ float: left;
+ width: 65px;
+ //border-bottom: 1px solid #999
+ font-weight: bold;
+ line-height: 25px;
+ font-size: 0.7em;
+ text-transform: uppercase;
+ text-align: right;
+ margin-right: 8px;
+ }
+ dd {
+ float: left;
+ width: 250px;
+ overflow: hidden;
+ //border-bottom: 1px solid #999
+ a:hover {
+ color: $orange;
+ }
+ }
+ }
+}
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
new file mode 100644
index 0000000..4adf0b0
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,23 @@
+$breakpoint-alpha: 38em;
+$breakpoint-beta: 49em;
+$breakpoint-gamma: 56em;
+$breakpoint-delta: 73.125em;
+$breakpoint-epsilon: 60em;
+
+@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/_writing_archive.scss b/design/sass/_writing_archive.scss
new file mode 100644
index 0000000..b398e26
--- /dev/null
+++ b/design/sass/_writing_archive.scss
@@ -0,0 +1,111 @@
+.archive {
+ @extends %clearfix;
+ @include constrain_wide();
+ margin-top: 3em;
+ .post--title {
+ text-align: left;
+ margin: .25rem 4px;
+ @include fontsize(24);
+ a {
+ color: $body_font;
+ text-decoration: none;
+ font-style: italic;
+ }
+ @include breakpoint(gamma) {
+ @include fontsize(22);
+ margin: .1rem 4px;
+ }
+ }
+ .post--location {
+ @include fontsize(11);
+ }
+ .post--date{
+ margin: 0 4px;
+ text-align: left;
+ }
+ .post--image img { background: none; max-width: 100%; padding: 0}
+ article {
+ margin: 0;
+ display: inline-block;
+ margin-bottom: 2em;
+ vertical-align: top;
+ }
+ p {
+ margin-top: 0;
+ margin-left: 4px;
+ margin-right: 4px;
+ }
+ @include breakpoint(beta) {
+ article {
+ width: 48.25%;
+ }
+ p {
+ @include fontsize(16);
+ }
+ .odd {
+ padding-right: 10px;
+ }
+ .even {
+ padding-left: 10px;
+ }
+ }
+ @include breakpoint(gamma) {
+ article {
+ width: 31%;
+ }
+ .odd, .even { padding: 0;}
+ .first {
+ padding-right: 10px;
+ }
+ .second {
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+ .third {
+ padding-left: 10px;
+ }
+ p {
+ @include fontsize(14);
+ margin-top: 0;
+ margin-left: 4px;
+ margin-right: 4px;
+ }
+ }
+ @include breakpoint(delta) {
+ article { width: 374px;}
+ }
+}
+
+.pagination {
+ font-family: "carrois_gothicregular" sans-serif;
+ text-transform: uppercase;
+ font-weight: 600;
+ line-height: 2.3;
+ li {
+ display: inline;
+ }
+ a {
+ text-decoration: none;
+ border: 1px solid #c99984;
+ padding: 4px 8px;
+ }
+ .prev {
+ &:before {
+ content: "\21E0";
+ }
+ }
+ .next {
+ &:after {
+ content: "\21E2";
+ }
+ }
+ @include breakpoint(beta) {
+ @include fontsize(22);
+ .prev {
+ margin-right: 2em;
+ }
+ .next {
+ margin-left: 2em;
+ }
+ }
+}
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
new file mode 100644
index 0000000..ce44693
--- /dev/null
+++ b/design/sass/_writing_details.scss
@@ -0,0 +1,230 @@
+// ##############################################
+// Most of the basic formatting for paragraphs is
+// handled in _global.scss. This just handles the
+// bits specific to article detail pages
+// e.g. header, footnotes, images, page nav, two
+// col and dark page
+// ##############################################
+.post--header {
+ @include constrain_narrow();
+ @include breakpoint(beta) {
+ text-align: left;
+ margin-top: 3em;
+ margin-bottom: .75em;
+ }
+ @include breakpoint(delta) {
+ margin-top: 4em;
+ }
+}
+.post--location {
+ @include smcaps;
+ @include fontsize(11);
+}
+.post--article {
+ h2, h3 {
+ @include constrain_narrow;
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ text-align: left;
+ }
+ blockquote {
+ @include constrain_narrow;
+ text-align: left;
+ padding: 20px;
+ font-style: italic;
+ p {
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+ }
+ .notes {
+ @include smcaps;
+ @include constrain_narrow;
+ font-weight: normal;
+ text-align: left;
+ &:before {
+ @include faded_line_after;
+ margin-bottom: 3em;
+ }
+ }
+ .addendum {
+ @include constrain_narrow;
+ text-align: left;
+ dt {
+ margin-left: -30px;
+ font-style: italic;
+ padding-left: 30px;
+ text-indent: -30px;
+ margin-bottom: .5em;
+ }
+ dd { margin-left: 0; margin-bottom: 1.5em;}
+ }
+}
+
+//### FOOTNOTES ###
+.footnote {
+ @include constrain_narrow();
+ margin: 1em auto 0 auto;
+ padding:0;
+ list-style-position:inside;
+ list-style-type: none;
+ &:before {
+ @include breakpoint(beta) {
+ @include faded_line_after;
+ margin-bottom: 2em;
+ }
+ }
+ p {
+ font-size: 0.875em;
+ line-height: 1.4
+ }
+}
+.dark .footnote:before {
+ @include light_faded_line_after;
+}
+
+//### IMAGES AND FIGURES ###
+.postpic, .postpicright {
+ display: block;
+ width: auto;
+}
+.postpic {
+ float: left;
+ margin: 0.3em 10px 10px 0;
+}
+.postpicright {
+ float: right;
+ margin: 0.3em 0 10px 10px;
+}
+.postpicleft {
+ float: left;
+ margin: 5px;
+}
+.picfull {
+ margin-top: 20px;
+}
+.picwide {
+ clear: both;
+ margin: 1em 0;
+ @include breakpoint(gamma) {
+ margin-left: -140px;
+ width: 960px;
+ max-width: 960px;
+ }
+ @include breakpoint(delta) {
+ margin-left: -220px;
+ width: 1170px;
+ max-width: 1170px;
+ }
+}
+
+
+.figure {
+ position: relative;
+ max-width: 90%;
+ margin: 0 auto;
+ @include breakpoint(gamma) {
+ max-width: 640px;
+ }
+ @include breakpoint(delta) {
+ max-width: 680px;
+ }
+ .legend {
+ display: block;
+ @include transparent_class;
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ font-size: 13px;
+ padding: 8px 0 8px 2%;
+ width: 98%;
+ background: $brown;
+ color: #999999;
+ }
+}
+
+
+//### PAGE NAVIGATION ###
+#page-navigation {
+ margin: 2em auto;
+ @include constrain_narrow();
+ text-align: center;
+ display: table;
+ ul {
+ margin: 0 auto;
+ width: 100%;
+ text-align: center;
+ padding: 0;
+ }
+ li {
+ margin: 6px auto;
+ clear: both;
+ line-height: 24px;
+ text-align: center;
+ }
+ span {
+ min-width: 70px;
+ display: block;
+ text-align: right;
+ margin-right: 10px;
+ margin-top: 2px;
+ float: left;
+ }
+ a {
+ display: block;
+ float: left;
+ text-align: left;
+ font-style: italic;
+ color: $brown;
+ text-decoration: none;
+ }
+}
+
+// ##############################################
+// On double and double-dark make the top wide
+// with two columns of text (nothing for ie9-
+// ##############################################
+@include breakpoint(gamma) {
+ .post--header--double {
+ float: left;
+ max-width: 200px;
+ margin-right: 2em;
+ .post--title, .post--date, .post--location {
+ text-align: right;
+ }
+ .post--title {
+ line-height: 1.1;
+ margin-top: 4px;
+ }
+ }
+ .col {
+ margin-top: 3rem;
+ -moz-column-count: 2;
+ -moz-column-gap: 30px;
+ -webkit-column-count: 2;
+ -webkit-column-gap: 30px;
+ column-count: 2;
+ column-gap: 30px;
+ p { margin-top: 0; margin-bottom: 2em;}
+ p:first-of-type:first-letter {
+ @include fontsize(60);
+ line-height: 42px;
+ display: block;
+ float: left;
+ padding: 11px 8px 5px 0;
+ }
+ }
+}
+.post--article--double {
+ @include constrain_wide();
+}
+
+// ##############################################
+// On dark and double-dark pages we invert the
+// colors, most of which happens in _global but
+// the page nav links need to be done here
+// ##############################################
+.dark #page-navigation a {
+ color: $body_font_light;
+}
+
+
diff --git a/design/sass/screenv8.scss b/design/sass/screenv8.scss
new file mode 100644
index 0000000..4c3657d
--- /dev/null
+++ b/design/sass/screenv8.scss
@@ -0,0 +1,20 @@
+@import 'flexbox'; //Flexbox relies on https://github.com/timhettler/compass-flexbox
+@import "_normalize.scss";
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_footer.scss";
+@import "_writing_details.scss";
+@import "_notes.scss";
+@import "_writing_archive.scss";
+@import "_photos.scss";
+@import "_leaflet.scss";
+@import "_map.scss";
+@import "_projects.scss";
+//@import "_tablet.sass";
+//@import "_inbox.scss";
+
+//@import _large.sass
+//@import _desktop_lg.sass
diff --git a/design/sass/v6/_480.sass b/design/sass/v6/_480.sass
new file mode 100644
index 0000000..3d426ca
--- /dev/null
+++ b/design/sass/v6/_480.sass
@@ -0,0 +1,456 @@
+//layout small
+
+
+//**************** Masthead ************************
+header[role="banner"]
+ margin: 0 auto
+ text-align: center
+ h1
+ background: url('/media/img/tree.png') 0 0 no-repeat
+ text-indent: -9999px
+ width: 151px
+ height: 84px
+ margin: 0 auto
+ h2
+ background: url('/media/img/text-centered.png') 0 0 no-repeat
+ text-indent: -9999px
+ width: 184px
+ height: 54px
+ margin: 0 auto
+nav[role="navigation"], footer[role="contentinfo"] nav
+ margin: 1em auto
+ border-top: 1px $brown dotted
+ border-bottom: 1px $brown dotted
+ padding: .5em
+ text-align: center
+ ul
+ margin: .25em 0 .25em -30px
+ li
+ display: inline
+ margin: 0 .125em
+
+
+
+//**************** Page Breadcrumbs ************************
+
+#breadcrumbs
+ text-align: center
+ li
+ display: inline
+
+
+
+//**************** Images ************************
+
+img
+ width: 95%
+ height: auto
+
+.postpic, .postpicright
+ display: block
+ width: auto
+object, embed
+ width: 100%
+.postpic
+ float: left
+ margin: 0.3em 10px 10px 0
+
+.postpicright
+ float: right
+ margin: 0.3em 0 10px 10px
+
+.postpicleft
+ float: left
+ margin: 5px
+
+.picfull
+ margin-top: 20px
+
+.picwide
+ clear: both
+ margin: 1em 0
+
+.figure
+ position: relative
+ .legend
+ display: block
+ +transparent_class
+ position: absolute
+ bottom: 10px
+ left: 0
+ font-size: 13px
+ padding: 8px 0 8px 12px
+ width: 95%
+ background: $brown
+ color: #999999
+
+
+//**************** Writing Archive Structure ************************
+
+.dateline
+ text-align: center
+.archive
+ h1
+ font-size: 1.5em
+ text-align: center
+ article
+ padding-bottom: 1em
+ border-bottom: 1px #ececec solid
+.home
+ article
+ border: none
+ margin-bottom: 2em
+ h1
+ font-size: 1.2em
+ margin: 0
+ text-align: center
+ img
+ float: left
+ width: auto
+ margin: 20px 8px 0 0
+ .sh
+ text-transform: uppercase
+ font-weight: bold
+ font-size: .75em
+ margin: 2em 0
+//**************** Photo Archive Structure ************************
+
+#photo-galleries
+ margin-top: 2em
+ h1
+ font: 13px bold unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif
+ color: white
+ li
+ margin: 10px 0 0 0
+
+
+//**************** Entry Structure ************************
+.geo, article[role="main"] time
+ margin: .5em 0
+ display: block
+ text-align: center
+article[role="main"]
+ margin-top: 3em
+ h1
+ text-align: center
+ font-size: 1.5em
+ p > a
+ color: $orange
+ &:hover
+ text-decoration: underline
+.footnote
+ border-top: 1px $brown dotted
+ margin: 1.5em 0 0 0
+ padding: 1em 0 0 0
+ p
+ font-size: .875em !important
+ line-height: 20px !important
+
+
+#page-navigation
+ margin: 2em auto
+ text-align: center
+ display: table
+ ul
+ margin: 0 auto
+ width: 100%
+ text-align: center
+ padding: 0
+ li
+ margin: 6px auto
+ clear: both
+ line-height: 24px
+ text-align: center
+ span
+ min-width: 70px
+ display: block
+ text-align: right
+ margin-right: 10px
+ margin-top: 2px
+ float: left
+ a
+ display: block
+ float: left
+ text-align: left
+ font-style: italic
+
+
+//**************** Map Structure ************************
+
+#map-canvas
+ border: 10px $brown solid
+ width: 95%
+ height: 300px
+.map-legend
+ h4
+ font-size: 1em
+ font-weight: bold
+ margin: 1em 0 .25em
+ li
+ display: inline
+ &:after
+ content: ","
+.infowin
+ h4
+ margin: 0 0 5px 0
+ font-weight: normal
+ .date
+ text-transform: uppercase
+ font-size: 11px
+ letter-spacing: 1px
+ p
+ font-size: 1em
+
+
+//**************** Notes Structure ************************
+
+.notes main
+ margin-top: 3em
+.notes .h-entry
+ border: none
+ padding: 0
+ margin-top: 3em
+ &: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))
+ //&:last-child:after
+ // background: none
+
+.notes .e-content
+ a
+ color: $orange
+.notes time
+ font-family: sans-serif
+.notes .note--twitter
+ font-size: .75em
+ action a:after, a:first-child:after
+ content: "\2219"
+ margin-left: .25em
+ padding-right: .35em
+ padding-left: .35em
+ action:last-child a:after
+ content: ""
+ padding-right: 0
+ padding-left: 0
+ margin-left: 0
+
+.notes--location
+ text-align: left
+.month--divider
+ margin-top: 2em
+.month--header
+ font-size: .75em
+ margin: 0
+ letter-spacing: 1px
+ text-transform: uppercase
+ border-bottom: 1px dotted rgba(0,0,0,0.2)
+.permalink .h-entry:after
+ background: none
+//******************* Footer **********************
+
+
+footer[role="contentinfo"]
+ margin-top: 2em
+
+nav:after, footer:before,
+footer:after, .archive article:after, #archive:after, article[role="main"] header:after, #map-canvas:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+
+
+//******************************************************
+//******************************************************
+//********** DARK BROWN PAGES **************
+//******************************************************
+//******************************************************
+
+
+.dark
+ background: $brown
+ body
+ color: #ccc
+ *:focus
+ outline: $orange dotted thin
+ a
+ color: $orange
+ &:visited
+ color: white
+ text-decoration: none
+ &:hover
+ color: white
+ text-decoration: none
+ &:visited > :hover
+ color: $orange
+ img
+ border: none
+ header[role="banner"], footer[role='contentinfo']
+ margin-bottom: .5em
+ nav
+ margin-bottom: 0
+ a
+ color: white
+ &:hover
+ color: $orange
+ &:visited
+ color: white
+ h1
+ background: url('/media/img/tree.png') left -84px no-repeat
+ h2
+ background: url('/media/img/text-centered.png') 0 -60px no-repeat
+ header[role="banner"]
+ border-bottom: #cccccc 1px solid
+ article[role="main"]
+ .legend
+ bottom: 0
+ // National parks page
+ .park
+ text-align: center
+ position: relative
+ h1
+ font-size: 1.5em
+ margin-bottom: 5px
+
+ h2
+ font-size: 1.125em
+ margin: 0
+ img
+ width: 100%
+ .legend
+ position: relative
+ .meta
+ height: 0
+ .buttons li
+ margin: 5px
+ display: inline
+ text-transform: uppercase
+ font: normal .5em unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+ .map-container
+ width: 469px
+ height: 392px
+ position: absolute
+ right: 20px
+ bottom: 60px
+ z-index: 2000
+ margin: 0
+ padding: 0
+ background: url("/media/img/mapbg-dark.png") no-repeat top left
+ .map-wrapper
+ width: 400px
+ height: 328px
+ margin: 37px 0 0 44px
+ .more-container
+ width: 405px
+ height: 260px
+ position: absolute
+ right: -30px
+ bottom: 40px
+ z-index: 2000
+ background: url("/media/img/parkbg.png") no-repeat top left
+ font: normal .9em/25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+ dl
+ margin-top: 45px
+ margin-left: 45px
+ text-align: left
+ dt,dd
+
+ margin: 4px 0
+
+ color: white
+ dt
+ clear: left
+ float: left
+ width: 65px
+ //border-bottom: 1px solid #999
+ font-weight: bold
+ line-height: 25px
+ font-size: 0.7em
+ text-transform: uppercase
+ text-align: right
+ margin-right: 8px
+ dd
+ float: left
+ width: 250px
+ overflow: hidden
+ //border-bottom: 1px solid #999
+ a:hover
+ color: $orange
+
+
+//******************************************************
+//******************************************************
+//********** BLACK PAGES **************
+//******************************************************
+//******************************************************
+.black
+ background: #14100b
+ color: #ccc
+ *:focus
+ outline: $orange dotted thin
+ a
+ text-decoration: none
+ color: $orange
+ &:visited
+ color: white
+ text-decoration: none
+ &:hover
+ color: white
+ text-decoration: none
+ #breadcrumbs
+ color: #ccc
+ header[role="banner"]
+ h1
+ background: url('/media/img/tree.png') left -168px no-repeat
+ h2
+ background: url('/media/img/text-centered.png') 0 -121px no-repeat
+ nav[role="navigation"]
+ border-top: 1px #ccc dotted
+ border-bottom: 1px #ccc dotted
+ .directions
+ display: none
+ #slides
+ width: 100%
+ h3
+ font-size: 1em
+ margin: 0 .5em
+ h6
+ display: none
+ #slides
+ article
+ clear: both
+ margin: 20px 0
+ img
+ width: 100%
+ border: none
+ .photo-options, .map-link
+ display: none
+ .figcaption
+ clear: both
+ background: #1a1713
+ -moz-border-radius: 0 0 .5em .5em
+ -webkit-border-radius: 0 0 .5em .5em
+ border-radius: 0 0 .5em .5em
+ color: white
+ margin: -.25em 0 0 0
+ padding: 1em 0 1em 0
+ z-index: 100
+ .caption
+ width: 100%
+ float: none
+ p
+ font: normal .75em Helvetica, Verdana, sans-serif
+ margin: .5em 0 0 .75em
+ padding-bottom: .25em
+ footer[role='contentinfo']
+ nav
+ border-top: #ccc 1px dotted
+ border-bottom: #ccc 1px dotted
+ p
+ color: #ccc
diff --git a/design/sass/v6/_768.sass b/design/sass/v6/_768.sass
new file mode 100644
index 0000000..9c4f8b8
--- /dev/null
+++ b/design/sass/v6/_768.sass
@@ -0,0 +1,440 @@
+//768px
+@media only screen and (min-width: 768px)
+
+ //**************** Masthead ************************
+
+ header[role="banner"]
+ margin-top: 2em
+ height: 60px
+ padding-bottom: 12px
+ border-bottom: 1px solid $brown
+ margin-bottom: 2em
+ h1
+ float: left
+ width: 160px
+ margin-top: -12px
+ h2
+ background: url('/media/img/text.png') 0 0 no-repeat
+ margin-top: 5px
+ float: left
+ nav[role="navigation"]
+ border: none
+ float: left
+ margin-left: 2em
+ ul
+ margin-top: 14px
+
+ #breadcrumbs
+ text-align: left
+
+
+ //writing archives
+ .archive
+ article
+ margin-bottom: 2em
+ padding-bottom: 2em
+ border: none
+ h1, p
+ float: left
+ text-align: left
+ margin: 0
+ p
+ line-height: 1.25em
+ h1
+ line-height: 2.4em
+ margin-top: .15em
+ width: 100%
+ .dateline
+ clear: left
+ width: 38%
+
+ .hyphenate
+ text-align: justify
+ width: 38%
+ margin-top: .5em
+ font-size: 1em
+ time
+ display: inline
+ float: right
+ img
+ float: right
+ width: 56%
+ .home
+ article
+ clear: both
+ min-height: 300px
+ h1
+ margin-top: 2em
+ text-align: left
+ .dateline
+ text-align: left
+ img
+ margin-bottom: 2em
+ margin-left: 2em
+ float: right
+ //Photos
+ #photo-galleries
+ margin: 0 auto
+ padding-left: 12px
+ width: 100%
+ img
+ width: auto
+ .legend
+ width: 291px
+ li
+ float: left
+ margin-right: 16px
+ #photo-galleries:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+
+ //individual posts
+ .single
+ article
+ width: 35.625em
+ margin: 4em auto
+ header
+ width: 35.625em
+ h1
+ font-size: 2em
+ text-align: left
+ margin: 0 0 .675em 0
+ aside, time
+ text-align: left
+ #code article h1, #contact article h1
+ font-size: 2em
+ text-align: left
+ margin: 0 0 .675em 0
+ .drop
+ font-size: 4.8em
+ padding: 35px 10px 5px 0
+
+ // generic two col layout
+ .col
+ float: left
+ width: 38%
+ margin-right: 2em
+ .two
+ width: 53%
+ .top
+ margin-bottom: 2em
+ font-size: .875em
+ padding-bottom: 2em
+ border-bottom: #e3e3e3 1px solid
+
+ .top:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+
+ //#page-navigation
+ // margin-left: 10%
+ // specifics for two column posts
+ .double article[role="main"]
+ header
+ width: 9em
+ float: left
+ margin-left: 0
+ h1, aside
+ text-align: right
+ line-height: 1.1em
+ margin-top: 16px
+ h1
+ font-size: 1.875em
+ time
+ display: block
+ text-align: right
+ .col
+ margin-left: 1.25em
+ width: 34%
+ .sec
+ margin-right: 0
+ margin-left: 1em
+ .narrow
+ width: 35.625em
+ margin: 0 auto
+ //#page-navigation
+ // margin-left: 10%
+
+ .post-body-single .legend
+ width: 98%
+ .post-body-single
+ p:first-of-type
+ font-size: 1.25em
+ line-height: 28px
+ #about .post-body-single
+ p:nth-of-type(1)
+ font-size: 1.063em
+ .addendum
+ line-height: 25px
+ dt
+ margin-left: -30px
+ font-style: italic
+ padding-left: 30px
+ text-indent: -30px
+ margin-bottom: .5em
+ dd
+ margin-left: 0
+ h4.notes
+ text-transform: uppercase
+ font-size: 1em
+ .pullquote
+ width: 10em
+ margin: 0 1em 1em -2em
+ font-style: italic
+ font-size: 1.3em
+ float: left
+ line-height: 1.6em
+ //#page-navigation
+ // margin-left: 15%
+ .numeral
+ display: block
+ font: bold 1.2em Helvetica, Verdana, sans-serif
+ margin-bottom: 0
+ margin-top: 60px
+
+ .post-body-single h3
+ font-size: 1.6em
+ line-height: 1.2em
+ font-weight: normal
+
+
+ .notes
+ main h1
+ float: none
+ margin-bottom: 1em
+ width: 100%
+ main
+ max-width: 600px
+ margin-left: auto
+ margin-right: auto
+ margin-bottom: 5em
+ article footer
+ margin-top: 1em
+ article p
+ float: none
+ .note--location
+ float: left
+ .note--date
+ float: right
+ .note--twitter
+ clear: both
+ float: right
+ padding-top: 1em
+ time
+ display: inline
+ float: right
+ .permalink
+ main
+ margin-top: 5em
+
+ //map
+ #map-canvas
+ height: 400px
+
+ //about
+ #about img
+ width: auto
+ clear: both
+
+ footer[role="contentinfo"]
+ font-size: 110%
+ nav
+ border: none
+ li
+ margin: 0 .5em
+
+ //******************************************************
+ //******************************************************
+ //********** DARK PAGES **************
+ //******************************************************
+ //******************************************************
+ .dark
+ header[role="banner"]
+ h2
+ background: url('/media/img/text.png') 0 -61px no-repeat
+
+ .park
+ position: relative
+ display: block
+ margin: 2em 0 2em 0
+ h1
+ display: block
+ position: absolute
+ top: 0px
+ background: $brown
+ z-index: 1000
+ +transparent_class
+ color: white
+ margin: 0
+ width: 100%
+ text-align: left
+ line-height: 2em
+ font-size: 2em
+ padding-left: .25em
+
+ .figure
+ position: relative
+ border: none
+ .legend
+ position: absolute
+ bottom: 0
+ width: 100%
+ margin: 0
+ background: $brown
+ +transparent_class
+ h2
+ font: normal 1.2em/2.6 Helvetica, Verdana, sans-serif
+ color: white
+ margin: 0 0 0 1em
+ float: left
+ padding: .3em 0
+ .legend:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+ .buttons
+
+ margin: .5em 10px 0 0
+ line-height: 2.6em
+ float: right
+ li
+ margin: 0 .25em
+ font-size: 10px
+ a
+ font-weight: bold
+ padding: 0.875em 1.75em 0.75em
+ background: #463215
+ color: white
+ -moz-border-radius: 25px
+ -webkit-border-radius: 25px
+ border-radius: 25px
+ &:hover
+ background: $orange
+
+
+
+
+
+
+
+ //******************************************************
+ //******************************************************
+ //********** BLACK PAGES **************
+ //******************************************************
+ //******************************************************
+
+ .black
+ header[role="banner"]
+ border-bottom: 1px #ccc solid
+ h2
+ background: url('/media/img/text.png') 0 -121px no-repeat
+ h6
+ display: block
+ text-align: center
+ text-transform: uppercase
+ font-size: .625em
+ margin: 0 0 1.25em 0
+ a
+ color: #b5b5b5
+ a:hover
+ color: $orange
+ #slides
+ article
+ position: relative
+ img
+ display: block
+ margin: 0 auto
+ .v
+ width: auto
+ .photo-options, .map-link
+ display: block
+ .figcaption
+ margin: 0
+ padding: 1em 0 1em 0
+ h3
+ float: left
+ padding: 0
+ font-weight: normal
+ .caption
+ border-right: 1px solid #1f1f21
+ width: 58%
+ float: left
+ padding-right: 1em
+ p
+ margin-left: .5em
+ font-size: .875em
+ clear: both
+ .map-link
+ float: right
+ background: #211d19
+ line-height: 1em
+ color: white
+ text-align: center
+ text-transform: uppercase
+ margin: 0 .25em
+ font: normal .75em Helvetica, Verdana, sans-serif
+ padding: .5em 1em
+ -moz-border-radius: 1em
+ -webkit-border-radius: 1em
+ border-radius: 1em
+ .map-link:hover
+ background: $orange
+ .photo-options
+ float: left
+ margin-left: 1em
+ p
+ font: normal .75em Helvetica, Verdana, sans-serif
+ color: #414144
+ line-height: 1.5em
+ a
+ color: #414144
+ font-weight: normal
+ a:hover
+ color: $orange
+ li
+ display: inline
+ margin: 0 .25em
+ font: normal 1em Helvetica, Verdana, sans-serif
+ a
+ font-weight: bold
+ p
+ margin: 0 1em
+ color: #74757A
+ font-size: 1em
+ .figcaption:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
+
+
+ .map-container
+ //clear: left
+ width: 469px
+ height: 392px
+ position: absolute
+ bottom: 100px
+ left: 20px
+ z-index: 2000
+ margin: 0
+ padding: 0
+ background: url("/media/img/mapbg.png") no-repeat top left
+
+ .map-wrapper
+ width: 400px
+ height: 328px
+ position: absolute
+ bottom: 27px
+ margin: 0px 0 0 44px
+ footer[role='contentinfo']
+ nav
+ border: none
diff --git a/design/sass/v6/_992.sass b/design/sass/v6/_992.sass
new file mode 100644
index 0000000..9cb47a3
--- /dev/null
+++ b/design/sass/v6/_992.sass
@@ -0,0 +1,169 @@
+///mediaquery
+
+//992px __________________________________________________________________________________________________________
+@media only screen and (min-width: 992px)
+ body
+ width: 61.75em
+ img
+ width: auto !important
+ header[role="banner"]
+ margin-top: 5.5em
+ h1
+ width: 190px
+ nav[role="navigation"]
+ margin-left: 8%
+ .archive
+ padding-top: 2em
+ article
+ margin-bottom: 2em
+ padding-bottom: 2em
+ border: none
+ h1
+ width: 42%
+ font-size: 1.5em
+ line-height: 1.3em
+ margin-top: .15em
+ margin-bottom: .25em
+ letter-spacing: .5px
+ p
+ line-height: 1.5em
+ img
+ float: right
+ .hyphenate, .dateline
+ width: 41%
+ .hyphenate
+ font-size: 1em
+
+ //individual posts
+ .single
+ article
+ margin-left: 20%
+ .picwide
+ clear: both
+ margin: 30px 0 30px -200px
+ .pullquote
+ margin-left: -6em
+ #page-navigation
+ margin-left: auto
+ margin-right: auto
+
+ .home
+ .sh
+ text-align: left
+ article
+ width: 19em
+ float: left
+ margin-right: 2em
+ clear: none
+ .last
+ margin-right: 0
+ .post-image
+ float: left
+ margin: 20px 8px 8px 0
+ .hyphenate, .dateline
+ width: auto
+ text-align: left
+ .hyphenate
+ text-align: justify
+ // specifics for two column posts
+ .double article[role="main"]
+ header
+ width: 10em
+ float: left
+ margin-left: 0
+ margin-top: 1em
+ h1, aside
+ text-align: right
+ line-height: 1.2em
+ h1
+ font-size: 1.875em
+ .col
+ width: 47%
+ margin-left: .875em
+ .sec
+ margin-left: 0
+ .post-body-double
+ margin: 2em 0 0 1.25em
+ float: left
+ width: 48.75em
+ p
+ margin: 0 0 1em 0
+ .narrow
+ width: 35.625em
+ margin-bottom: 1em
+ clear: both
+ margin-left: 1em
+ .hyphenate
+ margin-top: 0
+ //#page-navigation
+ // margin-left: 12em
+ //maps
+ #map-canvas
+ width: 48.5em
+ height: 31.25em
+ float: right
+ margin-bottom: 3em
+ .map-legend
+ ul
+ margin-bottom: 1em
+ h4
+ margin-bottom: .3em
+ letter-spacing: 1px
+ font-size: .75em
+ text-transform: uppercase
+ li
+ display: block
+ font-size: .875em
+ margin: 2px 0
+ li:after
+ content: ""
+ .two
+ margin-left: 3em
+ width: 51%
+ .black
+ #slides
+ width: 62.5em
+ img
+ width: auto
+ .directions
+ display: block
+ font: normal .675em Helvetica, Verdana, sans-serif
+ color: #414144
+ text-align: center
+ margin-bottom: 1.75em
+ .caption
+ width: 70% !important
+ .map-container
+ margin-left: 17em
+
+ //The new guide section
+ .guide
+ .intro
+ margin-bottom: 2.5em
+ .formatted
+ column-count: 3
+ column-gap: 1.5em
+ -moz-column-count: 3
+ -moz-column-gap: 24px
+ -webkit-column-count: 3
+ -webkit-column-gap: 1.5em
+ img
+ border: 8px $brown solid
+ .date, .meta
+ float: left
+ .meta
+ line-height: 18px
+ .tags
+ margin: 20px 0 10px 0
+ .guide-dek
+ padding: 0
+ width: 610px
+ float: right
+ h1
+ margin: 0 !important
+ article:after, .intro:after
+ content: "."
+ display: block
+ height: 0
+ clear: both
+ visibility: hidden
diff --git a/design/sass/v6/_leaflet.scss b/design/sass/v6/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/sass/v6/_leaflet.scss
@@ -0,0 +1 @@
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
diff --git a/design/sass/v6/_mixins.sass b/design/sass/v6/_mixins.sass
new file mode 100644
index 0000000..cbc8bdc
--- /dev/null
+++ b/design/sass/v6/_mixins.sass
@@ -0,0 +1,16 @@
+$brown: #201a11
+$orange: #b53a04
+
+=transparent_class
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"
+ filter: alpha(opacity = 90)
+ -moz-opacity: 0.9
+ -khtml-opacity: 0.9
+ opacity: 0.9
+
+=photo_overlays
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
+ filter: alpha(opacity = 70)
+ -moz-opacity: 0.7
+ -khtml-opacity: 0.7
+ opacity: 0.7 \ No newline at end of file
diff --git a/design/sass/v6/_typography.sass b/design/sass/v6/_typography.sass
new file mode 100644
index 0000000..64f25fc
--- /dev/null
+++ b/design/sass/v6/_typography.sass
@@ -0,0 +1,318 @@
+// font-sizes:
+// base: 16px = 1em
+// 10px = .625em
+// 12px = .75em
+// 14px = .875em
+// 16px = 1em
+// 17px = 1.0625em (body text in articles)
+// 18px = 1.125em
+// 24px = 1.5em
+// 30px = 1.875em
+// 32px = 2em
+
+ol, ul, li, dl
+ list-style: none
+ margin: 0
+ padding: 0
+ border: 0
+ outline: 0
+ background: transparent
+
+blockquote, q
+ quotes: none
+hr
+ display: none
+\:focus
+ outline: 0
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
+ display: block
+ margin: 0
+ padding: 0
+
+// 1.ROOT
+
+html
+ overflow-y: scroll
+ background: rgb(255, 255, 255) /*url(../img/grid.jpg) 50% 0 repeat-y*/
+ border-top: 3px $brown solid
+
+body
+ margin: 0 auto
+ padding: 0
+ width: 90%
+ font: normal 100% ff-meta-serif-web-pro, unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif
+ color: $brown
+ background-color: transparent
+
+
+// 2.HEADINGS
+
+h1, h2, h3, h4, h5, h6
+ font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+
+h1
+ font-size: 1.875em
+ line-height: 1.3em
+ font-weight: normal
+
+h2
+ margin-bottom: .75em
+ font-size: 1.5em /* 36 / 16 = 2 */
+ line-height: 1.5
+ font-weight: normal
+
+h3
+ margin-bottom: 1em
+ font-size: 1.6em
+ line-height: 1.5
+
+h4
+ margin-bottom: 1.25em
+ font-size: 1.25em /* 20 / 16 = 1.25 */
+ line-height: 1.25
+
+h5
+ margin-bottom: 1.5em
+ font-size: 1em /* 16 / 16 = 1 */
+
+h6
+ font-size: 1em /* 16 / 16 = 1 */
+
+// 3.TYPOGRAPHY
+
+p
+ font-size: 1.0625em /* 17px / 16px */
+ line-height: 1.5em /* 24px / 16px */
+ margin: 1em 0 0
+
+ul, ol
+ margin: 0 0 1.5em -24px
+ padding-left: 24px
+
+ul
+ list-style-type: disc
+
+ol
+ list-style-type: decimal
+
+li
+ ul, ol
+ margin: 0
+ font-size: 1em /* 16 / 16 = 1 */
+
+dl, dd
+ margin-bottom: 1.5em
+
+dt
+ font-weight: normal
+
+
+b, strong
+ font-weight: bold
+
+i, em
+ font-style: italic
+
+footer p
+ font-size: .625em
+ text-align: center
+a
+ text-decoration: none
+ color: $brown
+ -webkit-transition: color 0.3s ease-out
+ -moz-transition: color 0.3s ease-out
+ -o-transition: color 0.3s ease-out
+ -ms-transition: color 0.3s ease-out
+ transition: color 0.3s ease-out
+ &:hover
+ color: $orange
+sup
+ font: normal .625em Helvetica, Verdana, sans-serif
+small
+ font: normal .75em Helvetica, Verdana, sans-serif
+
+blockquote
+ font-style: italic
+ font-size: 1em
+ line-height: 1.625em
+ p
+ font-size: 1em
+ cite
+ font-style: normal
+img
+ border: 10px $brown solid
+
+pre
+ margin-bottom: 1.5em
+ white-space: pre
+ white-space: pre-wrap
+ word-wrap: break-word
+
+pre, code
+ font: .875em 'andale mono', 'lucida console', monospace
+ line-height: 1.5
+
+//Classes
+
+//.dateline, .breadcrumbs li, .geo, .legend h3, time
+
+.bl, time, #photo-galleries h1
+ text-transform: uppercase
+ font-size: 11px
+ letter-spacing: 1px
+
+.drop
+ font-size: 3em
+ float: left
+ display: block
+ padding: 18px 10px 5px 0
+ overflow: visible
+.double .drop, .drop-small
+ font-size: 3.1em
+ display: block
+ float: left
+ padding: 16px 8px 5px 0
+ overflow: visible
+.button
+ display: block
+ margin-top: 8px
+ a
+ padding: 9px 14px 7px 14px
+ font-weight: bold
+ line-height: 25px
+ text-transform: uppercase
+ background: #d7d7d7
+ color: #666 !important
+ -moz-border-radius: 25px
+ -webkit-border-radius: 25px
+ border-radius: 25px
+ font: bold 10px Helvetica, Verdana, sans-serif
+ width: auto
+ a:hover
+ background: $orange
+ color: white !important
+.alert
+ color: #ff3530
+//Pagination
+//next previous table
+#page-navigation
+ margin: 24px auto
+ strong
+ display: block
+ text-align: right
+ margin-top: 1px
+ text-transform: uppercase
+ font-size: .75em
+ letter-spacing: .1625em
+ font-weight: normal
+ font-style: normal
+
+//pagination in archives
+#pagination
+ margin-top: 1em
+ border-top: 1px $brown dotted
+ border-bottom: 1px $brown dotted
+ text-align: center
+ font-family: unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
+ padding: .25em 0
+ ul
+ margin-bottom: 0
+ li
+ display: inline
+ text-align: center
+
+// 4.LINKS
+
+a
+ outline: none
+ color: #111
+ text-decoration: none
+ &:visited
+ outline: none
+ color: #111
+ text-decoration: none
+ &:hover
+ outline: none
+ color: $orange
+ text-decoration: none
+ &:active, &:focus
+ outline: none
+ color: rgb(0, 0, 0)
+
+/* 5.FIGURES & IMAGES
+
+figure
+ margin-bottom: 1.5em
+ img, object, embed
+ margin-bottom: .75em
+ max-width: 100%
+
+figcaption
+ display: block
+ font-weight: normal
+
+// 6.TABLES
+
+table
+ border-collapse: collapse
+ border-spacing: 0
+ margin-bottom: 1.4em
+ width: 100%
+ font-size: .875em
+ /* 14 / 16 = .875
+
+th
+ font-weight: bold
+ padding: .25em 10px .25em 5px
+
+td, caption
+ padding: .25em 10px .25em 5px
+
+tfoot
+ font-style: italic
+
+caption
+ background-color: transparent
+
+// 14.GLOBAL OBJECTS
+
+.clearfix
+ zoom: 1
+ &:before, &:after
+ content: "\0020"
+ display: block
+ height: 0
+ overflow: hidden
+ &:after
+ clear: both
+
+.hide
+ display: none
+
+///* 15.VENDOR-SPECIFIC
+
+body
+ -webkit-text-size-adjust: 100%
+ -ms-text-size-adjust: 100%
+
+a:link
+ -webkit-tap-highlight-color: rgb(52, 158, 219)
+
+::-webkit-selection
+ background: rgb(23, 119, 175)
+ color: rgb(250, 250, 250)
+ text-shadow: none
+::-moz-selection
+ background: rgb(23, 119, 175)
+ color: rgb(250, 250, 250)
+ text-shadow: none
+::selection
+ background: rgb(23, 119, 175)
+ color: rgb(250, 250, 250)
+ text-shadow: none
+
+
+.ie7 img, .iem7 img
+ -ms-interpolation-mode: bicubic
+
diff --git a/design/sass/v6/ie.sass b/design/sass/v6/ie.sass
new file mode 100644
index 0000000..8ba7172
--- /dev/null
+++ b/design/sass/v6/ie.sass
@@ -0,0 +1,49 @@
+.archive
+ clear: both
+ article
+ *clear: both
+#pagination
+ clear: both
+.figcaption
+ *clear: both
+ *display: inline-block
+.top
+ clear: both
+ display: inline-block
+#projects-archive
+ clear: both
+ display: inline-block
+.black, .dark
+ nav
+ a, a:visited
+ color: white !important
+ a:hover
+ color: #b53a04 !important
+#map-canvas img
+ border: none
+.park
+ h1, .legend
+ *margin-left: -490px !important
+ .legend
+ height: 60px !important
+ .buttons
+ margin-top: 15px !important
+ a
+ display: block
+ float: left
+ margin-left: 8px
+ padding: 7px !important
+ .map-wrapper
+ *margin-left: 22px !important
+.drop
+ font-size: 5em !important
+ padding: 24px 10px 20px 0 !important
+.double .drop, .drop-small
+ padding: 14px 8px 5px 0
+.picfull
+ display: block !important
+ float: none !important
+ clear: both !important
+ display: inline-block !important
+.dark body:focus, .black body:focus
+ outline: none\9
diff --git a/design/sass/v6/stylesv6.sass b/design/sass/v6/stylesv6.sass
new file mode 100644
index 0000000..41ed20f
--- /dev/null
+++ b/design/sass/v6/stylesv6.sass
@@ -0,0 +1,50 @@
+//basic stuff
+@import _mixins.sass
+@import _typography.sass
+@import _480.sass
+@import _768.sass
+@import _992.sass
+@import _leaflet.scss
+
+
+
+//Print __________________________________________________________________________________________________________
+
+@media print
+ *
+ background: transparent !important
+ color: black !important
+ text-shadow: none !important
+ filter: none !important
+ -ms-filter: none !important
+ a
+ color: #444 !important
+ text-decoration: underline
+ &:visited
+ color: #444 !important
+ text-decoration: underline
+ &[href]:after
+ content: " (" attr(href) ")"
+ abbr[title]:after
+ content: " (" attr(title) ")"
+ a
+ &[href^="javascript:"]:after, &[href^="#"]:after
+ content: ""
+ pre, blockquote
+ border: 1px solid #999
+ page-break-inside: avoid
+ thead
+ display: table-header-group
+ tr, img
+ page-break-inside: avoid
+ @page
+ margin: .5cm
+
+ p, h2, h3
+ orphans: 3
+ widows: 3
+ h2, h3
+ page-break-after: avoid
+
+
+///mediaquery*/
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-04-02 11:53:09 +0000