mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 21:03:23 +02:00
Code Issues Releases Wiki Activity

kss - typography

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-21 11:41:02 +02:00
parent 4e3e49768f
commit 28ee3fa285
24 changed files with 243 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
doc/styleguide/item-layout-alignment.html
View File

@@ -177,7 +177,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 133
Source: <code>_base.scss</code>, line 136
</div>
</div>

2
doc/styleguide/item-layout-sizes.html
View File

@@ -193,7 +193,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 197
Source: <code>_base.scss</code>, line 200
</div>
</div>

2
doc/styleguide/item-longforms-interviews.html
View File

@@ -155,7 +155,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 504
Source: <code>_typography.scss</code>, line 534
</div>
</div>

10
doc/styleguide/item-typography-columns.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;65" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 346
Source: <code>_typography.scss</code>, line 364
</div>
</div>

10
doc/styleguide/item-typography-context.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;64" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 376
Source: <code>_typography.scss</code>, line 397
</div>
</div>

10
doc/styleguide/item-typography-data.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;63" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 314
Source: <code>_typography.scss</code>, line 326
</div>
</div>

10
doc/styleguide/item-typography-emoji.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;40" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 296
Source: <code>_typography.scss</code>, line 305
</div>
</div>

2
doc/styleguide/item-typography-info.html
View File

@@ -113,7 +113,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 549
Source: <code>_typography.scss</code>, line 579
</div>
</div>

8
doc/styleguide/item-typography-intro.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;2" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

10
doc/styleguide/item-typography-label.html
View File

@@ -87,6 +87,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;66" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -109,7 +117,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 333
Source: <code>_typography.scss</code>, line 348
</div>
</div>

10
doc/styleguide/item-typography-landings.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;35" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 233
Source: <code>_typography.scss</code>, line 236
</div>
</div>

2
doc/styleguide/item-typography-lowercase.html
View File

@@ -109,7 +109,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 286
Source: <code>_typography.scss</code>, line 295
</div>
</div>

10
doc/styleguide/item-typography-pull_quote.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Pull right" target="_blank">Pull right</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -119,7 +127,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 449
Source: <code>_typography.scss</code>, line 476
</div>
</div>

2
doc/styleguide/item-typography-separator.html
View File

@@ -113,7 +113,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 418
Source: <code>_typography.scss</code>, line 445
</div>
</div>

2
doc/styleguide/item-typography-serif.html
View File

@@ -113,7 +113,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 220
Source: <code>_typography.scss</code>, line 223
</div>
</div>

8
doc/styleguide/item-typography-shadow.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;55" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

10
doc/styleguide/item-typography-subtitle.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;58" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 250
Source: <code>_typography.scss</code>, line 256
</div>
</div>

10
doc/styleguide/item-typography-symbols.html
View File

@@ -91,6 +91,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -113,7 +121,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 404
Source: <code>_typography.scss</code>, line 428
</div>
</div>

2
doc/styleguide/item-typography-uppercase.html
View File

@@ -109,7 +109,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 276
Source: <code>_typography.scss</code>, line 285
</div>
</div>

4
doc/styleguide/section-layout.html
View File

@@ -275,7 +275,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 133
Source: <code>_base.scss</code>, line 136
</div>
</div>
@@ -1203,7 +1203,7 @@ Auto-fill &amp; Equal height</p>
</details>
<div class="kss-source kss-style">
Source: <code>_base.scss</code>, line 197
Source: <code>_base.scss</code>, line 200
</div>
</div>

2
doc/styleguide/section-longforms.html
View File

@@ -212,7 +212,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 504
Source: <code>_typography.scss</code>, line 534
</div>
</div>

116
doc/styleguide/section-typography.html
View File

@@ -189,6 +189,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;65" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -211,7 +219,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 346
Source: <code>_typography.scss</code>, line 364
</div>
</div>
@@ -231,6 +239,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;64" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -253,7 +269,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 376
Source: <code>_typography.scss</code>, line 397
</div>
</div>
@@ -273,6 +289,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;63" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -295,7 +319,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 314
Source: <code>_typography.scss</code>, line 326
</div>
</div>
@@ -315,6 +339,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/keynote#slide&#x3D;40" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -337,7 +369,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 296
Source: <code>_typography.scss</code>, line 305
</div>
</div>
@@ -379,7 +411,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 549
Source: <code>_typography.scss</code>, line 579
</div>
</div>
@@ -399,6 +431,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;2" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -437,6 +477,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;66" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -459,7 +507,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 333
Source: <code>_typography.scss</code>, line 348
</div>
</div>
@@ -479,6 +527,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;35" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -501,7 +557,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 233
Source: <code>_typography.scss</code>, line 236
</div>
</div>
@@ -539,7 +595,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 286
Source: <code>_typography.scss</code>, line 295
</div>
</div>
@@ -559,6 +615,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Pull right" target="_blank">Pull right</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -587,7 +651,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 449
Source: <code>_typography.scss</code>, line 476
</div>
</div>
@@ -629,7 +693,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 418
Source: <code>_typography.scss</code>, line 445
</div>
</div>
@@ -671,7 +735,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 220
Source: <code>_typography.scss</code>, line 223
</div>
</div>
@@ -691,6 +755,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;55" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -737,6 +809,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;58" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -759,7 +839,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 250
Source: <code>_typography.scss</code>, line 256
</div>
</div>
@@ -779,6 +859,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;69" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -801,7 +889,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 404
Source: <code>_typography.scss</code>, line 428
</div>
</div>
@@ -839,7 +927,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 276
Source: <code>_typography.scss</code>, line 285
</div>
</div>

3
src/scss/_base.scss
View File

@@ -79,6 +79,9 @@ nav a[rel='external'] em,
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
// </div>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=55)
//
// Styleguide Typography.Shadow
.shadow {
position: relative;

30
src/scss/_typography.scss
View File

@@ -210,6 +210,9 @@ h3 [class*='bg-'] {
// Markup:
// <p class="text-intro">Create a simple web presence.</p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=2)
//
// Styleguide Typography.Intro
.text-intro,
[class*='content-'] p {
@@ -237,6 +240,9 @@ h1 span {
// Markup:
// <h1 class="text-landing">Landings</h1>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=35)
//
// Styleguide Typography.Landings
.text-landing {
letter-spacing: .4rem;
@@ -254,6 +260,9 @@ h1 span {
// Markup:
// <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=58)
//
// Styleguide Typography.Subtitle
.text-subtitle {
letter-spacing: .2rem;
@@ -300,6 +309,9 @@ h1 span {
// Markup:
// <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
//
// Demos:
// [Example](https://webslides.tv/demos/keynote#slide=40)
//
// Styleguide Typography.Emoji
.text-emoji {
font-size: 6.8rem;
@@ -318,6 +330,9 @@ h1 span {
// Markup:
// <p class="text-data">23,478,289</p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=63)
//
// Styleguide Typography.Data
.text-data {
font-size: 6.4rem;
@@ -335,6 +350,9 @@ h1 span {
// Markup:
// <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=66)
//
// Styleguide Typography.Label
.text-label {
display: inline-block;
@@ -350,6 +368,9 @@ h1 span {
// Markup:
// <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=65)
//
// Styleguide Typography.Columns
@media (min-width: 768px) {
.text-cols {
@@ -380,6 +401,9 @@ h1 span {
// Markup:
// <p class="text-context">Why WebSlides?</p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=64)
//
// Styleguide Typography.Context
.text-context {
position: relative;
@@ -408,6 +432,9 @@ h1 span {
// Markup:
// <p class="text-symbols">* * *</p>
//
// Demos:
// [Example](https://webslides.tv/demos/classes#slide=69)
//
// Styleguide Typography.Symbols
.text-symbols {
font-weight: 600;
@@ -456,6 +483,9 @@ h1 span {
// <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
// <p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
//
// Demos:
// [Pull right](https://webslides.tv/demos/classes#slide=69)
//
// Styleguide Typography.Pull_Quote
[class*='text-pull'] {
font-size: 2.4rem;