441 lines
9.6 KiB
SCSS
441 lines
9.6 KiB
SCSS
//
|
||
// Typography
|
||
//
|
||
// Check typography variables › _3_typography_settings.scss
|
||
//
|
||
|
||
/* Additional Typography to complement Foundation
|
||
------------------------------------------------------------------- */
|
||
|
||
p {
|
||
-webkit-hyphens: auto;
|
||
-moz-hyphens: auto;
|
||
-ms-hyphens: auto;
|
||
hyphens: auto;
|
||
}
|
||
p a,
|
||
article a {
|
||
font-weight: bold;
|
||
border-bottom: 1px dotted;
|
||
}
|
||
p a:hover,
|
||
article a:hover {
|
||
border-bottom: 2px solid;
|
||
}
|
||
p a.button {
|
||
border: 0;
|
||
}
|
||
p.button a {
|
||
border: 0;
|
||
color: #fff;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Headlines
|
||
------------------------------------------------------------------- */
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: $header-font-family;
|
||
font-weight: normal;
|
||
padding: 0;
|
||
}
|
||
|
||
h1 {
|
||
font-size: $font-size-h1;
|
||
margin-top: 0;
|
||
}
|
||
h2 {
|
||
font-size: $font-size-h2;
|
||
margin: 1.563em 0 0 0;
|
||
}
|
||
.blog-index h2 {
|
||
margin-top: 0;
|
||
}
|
||
h3 {
|
||
font-size: $font-size-h3;
|
||
margin: 1.152em 0 0 0;
|
||
}
|
||
h4 {
|
||
font-size: $font-size-h4;
|
||
margin: 1.152em 0 0 0;
|
||
}
|
||
h5 {
|
||
font-size: $font-size-h5;
|
||
margin: 1em 0 0 0;
|
||
}
|
||
|
||
|
||
|
||
/* Images
|
||
------------------------------------------------------------------- */
|
||
|
||
img { border-radius: $global-radius;}
|
||
img.alignleft,
|
||
img.left { float: left; margin:5px 15px 5px 0; }
|
||
img.alignright,
|
||
img.right { float: right; margin:5px 0 5px 15px; }
|
||
img.aligncenter,
|
||
img.center { display: block; margin:0 auto 10px; }
|
||
|
||
|
||
|
||
/* Lists
|
||
------------------------------------------------------------------- */
|
||
|
||
article dl dt { line-height: 1.3; }
|
||
article dl dd { line-height: 1.6; margin-bottom: rem-calc(12); margin-left: rem-calc(24); }
|
||
|
||
|
||
|
||
/* Tables
|
||
------------------------------------------------------------------- */
|
||
|
||
td {
|
||
vertical-align: top;
|
||
}
|
||
|
||
|
||
|
||
/* Code
|
||
------------------------------------------------------------------- */
|
||
|
||
pre {
|
||
overflow: auto;
|
||
margin-bottom: rem-calc(20);
|
||
padding: 5px;
|
||
background-color: $code-background-color;
|
||
border-radius: $global-radius;
|
||
}
|
||
pre code {
|
||
padding: rem-calc(2) rem-calc(5) rem-calc(1) rem-calc(0);
|
||
border: 0;
|
||
}
|
||
|
||
code {
|
||
font-size: rem-calc(14);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
|
||
|
||
/* Links
|
||
------------------------------------------------------------------- */
|
||
|
||
a,
|
||
a:link {
|
||
color: $ci-1;
|
||
}
|
||
|
||
a:visited {
|
||
border-bottom: $grey-2;
|
||
}
|
||
|
||
a:hover {
|
||
color: darken( $ci-1, 10% ) ;
|
||
// border-bottom: 3px solid $ci-1;
|
||
}
|
||
|
||
a:focus {
|
||
color: lighten( $ci-1, 20% ) ;
|
||
}
|
||
|
||
a:active {
|
||
color: darken( $ci-1, 20% ) ;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Lists
|
||
------------------------------------------------------------------- */
|
||
|
||
ul, ol {
|
||
margin-left: 20px;
|
||
padding: 0;
|
||
}
|
||
li {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.no-bullet {
|
||
list-style: none;
|
||
margin-left: 0;
|
||
}
|
||
|
||
li {
|
||
> ul,
|
||
> ol {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
dl {
|
||
|
||
}
|
||
dt:first-child {
|
||
padding-top: 0px;
|
||
}
|
||
dt {
|
||
font-weight: bold;
|
||
padding-top: 30px;
|
||
}
|
||
dd {
|
||
}
|
||
|
||
|
||
|
||
/* Quotes
|
||
------------------------------------------------------------------- */
|
||
|
||
blockquote {
|
||
font-style: italic;
|
||
position: relative;
|
||
border: none;
|
||
margin: 0 30px 30px 30px;
|
||
color: #4b4b4d
|
||
}
|
||
|
||
blockquote p {font-style: italic; color: $grey-10; }
|
||
|
||
blockquote:before {
|
||
display:block;content:"\00BB";
|
||
font-size:80px;
|
||
position:absolute;
|
||
left:-25px;
|
||
top:-40px;
|
||
color:#4b4b4d
|
||
}
|
||
blockquote:after {
|
||
display:block;
|
||
content:"\00AB";
|
||
font-size:80px;
|
||
position:absolute;
|
||
right:-10px;
|
||
bottom:-40px;
|
||
color:#4b4b4d;
|
||
}
|
||
blockquote cite:before {
|
||
content:"\2014 \0020"
|
||
}
|
||
blockquote cite a,blockquote cite a:visited {
|
||
color: #555
|
||
}
|
||
cite {
|
||
padding-top: 5px;
|
||
}
|
||
|
||
button, .button {
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
mark {
|
||
background-color: scale-color($warning-color, $lightness: 60%);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Typography for Articles
|
||
------------------------------------------------------------------- */
|
||
|
||
.subheadline {
|
||
font-size: rem-calc(16);
|
||
margin: 0;
|
||
text-transform: uppercase;
|
||
}
|
||
.teaser {
|
||
font-size: rem-calc(20);
|
||
}
|
||
.big-teaser {
|
||
font-style: italic; font-weight: 300;
|
||
}
|
||
.big-teaser a {
|
||
font-style: italic; font-weight: 400;
|
||
}
|
||
|
||
/* Smaller Font Size for Bigteaser on small devices */
|
||
@media only screen {
|
||
.big-teaser {
|
||
font-size: rem-calc(20);
|
||
}
|
||
}
|
||
@media only screen and (min-width: 40.063em) {
|
||
.big-teaser {
|
||
font-size: rem-calc(29);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* Additional typographical elements
|
||
------------------------------------------------------------------- */
|
||
|
||
.sans { font-family: $font-family-sans-serif; }
|
||
.serif { font-family: $font-family-serif; }
|
||
|
||
.font-size-h1 { font-size: $font-size-h1; }
|
||
.font-size-h2 { font-size: $font-size-h2; }
|
||
.font-size-h3 { font-size: $font-size-h3; }
|
||
.font-size-h4 { font-size: $font-size-h4; }
|
||
.font-size-h5 { font-size: $font-size-h5; }
|
||
.font-size-p { font-size: $font-size-p; }
|
||
|
||
|
||
/* Footnotes
|
||
------------------------------------------------------------------- */
|
||
|
||
.footnotes {
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.footnotes ol {
|
||
font-size: $font-size-small;
|
||
}
|
||
|
||
|
||
|
||
/* Icon Font: iconfont
|
||
See the icon-set/preview in /assets/fonts/iconfont-preview.html
|
||
------------------------------------------------------------------- */
|
||
|
||
@font-face {
|
||
font-family: 'iconfont';
|
||
src: url('../fonts/iconfont.eot'); /* IE9 Compat Modes */
|
||
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('../fonts/iconfont.woff') format('woff'), /* Pretty Modern Browsers */
|
||
url('../fonts/iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
url('../fonts/iconfont.svg#svgFontName') format('svg'); /* Legacy iOS */
|
||
}
|
||
|
||
.iconfont { font-family: iconfont; }
|
||
.iconfont-48 { font-size: 48px; }
|
||
|
||
|
||
[data-icon]:before { content: attr(data-icon); }
|
||
|
||
[data-icon]:before,
|
||
.icon-archive:before,
|
||
.icon-browser:before,
|
||
.icon-calendar:before,
|
||
.icon-camera:before,
|
||
.icon-chat:before,
|
||
.icon-check:before,
|
||
.icon-chevron-down:before,
|
||
.icon-chevron-left:before,
|
||
.icon-chevron-right:before,
|
||
.icon-chevron-up:before,
|
||
.icon-circle-with-cross:before,
|
||
.icon-circle-with-minus:before,
|
||
.icon-circle-with-plus:before,
|
||
.icon-cloud:before,
|
||
.icon-code:before,
|
||
.icon-cog:before,
|
||
.icon-dropbox:before,
|
||
.icon-edit:before,
|
||
.icon-export:before,
|
||
.icon-eye:before,
|
||
.icon-facebook:before,
|
||
.icon-feather:before,
|
||
.icon-github:before,
|
||
.icon-globe:before,
|
||
.icon-heart:before,
|
||
.icon-heart-outlined:before,
|
||
.icon-home:before,
|
||
.icon-instagram:before,
|
||
.icon-lab-flask:before,
|
||
.icon-leaf:before,
|
||
.icon-linkedin:before,
|
||
.icon-mail:before,
|
||
.icon-message:before,
|
||
.icon-mic:before,
|
||
.icon-network:before,
|
||
.icon-paper-plane:before,
|
||
.icon-pinterest:before,
|
||
.icon-price-tag:before,
|
||
.icon-rocket:before,
|
||
.icon-rss:before,
|
||
.icon-soundcloud:before,
|
||
.icon-star:before,
|
||
.icon-star-outlined:before,
|
||
.icon-thumbs-down:before,
|
||
.icon-thumbs-up:before,
|
||
.icon-tree:before,
|
||
.icon-tumblr:before,
|
||
.icon-twitter:before,
|
||
.icon-upload-to-cloud:before,
|
||
.icon-video:before,
|
||
.icon-vimeo:before,
|
||
.icon-warning:before,
|
||
.icon-youtube:before {
|
||
display: inline-block;
|
||
font-family: "iconfont";
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
font-variant: normal;
|
||
line-height: 1;
|
||
text-decoration: inherit;
|
||
text-rendering: optimizeLegibility;
|
||
text-transform: none;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
-webkit-font-smoothing: antialiased;
|
||
font-smoothing: antialiased;
|
||
}
|
||
|
||
.icon-archive:before { content: "\f100"; }
|
||
.icon-browser:before { content: "\f101"; }
|
||
.icon-calendar:before { content: "\f133"; }
|
||
.icon-camera:before { content: "\f102"; }
|
||
.icon-chat:before { content: "\f103"; }
|
||
.icon-check:before { content: "\f104"; }
|
||
.icon-chevron-down:before { content: "\f105"; }
|
||
.icon-chevron-left:before { content: "\f106"; }
|
||
.icon-chevron-right:before { content: "\f107"; }
|
||
.icon-chevron-up:before { content: "\f108"; }
|
||
.icon-circle-with-cross:before { content: "\f109"; }
|
||
.icon-circle-with-minus:before { content: "\f10a"; }
|
||
.icon-circle-with-plus:before { content: "\f10b"; }
|
||
.icon-cloud:before { content: "\f10c"; }
|
||
.icon-code:before { content: "\f10d"; }
|
||
.icon-cog:before { content: "\f10e"; }
|
||
.icon-dropbox:before { content: "\f10f"; }
|
||
.icon-edit:before { content: "\f110"; }
|
||
.icon-export:before { content: "\f111"; }
|
||
.icon-eye:before { content: "\f112"; }
|
||
.icon-facebook:before { content: "\f113"; }
|
||
.icon-feather:before { content: "\f114"; }
|
||
.icon-github:before { content: "\f115"; }
|
||
.icon-globe:before { content: "\f116"; }
|
||
.icon-heart:before { content: "\f117"; }
|
||
.icon-heart-outlined:before { content: "\f118"; }
|
||
.icon-home:before { content: "\f119"; }
|
||
.icon-instagram:before { content: "\f11a"; }
|
||
.icon-lab-flask:before { content: "\f11b"; }
|
||
.icon-leaf:before { content: "\f11c"; }
|
||
.icon-linkedin:before { content: "\f11d"; }
|
||
.icon-mail:before { content: "\f11e"; }
|
||
.icon-message:before { content: "\f11f"; }
|
||
.icon-mic:before { content: "\f120"; }
|
||
.icon-network:before { content: "\f121"; }
|
||
.icon-paper-plane:before { content: "\f122"; }
|
||
.icon-pinterest:before { content: "\f123"; }
|
||
.icon-price-tag:before { content: "\f124"; }
|
||
.icon-rocket:before { content: "\f125"; }
|
||
.icon-rss:before { content: "\f126"; }
|
||
.icon-soundcloud:before { content: "\f127"; }
|
||
.icon-star:before { content: "\f128"; }
|
||
.icon-star-outlined:before { content: "\f129"; }
|
||
.icon-thumbs-down:before { content: "\f12a"; }
|
||
.icon-thumbs-up:before { content: "\f12b"; }
|
||
.icon-tree:before { content: "\f134"; }
|
||
.icon-tumblr:before { content: "\f12c"; }
|
||
.icon-twitter:before { content: "\f12d"; }
|
||
.icon-upload-to-cloud:before { content: "\f12e"; }
|
||
.icon-video:before { content: "\f12f"; }
|
||
.icon-vimeo:before { content: "\f130"; }
|
||
.icon-warning:before { content: "\f131"; }
|
||
.icon-youtube:before { content: "\f132"; }
|