diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index cf893be..fe4503d 100644 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -51,7 +51,7 @@ li li { font-size: 100%; } - +/*== List .description (Product/Specs) === */ ul.description { padding: 0; @@ -95,13 +95,6 @@ h4 svg { margin-top: -.4rem; } -svg[class^='fa-'] { - display: inline-block; - height: 1em; - vertical-align: middle; - width: 1em; -} - h1 { font-size: 4rem; line-height: 5.6rem; @@ -190,6 +183,7 @@ h3+img { line-height: 4rem; } +/*== 2.1. Headings with background ==*/ @for $i from 1 through 6 { h#{$i}[class*='bg-'] { padding: 2.4rem; @@ -210,17 +204,20 @@ h3 [class*='bg-'] { padding: .4rem .8rem; } +/*== 2.2. Typography Classes = .text- == */ .text-intro, [class*='content-'] p { font-size: 2.4rem; line-height: 4rem; } +/* -- Serif -- */ .text-serif, h1 span { font-family: 'Maitree', times, serif; } +/* -- h1,h2... Promo/Landings -- */ .text-landing { letter-spacing: .4rem; text-transform: uppercase; @@ -230,6 +227,7 @@ h1 span { } } +/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */ .text-subtitle { letter-spacing: .2rem; margin-bottom: 0; @@ -256,6 +254,7 @@ h1 span { text-transform: lowercase; } +/* -- Emoji (you'll love this) -- */ .text-emoji { font-size: 6.8rem; line-height: 8.8rem; @@ -266,6 +265,7 @@ h1 span { } } +/* -- Numbers (results, sales... 23,478,289 iphones) -- */ .text-data { font-size: 6.4rem; line-height: 8rem; @@ -284,6 +284,7 @@ h1 span { width: 12.8rem; } +/* -- Magazine Two Columns -- */ @media (min-width: 768px) { .text-cols { column-count: 2; @@ -306,6 +307,7 @@ h1 span { text-transform: uppercase; } +/* -- Heading with border -- */ .text-context { position: relative; @@ -326,6 +328,7 @@ h1 span { } } +/* -- Separator/Symbols (stars ***...) -- */ .text-symbols { font-weight: 600; letter-spacing: .8rem; @@ -354,7 +357,7 @@ h1 span { } } } - +/* -- Pull Quote (Right/Left) -- */ [class*='text-pull'] { font-size: 2.4rem; font-weight: 400; @@ -399,6 +402,12 @@ figure[class*='text-pull-'] { padding-top: 0; } +/* -- Interviews (Questions & Answers) --- */ +/* --
+
name
+

question or answer

+
+--- */ .text-interview dt { font-weight: 600; margin-bottom: 0; @@ -415,34 +424,43 @@ figure[class*='text-pull-'] { } } + +/* -- Info Messages (error, warning, success... -- */ .text-info { font-size: 1.6rem; line-height: 2.4rem; } +/*========================================= +2.1. San Francisco Font (Apple's new font) +=========================================== */ .text-apple, .bg-apple { font-family: 'San Francisco', helvetica, arial, sans-serif; } +/* Ultra Light */ @font-face { font-family: 'San Francisco'; font-weight: 100; src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2'); } +/* Thin */ @font-face { font-family: 'San Francisco'; font-weight: 200; src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2'); } +/* Regular */ @font-face { font-family: 'San Francisco'; font-weight: 400; src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2'); } +/* Bold */ @font-face { font-family: 'San Francisco'; font-weight: bold;