mirror of
https://github.com/kidoman/embd
synced 2025-02-09 04:03:16 +01:00
273 lines
4.6 KiB
SCSS
273 lines
4.6 KiB
SCSS
/* Typography */
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-family: $font-family;
|
|
font-weight: $header-font-weight;
|
|
color: $header-font-color;
|
|
text-rendering: optimizeLegibility;
|
|
@include padding-leader($rhythm-spacing);
|
|
@include adjust-leading-to($rhythm-height);
|
|
@include padding-trailer($rhythm-spacing);
|
|
a {
|
|
color: $header-link-color;
|
|
}
|
|
}
|
|
|
|
@include respond(all-phones) {
|
|
|
|
h1,h2,h3,h4,h5,h6 { word-wrap: break-word;}
|
|
|
|
}
|
|
|
|
h1 {
|
|
@include font-size($xxxlarge);
|
|
&.xlarge {
|
|
@include font-size($reallybig);
|
|
}
|
|
&.xxlarge {
|
|
@include font-size($tremendous);
|
|
}
|
|
&.absurd {
|
|
@include font-size($absurd);
|
|
}
|
|
}
|
|
h2 { @include font-size($xlarge); }
|
|
h3 { @include font-size($larger);}
|
|
h4 { @include font-size($large);}
|
|
h5 { @include font-size($med);}
|
|
h6 { @include font-size($norm);}
|
|
|
|
@include respond(all-phones) {
|
|
|
|
h1 { @include font-size($xlarge);}
|
|
h2 { @include font-size($larger + 6);}
|
|
|
|
}
|
|
|
|
.subhead {
|
|
color: #777;
|
|
font-weight: normal;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/*=====================================================
|
|
|
|
Links & Paragraph styles
|
|
|
|
======================================================*/
|
|
|
|
p {
|
|
font-family: $font-family;
|
|
font-weight: $body-font-weight;
|
|
@include font-size($base-font-size);
|
|
margin-bottom: $base-line-height / 2;
|
|
@include adjust-leading-to(1);
|
|
&.lead {
|
|
@include font-size(ms(0) * 1.25);
|
|
margin-bottom: ms(1);
|
|
}
|
|
@include respond(portrait-tablets) {
|
|
@include font-size($base-font-size * 1.1);
|
|
@include adjust-leading-to(1);
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $body-link-color;
|
|
text-decoration: none;
|
|
outline: 0;
|
|
line-height: inherit;
|
|
&:hover {
|
|
color: $body-link-hover-color;
|
|
}
|
|
}
|
|
|
|
/*=====================================================
|
|
|
|
Lists
|
|
|
|
======================================================*/
|
|
|
|
ul, ol {
|
|
@include margin-trailer($rhythm-spacing);
|
|
}
|
|
|
|
ul {
|
|
list-style: none outside;
|
|
}
|
|
|
|
ol {
|
|
list-style: decimal;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
ul {
|
|
&.square, &.circle, &.disc {
|
|
margin-left: 25px;
|
|
}
|
|
&.square {
|
|
list-style: square outside;
|
|
}
|
|
&.circle {
|
|
list-style: circle outside;
|
|
}
|
|
&.disc {
|
|
list-style: disc outside;
|
|
}
|
|
ul {
|
|
margin: 4px 0 5px 25px;
|
|
}
|
|
}
|
|
|
|
ol ol {
|
|
margin: 4px 0 5px 30px;
|
|
}
|
|
|
|
li {
|
|
@include padding-trailer($rhythm-spacing);
|
|
}
|
|
|
|
ul.large li {
|
|
line-height: 21px;
|
|
}
|
|
|
|
dl dt {
|
|
font-weight: bold;
|
|
@include font-size($norm);
|
|
}
|
|
|
|
@include respond(portrait-tablets) {
|
|
|
|
ul, ol, dl, p { text-align: left;}
|
|
|
|
}
|
|
|
|
/* Mobile */
|
|
|
|
em {
|
|
font-style: italic;
|
|
line-height: inherit;
|
|
}
|
|
|
|
strong {
|
|
font-weight: $font-weight-bold;
|
|
line-height: inherit;
|
|
}
|
|
|
|
small {
|
|
font-size: 56.4%;
|
|
line-height: inherit;
|
|
}
|
|
|
|
h1 small, h2 small, h3 small, h4 small, h5 small {
|
|
color: #777;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
|
|
blockquote {
|
|
line-height: 20px;
|
|
color: #777;
|
|
p {
|
|
line-height: 20px;
|
|
color: #777;
|
|
}
|
|
margin: 0 0 18px;
|
|
padding: 9px 20px 0 19px;
|
|
border-left: 5px solid $horizontal-rule-color;
|
|
cite {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-size: 1.2rem;
|
|
color: $body-font-color;
|
|
&:before {
|
|
content: "\2014 \0020";
|
|
}
|
|
a {
|
|
color: $body-font-color;
|
|
&:visited {
|
|
color: $body-font-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border: 1px solid $horizontal-rule-color;
|
|
clear: both;
|
|
margin: 16px 0 18px;
|
|
height: 0;
|
|
}
|
|
|
|
abbr, acronym {
|
|
text-transform: uppercase;
|
|
font-size: 90%;
|
|
color: #222;
|
|
border-bottom: 1px solid $horizontal-rule-color;
|
|
cursor: help;
|
|
}
|
|
|
|
abbr {
|
|
text-transform: none;
|
|
}
|
|
|
|
/**
|
|
* Print styles.
|
|
*
|
|
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
|
|
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
|
|
*/
|
|
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
text-shadow: none !important;
|
|
filter: none !important;
|
|
-ms-filter: none !important;
|
|
}
|
|
/* Black prints faster: sanbeiji.com/archives/953 */
|
|
p a {
|
|
color: $body-font-color !important;
|
|
text-decoration: underline;
|
|
&:visited {
|
|
color: $body-font-color !important;
|
|
text-decoration: underline;
|
|
}
|
|
&[href]:after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
}
|
|
abbr[title]:after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
a {
|
|
&[href^="javascript:"]:after, &[href^="#"]:after {
|
|
content: "";
|
|
}
|
|
}
|
|
/* Don't show links for images, or javascript/internal links */
|
|
pre, blockquote {
|
|
border: 1px solid #999;
|
|
page-break-inside: avoid;
|
|
}
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
/* css-discuss.incutio.com/wiki/Printing_Tables */
|
|
tr, img {
|
|
page-break-inside: avoid;
|
|
}
|
|
@page {
|
|
margin: 0.5cm;
|
|
}
|
|
|
|
p, h2, h3 {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
h2, h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|