diff --git a/assets/less/ascribe.less b/assets/less/ascribe.less index cdb2354..dc7a891 100644 --- a/assets/less/ascribe.less +++ b/assets/less/ascribe.less @@ -18,6 +18,7 @@ @import 'ascribe/_branding.less'; @import 'ascribe/_helpers.less'; @import 'ascribe/_buttons.less'; +@import 'ascribe/_media.less'; @import 'ascribe/_grid.less'; @import 'ascribe/_footer.less'; @@ -335,7 +336,7 @@ header + .chevron-divider { background-size: cover; background-repeat: no-repeat; background-position: center; - .transition(all,0.3s); + transition: .3s ease-out; visibility: visible; opacity: 1; @@ -743,7 +744,7 @@ header + .chevron-divider { dd { max-height:0; overflow-y:hidden; - .transition(); + transition: .2s ease-out; margin-bottom: 5px; &.open { @@ -853,11 +854,7 @@ header + .chevron-divider { } } .press-articles { - .copyText; text-align: center; - blockquote { - margin: 0; - } .press-article { text-align: left; @@ -984,10 +981,6 @@ header + .chevron-divider { h2 + .event { border-top: 0; } - blockquote { - margin:0; - padding:0; - } & + .chevron-divider { height: 280px; @@ -1317,10 +1310,6 @@ h1 > a, display: block; } -.press-articles blockquote { - line-height: 1.4em; -} - .subtemplate.press-articles > div > div > img { margin-bottom: 70px; } diff --git a/assets/less/ascribe/_buttons.less b/assets/less/ascribe/_buttons.less index 95e0d83..57e2345 100644 --- a/assets/less/ascribe/_buttons.less +++ b/assets/less/ascribe/_buttons.less @@ -79,7 +79,7 @@ &.small { &:extend(.fontLight); padding: (@spacer / 4) (@spacer / 2); - font-size: 14px; + font-size: @font-size-small; color: @white; background-color: transparent; border-color: @white; diff --git a/assets/less/ascribe/_footer.less b/assets/less/ascribe/_footer.less index d5d3d13..29bba6e 100644 --- a/assets/less/ascribe/_footer.less +++ b/assets/less/ascribe/_footer.less @@ -2,7 +2,7 @@ // FOOTER // .footer { - &:extend(.copyTextSmall); + &:extend(.small); color: @white; text-align: center; @@ -10,6 +10,8 @@ text-align: left; } + a { color: @white; } + .menu { list-style: none; } @@ -18,7 +20,6 @@ display: inline; a { - color: @white; display: inline-block; padding: 3px 15px; opacity: .85; @@ -44,8 +45,8 @@ // Top footer // .footer__top { + &:extend(.subtemplate); background: @greyFooter; - padding: @spacer 0; .menu { margin-bottom: @spacer; diff --git a/assets/less/ascribe/_helpers.less b/assets/less/ascribe/_helpers.less index 3106c03..eecc241 100644 --- a/assets/less/ascribe/_helpers.less +++ b/assets/less/ascribe/_helpers.less @@ -23,33 +23,6 @@ } } - -// CENTERED -// Apply this class to an element to center it responsively in a container -@centeredpadding: 10px; - -.centered-pricing { - .clearfix; - max-width: 880px + 2*@centeredpadding; - padding: 0 @centeredpadding; - width: 100%; - margin: 0 auto; -} - -.centered-categories { - .clearfix; - max-width: 1000px; - width: 100%; - margin: 0 auto; -} - -// GENERAL LIST -// TAKES AWAY PADDING AND LIST STYLE -ul, ol { - padding:0; - margin:0; -} - // COLUMN SECTIONS .wrapper { @@ -138,27 +111,6 @@ ul, ol { .ttl-columns; } -// BORDER-BOX -// Changes the box model so that padding is included within width, rather than -// outside of width -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -// EMBED OBJECTS -// Makes embed objects responsive -img, -embed, -object, -video { - max-width: 100%; - border: 0; - padding: 0; -} // MOBILE-ONLY // Use this to only display something on mobile- and tablet-width devices. @@ -192,16 +144,6 @@ video { // MIXINS -// TRANSITION -// Applies a CSS transition between properties -.transition(@property: all, @speed: 0.15s, @easing: ease-in-out) { - -webkit-transition: @property @speed @easing; - -moz-transition: @property @speed @easing; - -ms-transition: @property @speed @easing; - -o-transition: @property @speed @easing; - transition: @property @speed @easing; -} - ///** // * Selection // * diff --git a/assets/less/ascribe/_hero.less b/assets/less/ascribe/_hero.less index 67f2473..56719a2 100644 --- a/assets/less/ascribe/_hero.less +++ b/assets/less/ascribe/_hero.less @@ -15,7 +15,7 @@ width: 100%; position: fixed; background-color: fade(@black,0); - .transition(all); + transition: .2s ease-out; &.stuck { background-color: fade(@black,100); diff --git a/assets/less/ascribe/_media.less b/assets/less/ascribe/_media.less new file mode 100644 index 0000000..2e806ba --- /dev/null +++ b/assets/less/ascribe/_media.less @@ -0,0 +1,54 @@ + +// +// responsive media by default +// +figure, img, svg, video, audio, embed, canvas, picture, +.wp-caption { + max-width: 100%; + height: auto; + border: 0; + padding: 0; +} + + +// +// Responsive video +// +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 35px; + height: 0; + overflow: hidden; + + > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + + +// +// Responsive iframe +// +iframe { + max-width: 100%; +} + +.iframe-container { + position: relative; + padding-bottom: 75%; + height: 0; + overflow: hidden; + + > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/assets/less/ascribe/_typography.less b/assets/less/ascribe/_typography.less index 8299816..74e14e0 100644 --- a/assets/less/ascribe/_typography.less +++ b/assets/less/ascribe/_typography.less @@ -119,7 +119,7 @@ textarea { // Body text // p { - margin: 0 0 (@spacer / 2); + margin: 0 0 (@line-height-base / 2); } @@ -164,3 +164,82 @@ em, .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } + + +// +// Lists +// +// Unordered and Ordered lists +ul, +ol { + margin-top: (@line-height-base / 2); + margin-bottom: (@line-height-base / 2); + padding-left: @line-height-base; + + li { + margin-bottom: (@line-height-base / 4); + padding-left: (@line-height-base / 2); + } + ul, + ol { + margin-bottom: 0; + } +} + +// List options +.list-unstyled { + padding-left: 0; + margin: 0; + + li { + list-style: none; + margin-bottom: 0; + padding-left: 0; + } +} + +// Inline turns list items into inline-block +.list-inline { + .list-unstyled; + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + + +// +// Blockquotes +// +blockquote { + border-left: 3px solid @greySocial; + margin-left: 0; + margin-top: @line-height-base; + margin-bottom: @line-height-base; + padding: (@line-height-base/2) @line-height-base; + color: @greyHr; + font-style: italic; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } + } +} + +cite { + &:extend(.bold, .small); + font-style: italic; +} + +// Addresses +address { + margin-bottom: @line-height-base; + font-style: normal; + line-height: @line-height-base; +} diff --git a/template-blogheader.php b/template-blogheader.php index e12262b..7d2940d 100644 --- a/template-blogheader.php +++ b/template-blogheader.php @@ -10,7 +10,7 @@ require 'controller/init.php'; ?>
-
+
-
-

ascribe blog