mirror of
https://github.com/ascribe/wp-theme
synced 2024-12-22 09:13:38 +01:00
more default typographic elements
This commit is contained in:
parent
6a0cbfc0de
commit
701a4c47fc
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
// *
|
||||
|
||||
@ -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);
|
||||
|
||||
54
assets/less/ascribe/_media.less
Normal file
54
assets/less/ascribe/_media.less
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user