mirror of https://github.com/ascribe/wp-theme
262 lines
4.4 KiB
Plaintext
262 lines
4.4 KiB
Plaintext
//
|
|
// Typography
|
|
//
|
|
|
|
//
|
|
// Scaffolding
|
|
//
|
|
|
|
// Root reset
|
|
html {
|
|
font-size: 10px;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
body {
|
|
&:extend(.copyText);
|
|
background-color: @body-bg;
|
|
|
|
text-rendering: optimizeLegibility;
|
|
// Controversial! But prevents text flickering in
|
|
// Safari/Firefox when animations are running
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-moz-font-feature-settings: 'liga', 'kern';
|
|
|
|
// remove old style numerals
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
|
}
|
|
|
|
// Legacy Text styles
|
|
.copyText {
|
|
font-family: @font-family-base;
|
|
font-size: @font-size-base;
|
|
font-weight: @font-weight-base;
|
|
line-height: @line-height-base;
|
|
color: @text-color;
|
|
}
|
|
.copyTextMedium {
|
|
&:extend(.fontLight);
|
|
color: @blueDeep;
|
|
font-size: 17px;
|
|
line-height: 21px;
|
|
}
|
|
.copyTextSmall {
|
|
font-family: @font-family-base;
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-base;
|
|
line-height: @line-height-small;
|
|
color: @text-color;
|
|
}
|
|
|
|
|
|
//
|
|
// Links
|
|
//
|
|
a {
|
|
color: @link-color;
|
|
text-decoration: none;
|
|
transition: .2s ease-out;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: @link-hover-color;
|
|
}
|
|
|
|
&:active {}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// Headings
|
|
//
|
|
h1, h2, h3, h4, h5, h6,
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
font-family: @headings-font-family;
|
|
font-weight: @headings-font-weight;
|
|
line-height: @headings-line-height;
|
|
color: @headings-color;
|
|
margin-bottom: @line-height-base;
|
|
|
|
// remove old style numerals
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
|
}
|
|
|
|
.h1, h1 {
|
|
font-size: @font-size-h1;
|
|
}
|
|
.h2, h2 {
|
|
font-size: @font-size-h2;
|
|
}
|
|
.h3, h3 {
|
|
font-size: @font-size-h3;
|
|
}
|
|
.h4, h4 {
|
|
font-size: @font-size-h4;
|
|
color: @black;
|
|
}
|
|
.h5, h5 {
|
|
color: @font-size-h5;
|
|
color: @black;
|
|
}
|
|
.h6, h6 {
|
|
font-size: @font-size-h6;
|
|
color: @black;
|
|
}
|
|
|
|
.page-title {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
// Reset fonts for relevant elements
|
|
input,
|
|
button,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
//
|
|
// Body text
|
|
//
|
|
p {
|
|
margin: 0 0 @line-height-base;
|
|
}
|
|
|
|
|
|
//
|
|
// Emphasis & misc
|
|
//
|
|
small,
|
|
.small {
|
|
font-size: @font-size-small;
|
|
line-height: @line-height-small;
|
|
}
|
|
|
|
.mini {
|
|
font-size: @font-size-mini;
|
|
line-height: @line-height-small;
|
|
}
|
|
|
|
.large {
|
|
font-size: @font-size-large;
|
|
line-height: @line-height-large;
|
|
}
|
|
|
|
strong,
|
|
.strong,
|
|
.bold {
|
|
font-weight: @font-weight-bold;
|
|
}
|
|
|
|
em,
|
|
.italic {
|
|
font-style: italic;
|
|
font-weight: @font-weight-normal;
|
|
}
|
|
|
|
// Alignment
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
.text-center { text-align: center; }
|
|
.text-justify { text-align: justify; }
|
|
.text-nowrap { white-space: nowrap; }
|
|
|
|
// Transformation
|
|
.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;
|
|
margin-bottom: @line-height-base;
|
|
padding-left: @line-height-base;
|
|
|
|
li {
|
|
margin-bottom: (@line-height-base / 2);
|
|
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;
|
|
}
|
|
|
|
|
|
hr {
|
|
border: 0;
|
|
height: 2px;
|
|
background: @blueLight;
|
|
margin: @spacer 0;
|
|
}
|