diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css index a73b240..fb5e2e8 100644 --- a/doc/kss/templates/default/kss-assets/kss.css +++ b/doc/kss/templates/default/kss-assets/kss.css @@ -445,21 +445,33 @@ #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } #kss-node .kss-modifier__example .fullscreen { - border: 2px solid #e7e7e9; border-radius: 6px; padding-bottom: 50%; } - #kss-node .kss-modifier__example .fullscreen::before { - background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5; - border-bottom: 2px solid #e7e7e9; - content: ''; - display: block; - height: 20px; } #kss-node .kss-modifier__example .fullscreen .embed { height: calc(100% - 30px); left: 5px; position: absolute; top: 25px; width: calc(100% - 10px); } + #kss-node .kss-modifier__example section { + padding: 0; + position: relative; } + #kss-node .kss-modifier__example section::before { + position: absolute; + top: 0; + width: 100%; } + #kss-node .kss-modifier__example section p { + padding: 2.4rem; } + #kss-node .kss-modifier__example .fullscreen, + #kss-node .kss-modifier__example section { + border: 2px solid #e7e7e9; } + #kss-node .kss-modifier__example .fullscreen::before, + #kss-node .kss-modifier__example section::before { + background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5; + border-bottom: 2px solid #e7e7e9; + content: ''; + display: block; + height: 20px; } #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, #kss-node.kss-guides-mode .kss-modifier__example-footer:before, #kss-node.kss-guides-mode .kss-modifier__example-footer:after { @@ -564,6 +576,9 @@ font-weight: bold; } #kss-node .fullscreen > .embed { position: relative; } + #kss-node #navigation { + opacity: 1; + position: relative; } .kss-container { display: grid; @@ -603,19 +618,20 @@ #kssref-layout-radius .radius { padding: 2.4rem; } -#kssref-architecture-backgrounds span[class*='bg'] { +#kssref-layout-backgrounds span[class*='bg'] { display: inline-block; margin-left: -4px; - padding: 1.2rem; } + padding: 1.2rem; + width: 25%; } -#kssref-architecture-backgrounds-transparent div[class*='bg'] { +#kssref-layout-backgrounds-transparent div[class*='bg'] { margin: 0; padding: 2rem; } - #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { + #kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { margin: 3rem; padding: 6rem; } -#kssref-architecture-backgrounds-gradient div[class*='bg'] { +#kssref-layout-backgrounds-gradient div[class*='bg'] { margin: 3rem; padding: 4rem; } @@ -630,3 +646,6 @@ .kss-description p { padding-bottom: 1.2rem; } + +.kss-container-background-anim { + clip: rect(0 600px 400px 0); } diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss index d00193a..a82c01b 100644 --- a/doc/kss/templates/default/kss-assets/kss.scss +++ b/doc/kss/templates/default/kss-assets/kss.scss @@ -720,18 +720,9 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } .fullscreen { - border: 2px solid $kss-colors-subheader-border; border-radius: 6px; padding-bottom: 50%; - &::before { - background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg; - border-bottom: 2px solid $kss-colors-subheader-border; - content: ''; - display: block; - height: 20px; - } - .embed { height: calc(100% - 30px); left: 5px; @@ -740,6 +731,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; width: calc(100% - 10px); } } + + section { + padding: 0; + position: relative; + + &::before { + position: absolute; + top: 0; + width: 100%; + } + + p { + padding: 2.4rem; + } + } + + .fullscreen, + section { + border: 2px solid $kss-colors-subheader-border; + + &::before { + background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg; + border-bottom: 2px solid $kss-colors-subheader-border; + content: ''; + display: block; + height: 20px; + } + } } &.kss-guides-mode .kss-modifier__example, @@ -907,6 +926,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; .fullscreen > .embed { position: relative; } + + #navigation { + opacity: 1; + position: relative; + } } .kss-container { @@ -966,15 +990,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } } -#kssref-architecture-backgrounds { +#kssref-layout-backgrounds { & span[class*='bg'] { display: inline-block; margin-left: -4px; padding: 1.2rem; + width: 25%; } } -#kssref-architecture-backgrounds-transparent { +#kssref-layout-backgrounds-transparent { & div[class*='bg'] { margin: 0; padding: 2rem; @@ -986,7 +1011,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } } -#kssref-architecture-backgrounds-gradient { +#kssref-layout-backgrounds-gradient { & div[class*='bg'] { margin: 3rem; padding: 4rem; @@ -1010,3 +1035,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; padding-bottom: 1.2rem; } } + +.kss-container-background-anim { + clip: rect(0 600px 400px 0); +} diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 813231c..c3ad71b 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -87,6 +87,26 @@ +
+ Demos +
+
diff --git a/doc/styleguide/item-layout-background-anim.html b/doc/styleguide/item-layout-background-anim.html index a950a2e..4df7b33 100644 --- a/doc/styleguide/item-layout-background-anim.html +++ b/doc/styleguide/item-layout-background-anim.html @@ -87,6 +87,14 @@
+
+ Demos +
+
@@ -96,7 +104,9 @@
- +
+ +
@@ -108,12 +118,14 @@ Markup 
<section class="aligncenter bg-black">
-  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+  <div class="kss-container-background-anim">
+    <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+  </div>
 </section>
- Source: modules/_slides-bg.scss, line 140 + Source: modules/_slides-bg.scss, line 152
diff --git a/doc/styleguide/item-layout-background-video.html b/doc/styleguide/item-layout-background-video.html index 93d55ee..915d272 100644 --- a/doc/styleguide/item-layout-background-video.html +++ b/doc/styleguide/item-layout-background-video.html @@ -87,6 +87,14 @@
+
+ Demos +
+
@@ -125,7 +133,7 @@
- Source: modules/_slides-bg.scss, line 92 + Source: modules/_slides-bg.scss, line 101
diff --git a/doc/styleguide/item-layout-background.html b/doc/styleguide/item-layout-background.html index b411f9a..43a1baf 100644 --- a/doc/styleguide/item-layout-background.html +++ b/doc/styleguide/item-layout-background.html @@ -87,6 +87,32 @@
+
+ Demos +
+
@@ -99,7 +125,7 @@
- +
@@ -112,7 +138,7 @@
- +
@@ -124,7 +150,7 @@
- +
@@ -136,7 +162,7 @@
- +
@@ -148,7 +174,7 @@
- +
@@ -160,7 +186,7 @@
- +
@@ -172,7 +198,7 @@
- +
@@ -184,7 +210,7 @@
- +
@@ -196,7 +222,7 @@
- +
@@ -208,7 +234,7 @@
- +
@@ -220,7 +246,7 @@
- +
@@ -232,7 +258,7 @@
- +
@@ -244,7 +270,7 @@
- +
@@ -255,7 +281,7 @@ Markup 
<section>
-  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
 </section>
diff --git a/doc/styleguide/item-layout-backgrounds-gradient.html b/doc/styleguide/item-layout-backgrounds-gradient.html index 857375f..f8d6bb8 100644 --- a/doc/styleguide/item-layout-backgrounds-gradient.html +++ b/doc/styleguide/item-layout-backgrounds-gradient.html @@ -102,6 +102,10 @@
Horizontal
Vertical
Radial
+Demos: +[Horizontal](https://webslides.tv/demos/classes#slide=29) +[Vertical](https://webslides.tv/demos/classes#slide=32) +[Radial](https://webslides.tv/demos/classes#slide=31)
@@ -113,11 +117,15 @@ 
  <div class="bg-gradient-h">Horizontal</div>
   <div class="bg-gradient-v">Vertical</div>
-  <div class="bg-gradient-r">Radial</div>
+ <div class="bg-gradient-r">Radial</div> +Demos: +[Horizontal](https://webslides.tv/demos/classes#slide=29) +[Vertical](https://webslides.tv/demos/classes#slide=32) +[Radial](https://webslides.tv/demos/classes#slide=31)
- Source: _color.scss, line 193 + Source: _color.scss, line 201
diff --git a/doc/styleguide/item-layout-backgrounds-transparent.html b/doc/styleguide/item-layout-backgrounds-transparent.html index c9860a9..4eaf048 100644 --- a/doc/styleguide/item-layout-backgrounds-transparent.html +++ b/doc/styleguide/item-layout-backgrounds-transparent.html @@ -91,6 +91,14 @@ +
+ Demos +
+
@@ -121,7 +129,7 @@
- Source: _color.scss, line 168 + Source: _color.scss, line 173
diff --git a/doc/styleguide/item-layout-backgrounds.html b/doc/styleguide/item-layout-backgrounds.html index 05ffd29..a6100bb 100644 --- a/doc/styleguide/item-layout-backgrounds.html +++ b/doc/styleguide/item-layout-backgrounds.html @@ -91,6 +91,20 @@
+
+ Demos +
+
@@ -99,19 +113,19 @@
- Primary #44d -Secondary #67d -Light #f7f9fb -Black #000 -Black blue #123 -Blue #346 -Brown #f9f8f2 -Gray #d5d9e2 -Green #077 -Purple #62b -Red #c23 -White #fff -Facebook #3b5998 + Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998
@@ -121,19 +135,19 @@ Markup - 
<span class="bg-primary size-20">Primary #44d</span>
-<span class="bg-secondary size-20">Secondary #67d</span>
-<span class="bg-light size-20">Light #f7f9fb</span>
-<span class="bg-black size-20">Black #000</span>
-<span class="bg-black-blue size-20">Black blue #123</span>
-<span class="bg-blue size-20">Blue #346</span>
-<span class="bg-brown size-20">Brown #f9f8f2</span>
-<span class="bg-gray size-20">Gray #d5d9e2</span>
-<span class="bg-green size-20">Green #077</span>
-<span class="bg-purple size-20">Purple #62b</span>
-<span class="bg-red size-20">Red #c23</span>
-<span class="bg-white size-20">White #fff</span>
-<span class="bg-facebook size-20">Facebook #3b5998</span>
+ 
<span class="bg-primary">Primary #44d</span>
+<span class="bg-secondary">Secondary #67d</span>
+<span class="bg-light">Light #f7f9fb</span>
+<span class="bg-black">Black #000</span>
+<span class="bg-black-blue">Black blue #123</span>
+<span class="bg-blue">Blue #346</span>
+<span class="bg-brown">Brown #f9f8f2</span>
+<span class="bg-gray">Gray #d5d9e2</span>
+<span class="bg-green">Green #077</span>
+<span class="bg-purple">Purple #62b</span>
+<span class="bg-red">Red #c23</span>
+<span class="bg-white">White #fff</span>
+<span class="bg-facebook">Facebook #3b5998</span>
diff --git a/doc/styleguide/item-layout-grid.html b/doc/styleguide/item-layout-grid.html index b60f377..70264d5 100644 --- a/doc/styleguide/item-layout-grid.html +++ b/doc/styleguide/item-layout-grid.html @@ -92,6 +92,29 @@ Auto-fill & Equal height

+
+ Demos +
+
diff --git a/doc/styleguide/item-layout-navbars.html b/doc/styleguide/item-layout-navbars.html index 814a5e9..c0a89f9 100644 --- a/doc/styleguide/item-layout-navbars.html +++ b/doc/styleguide/item-layout-navbars.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index 832b27b..190302e 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -87,6 +87,17 @@
+
+ Demos +
+
@@ -182,7 +193,7 @@
- Source: _base.scss, line 189 + Source: _base.scss, line 197
diff --git a/doc/styleguide/item-layout-slides-bottom.html b/doc/styleguide/item-layout-slides-bottom.html index f52f085..15d5520 100644 --- a/doc/styleguide/item-layout-slides-bottom.html +++ b/doc/styleguide/item-layout-slides-bottom.html @@ -90,12 +90,9 @@
- Examples + Example
-
- Default styling -
@@ -104,18 +101,6 @@
-
- Slide alignment -
-
- bottom -
-
-
-

Content

-
-
-
@@ -128,7 +113,7 @@
- Source: modules/_slides.scss, line 74 + Source: modules/_slides.scss, line 72
diff --git a/doc/styleguide/item-layout-slides-top.html b/doc/styleguide/item-layout-slides-top.html index 892fc8f..824270d 100644 --- a/doc/styleguide/item-layout-slides-top.html +++ b/doc/styleguide/item-layout-slides-top.html @@ -90,12 +90,9 @@
- Examples + Example
-
- Default styling -
@@ -104,18 +101,6 @@
-
- Slide alignment -
-
- top -
-
-
-

Content

-
-
-
diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css index a73b240..fb5e2e8 100644 --- a/doc/styleguide/kss-assets/kss.css +++ b/doc/styleguide/kss-assets/kss.css @@ -445,21 +445,33 @@ #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } #kss-node .kss-modifier__example .fullscreen { - border: 2px solid #e7e7e9; border-radius: 6px; padding-bottom: 50%; } - #kss-node .kss-modifier__example .fullscreen::before { - background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5; - border-bottom: 2px solid #e7e7e9; - content: ''; - display: block; - height: 20px; } #kss-node .kss-modifier__example .fullscreen .embed { height: calc(100% - 30px); left: 5px; position: absolute; top: 25px; width: calc(100% - 10px); } + #kss-node .kss-modifier__example section { + padding: 0; + position: relative; } + #kss-node .kss-modifier__example section::before { + position: absolute; + top: 0; + width: 100%; } + #kss-node .kss-modifier__example section p { + padding: 2.4rem; } + #kss-node .kss-modifier__example .fullscreen, + #kss-node .kss-modifier__example section { + border: 2px solid #e7e7e9; } + #kss-node .kss-modifier__example .fullscreen::before, + #kss-node .kss-modifier__example section::before { + background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5; + border-bottom: 2px solid #e7e7e9; + content: ''; + display: block; + height: 20px; } #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, #kss-node.kss-guides-mode .kss-modifier__example-footer:before, #kss-node.kss-guides-mode .kss-modifier__example-footer:after { @@ -564,6 +576,9 @@ font-weight: bold; } #kss-node .fullscreen > .embed { position: relative; } + #kss-node #navigation { + opacity: 1; + position: relative; } .kss-container { display: grid; @@ -603,19 +618,20 @@ #kssref-layout-radius .radius { padding: 2.4rem; } -#kssref-architecture-backgrounds span[class*='bg'] { +#kssref-layout-backgrounds span[class*='bg'] { display: inline-block; margin-left: -4px; - padding: 1.2rem; } + padding: 1.2rem; + width: 25%; } -#kssref-architecture-backgrounds-transparent div[class*='bg'] { +#kssref-layout-backgrounds-transparent div[class*='bg'] { margin: 0; padding: 2rem; } - #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { + #kssref-layout-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { margin: 3rem; padding: 6rem; } -#kssref-architecture-backgrounds-gradient div[class*='bg'] { +#kssref-layout-backgrounds-gradient div[class*='bg'] { margin: 3rem; padding: 4rem; } @@ -630,3 +646,6 @@ .kss-description p { padding-bottom: 1.2rem; } + +.kss-container-background-anim { + clip: rect(0 600px 400px 0); } diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss index d00193a..a82c01b 100644 --- a/doc/styleguide/kss-assets/kss.scss +++ b/doc/styleguide/kss-assets/kss.scss @@ -720,18 +720,9 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } .fullscreen { - border: 2px solid $kss-colors-subheader-border; border-radius: 6px; padding-bottom: 50%; - &::before { - background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg; - border-bottom: 2px solid $kss-colors-subheader-border; - content: ''; - display: block; - height: 20px; - } - .embed { height: calc(100% - 30px); left: 5px; @@ -740,6 +731,34 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; width: calc(100% - 10px); } } + + section { + padding: 0; + position: relative; + + &::before { + position: absolute; + top: 0; + width: 100%; + } + + p { + padding: 2.4rem; + } + } + + .fullscreen, + section { + border: 2px solid $kss-colors-subheader-border; + + &::before { + background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg; + border-bottom: 2px solid $kss-colors-subheader-border; + content: ''; + display: block; + height: 20px; + } + } } &.kss-guides-mode .kss-modifier__example, @@ -907,6 +926,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; .fullscreen > .embed { position: relative; } + + #navigation { + opacity: 1; + position: relative; + } } .kss-container { @@ -966,15 +990,16 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } } -#kssref-architecture-backgrounds { +#kssref-layout-backgrounds { & span[class*='bg'] { display: inline-block; margin-left: -4px; padding: 1.2rem; + width: 25%; } } -#kssref-architecture-backgrounds-transparent { +#kssref-layout-backgrounds-transparent { & div[class*='bg'] { margin: 0; padding: 2rem; @@ -986,7 +1011,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } } -#kssref-architecture-backgrounds-gradient { +#kssref-layout-backgrounds-gradient { & div[class*='bg'] { margin: 3rem; padding: 4rem; @@ -1010,3 +1035,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; padding-bottom: 1.2rem; } } + +.kss-container-background-anim { + clip: rect(0 600px 400px 0); +} diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 6a123e7..3d67772 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -185,6 +185,26 @@
+
+ Demos +
+
@@ -271,6 +291,32 @@
+
+ Demos +
+
@@ -283,7 +329,7 @@
- +
@@ -296,7 +342,7 @@
- +
@@ -308,7 +354,7 @@
- +
@@ -320,7 +366,7 @@
- +
@@ -332,7 +378,7 @@
- +
@@ -344,7 +390,7 @@
- +
@@ -356,7 +402,7 @@
- +
@@ -368,7 +414,7 @@
- +
@@ -380,7 +426,7 @@
- +
@@ -392,7 +438,7 @@
- +
@@ -404,7 +450,7 @@
- +
@@ -416,7 +462,7 @@
- +
@@ -428,7 +474,7 @@
- +
@@ -439,7 +485,7 @@ Markup 
<section>
-  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/800/800/city/')"></span>
 </section>
@@ -460,6 +506,14 @@ +
+ Demos +
+
@@ -469,7 +523,9 @@
- +
+ +
@@ -481,12 +537,14 @@ Markup 
<section class="aligncenter bg-black">
-  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+  <div class="kss-container-background-anim">
+    <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+  </div>
 </section>
- Source: modules/_slides-bg.scss, line 140 + Source: modules/_slides-bg.scss, line 152
@@ -502,6 +560,14 @@
+
+ Demos +
+
@@ -540,7 +606,7 @@
- Source: modules/_slides-bg.scss, line 92 + Source: modules/_slides-bg.scss, line 101
@@ -576,6 +642,20 @@
+
+ Demos +
+
@@ -584,19 +664,19 @@
- Primary #44d -Secondary #67d -Light #f7f9fb -Black #000 -Black blue #123 -Blue #346 -Brown #f9f8f2 -Gray #d5d9e2 -Green #077 -Purple #62b -Red #c23 -White #fff -Facebook #3b5998 + Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998
@@ -606,19 +686,19 @@ Markup - 
<span class="bg-primary size-20">Primary #44d</span>
-<span class="bg-secondary size-20">Secondary #67d</span>
-<span class="bg-light size-20">Light #f7f9fb</span>
-<span class="bg-black size-20">Black #000</span>
-<span class="bg-black-blue size-20">Black blue #123</span>
-<span class="bg-blue size-20">Blue #346</span>
-<span class="bg-brown size-20">Brown #f9f8f2</span>
-<span class="bg-gray size-20">Gray #d5d9e2</span>
-<span class="bg-green size-20">Green #077</span>
-<span class="bg-purple size-20">Purple #62b</span>
-<span class="bg-red size-20">Red #c23</span>
-<span class="bg-white size-20">White #fff</span>
-<span class="bg-facebook size-20">Facebook #3b5998</span>
+ 
<span class="bg-primary">Primary #44d</span>
+<span class="bg-secondary">Secondary #67d</span>
+<span class="bg-light">Light #f7f9fb</span>
+<span class="bg-black">Black #000</span>
+<span class="bg-black-blue">Black blue #123</span>
+<span class="bg-blue">Blue #346</span>
+<span class="bg-brown">Brown #f9f8f2</span>
+<span class="bg-gray">Gray #d5d9e2</span>
+<span class="bg-green">Green #077</span>
+<span class="bg-purple">Purple #62b</span>
+<span class="bg-red">Red #c23</span>
+<span class="bg-white">White #fff</span>
+<span class="bg-facebook">Facebook #3b5998</span>
@@ -653,6 +733,10 @@
Horizontal
Vertical
Radial
+Demos: +[Horizontal](https://webslides.tv/demos/classes#slide=29) +[Vertical](https://webslides.tv/demos/classes#slide=32) +[Radial](https://webslides.tv/demos/classes#slide=31)
@@ -664,11 +748,15 @@ 
  <div class="bg-gradient-h">Horizontal</div>
   <div class="bg-gradient-v">Vertical</div>
-  <div class="bg-gradient-r">Radial</div>
+ <div class="bg-gradient-r">Radial</div> +Demos: +[Horizontal](https://webslides.tv/demos/classes#slide=29) +[Vertical](https://webslides.tv/demos/classes#slide=32) +[Radial](https://webslides.tv/demos/classes#slide=31)
- Source: _color.scss, line 193 + Source: _color.scss, line 201
@@ -688,6 +776,14 @@
+
+ Demos +
+
@@ -718,7 +814,7 @@
- Source: _color.scss, line 168 + Source: _color.scss, line 173
@@ -739,6 +835,29 @@ Auto-fill & Equal height

+
+ Demos +
+
@@ -824,6 +943,14 @@ Auto-fill & Equal height

+
+ Demos +
+
@@ -970,6 +1097,17 @@ Auto-fill & Equal height

+
+ Demos +
+
@@ -1065,7 +1203,7 @@ Auto-fill & Equal height

- Source: _base.scss, line 189 + Source: _base.scss, line 197
@@ -1178,12 +1316,9 @@ All HTML elements will have those styles

- Examples + Example
-
- Default styling -
@@ -1192,18 +1327,6 @@ All HTML elements will have those styles

-
- Slide alignment -
-
- bottom -
-
-
-

Content

-
-
-
@@ -1216,7 +1339,7 @@ All HTML elements will have those styles

- Source: modules/_slides.scss, line 74 + Source: modules/_slides.scss, line 72
@@ -1281,12 +1404,9 @@ All HTML elements will have those styles

- Examples + Example
-
- Default styling -
@@ -1295,18 +1415,6 @@ All HTML elements will have those styles

-
- Slide alignment -
-
- top -
-
-
-

Content

-
-
-
diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 394af20..e37f324 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -124,7 +124,7 @@ footer nav { .frame, .shadow { padding: 2.4rem; -} +}https://webslides.tv/demos/classes#slide=5 .radius { border-radius: .4rem; @@ -142,6 +142,14 @@ footer nav { // .alignleft - Align left. // .aligncenter - Align center. // +// Demos: +// [Example right](https://webslides.tv/demos/classes#slide=7) +// [Example left](https://webslides.tv/demos/classes#slide=6) +// [Example right](https://webslides.tv/demos/classes#slide=8) +// [In the header](https://webslides.tv/demos/classes#slide=5) +// [In the footer](https://webslides.tv/demos/components#slide=58) +// +// // Styleguide Layout.Alignment .alignright { float: right; @@ -199,6 +207,10 @@ figure.alignleft { // .size-30 - resize to 30%. // .size-20 - resize to 20%. // +// Demos: +// [50%](https://webslides.tv/demos/components#slide=25) +// [30%](https://webslides.tv/demos/components#slide=26) +// // Styleguide Layout.Sizes $sizes: 80, 70, 60, 50, 40, 30, 20; diff --git a/src/scss/_color.scss b/src/scss/_color.scss index 34cc21e..69365f5 100644 --- a/src/scss/_color.scss +++ b/src/scss/_color.scss @@ -109,19 +109,24 @@ Slides - Backgrounds
// Colors we use for backgrounds. // // Markup: -// Primary #44d -// Secondary #67d -// Light #f7f9fb -// Black #000 -// Black blue #123 -// Blue #346 -// Brown #f9f8f2 -// Gray #d5d9e2 -// Green #077 -// Purple #62b -// Red #c23 -// White #fff -// Facebook #3b5998 +// Primary #44d +// Secondary #67d +// Light #f7f9fb +// Black #000 +// Black blue #123 +// Blue #346 +// Brown #f9f8f2 +// Gray #d5d9e2 +// Green #077 +// Purple #62b +// Red #c23 +// White #fff +// Facebook #3b5998 +// +// Demos: +// [White](https://webslides.tv/demos/classes#slide=24) +// [Several colors](https://webslides.tv/demos/classes#slide=28) +// [Examples](https://webslides.tv/demos/components#slide=27) // // Styleguide Layout.Backgrounds @each $name, $color in $bg-colors { @@ -176,6 +181,9 @@ Slides - Backgrounds
//
Gradient
//
// +// Demos: +// [Example](https://webslides.tv/demos/components#slide=28) +// // Styleguide Layout.backgrounds.transparent .bg-trans-dark { background: rgba($black, .8); @@ -198,9 +206,12 @@ Slides - Backgrounds
//
Horizontal
//
Vertical
//
Radial
+// Demos: +// [Horizontal](https://webslides.tv/demos/classes#slide=29) +// [Vertical](https://webslides.tv/demos/classes#slide=32) +// [Radial](https://webslides.tv/demos/classes#slide=31) // // Styleguide Layout.backgrounds.gradient -/*Horizontal Gradient*/ .bg-gradient-h { background: linear-gradient(134deg, #32b 0, #62b 100%); } diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss index 2c50d58..4415f3e 100644 --- a/src/scss/modules/_grid.scss +++ b/src/scss/modules/_grid.scss @@ -16,6 +16,14 @@ //
// // +// Demos: +// [Example](https://webslides.tv/demos/classes#slide=18) +// [Example 2](https://webslides.tv/demos/classes#slide=4) +// [Sidebar + main](https://webslides.tv/demos/classes#slide=20) +// [Main + sidebar](https://webslides.tv/demos/classes#slide=21) +// [Sidebar + main + sidebar](https://webslides.tv/demos/classes#slide=22) +// [Columns](https://webslides.tv/demos/components#slide=9) +// // .vertical-align - Vertical align // // Styleguide Layout.Grid diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss index 421f321..815e258 100644 --- a/src/scss/modules/_navigation.scss +++ b/src/scss/modules/_navigation.scss @@ -20,6 +20,9 @@ // // // +// Demos: +// [Example](https://webslides.tv/demos/components#slide=8) +// // .navbar - Navigation bar // .aligncenter - Center alignment // .alignright - Right alignment diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss index c123500..0f93513 100644 --- a/src/scss/modules/_slides-bg.scss +++ b/src/scss/modules/_slides-bg.scss @@ -16,7 +16,7 @@ // // Markup: //
-// +// //
// // .background - Center. @@ -32,6 +32,15 @@ // .background-left - Left. // .background-right - Right. // +// Demos: +// [Example 1](https://webslides.tv/demos/components#slide=58) +// [Example 2](https://webslides.tv/demos/components#slide=59) +// [Example 3](https://webslides.tv/demos/components#slide=60) +// [Example 4](https://webslides.tv/demos/components#slide=61) +// [Right top](https://webslides.tv/demos/components#slide=51) +// [Right bottom](https://webslides.tv/demos/components#slide=92) +// [Left bottom](https://webslides.tv/demos/components#slide=87) +// // Styleguide Layout.Background .background { background-position: center; @@ -102,6 +111,9 @@ // // // + // Demos: + // [Example](https://webslides.tv/demos/classes#slide=34) + // // Styleguide Layout.Background.Video &-video { height: 100%; @@ -141,9 +153,14 @@ // // Markup: //
-// +//
+// +//
//
// +// Demos: +// [Example](https://webslides.tv/demos/components#slide=100) +// // Styleguide Layout.Background.Anim .background.anim { animation: anim 80s linear infinite; diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss index 39f1ce6..6f8f05f 100644 --- a/src/scss/modules/_slides.scss +++ b/src/scss/modules/_slides.scss @@ -59,8 +59,6 @@ section, // Align top // -// Slide alignment - top -// // Markup: //
//

Content

@@ -73,8 +71,6 @@ section, // Align bottom // -// Slide alignment - bottom -// // Markup: //
//

Content