mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-13 16:45:01 +02:00
Code Issues Releases Wiki Activity

kss - Landings and porfolio

Browse Source
This commit is contained in:
Luis Sacristán
2017-10-09 21:25:49 +02:00
parent cc89e47825
commit d0f59c1d84
16 changed files with 285 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
doc/styleguide/item-landings-and-portfolio-badgets.html
View File

@@ -91,6 +91,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;52" title="Inside a Call to Action" target="_blank">Inside a Call to Action</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;56" title="Inside a Cover" target="_blank">Inside a Cover</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;57" title="Inside another Cover" target="_blank">Inside another Cover</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Inside a semi transparent layer" target="_blank">Inside a semi transparent layer</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

20
doc/styleguide/item-landings-and-portfolio-buttons.html
View File

@@ -87,6 +87,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;1" title="Transparent" target="_blank">Transparent</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Price list" target="_blank">Price list</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Another price list" target="_blank">Another price list</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;76" title="In cards" target="_blank">In cards</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

17
doc/styleguide/item-landings-and-portfolio-cards.html
View File

@@ -91,6 +91,23 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;23" title="Card 50" target="_blank">Card 50</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="Where we are" target="_blank">Where we are</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;25" title="Fullscreen" target="_blank">Fullscreen</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;75" title="Card 60" target="_blank">Card 60</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

14
doc/styleguide/item-landings-and-portfolio-cta-cover.html
View File

@@ -84,9 +84,21 @@
</a>
</h2>
<div class="kss-description">
<p>TODO: needs a explanation</p>
</div>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demo" target="_blank">Demo</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -125,7 +137,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 75
Source: <code>modules/_promos.scss</code>, line 81
</div>
</div>

15
doc/styleguide/item-landings-and-portfolio-cta.html
View File

@@ -84,9 +84,24 @@
</a>
</h2>
<div class="kss-description">
<p>TODO: needs an explanation</p>
</div>
</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="Font demo" target="_blank">Font demo</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;78" title="An offer" target="_blank">An offer</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

20
doc/styleguide/item-landings-and-portfolio-quotes.html
View File

@@ -87,6 +87,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Why WebSlides?" target="_blank">Why WebSlides?</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;84" title="Sheryl Sandberg cite" target="_blank">Sheryl Sandberg cite</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;85" title="Example" target="_blank">Example</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;86" title="With picture" target="_blank">With picture</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;87" title="With side background" target="_blank">With side background</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-landings-and-portfolio-resume.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/components#slide&#x3D;50" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

8
doc/styleguide/item-landings-and-portfolio-toc.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/components#slide&#x3D;69" title="Table of contents" target="_blank">Table of contents</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

122
doc/styleguide/section-landings-and-portfolio.html
View File

@@ -149,6 +149,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;52" title="Inside a Call to Action" target="_blank">Inside a Call to Action</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;56" title="Inside a Cover" target="_blank">Inside a Cover</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;57" title="Inside another Cover" target="_blank">Inside another Cover</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;58" title="Inside a semi transparent layer" target="_blank">Inside a semi transparent layer</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -189,6 +209,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;1" title="Transparent" target="_blank">Transparent</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Price list" target="_blank">Price list</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;52" title="Another price list" target="_blank">Another price list</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;76" title="In cards" target="_blank">In cards</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;88" title="Different types" target="_blank">Different types</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -244,6 +284,23 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;23" title="Card 50" target="_blank">Card 50</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;24" title="Where we are" target="_blank">Where we are</a>
</li>
<li>
<a href="https://webslides.tv/demos/classes#slide&#x3D;25" title="Fullscreen" target="_blank">Fullscreen</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;75" title="Card 60" target="_blank">Card 60</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -293,9 +350,24 @@
</a>
</h2>
<div class="kss-description">
<p>TODO: needs an explanation</p>
</div>
</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="Font demo" target="_blank">Font demo</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;78" title="An offer" target="_blank">An offer</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -347,9 +419,21 @@
</a>
</h2>
<div class="kss-description">
<p>TODO: needs a explanation</p>
</div>
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;53" title="Demo" target="_blank">Demo</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -388,7 +472,7 @@
</details>
<div class="kss-source kss-style">
Source: <code>modules/_promos.scss</code>, line 75
Source: <code>modules/_promos.scss</code>, line 81
</div>
</div>
@@ -404,6 +488,26 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Why WebSlides?" target="_blank">Why WebSlides?</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;84" title="Sheryl Sandberg cite" target="_blank">Sheryl Sandberg cite</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;85" title="Example" target="_blank">Example</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;86" title="With picture" target="_blank">With picture</a>
</li>
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;87" title="With side background" target="_blank">With side background</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -448,6 +552,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;50" title="Example" target="_blank">Example</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
@@ -532,6 +644,14 @@
</div>
<div class="kss-modifier__heading kss-style">
Demos
</div>
<ul class="kss__demos">
<li>
<a href="https://webslides.tv/demos/components#slide&#x3D;69" title="Table of contents" target="_blank">Table of contents</a>
</li>
</ul>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">

7
src/scss/modules/_badges.scss
View File

@@ -6,6 +6,13 @@
// <p class="badge-android">Google Play</p>
// <p class="badge-ios">App Store</p>
//
// Demos:
// [Inside a Call to Action](https://webslides.tv/demos/components#slide=52)
// [Inside a Cover](https://webslides.tv/demos/components#slide=56)
// [Inside another Cover](https://webslides.tv/demos/components#slide=57)
// [Inside a semi transparent layer](https://webslides.tv/demos/components#slide=58)
// [Different types](https://webslides.tv/demos/components#slide=88)
//
// Styleguide Landings and portfolio.Badgets
[class*='badge-'] {
background-repeat: no-repeat;

7
src/scss/modules/_button.scss
View File

@@ -3,6 +3,13 @@
// Markup:
// <a href="#" class="button {{modifier_class}}">Download</a>
//
// Demos:
// [Transparent](https://webslides.tv/demos/classes#slide=1)
// [Price list](https://webslides.tv/demos/classes#slide=52)
// [Another price list](https://webslides.tv/demos/classes#slide=52)
// [In cards](https://webslides.tv/demos/components#slide=76)
// [Different types](https://webslides.tv/demos/components#slide=88)
//
// .radius - Rounded corners
//
// Styleguide Landings and portfolio.Buttons

6
src/scss/modules/_cards.scss
View File

@@ -12,6 +12,12 @@
// </div>
// </div>
//
// Demos:
// [Card 50](https://webslides.tv/demos/classes#slide=23)
// [Where we are](https://webslides.tv/demos/classes#slide=24)
// [Fullscreen](https://webslides.tv/demos/classes#slide=25)
// [Card 60](https://webslides.tv/demos/components#slide=75)
//
// Styleguide Landings and portfolio.Cards
[class*='card-'] {
&,

11
src/scss/modules/_promos.scss
View File

@@ -1,5 +1,7 @@
// Call to action
//
// TODO: needs an explanation
//
// Markup:
// <div class="cta">
// <div class="number">
@@ -11,6 +13,10 @@
// </div>
// </div>
//
// Demos:
// [Font demo](https://webslides.tv/demos/classes#slide=58)
// [An offer](https://webslides.tv/demos/components#slide=78)
//
// Styleguide Landings and portfolio.CTA
.cta {
display: flex;
@@ -74,6 +80,8 @@
// Covers
//
// TODO: needs a explanation
//
// Markup:
// <div class="cta-cover">
// <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -85,6 +93,9 @@
// </p>
// </div>
//
// Demos:
// [Demo](https://webslides.tv/demos/components#slide=53)
//
// Styleguide Landings and portfolio.cta-cover
.cta-cover {
display: table;

6
src/scss/modules/_quotes.scss
View File

@@ -6,6 +6,12 @@
// </blockquote>
// <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
//
// Demos:
// [Why WebSlides?](https://webslides.tv/demos/components#slide=83)
// [Sheryl Sandberg cite](https://webslides.tv/demos/components#slide=84)
// [Example](https://webslides.tv/demos/components#slide=85)
// [With picture](https://webslides.tv/demos/components#slide=86)
// [With side background](https://webslides.tv/demos/components#slide=87)
//
// Styleguide Landings and portfolio.Quotes
blockquote {

3
src/scss/modules/_toc.scss
View File

@@ -27,6 +27,9 @@
// </ol>
// </div>
//
// Demos:
// [Table of contents](https://webslides.tv/demos/components#slide=69)
//
// Styleguide Landings and portfolio.TOC
.toc,
.toc ol > li:before,

3
src/scss/modules/_work.scss
View File

@@ -26,6 +26,9 @@
// </li>
// </ul>
//
// Demos:
// [Example](https://webslides.tv/demos/components#slide=50)
//
// Styleguide Landings and portfolio.Resume
.work {
clear: both;