diff options
Diffstat (limited to 'design/sass')
| -rw-r--r-- | design/sass/_header.scss | 6 | ||||
| -rw-r--r-- | design/sass/_homepage.scss | 86 | ||||
| -rw-r--r-- | design/sass/_mixins.scss | 8 | ||||
| -rw-r--r-- | design/sass/_photos.scss | 282 | ||||
| -rw-r--r-- | design/sass/_queries.scss | 6 | ||||
| -rw-r--r-- | design/sass/_writing_archive.scss | 27 | ||||
| -rw-r--r-- | design/sass/_writing_details.scss | 56 |
7 files changed, 445 insertions, 26 deletions
diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 8f4b207..b0c83e0 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -138,7 +138,11 @@ nav[role="navigation"] { } @include breakpoint(delta) { margin-top: 1.5em; - max-width: 1170px; + max-width: $breakpoint-delta - 40px; + } + @include breakpoint(epsilon) { + margin-top: 1.5em; + max-width: $max_width; } } diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss index 6582da5..bea884d 100644 --- a/design/sass/_homepage.scss +++ b/design/sass/_homepage.scss @@ -44,32 +44,45 @@ } .homepage--bright { + max-width: 100%; + @extend %clearfix; article { margin-top: 0; margin-bottom: 20px; - width: 100%; - } - @include breakpoint(alpha) { max-width: 100%; + } + .odd, .even { margin-left: 0; margin-right: 0; padding-left: 0;} + @include breakpoint(delta) { margin-left: 0; + float: right; + max-width: 33%; article { float: left; - width: 47%; + width: 45%; margin-left: 1em; } + .odd { margin-right: 10px;} } @include breakpoint(gamma) { - float: left; - width: 250px; + float: right; + max-width: 33%; margin-top: 0; article { - float: none; - width: 100%; - margin-left: 0; + max-width: 100%; } } - @include breakpoint(delta) { - width: 340px; + @include breakpoint(beta) { + margin-top: 0; + article { + max-width: 50%; + } + } + @include breakpoint(beta-2) { + margin-top: 0; + article { + max-width: 47%; + } + .odd { margin-right: 10px;} } .post--image { margin-left: 0 !important; @@ -78,6 +91,7 @@ overflow: hidden; img { max-width: 100%; + width: 100%; display: block; /* just in case, to force correct aspect ratio */ height: auto !important; @@ -85,16 +99,60 @@ /* lt ie8 */ -ms-interpolation-mode: bicubic; } + @include breakpoint(epsilon){ + max-height: 160px; + } + } +} +.homepage--arc-big { + max-width: 100%; + @include breakpoint(gamma) { + float: left; + max-width: 63%; + article { + max-width: 47%; + width: 47%; + } + } + @include breakpoint(delta) { + float: left; + max-width: 63%; + article { + max-width: 49%; + + } + } +} +.popular { + @include breakpoint(gamma) { + article { + width: 100%; + max-width: 100%; + } + } + @include breakpoint(epsilon) { + float: right; + max-width: 33%; } } .homepage--next { - padding: 6px 0; - @include smcaps; + @extend %clearfix; + @include fontsize(14); + font-family: sans-serif; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; text-decoration: none; - &:after { + padding: 9px 10px 8px; + border: $link_color 1px solid; + a:after { content: "\21E2"; margin-left: 4px; } + a:hover { + background: $link_color; + color: white; + } } .has-hero { .header-wrapper { diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 29b424e..bd3c5a1 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -6,6 +6,7 @@ $body_font: $brown; $body_font_light: #b3aeae; //$light; +$max_width: 1280px; @mixin smcaps { text-transform: uppercase; @@ -113,9 +114,12 @@ $body_font_light: #b3aeae; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { - max-width: 960px; + max-width: $breakpoint-gamma - 20px; } @include breakpoint(delta) { - max-width: 1170px; + max-width: $breakpoint-delta - 40px; + } + @include breakpoint(epsilon) { + max-width: $max_width; } } diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss index c0f51ef..d152bf4 100644 --- a/design/sass/_photos.scss +++ b/design/sass/_photos.scss @@ -222,3 +222,285 @@ // padding-bottom: 0.25em; // } //} + +//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss + +/** +* VARS +**/ + +// font-sizes +$font-size-huge: 2.8em; +$font-size-big: 2em; +$font-size-medium: 1.4em; + +$def-color-1: #FFFFFF; +$def-color-2: #B9CED2; + +$border-color-1: #9C9FA5; + +$def-font-color: #6c7176; +$font-color-highlight: #A99929; +$font-color-hover-1: #C3B919; + +$darkblue: #3F658B; +@mixin prefixr($var, $val) { + -webkit-#{$var}: $val; + -moz-#{$var}: $val; + -o-#{$var}: $val; + -ms-#{$var}: $val; + $var: $val; +} + +/* IE8 Stuff */ +.jslghtbx-ie8.jslghtbx { + background-image: url('../img/trans-bck.png'); + display: none; + &.jslghtbx-active { + display: block; + } + .jslghtbx-contentwrapper > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + display: block; + } + .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + } +} + +/* Main wrapper */ +.jslghtbx { + font-family: sans-serif; + overflow: auto; + visibility: hidden; + position: fixed; + z-index: 2; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + &.jslghtbx-active { + visibility: visible; + background-color: rgba(0, 0, 0, 0.85); + } +} + +/* loading-animation */ +.jslghtbx-loading-animation { + margin-top: -60px; + margin-left: -60px; + width: 120px; + height: 120px; + top: 50%; + left: 50%; + display: none; + position: absolute; + z-index: -1; + & > span { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 20px; + margin: 5px; + background-color: #fff; + @include prefixr(transition, all .3s ease-in-out); + &.jslghtbx-active { + margin-bottom: 60px; + } + } +} + +.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation { + display: block; +} + +.jslghtbx-nooverflow { + overflow: hidden !important; // prevent showing of scrollbars on prev/next +} + +.jslghtbx-contentwrapper { + margin: auto; + visibility: hidden; + & > img { + background: #fff; + padding: .5em; + display: none; + height: auto; + margin-left: auto; + margin-right: auto; + opacity: 0; + } +} + +.jslghtbx-contentwrapper.jslghtbx-wrapper-active { + visibility: visible; + & > img { + display: block; + opacity: 1; + } +} + +/* Caption */ +.jslghtbx-caption { + display: none; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + max-width: 450px; + color: #fff; + text-align: center; + font-size: .9em; +} + +.jslghtbx-active .jslghtbx-caption { + display: inline; + margin-right: 1em; +} + +/* Animation Stuff */ +.jslghtbx-contentwrapper.jslghtbx-animate > img { + opacity: 0; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + @include prefixr(transition, opacity .2s ease-in-out); +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-next { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-prev { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-init { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + cursor: pointer; +} + +/* Controls */ +.jslghtbx-close { + position: fixed; + right: 23px; + top: 23px; + margin-top: -4px; + font-size: 2em; + color: $def-color-1; + cursor: pointer; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + text-shadow: 0 0 10px #fff; + } + @media screen and(max-width: 1060px) { + font-size: 1.5em; + } +} + +.jslghtbx-next, +.jslghtbx-prev { + display: none; + position: fixed; + top: 50%; + max-width: 6%; + max-height: 250px; + cursor: pointer; + @include prefixr(transition, all .2s ease-in-out); + &.jslghtbx-active { + display: block; + } + & > img { + width: 100%; + } + +} + +.jslghtbx-next { + right: .6em; + &.jslghtbx-no-img:hover { + border-left-color: #787878; + } + @media screen and(min-width: 451px) { + right: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-left: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + right: 5px; + padding-left: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + right: .2em; + padding-left: 20px; + } +} + +.jslghtbx-prev { + left: .6em; + &.jslghtbx-no-img:hover { + border-right-color: #787878; + } + @media screen and(min-width: 451px) { + left: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-right: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + left: 5px; + padding-right: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-right: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + left: .2em; + padding-right: 20px; + } +} + +.jslghtbx-thmb { + @media screen and(min-width: 451px) { + margin: 1em; + } + @media screen and(max-width: 450px) { + margin: 1em 0; + } + padding: 2px; + max-width: 100%; + max-height: 140px; + cursor: pointer; + box-shadow: 0px 0px 3px 0px #000; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + box-shadow: 0px 0px 14px 0px #000; + } +} + +.p-link { + color: white !important; + @include fontsize(14); + &:after { + content: "\2197"; + } +} diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 8262c84..682d83b 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -2,9 +2,9 @@ $breakpoint-alpha: 38em; $breakpoint-alpha-2: 450px; $breakpoint-beta: 49em; $breakpoint-beta-2: 620px; -$breakpoint-gamma: 56em; -$breakpoint-delta: 73.125em; -$breakpoint-epsilon: 79.625em; +$breakpoint-gamma: 960px; +$breakpoint-delta: 1170px; +$breakpoint-epsilon: $max_width; @mixin breakpoint($point) { @if $point == "alpha" { diff --git a/design/sass/_writing_archive.scss b/design/sass/_writing_archive.scss index 0f5f52b..91b5e46 100644 --- a/design/sass/_writing_archive.scss +++ b/design/sass/_writing_archive.scss @@ -117,4 +117,31 @@ line-height: 36px; } } +.homepage--about .homepage--arc-header:after{ + @extend %clearfix; + display: block; + width: 100%; + margin: 2em auto 1em; + height: 150px; + background: url("/media/img/usa-resize.svg") 50% no-repeat; + background-size: 230px; + @include breakpoint(gamma) { + display: inline; + width: 0; + height: 0; + background: none; + } +} +.homepage--about { + @include breakpoint(gamma) { + background: url("/media/img/usa-resize.svg") 0 60% no-repeat; + background-size: 120px; + } + @include breakpoint(delta) { + background-size: 170px; + } + @include breakpoint(epsilon) { + background-size: 250px; + } +} diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 6a63871..33d6729 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -246,8 +246,13 @@ img.picwide { } @include breakpoint(delta) { margin-left: -245px; - width: 1140px; - max-width: 1140px; + width: $breakpoint-delta; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-left: -245px; + width: $max_width * .98; + max-width: $max_width; } } .picwide figcaption { @@ -257,12 +262,16 @@ img.picwide { @include generic_sans; @include breakpoint(gamma) { text-align: right; - width: 960px; - max-width: 960px; + width: $breakpoint-gamma; + max-width: $breakpoint-gamma; } @include breakpoint(delta) { - width: 1170px; - max-width: 1170px; + width: $breakpoint-delta; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + width: $max_width; + max-width: $max_width; } } figure.picwide > img.picwide { @@ -350,6 +359,41 @@ figure.picwide > img.picwide { } } } +.image-cluster { + @include constrain_wide; + @extend %clearfix; + margin-bottom: 1em; + div img { + float: left; + width: 100%; + padding: 0; + margin: 0 6px 6px 0; + } + div a:last-of-type { + img { + margin-right: 0; + } + } + .picwide { + margin: 0; + padding: 0; + max-width: 100%; + width: 100%; + background: none; + } +} +.pic66 { + max-width: 63.9%; +} +.pic33 { + max-width: 35.5%; +} +.row-3 .pic33 { + max-width: 33%; +} +.pic5 { + max-width: 49.5%; +} .embed-wrapper { @include constrain_wide; |