more default typographic elements

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;
 }

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;

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;

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
 // *

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);

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%;
+    }
+}

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;
+}

template-blogheader.php

@@ -10,7 +10,7 @@ require 'controller/init.php';
 
 ?>
 <header class="blog">
-    <div class="centered-header">
+    <div class="row">
         <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
         <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
         <div class="app-links">
@@ -25,15 +25,12 @@ require 'controller/init.php';
         <div class="mobile-nav">
             <?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
         </div>
-    </div>
-    <div class="centered-header">
-
     </div>
     <div class="chevron-divider"></div>
     <h1><a href="/blog">ascribe blog</a></h1>
 </header>
 <nav class="blog-categories">
-    <div class="centered-categories">
+    <div class="row">
         <ul>
             <?php
             $args = array(