diff --git a/.sass-lint.yml b/.sass-lint.yml index ed1cc82..ff827c8 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -1,5 +1,7 @@ files: - include: 'src/scss/**/*.scss' + include: + - 'src/scss/**/*.scss' + - 'doc/kss/templates/**/*.scss' options: formatter: stylish merge-default-rules: false diff --git a/doc/kss/templates/default/index.hbs b/doc/kss/templates/default/index.hbs index 5f02bf0..46a7f1a 100644 --- a/doc/kss/templates/default/index.hbs +++ b/doc/kss/templates/default/index.hbs @@ -12,159 +12,158 @@ {{{styles}}} +
+

{{options.title}}

+ +
+
+

{{options.title}}

+
+
+
+ +
+
+ {{#if template.isHomepage}} + {{#if homepage}} +
+ {{{homepage}}} +
+ {{/if}} + {{else}} -
-
-

{{options.title}}

-
- -
-
-{{#if template.isHomepage}} - {{#if homepage}} -
- {{{homepage}}} -
- {{/if}} -{{else}} +
- {{! - Display each section, in order. + {{#if example}} +
+
+ Example{{#if modifiers}}s{{/if}} +
- The "root" element comes first in this loop, and can be detected using - the "#if @first" block as seen below. - }} - {{#each sections}} - <{{#if @first}}div{{else}}section{{/if}} id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}} {{#if @root.template.isItem}}is-fullscreen{{/if}}"> - -
- - - - {{referenceNumber}} - - {{#if @root.hasNumericReferences}} - #permalink - {{else}} - #{{reference}} - {{/if}} - - - {{header}} - - - - {{#if description}} -
- {{{description}}} -
- {{/if}} - - {{#if parameters}} -
Parameters:
-
    - {{#each parameters}} -
  • -
    {{name}}
    -
    - {{{description}}} - {{#if defaultValue}} -
    - Defaults to: {{defaultValue}} -
    - {{/if}} + {{#if modifiers}} +
    + Default styling
    -
    • - {{/each}} -
- {{/if}} -
+ {{/if}} - {{#if example}} -
-
- Example{{#if modifiers}}s{{/if}} -
- - {{#if modifiers}} -
- Default styling -
- {{/if}} - -
- {{{example}}} -
-
- - {{#each modifiers}} -
- {{name}} -
-
- {{{description}}} -
- {{{markup}}} + {{{example}}}
- {{/each}} -
- {{#if markup}} -
- - {{#if markupFile }} - Markup: {{ markupFile }} - {{else}} - Markup - {{/if}} - - 
{{markup}}
-
+ {{#each modifiers}} +
+ {{name}} +
+
+ {{{description}}} +
+
+ {{{markup}}} +
+
+ {{/each}} +
+ + {{#if markup}} +
+ + {{#if markupFile }} + Markup: {{ markupFile }} + {{else}} + Markup + {{/if}} + + 
{{markup}}
+
+ {{/if}} {{/if}} - {{/if}} - {{#if source.filename}} -
- Source: {{source.filename}}, line {{source.line}} -
- {{/if}} + {{#if source.filename}} +
+ Source: {{source.filename}}, line {{source.line}} +
+ {{/if}} - - {{/each}} -{{/if}} - + + {{/each}} + {{/if}} +
+ diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css index 05c64e4..0e20b82 100644 --- a/doc/kss/templates/default/kss-assets/kss.css +++ b/doc/kss/templates/default/kss-assets/kss.css @@ -1,34 +1,56 @@ +[class*='kss-'] { + font-family: 'San Francisco'; } + .kss-style { color: #444; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; } .kss-style a { - color: #0645ad; + color: #d1783e; text-decoration: none; - transition-property: color; - transition-duration: 0.5s; } + transition-duration: .5s; + transition-property: color; } .kss-style a:visited { - color: #0645ad; } - .kss-style a:hover, .kss-style a:focus { - color: #2272f7; } - .kss-style a:active { - color: #faa700; } + color: #d1783e; } + .kss-style a:focus { + color: #e5b290; } + .kss-style a:active, .kss-style a:hover { + color: #d1783e; } .kss-style a:hover, .kss-style a:active { outline: 0; } + .kss-style a.kss-nav__menu-link { + color: #2e3337; + font-size: 1.3rem; + font-weight: 900; } + .kss-style a.kss-nav__menu-link-active { + color: #93cdcf; } .kss-style p { - margin: 12px 0 24px 0; } - .kss-style h1, .kss-style h2, .kss-style h3, .kss-style h4, .kss-style h5, .kss-style h6 { - margin: 24px 0 0 0; - font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + margin: 12px 0 24px; } + .kss-style h1, + .kss-style h2, + .kss-style h3, + .kss-style h4, + .kss-style h5, + .kss-style h6 { color: #111; - line-height: 1.15em; } - .kss-style h4, .kss-style h5, .kss-style h6 { + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + font-weight: 900; + line-height: 1.15em; + margin: 24px 0 0; } + .kss-style h4, + .kss-style h5, + .kss-style h6 { font-weight: bold; } .kss-style h1 { - font-size: 40px; } + font-size: 44px; } .kss-style h2 { - font-size: 36px; } + font-size: 40px; } + .kss-style h2::before { + color: #e2e3e5; + content: '#'; + margin-left: -30px; + position: absolute; } .kss-style h3 { font-size: 34px; } .kss-style h4 { @@ -38,43 +60,48 @@ .kss-style h6 { font-size: 28px; } .kss-style blockquote { - color: #666; + border-left: 0.5em #e6e6e6 solid; + color: #999; margin: 0; - padding-left: 24px; - border-left: 0.5em #d9d9d9 solid; } + padding-left: 24px; } .kss-style hr { + border: 0; + border-bottom: 1px solid #e6e6e6; + border-top: 1px solid #dddddd; display: block; height: 2px; - border: 0; - border-top: 1px solid #dddddd; - border-bottom: 1px solid #e6e6e6; margin: 24px 0; padding: 0; } - .kss-style pre, .kss-style code, .kss-style kbd, .kss-style samp { - font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; + .kss-style pre, + .kss-style code, + .kss-style kbd, + .kss-style samp { color: #2b2b2b; + font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; font-size: 1em; } .kss-style pre { - white-space: pre; - overflow: scroll; } + overflow: scroll; + white-space: pre; } .kss-style ins { - color: #111; background: #ff9; + color: #111; text-decoration: none; } .kss-style mark { - color: #111; background: #ff0; + color: #111; font-weight: bold; } - .kss-style sub, .kss-style sup { + .kss-style sub, + .kss-style sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .kss-style sup { - top: -0.5em; } + top: -.5em; } .kss-style sub { - bottom: -0.25em; } - .kss-style ul, .kss-style ol { + bottom: -.25em; } + .kss-style ul, + .kss-style ol { margin: 24px 0; padding: 0 0 0 24px; } .kss-style li p:last-child { @@ -82,9 +109,8 @@ .kss-style dd { margin: 0 0 0 24px; } .kss-style img { - max-width: 100%; border: 0; - -ms-interpolation-mode: bicubic; + max-width: 100%; vertical-align: middle; } .kss-style table { border-collapse: collapse; @@ -92,36 +118,46 @@ .kss-style td { vertical-align: top; } @media print { - .kss-style a, .kss-style a:visited { + .kss-style a, + .kss-style a:visited { text-decoration: underline; } .kss-style hr { - height: 1px; border: 0; - border-bottom: 1px solid black; } + border-bottom: 1px solid #000; + height: 1px; } .kss-style a[href]:after { content: " (" attr(href) ")"; } - .kss-style a[href^="javascript:"]:after, .kss-style a[href^="#"]:after { - content: ""; } + .kss-style a[href^='javascript:']:after, + .kss-style a[href^='#']:after { + content: ''; } .kss-style abbr[title]:after { content: " (" attr(title) ")"; } - .kss-style pre, .kss-style blockquote { + .kss-style pre, + .kss-style blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } - .kss-style tr, .kss-style img { + .kss-style tr, + .kss-style img { page-break-inside: avoid; } .kss-style img { - max-width: 100% !important; } - .kss-style p, .kss-style h2, .kss-style h3 { + max-width: 100%; } + .kss-style p, + .kss-style h2, + .kss-style h3 { orphans: 3; widows: 3; } - .kss-style h2, .kss-style h3 { + .kss-style h2, + .kss-style h3 { page-break-after: avoid; } } #kss-node { + background: #fff; margin: 0; padding: 20px; - background: #fff; } + /* SPAN elements with the classes below are added by prettyprint. */ + /* plain text */ + /* Specify class=linenums on a pre to get line numbering */ } #kss-node.kss-fullscreen-mode .kss-sidebar, #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen), #kss-node.kss-fullscreen-mode .kss-github { @@ -131,194 +167,145 @@ padding: 0; } #kss-node .kss-main, #kss-node .kss-sidebar { - float: left; - margin-right: -100%; + border: 0; + border-right: 1px solid #e2e3e5; box-sizing: border-box; } } - #kss-node .kss-main { - width: 100%; - margin: 0 auto; } - @media screen and (min-width: 769px) { - #kss-node .kss-main { - width: 80%; - margin-left: 20%; - padding: 0 20px 0 30px; } } + @media screen and (min-width: 769px) { + #kss-node .kss-main { + padding: 0 20px 0 30px; } } #kss-node .kss-sidebar { - border-bottom: 1px solid #ddd; } + border-right: 1px solid #e2e3e5; } @media screen and (min-width: 769px) { #kss-node .kss-sidebar { - position: fixed; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; border-bottom: 0; - background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), radial-gradient(#fff, #eee); - box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.7); } } - -#kss-node .kss-doc-title { - margin: 0; } - @media screen and (min-width: 769px) { - #kss-node .kss-doc-title { - font-size: 1.5em; } } - -#kss-node .kss-header, -#kss-node .kss-nav { - position: relative; } - @media screen and (min-width: 769px) { - #kss-node .kss-header, - #kss-node .kss-nav { - margin-top: 2em; } } - #kss-node .kss-header ul, #kss-node .kss-header ol, #kss-node .kss-header li, - #kss-node .kss-nav ul, - #kss-node .kss-nav ol, - #kss-node .kss-nav li { - display: block; - float: none; } - #kss-node .kss-header li, - #kss-node .kss-nav li { - margin-left: 3.2rem; } - -#kss-node .kss-nav__menu { - margin-top: 12px; - margin-bottom: 12px; - padding: 0; - list-style-type: none; } - -#kss-node .kss-nav__menu-item { - display: inline-block; - padding-right: 24px; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-item { - display: list-item; - padding-right: 0; } } - -#kss-node .kss-nav__menu-link { - position: relative; - display: inline-block; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-link:before { - content: ' '; - position: absolute; - left: -20px; - width: 0; - height: 100%; - background-color: transparent; } } - #kss-node .kss-nav__menu-link.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; } - -#kss-node .kss-nav__menu-child { - display: none; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-child { + padding: 150px 10px 0 20px; } } + #kss-node .kss-doc-title { + margin: 0; } + #kss-node .kss-doc-title img { + max-width: 40px; + vertical-align: middle; } + @media screen and (min-width: 769px) { + #kss-node .kss-doc-title { + font-size: 1.5em; } } + #kss-node .kss-nav { + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav { + margin-top: 2em; } } + #kss-node .kss-nav ul, + #kss-node .kss-nav ol, + #kss-node .kss-nav li { display: block; - list-style-type: none; - margin: 0; - padding: 0; } - #kss-node .kss-nav__menu-child li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; } - #kss-node .kss-nav__menu-child li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; } } - -#kss-node .kss-nav__ref { - color: #333; - font-weight: bold; } - #kss-node .kss-nav__ref:after { - content: ' '; } - -#kss-node .kss-nav__ref-child { - font-weight: normal; } - -#kss-node { - /* SPAN elements with the classes below are added by prettyprint. */ - /* plain text */ - /* string content */ - /* a keyword */ - /* a comment */ - /* a type name */ - /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - /* a markup tag name */ - /* a markup attribute name */ - /* a markup attribute value */ - /* a declaration; a variable name */ - /* a function name */ - /* Use higher contrast and text-weight for printable form. */ - /* Specify class=linenums on a pre to get line numbering */ } + float: none; } + #kss-node .kss-nav li { + margin-left: 3.2rem; } + #kss-node .kss-nav .kss-nav-has-children > a::before { + content: url("./images/down_arrow.svg"); } + #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url("./images/up_arrow.svg"); } + #kss-node .kss-nav__menu { + list-style-type: none; + margin-bottom: 12px; + margin-top: 12px; + padding: 0; } + #kss-node .kss-nav__menu-item { + display: inline-block; + padding-right: 24px; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-item { + display: list-item; + padding-right: 0; } } + #kss-node .kss-nav__menu-link { + display: inline-block; + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-link:before { + background-color: transparent; + content: ' '; + height: 100%; + left: -20px; + position: absolute; + width: 0; } } + #kss-node .kss-nav__menu-child { + display: none; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-child { + display: block; + list-style-type: none; + margin: 0; + padding: 0; } + #kss-node .kss-nav__menu-child li { + padding: 15px 0 0; } + #kss-node .kss-nav__menu-child li:last-child { + padding: 15px 0; } } + #kss-node .kss-nav__ref { + color: #6a737a; } + #kss-node .kss-nav__ref:after { + content: ' '; } + #kss-node .kss-nav__ref-child { + font-weight: normal; } #kss-node .kss-section { - padding-top: 2.4rem; - padding-bottom: 2.4rem; } + padding-bottom: 2.4rem; + padding-top: 2.4rem; } #kss-node .kss-section.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; - overflow: auto !important; - padding: 20px; } + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; + overflow: auto; + padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; } #kss-node .kss-title { margin-bottom: 0; } #kss-node .is-fullscreen .kss-title { margin-top: 0; } #kss-node .kss-title__ref { + color: #333; display: block; font-size: 16px; - line-height: 16px; - color: #666; } + line-height: 16px; } #kss-node .kss-title__ref:before { content: 'Section '; } #kss-node .kss-title__permalink { - display: block; color: #000; + display: block; text-decoration: none; } #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active { - color: #0645ad; } + color: #d1783e; } @media screen and (min-width: 607px) { #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash { display: inline; } } #kss-node .kss-title__permalink-hash { - display: none; - color: #ccc; } + color: #999; + display: none; } #kss-node .kss-toolbar { - margin: 6px 0 24px; display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; line-height: 1; + margin: 6px 0 24px; padding: 3px; } #kss-node .kss-toolbar a { box-sizing: content-box; display: inline-block; - width: 16px; height: 16px; + overflow: visible; padding: 3px; - vertical-align: top; position: relative; - overflow: visible; } + vertical-align: top; + width: 16px; } #kss-node .kss-toolbar a + a { margin-left: 6px; } #kss-node .kss-toolbar a .kss-toolbar__icon-fill { - fill: #ccc; } + fill: #999; } #kss-node .kss-toolbar a svg.on { display: none; } #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover { @@ -326,51 +313,51 @@ #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill { fill: #000; } #kss-node .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; + background: #fff; + border: solid 1px #999; bottom: 100%; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + clip: rect(1px, 1px, 1px, 1px); + color: #000; + cursor: help; + display: inline-block; + height: 1px; left: -10px; margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; opacity: 0; - transition: opacity 0.25s; - height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - word-wrap: normal; } + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; + word-wrap: normal; + z-index: 1; } #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; + border-color: #999 transparent; + border-style: solid; border-width: 7px 5px 0; - border-color: #666 transparent; - border-style: solid; } + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; } #kss-node .kss-toolbar__tooltip:after { - bottom: -6px; - border-top-color: #fff; } + border-top-color: #fff; + bottom: -6px; } #kss-node a:focus > .kss-toolbar__tooltip, #kss-node a:hover > .kss-toolbar__tooltip { - opacity: 1; clip: auto; height: auto; - width: auto; - overflow: visible; } + opacity: 1; + overflow: visible; + width: auto; } #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen], #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides], #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; } + background-color: #999; + border-color: #999; } #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill, #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill, #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill { @@ -386,8 +373,8 @@ #kss-node .kss-parameters { display: table; list-style-type: none; - margin-top: 0; margin-left: 0; + margin-top: 0; padding-left: 0; } #kss-node .kss-parameters__title { font-weight: bold; } @@ -402,23 +389,23 @@ #kss-node .kss-parameters__default-value code { white-space: nowrap; } #kss-node .kss-modifier__wrapper { - border: 1px solid #ccc; + border: 1px solid #999; padding: 0 10px 10px; } #kss-node .is-fullscreen .kss-modifier__wrapper { + border: 0; margin-left: -20px; margin-right: -20px; padding-left: 0; - padding-right: 0; - border: none; } + padding-right: 0; } #kss-node .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; - font-weight: bold; } + background-color: #999; + border-bottom: 1px solid #999; + font-weight: bold; + margin: 0 -10px 10px; + padding: 10px; } #kss-node .is-fullscreen .kss-modifier__heading { - margin: 0 20px 10px; - border: 1px solid #ccc; } + border: 1px solid #999; + margin: 0 20px 10px; } #kss-node .kss-modifier__default-name { font-weight: bold; margin-bottom: 12px; } @@ -427,8 +414,8 @@ margin-right: 20px; } #kss-node .kss-modifier__name { float: left; - padding-right: 10px; - font-weight: bold; } + font-weight: bold; + padding-right: 10px; } #kss-node .is-fullscreen .kss-modifier__name { margin-left: 20px; } #kss-node .kss-modifier__description { @@ -436,64 +423,64 @@ #kss-node .is-fullscreen .kss-modifier__description { margin-right: 20px; } #kss-node .kss-modifier__example { - clear: left; border: 2px dashed transparent; + clear: left; + margin: -2px -2px 22px; position: relative; - z-index: 0; - margin: -2px -2px 22px; } + z-index: 0; } #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } #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 { - z-index: -1; + border: 2px solid #000; box-sizing: border-box; content: ''; + height: 5px; position: absolute; width: 5px; - height: 5px; - border: 2px solid #000; } + z-index: -1; } #kss-node.kss-guides-mode .kss-modifier__example { border-color: #000; } #kss-node.kss-guides-mode .kss-modifier__example:before { - top: -5px; + border-left: 0; + border-top: 0; left: -5px; - border-top: 0; - border-left: 0; } + top: -5px; } #kss-node.kss-guides-mode .kss-modifier__example:after { - top: -5px; - right: -5px; + border-right: 0; border-top: 0; - border-right: 0; } + right: -5px; + top: -5px; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before { left: auto; right: 0; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after { - right: auto; - left: 0; } + left: 0; + right: auto; } #kss-node .kss-modifier__example-footer { clear: both; } #kss-node.kss-guides-mode .kss-modifier__example-footer:before { - bottom: -5px; - left: -5px; border-bottom: 0; - border-left: 0; } - #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border-left: 0; bottom: -5px; - right: -5px; + left: -5px; } + #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border-bottom: 0; border-right: 0; - border-bottom: 0; } + bottom: -5px; + right: -5px; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before { left: auto; right: 0; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after { - right: auto; - left: 0; } + left: 0; + right: auto; } #kss-node .kss-markup { - margin: 24px 0; - border: 1px solid #ccc; } + border: 1px solid #999; + margin: 24px 0; } #kss-node .kss-markup[open] summary { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #999; margin-bottom: 3px; } #kss-node .kss-markup summary { padding-left: 10px; } @@ -507,100 +494,83 @@ #kss-node .kss-github { display: block; position: absolute; - top: 0; - right: 0; } } + right: 0; + top: 0; } } #kss-node .kss-github img { border: 0; } #kss-node .pln { color: #000; } - #kss-node .str { - color: #080; } - #kss-node .kwd { - color: #008; } - #kss-node .com { - color: #800; } - #kss-node .typ { - color: #606; } - #kss-node .lit { - color: #066; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #660; } - #kss-node .tag { - color: #008; } - #kss-node .atn { - color: #606; } - #kss-node .atv { - color: #080; } - #kss-node .dec, #kss-node .var { - color: #606; } - #kss-node .fun { - color: red; } - @media print, projection { - #kss-node .str { - color: #060; } - #kss-node .kwd { - color: #006; - font-weight: bold; } - #kss-node .com { - color: #600; - font-style: italic; } - #kss-node .typ { - color: #404; - font-weight: bold; } - #kss-node .lit { - color: #044; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #440; } - #kss-node .tag { - color: #006; - font-weight: bold; } - #kss-node .atn { - color: #404; } - #kss-node .atv { - color: #060; } } #kss-node ol.linenums { - margin: 0; - padding: 0 0 3px 0; list-style-type: none; - /* Alternate shading for lines */ } + margin: 0; + padding: 0 0 3px; } #kss-node ol.linenums li { + background: #fff; + border-bottom: 1px solid #999; min-height: 24px; - border-bottom: 1px solid #eee; - padding: 0 10px; - background: #fff; } + padding: 0 10px; } #kss-node ol.linenums li:first-child { padding-top: 3px; } - #kss-node ol.linenums li.L0, - #kss-node ol.linenums li.L2, - #kss-node ol.linenums li.L4, - #kss-node ol.linenums li.L6, - #kss-node ol.linenums li.L8 { - background: #fcfcfc; } + +.kss-container { + display: grid; + grid-template-columns: 25% 75%; } + +.kss-header { + background-color: #2f3742; + display: flex; + padding: 0 2.4rem; + position: fixed; } + .kss-header h1, + .kss-header li a { + color: #fff; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; } + .kss-header li a:hover { + color: #93cdcf; } + .kss-header .kss-menu-active { + border-bottom: 4px solid #93cdcf; + box-sizing: border-box; + color: #93cdcf; } + +.kss-sub-header { + background: #f3f3f5; + border-bottom: 4px solid #e7e7e9; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; } #kssref-layout-radius .radius { padding: 2.4rem; } -#kssref-base-backgrounds span[class*=bg] { +#kssref-base-backgrounds span[class*='bg'] { display: inline-block; - padding: 1.2rem; - margin-left: -4px; } + margin-left: -4px; + padding: 1.2rem; } -#kssref-base-backgrounds-transparent div[class*=bg] { - padding: 2rem; - margin: 0; } - #kssref-base-backgrounds-transparent div[class*=bg] > div[class*=bg] { - padding: 6rem; - margin: 3rem; } +#kssref-base-backgrounds-transparent div[class*='bg'] { + margin: 0; + padding: 2rem; } + #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { + margin: 3rem; + padding: 6rem; } -#kssref-base-backgrounds-gradient div[class*=bg] { - padding: 4rem; - margin: 3rem; } +#kssref-base-backgrounds-gradient div[class*='bg'] { + margin: 3rem; + padding: 4rem; } #kssref-slide-background-anim .slide { - clip: rect(0px, 200px, 200px, 0px); + clip: rect(0, 200px, 200px, 0); position: absolute; } #kssref-slide-background-anim .kss-modifier__example { - width: 200px; height: 200px; - margin: 0 auto; } + margin: 0 auto; + width: 200px; } diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss index 234a73c..ea1ca77 100644 --- a/doc/kss/templates/default/kss-assets/kss.scss +++ b/doc/kss/templates/default/kss-assets/kss.scss @@ -1,27 +1,53 @@ // ------------------------------------------------------------------------------ // Variables - Colors, Fonts, etc. // ------------------------------------------------------------------------------ -$kss-colors-background : #fff; +$kss-black: #000; +$kss-gray: #999; +$kss-white: #fff; +$kss-transparent: rgba(0, 0, 0, 0); +$kss-dark-gray: #333; +$kss-shadow: rgba(0, 0, 0, .25); -$kss-colors-foreground : #444; -$kss-colors-heading : #111; -$kss-colors-quotes : #666; +$kss-colors-header-bg: #2f3742; +$kss-colors-header-font: #fff; +$kss-colors-header-link-active: #93cdcf; +$kss-colors-subheader-bg: #f3f3f5; +$kss-colors-subheader-border: #e7e7e9; -$kss-colors-link : #0645ad; -$kss-colors-link-visited : #0645ad; -$kss-colors-link-hover : lighten($kss-colors-link, 20%); -$kss-colors-link-active : #faa700; +$kss-colors-background: $kss-white; +$kss-colors-border-sep: #e2e3e5; -$kss-font-body : Helvetica, 'Helvetica Neue', Arial, sans-serif; -$kss-font-code : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace; +$kss-colors-menu-link: #2e3337; +$kss-colors-menu-link-active: #93cdcf; +$kss-colors-submenu-link: #6a737a; -$kss-font-size : 16px; -$kss-vertical-rhythm : $kss-font-size * 1.5; +$kss-colors-foreground: #444; +$kss-colors-heading: #111; +$kss-colors-heading-side: #e2e3e5; +$kss-colors-quotes: $kss-gray; + +$kss-colors-ins-bg: #ff9; +$kss-colors-mark-bg: #ff0; + +$kss-colors-link: #d1783e; +$kss-colors-link-visited: #d1783e; +$kss-colors-link-hover: lighten($kss-colors-link, 20%); +$kss-colors-link-active: #d1783e; + +$kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif; +$kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace; + +$kss-font-size: 16px; +$kss-vertical-rhythm: $kss-font-size * 1.5; // ------------------------------------------------------------------------------ // Wrap all of this builder's base HTML styling inside a .kss-style selector. // ------------------------------------------------------------------------------ +[class*='kss-'] { + font-family: 'San Francisco'; +} + .kss-style { color: $kss-colors-foreground; font-family: $kss-font-body; @@ -31,106 +57,145 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; a { color: $kss-colors-link; text-decoration: none; + transition-duration: .5s; transition-property: color; - transition-duration: 0.5s; &:visited { color: $kss-colors-link-visited; } - &:hover, &:focus { color: $kss-colors-link-hover; } - &:active { color: $kss-colors-link-active; } + + &:active, + &:hover { + color: $kss-colors-link-active; + } &:hover, &:active { outline: 0; } + + &.kss-nav__menu-link { + color: $kss-colors-menu-link; + font-size: 1.3rem; + font-weight: 900; + } + + &.kss-nav__menu-link-active { + color: $kss-colors-menu-link-active; + } } p { - margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0; + margin: ($kss-vertical-rhythm / 2) 0 $kss-vertical-rhythm; } - h1, h2, h3, h4, h5, h6 { - margin: $kss-vertical-rhythm 0 0 0; - font-family: $kss-font-body; + h1, + h2, + h3, + h4, + h5, + h6 { color: $kss-colors-heading; + font-family: $kss-font-body; + font-weight: 900; line-height: 1.15em; + margin: $kss-vertical-rhythm 0 0; } - h4, h5, h6 { + h4, + h5, + h6 { font-weight: bold; } - h1 { font-size: $kss-font-size * 2.5; } - h2 { font-size: $kss-font-size * 2.25; } + h1 { font-size: $kss-font-size * 2.75; } + + h2 { + font-size: $kss-font-size * 2.5; + + &::before { + color: $kss-colors-heading-side; + content: '#'; + margin-left: -30px; + position: absolute; + } + } + h3 { font-size: $kss-font-size * 2.125; } h4 { font-size: $kss-font-size * 2; } h5 { font-size: $kss-font-size * 1.875; } h6 { font-size: $kss-font-size * 1.75; } blockquote { + border-left: .5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; color: $kss-colors-quotes; margin: 0; padding-left: $kss-vertical-rhythm; - border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; } hr { + border: 0; + border-bottom: 1px solid darken($kss-colors-background, 10%); + border-top: 1px solid lighten($kss-colors-foreground, 60%); display: block; height: 2px; - border: 0; - border-top: 1px solid lighten($kss-colors-foreground, 60%); - border-bottom: 1px solid darken($kss-colors-background, 10%); margin: $kss-vertical-rhythm 0; padding: 0; } - pre, code, kbd, samp { - font-family: $kss-font-code; + pre, + code, + kbd, + samp { color: mix($kss-colors-foreground, $kss-colors-heading, 50%); + font-family: $kss-font-code; font-size: 1em; } pre { - white-space: pre; overflow: scroll; + white-space: pre; } ins { + background: $kss-colors-ins-bg; color: $kss-colors-heading; - background: #ff9; text-decoration: none; } mark { + background: $kss-colors-mark-bg; color: $kss-colors-heading; - background: #ff0; font-weight: bold; } - sub, sup { + sub, + sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } - sup { top: -0.5em; } - sub { bottom: -0.25em; } - ul, ol { + sup { top: -.5em; } + sub { bottom: -.25em; } + + ul, + ol { margin: $kss-vertical-rhythm 0; padding: 0 0 0 $kss-vertical-rhythm; } + li p:last-child { margin: 0; } + dd { margin: 0 0 0 $kss-vertical-rhythm; } img { - max-width:100%; border: 0; - -ms-interpolation-mode: bicubic; + max-width: 100%; vertical-align: middle; } @@ -138,21 +203,57 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; border-collapse: collapse; border-spacing: 0; } + td { vertical-align: top; } @media print { - a, a:visited { text-decoration: underline; } - hr { height: 1px; border:0; border-bottom:1px solid black; } - a[href]:after { content: " (" attr(href) ")"; } - a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - abbr[title]:after { content: " (" attr(title) ")"; } - pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } - tr, img { page-break-inside: avoid; } - img { max-width: 100% !important; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } + a, + a:visited { + text-decoration: underline; + } + + hr { + border: 0; + border-bottom: 1px solid $kss-black; + height: 1px; + } + + a[href]:after { content: ' (' attr(href) ')'; } + + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; + } + + abbr[title]:after { content: ' (' attr(title) ')'; } + + pre, + blockquote { + border: 1px solid $kss-gray; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, + img { + page-break-inside: avoid; + } + + img { max-width: 100%; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } } } @@ -161,9 +262,9 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; // ------------------------------------------------------------------------------ #kss-node { + background: $kss-white; margin: 0; padding: 20px; - background: #fff; &.kss-fullscreen-mode { .kss-sidebar, @@ -178,57 +279,41 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; .kss-main, .kss-sidebar { - float: left; - margin-right: -100%; + border: 0; + border-right: 1px solid $kss-colors-border-sep; box-sizing: border-box; } } .kss-main { - width: 100%; - margin: 0 auto; @media screen and (min-width: 769px) { - width: 80%; - margin-left: 20%; padding: 0 20px 0 30px; } } .kss-sidebar { - border-bottom:1px solid #ddd; + border-right: 1px solid $kss-colors-border-sep; @media screen and (min-width: 769px) { - position: fixed; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; border-bottom: 0; - background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), radial-gradient(#fff, #eee); - box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7); + padding: 150px 10px 0 20px; } } -} - -// ------------------------------------------------------------------------------ -// Sidebar-area components -// ------------------------------------------------------------------------------ - -#kss-node { .kss-doc-title { margin: 0; + img { + max-width: 40px; + vertical-align: middle; + } + @media screen and (min-width: 769px) { font-size: 1.5em; } } - .kss-header, .kss-nav { position: relative; @@ -236,7 +321,9 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; margin-top: 2em; } - & ul, & ol, & li { + & ul, + & ol, + & li { display: block; float: none; } @@ -244,13 +331,21 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; & li { margin-left: 3.2rem; } + + .kss-nav-has-children > a::before { + content: url('./images/down_arrow.svg'); + } + + .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url('./images/up_arrow.svg'); + } } .kss-nav__menu { - margin-top: ($kss-vertical-rhythm/2); - margin-bottom: ($kss-vertical-rhythm/2); - padding: 0; list-style-type: none; + margin-bottom: ($kss-vertical-rhythm / 2); + margin-top: ($kss-vertical-rhythm / 2); + padding: 0; } .kss-nav__menu-item { @@ -264,25 +359,19 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } .kss-nav__menu-link { - position: relative; display: inline-block; + position: relative; &:before { @media screen and (min-width: 769px) { + background-color: $kss-transparent; content: ' '; - position: absolute; - left: -20px; - width: 0; height: 100%; - background-color: rgba(#000, 0); + left: -20px; + position: absolute; + width: 0; } } - - &.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; - } } .kss-nav__menu-child { @@ -294,87 +383,81 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; margin: 0; padding: 0; - // @TODO: The ul is output even when there are no children. Fix this, so - // we can put these :first-child and :last child styles back on the ul. - li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; - } + li { + padding: 15px 0 0; - li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; + &:last-child { + padding: 15px 0; + } } } } .kss-nav__ref { - color: #333; - font-weight: bold; + color: $kss-colors-submenu-link; &:after { content: ' '; } } + .kss-nav__ref-child { font-weight: normal; } -} -// ------------------------------------------------------------------------------ -// Content-area components -// ------------------------------------------------------------------------------ - -#kss-node { + // ------------------------------------------------------------------------------ + // Content-area components + // ------------------------------------------------------------------------------ .kss-section { - padding-top: 2.4rem; padding-bottom: 2.4rem; + padding-top: 2.4rem; // "fullscreen" styles copied from Mozilla's default stylesheet. &.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; // Turn on scrolling if needed. - overflow: auto !important; + overflow: auto; padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; } } .kss-title { margin-bottom: 0; } + .is-fullscreen .kss-title { margin-top: 0; } + .kss-title__ref { + color: $kss-dark-gray; display: block; font-size: $kss-font-size; line-height: $kss-font-size; - color: #666; &:before { content: 'Section '; } } + .kss-title__permalink { + color: $kss-black; display: block; - color: #000; text-decoration: none; &:hover, @@ -389,38 +472,34 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } } } + .kss-title__permalink-hash { + color: $kss-gray; display: none; - color: #ccc; } .kss-toolbar { - margin: 6px 0 24px; display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; line-height: 1; + margin: 6px 0 24px; padding: 3px; a { box-sizing: content-box; display: inline-block; - width: 16px; height: 16px; - padding: 3px; - vertical-align: top; - // Tooltip wrapper styles: - position: relative; overflow: visible; + padding: 3px; + position: relative; + vertical-align: top; + width: 16px; + a { margin-left: 6px; } .kss-toolbar__icon-fill { - fill: #ccc; + fill: $kss-gray; } svg.on { @@ -429,76 +508,77 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; &:focus, &:hover { - border-color: #000; + border-color: $kss-black; .kss-toolbar__icon-fill { - fill: #000; + fill: $kss-black; } } } } + .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; + background: $kss-white; + border: solid 1px $kss-gray; bottom: 100%; + box-shadow: 2px 2px 2px $kss-shadow; + clip: rect(1px, 1px, 1px, 1px); + color: $kss-black; + cursor: help; + display: inline-block; + height: 1px; left: -10px; margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; opacity: 0; - transition: opacity 0.25s; - // Visually hidden - height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; word-wrap: normal; + z-index: 1; // Solid grey triangle. &:before, &:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; - border-width: 7px 5px 0; - border-color: #666 transparent; + border-color: $kss-gray transparent; border-style: solid; + border-width: 7px 5px 0; + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; } // White triangle knock-out. &:after { + border-top-color: $kss-white; bottom: -6px; - border-top-color: #fff; } } + a:focus, a:hover { > .kss-toolbar__tooltip { - opacity: 1; - // Visually hidden off clip: auto; height: auto; - width: auto; + opacity: 1; overflow: visible; + width: auto; } } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen], &.kss-guides-mode .kss-toolbar a[data-kss-guides], &.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; + background-color: $kss-gray; + border-color: $kss-gray; .kss-toolbar__icon-fill { - fill: #fff; + fill: $kss-white; } svg.on { @@ -513,158 +593,181 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; .kss-parameters { display: table; list-style-type: none; - margin-top: 0; margin-left: 0; + margin-top: 0; padding-left: 0; } + .kss-parameters__title { font-weight: bold; } + .kss-parameters__item { display: table-row; } + .kss-parameters__name { display: table-cell; padding-right: 20px; white-space: nowrap; } + .kss-parameters__description { display: table-cell; } + .kss-parameters__default-value code { white-space: nowrap; } .kss-modifier__wrapper { - border: 1px solid #ccc; + border: 1px solid $kss-gray; padding: 0 10px 10px; } + .is-fullscreen .kss-modifier__wrapper { - // Un-do padding on .kss-section. + border: 0; margin-left: -20px; margin-right: -20px; - // Remove all padding on the wrapper padding-left: 0; padding-right: 0; - border: none; } + .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; + background-color: $kss-gray; + border-bottom: 1px solid $kss-gray; font-weight: bold; + margin: 0 -10px 10px; + padding: 10px; } + .is-fullscreen .kss-modifier__heading { + border: 1px solid $kss-gray; margin: 0 20px 10px; - border: 1px solid #ccc; } + .kss-modifier__default-name { font-weight: bold; margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__default-name { margin-left: 20px; margin-right: 20px; } + .kss-modifier__name { float: left; - padding-right: 10px; font-weight: bold; + padding-right: 10px; } + .is-fullscreen .kss-modifier__name { margin-left: 20px; } + .kss-modifier__description { margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__description { margin-right: 20px; } + .kss-modifier__example { - clear: left; border: 2px dashed transparent; + clear: left; + margin: -2px -2px ($kss-vertical-rhythm - 2px); position: relative; // Contain the example's absolute positioning. z-index: 0; // Establishes a local stacking context. - margin: -2px -2px ($kss-vertical-rhythm - 2px); &:last-child { margin-bottom: 0; } } + &.kss-guides-mode .kss-modifier__example, &.kss-guides-mode .kss-modifier__example-footer { &:before, &:after { - z-index: -1; + border: 2px solid $kss-black; box-sizing: border-box; content: ''; + height: 5px; position: absolute; width: 5px; - height: 5px; - border: 2px solid #000; + z-index: -1; } } + &.kss-guides-mode .kss-modifier__example { - border-color: #000; + border-color: $kss-black; &:before { - top: -5px; - left: -5px; - border-top: 0; border-left: 0; - } - &:after { - top: -5px; - right: -5px; border-top: 0; + left: -5px; + top: -5px; + } + + &:after { border-right: 0; + border-top: 0; + right: -5px; + top: -5px; } } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { &:before { left: auto; right: 0; } + &:after { - right: auto; left: 0; + right: auto; } } + .kss-modifier__example-footer { clear: both; } + &.kss-guides-mode .kss-modifier__example-footer { &:before { - bottom: -5px; - left: -5px; border-bottom: 0; border-left: 0; + bottom: -5px; + left: -5px; } + &:after { + border-bottom: 0; + border-right: 0; bottom: -5px; right: -5px; - border-right: 0; - border-bottom: 0; } } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { &:before { left: auto; right: 0; } + &:after { - right: auto; left: 0; + right: auto; } } .kss-markup { + border: 1px solid $kss-gray; margin: $kss-vertical-rhythm 0; - border: 1px solid #ccc; &[open] summary { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $kss-gray; margin-bottom: 3px; } @@ -682,13 +785,13 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } .kss-github { - display:none; + display: none; @media screen and (min-width: 501px) { display: block; position: absolute; - top: 0; right: 0; + top: 0; } img { @@ -701,61 +804,77 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; // ------------------------------------------------------------------------------ /* SPAN elements with the classes below are added by prettyprint. */ - .pln { color: #000 } /* plain text */ + .pln { color: $kss-black; } /* plain text */ - .str { color: #080 } /* string content */ - .kwd { color: #008 } /* a keyword */ - .com { color: #800 } /* a comment */ - .typ { color: #606 } /* a type name */ - .lit { color: #066 } /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - .pun, .opn, .clo { color: #660 } - .tag { color: #008 } /* a markup tag name */ - .atn { color: #606 } /* a markup attribute name */ - .atv { color: #080 } /* a markup attribute value */ - .dec, .var { color: #606 } /* a declaration; a variable name */ - .fun { color: red } /* a function name */ - - /* Use higher contrast and text-weight for printable form. */ - @media print, projection { - .str { color: #060 } - .kwd { color: #006; font-weight: bold } - .com { color: #600; font-style: italic } - .typ { color: #404; font-weight: bold } - .lit { color: #044 } - .pun, .opn, .clo { color: #440 } - .tag { color: #006; font-weight: bold } - .atn { color: #404 } - .atv { color: #060 } - } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { - margin: 0; - padding: 0 0 3px 0; list-style-type: none; + margin: 0; + padding: 0 0 3px; li { + background: $kss-white; + border-bottom: 1px solid $kss-gray; min-height: $kss-vertical-rhythm; - border-bottom: 1px solid #eee; padding: 0 10px; - background: #fff; &:first-child { padding-top: 3px; } } - /* Alternate shading for lines */ - li.L0, - li.L2, - li.L4, - li.L6, - li.L8 { - background: #fcfcfc; - } } } +.kss-container { + display: grid; + grid-template-columns: 25% 75%; +} + +// ------------------------------------------------------------------------------ +// Sidebar-area components +// ------------------------------------------------------------------------------ +.kss-header { + background-color: $kss-colors-header-bg; + display: flex; + padding: 0 2.4rem; + position: fixed; + + h1, + li a { + color: $kss-colors-header-font; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; + } + + li a:hover { + color: $kss-colors-header-link-active; + } + + .kss-menu-active { + border-bottom: 4px solid $kss-colors-header-link-active; + box-sizing: border-box; + color: $kss-colors-header-link-active; + } + +} + +.kss-sub-header { + background: $kss-colors-subheader-bg; + border-bottom: 4px solid $kss-colors-subheader-border; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; +} + + // WebSlides #kssref-layout-radius { @@ -765,38 +884,39 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } #kssref-base-backgrounds { - & span[class*=bg] { + & span[class*='bg'] { display: inline-block; - padding: 1.2rem; margin-left: -4px; + padding: 1.2rem; } } #kssref-base-backgrounds-transparent { - & div[class*=bg] { - padding: 2rem; + & div[class*='bg'] { margin: 0; + padding: 2rem; - & > div[class*=bg] { - padding: 6rem; + & > div[class*='bg'] { margin: 3rem; + padding: 6rem; } } } #kssref-base-backgrounds-gradient { - & div[class*=bg] { - padding: 4rem; + & div[class*='bg'] { margin: 3rem; + padding: 4rem; } } #kssref-slide-background-anim .slide { - clip: rect(0px, 200px, 200px, 0px); + clip: rect(0, 200px, 200px, 0); position: absolute; } + #kssref-slide-background-anim .kss-modifier__example { - width: 200px; height: 200px; margin: 0 auto; + width: 200px; } diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 7567beb..9074325 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,119 +13,134 @@ - -
-
-

WebSlides

-
-
+ diff --git a/doc/styleguide/item-badgets.html b/doc/styleguide/item-badgets.html index 517a7e7..2b8ea2d 100644 --- a/doc/styleguide/item-badgets.html +++ b/doc/styleguide/item-badgets.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,169 +13,178 @@ - -
-
-

WebSlides

-
- +
+
-
-

App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

+
+
+

+ + Badges + +

+ +
+

App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

+ +
+ +
+ +
+
+ Example +
+ + +
+

Google Play

+

App Store

+
+
+ +
+ +
+ + Markup + + 
<p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+
+ +
+ Source: modules/_badges.scss, line 1
- -
-
- Example -
- - -
-

Google Play

-

App Store

-
-
- -
- -
- - Markup - - 
<p class="badge-android">Google Play</p>
-<p class="badge-ios">App Store</p>
-
- -
- Source: modules/_badges.scss, line 1 -
- -
- +
+ diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index 0bb4a3c..25f2a8e 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,171 +13,180 @@ - -
-
-

WebSlides

-
- +
+
-
-

Colors we use for backgrounds.

+
+
+

+ + Gradient Backgrounds + +

+ +
+

Colors we use for backgrounds.

+ +
+ +
+ +
+
+ Example +
+ + +
+
Horizontal
+
Vertical
+
Radial
+
+
+ +
+ +
+ + Markup + + 
  <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
+
+ +
+ Source: _color.scss, line 194
- -
-
- Example -
- - -
-
Horizontal
-
Vertical
-
Radial
-
-
- -
- -
- - Markup - - 
  <div class="bg-gradient-h">Horizontal</div>
-  <div class="bg-gradient-v">Vertical</div>
-  <div class="bg-gradient-r">Radial</div>
-
- -
- Source: _color.scss, line 194 -
- -
- +
+ diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index 897e117..ccb2c2d 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,175 +13,184 @@ - -
-
-

WebSlides

-
- +
+
-
-

Colors we use for backgrounds.

+
-
+
+

+ + Transparent Backgrounds + +

-
+
+

Colors we use for backgrounds.

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
Dark
Light
Gradient
-
+
+
+
-
- -
- - Markup - - 
<div class="bg-red">
+            

+              
+                  Markup
+              
+              
<div class="bg-red">
   <div class="bg-trans-dark">Dark</div>
   <div class="bg-trans-light">Light</div>
   <div class="bg-trans-gradient">Gradient</div>
 </div>

-          

+
-
- Source: _color.scss, line 168 -
+
+ Source: _color.scss, line 168 +
-
- +
+
+ diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index c3da36a..0d39eae 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Colors we use for backgrounds.

+
-
+
+

+ + Backgrounds + +

-
+
+

Colors we use for backgrounds.

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
- Primary #44d +
+ Primary #44d Secondary #67d Light #f7f9fb Black #000 @@ -168,16 +176,16 @@ Red #c23 White #fff Facebook #3b5998 -
+
+
+
-
- -
- - Markup - - 
<span class="bg-primary size-20">Primary #44d</span>
+            

+              
+                  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>
@@ -190,14 +198,15 @@
 <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>

-          

+
-
- Source: _color.scss, line 107 -
+
+ Source: _color.scss, line 107 +
-
- +
+ + diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index f081aba..a6667d3 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,161 +13,167 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Base + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-blocks-cites.html b/doc/styleguide/item-blocks-cites.html index 49efd12..6c9cbae 100644 --- a/doc/styleguide/item-blocks-cites.html +++ b/doc/styleguide/item-blocks-cites.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,163 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Cites + +

+ + +
+ +
+
+ Example +
+ + +
+ Avatar @jlantunez +
+
+ +
+ +
+ + Markup + + 
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
+
+ +
+ Source: modules/_quotes.scss, line 28 +
- -
-
- Example -
- - -
- Avatar @jlantunez -
-
- -
- -
- - Markup - - 
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
-
- -
- Source: modules/_quotes.scss, line 28 -
- -
- + + diff --git a/doc/styleguide/item-blocks-cta-cover.html b/doc/styleguide/item-blocks-cta-cover.html index bb3f156..e3effee 100644 --- a/doc/styleguide/item-blocks-cta-cover.html +++ b/doc/styleguide/item-blocks-cta-cover.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,145 +13,153 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Headings + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+

HTML Presentations Made Easy

@@ -160,16 +168,16 @@ Demos Β· Github

-
+
+
+
-
- -
- - Markup - - 
<div class="cta-cover">
+            

+              
+                  Markup
+              
+              
<div class="cta-cover">
   <h1><strong>HTML Presentations</strong> Made Easy</h1>
   <p class="alignright">
     <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
@@ -178,14 +186,15 @@
     <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> Β· <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
   </p>
 </div>

-          

+
-
- Source: modules/_promos.scss, line 75 -
+
+ Source: modules/_promos.scss, line 75 +
-
- +
+
+ diff --git a/doc/styleguide/item-blocks-cta.html b/doc/styleguide/item-blocks-cta.html index 84eeccc..8abe0a9 100644 --- a/doc/styleguide/item-blocks-cta.html +++ b/doc/styleguide/item-blocks-cta.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,145 +13,153 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Call to action + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+

$40

@@ -160,16 +168,16 @@

Lorem ipsum

-
+
+
+
-
- -
- - Markup - - 
<div class="cta">
+            

+              
+                  Markup
+              
+              
<div class="cta">
   <div class="number">
     <p><span><sup>$</sup>40</span></p>
   </div>
@@ -178,14 +186,15 @@
     <p>Lorem ipsum</p>
   </div>
 </div>

-          

+
-
- Source: modules/_promos.scss, line 1 -
+
+ Source: modules/_promos.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/item-blocks-navigation.html b/doc/styleguide/item-blocks-navigation.html index 7e4f938..51490f8 100644 --- a/doc/styleguide/item-blocks-navigation.html +++ b/doc/styleguide/item-blocks-navigation.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,171 +13,180 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Slides navigation + +

-
+
-
-
- Example -
+
+
+ Example +
-
- -
- -
- - Markup - - 
<div id="navigation">
+            

+              
+                  Markup
+              
+              
<div id="navigation">
   <a id="next" href="#" title="Arrow Keys">β†’</a>
   <a id="previous" href="#" title="Arrow Keys">←</a>
   <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
 </div>

-          

+
-
- Source: modules/_slides-navigation.scss, line 1 -
+
+ Source: modules/_slides-navigation.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/item-blocks-quotes.html b/doc/styleguide/item-blocks-quotes.html index 7c90f3b..0160a7a 100644 --- a/doc/styleguide/item-blocks-quotes.html +++ b/doc/styleguide/item-blocks-quotes.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Quotes + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

-
+
+
+
-
- -
- - Markup - - 
<blockquote>
+            

+              
+                  Markup
+              
+              
<blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 </blockquote>

-          

+
-
- Source: modules/_quotes.scss, line 1 -
+
+ Source: modules/_quotes.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/item-blocks-toc.html b/doc/styleguide/item-blocks-toc.html index 4dfa581..02c3d27 100644 --- a/doc/styleguide/item-blocks-toc.html +++ b/doc/styleguide/item-blocks-toc.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,145 +13,153 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Table of contents + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+
  1. @@ -176,16 +184,16 @@
-
+
+
+
-
- -
- - Markup - - 
<div class="toc">
+            

+              
+                  Markup
+              
+              
<div class="toc">
   <ol>
     <li>
       <a href="#" title="Go to Learning to see">
@@ -210,14 +218,15 @@
     </li>
   </ol>
 </div>

-          

+
-
- Source: modules/_toc.scss, line 1 -
+
+ Source: modules/_toc.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/item-blocks.html b/doc/styleguide/item-blocks.html index 8075f2e..4f49450 100644 --- a/doc/styleguide/item-blocks.html +++ b/doc/styleguide/item-blocks.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,179 +13,182 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Blocks + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-buttons.html b/doc/styleguide/item-buttons.html index f8131dd..69d963b 100644 --- a/doc/styleguide/item-buttons.html +++ b/doc/styleguide/item-buttons.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,176 +13,185 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Buttons + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
- Download -
-
+
+ Default styling +
-
- .radius -
-
- Rounded corners -
- Download + Download
-
-
- - Markup - - 
<a href="#" class="button [modifier class]">Download</a>
-
+
+ .radius +
+
+ Rounded corners +
+
+ Download +
+
+
-
- Source: modules/_button.scss, line 1 -
+
+ + Markup + + 
<a href="#" class="button [modifier class]">Download</a>
+
-
- +
+ Source: modules/_button.scss, line 1 +
+ +
+ + diff --git a/doc/styleguide/item-cards.html b/doc/styleguide/item-cards.html index 48c7fa5..ddee360 100644 --- a/doc/styleguide/item-cards.html +++ b/doc/styleguide/item-cards.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

+
-
+
+

+ + Cards + +

-
+
+

Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
iPhone

iPhone 7

@@ -163,16 +171,16 @@

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

-
+
+
+
-
- -
- - Markup - - 
  <div class="card-50">
+            

+              
+                  Markup
+              
+              
  <div class="card-50">
     <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
     <div class="flex-content">
       <h2>iPhone 7</h2>
@@ -180,14 +188,15 @@
       <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
     </div>
   </div>

-          

+
-
- Source: modules/_cards.scss, line 1 -
+
+ Source: modules/_cards.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/item-content-resume.html b/doc/styleguide/item-content-resume.html new file mode 100644 index 0000000..33ea5f5 --- /dev/null +++ b/doc/styleguide/item-content-resume.html @@ -0,0 +1,260 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Work / ResumΓ© / CV + +

+ + +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="work">
+  <li class="work-label">
+    <p class="work-title">Work</p>
+    <p class="work-client">Client</p>
+    <p class="work-services">Services</p>
+    <p class="work-date">Year</p>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Redesign of Netflix</span></p>
+      <p class="work-client"><span>Netflix</span></p>
+      <p class="work-services"><span>Frontend</span></p>
+      <p class="work-date"><span>2015-2016</span></p>
+    </a>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Airbnb TV Commercials</span></p>
+      <p class="work-client"><span>Airbnb</span></p>
+      <p class="work-services"><span>Video, Storytelling</span></p>
+      <p class="work-date"><span>2015</span></p>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_work.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-content.html b/doc/styleguide/item-content.html new file mode 100644 index 0000000..d50aa60 --- /dev/null +++ b/doc/styleguide/item-content.html @@ -0,0 +1,199 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Content + +

+ + +
+ + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-elements-tables.html b/doc/styleguide/item-elements-tables.html index f08a473..8601570 100644 --- a/doc/styleguide/item-elements-tables.html +++ b/doc/styleguide/item-elements-tables.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,145 +13,153 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Tables + +

-
+
-
-
- Example -
+
+
+ Example +
-
- +
+
@@ -181,16 +189,16 @@
Plans
-
+
+
+
-
- -
- - Markup - - 
<table>
+            

+              
+                  Markup
+              
+              
<table>
   <thead>
    <tr>
      <th>Plans</th>
@@ -220,14 +228,15 @@
     </tr>
   </tbody>
 </table>

-          

+
-
- Source: modules/_tables.scss, line 1 -
+
+ Source: modules/_tables.scss, line 1 +
-
- + + + diff --git a/doc/styleguide/item-elements-try.html b/doc/styleguide/item-elements-try.html index a2b1043..e233a2e 100644 --- a/doc/styleguide/item-elements-try.html +++ b/doc/styleguide/item-elements-try.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,163 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Try + +

+ + +
+ +
+
+ Example +
+ + +
+ Try element +
+
+ +
+ +
+ + Markup + + 
<a href="#" class="try">Try element</a>
+
+ +
+ Source: modules/_form.scss, line 96 +
- -
-
- Example -
- - -
- Try element -
-
- -
- -
- - Markup - - 
<a href="#" class="try">Try element</a>
-
- -
- Source: modules/_form.scss, line 96 -
- -
- + + diff --git a/doc/styleguide/item-elements.html b/doc/styleguide/item-elements.html index 092965a..5a3e2b2 100644 --- a/doc/styleguide/item-elements.html +++ b/doc/styleguide/item-elements.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,155 +13,162 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Elements + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-flexblock-activity.html b/doc/styleguide/item-flexblock-activity.html index a1cb248..5ed62cb 100644 --- a/doc/styleguide/item-flexblock-activity.html +++ b/doc/styleguide/item-flexblock-activity.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Activity + +

-
+
+

Bla bla bla

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
-
- -
- - Markup - - 
<ul class="flexblock activity">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock activity">
   <li>
     <a href="#" title="UX Designer at ACME">
       <div>
@@ -250,14 +258,15 @@
     </a>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-activity.scss, line 5 -
+
+ Source: modules/_flexblock-activity.scss, line 5 +
-
- +
+ + diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html index 2fec679..8e90189 100644 --- a/doc/styleguide/item-flexblock-blink.html +++ b/doc/styleguide/item-flexblock-blink.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,245 +13,253 @@ - -
-
-

WebSlides

-
- +
+
-
-

Auto-fill & Equal height columns

+
-
+
+

+ + Flexblocks + +

-
+
+

Auto-fill & Equal height columns

-
-
- Examples -
- -
- Default styling
-
- -
-
- -
- .blink -
-
- Linkable block -
-
- -
-
-
- .border -
-
- With border -
-
- -
-
-
- - Markup - - 
<ul class="flexblock [modifier class]">
+          

+            

+              Examples
+            

+
+              

+                Default styling
+              

+
+            

+              
+              

+            

+
+              

+                .blink
+              

+              

+                Linkable block
+              

+              

+                
+                

+              

+              

+                .border
+              

+              

+                With border
+              

+              

+                
+                

+              

+          

+
+            

+              
+                  Markup
+              
+              
<ul class="flexblock [modifier class]">
   <li>
     <a href="#">
       Item 1
@@ -273,14 +281,15 @@
      </a>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock.scss, line 6 -
+
+ Source: modules/_flexblock.scss, line 6 +
-
- +
+
+ diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html index 2d49035..5c96833 100644 --- a/doc/styleguide/item-flexblock-clients.html +++ b/doc/styleguide/item-flexblock-clients.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,186 +13,160 @@ - -
-
-

WebSlides

-
- +
+
-
-

Highlight clients information

+
-
+
+

+ + Clients + +

-
+
+

Highlight clients information

-
-
- Examples -
- -
- Default styling
-
- -
-
+
-
- .border -
-
- with border +
+
+ Examples
+ +
+ Default styling +
+
-
-
-
- - Markup - - 
<ul class="flexblock clients [modifier class]">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock clients [modifier class]">
   <li>
     <a href="#" title="Client">
       <figure>
@@ -248,14 +256,15 @@
     </a>
   </li>
 </ul>
-
+ -
- Source: modules/_flexblock-clients.scss, line 5 -
+
+ Source: modules/_flexblock-clients.scss, line 5 +
-
- +
+
+ diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html index de34d7f..51e2f96 100644 --- a/doc/styleguide/item-flexblock-features.html +++ b/doc/styleguide/item-flexblock-features.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,183 +13,158 @@ - -
-
-

WebSlides

-
- +
+
-
-

Special features

+
-
+
+

+ + Features + +

-
+
+

Special features

-
-
- Examples -
- -
- Default styling
-
-
    -
  • -
    -

    100% customizable

    - Well documented. -
    -
    • -
  • -
    - $48 -

    Extra virgin olive oil

    - The Spanish caviar. -
    -
    • -
  • -
    -

    - Ultra-fast Wifi -

    - Simple file sharing. -
    -
    • -
-
-
+
-
- .border -
-
- with border +
+
+ Examples
+ +
+ Default styling +
+
  • @@ -216,13 +191,46 @@
-
-
- - Markup - - 
<ul class="flexblock features">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
    
+  
  • 
+    
    
+      
     100% customizable
    
+      Well documented.
+    
    
+  
    • 
+  
  • 
+    
    
+      $48
+      
    Extra virgin olive oil
    
+      The Spanish caviar.
+    
    
+  
    • 
+  
  • 
+    
    
+      
    
+        Ultra-fast Wifi
+      
    
+      Simple file sharing.
+    
    
+  
    • 
+

+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock features">
   <li>
     <div>
       <h2> <span>100<sup>%</sup></span> customizable</h2>
@@ -245,14 +253,15 @@
     </div>
   </li>
 </ul>
-
+ -
- Source: modules/_flexblock-features.scss, line 5 -
+
+ Source: modules/_flexblock-features.scss, line 5 +
-
- +
+
+ diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html index 5ff6169..750c503 100644 --- a/doc/styleguide/item-flexblock-gallery-overlay.html +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Beautiful gallery with overlay content

+
-
+
+

+ + Gallery + Overflow + +

-
+
+

Beautiful gallery with overlay content

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
-
- -
- - Markup - - 
<ul class="flexblock gallery">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock gallery">
   <li>
     <a href="#">
       <div class="overlay">
@@ -222,14 +230,15 @@
     </a>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-gallery.scss, line 50 -
+
+ Source: modules/_flexblock-gallery.scss, line 50 +
-
- +
+ + diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html index 2f5596a..d766ce7 100644 --- a/doc/styleguide/item-flexblock-gallery.html +++ b/doc/styleguide/item-flexblock-gallery.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Beautiful gallery

+
-
+
+

+ + Gallery + +

-
+
+

Beautiful gallery

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
-
- -
- - Markup - - 
<ul class="flexblock gallery">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock gallery">
   <li>
     <a href="#">
       <figure>
@@ -234,14 +242,15 @@
     </a>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-gallery.scss, line 7 -
+
+ Source: modules/_flexblock-gallery.scss, line 7 +
-
- +
+ + diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html index 937f348..3e5adcd 100644 --- a/doc/styleguide/item-flexblock-metrics.html +++ b/doc/styleguide/item-flexblock-metrics.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,179 +13,160 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Metrics + +

-
+
+

Bla bla bla

-
-
- Examples -
- -
- Default styling
-
-
    -
  • Founded - 2016 -
    • -
  • - 24M - Subscribers -
    • -
  • - Revenue: - $16M -
    • -
  • - Monthly Growth - 64% -
    • -
-
-
+
-
- .border -
-
- with border +
+
+ Examples
+ +
+ Default styling +
+
-
    +
    • Founded 2016
      • @@ -204,13 +185,40 @@
-
-
- - Markup - - 
<ul class="flexblock metrics  [modifier class]">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
    
+  
  •  Founded
+    2016
+  
    • 
+  
  • 
+    24M
+    Subscribers
+  
    • 
+  
  • 
+    Revenue:
+    $16M
+  
    • 
+  
  • 
+    Monthly Growth
+    64%
+  
    • 
+

+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock metrics  [modifier class]">
   <li> Founded
     <span>2016</span>
   </li>
@@ -227,14 +235,15 @@
     <span>64%</span>
   </li>
 </ul>
-
+ -
- Source: modules/_flexblock-metrics.scss, line 5 -
+
+ Source: modules/_flexblock-metrics.scss, line 5 +
-
- +
+
+ diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-flexblock-plans.html index a99fcfa..a7dc5c3 100644 --- a/doc/styleguide/item-flexblock-plans.html +++ b/doc/styleguide/item-flexblock-plans.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,194 +13,160 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Plans + +

-
+
+

Bla bla bla

-
-
- Examples -
- -
- Default styling
-
- -
-
+
-
- .blink -
-
- block linkable +
+
+ Examples
+ +
+ Default styling +
+
-
-
-
- - Markup - - 
<ul class="flexblock plans [modifier class]">
+              

+                .blink
+              

+              

+                block linkable
+              

+              

+                
+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock plans [modifier class]">
   <li>
     <a href="#" title="Purchase">
       <h2>Basic</h2>
@@ -272,14 +280,15 @@
     </a>
   </li>
 </ul>
-
+ -
- Source: modules/_flexblock-plans.scss, line 5 -
+
+ Source: modules/_flexblock-plans.scss, line 5 +
-
- +
+
+ diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-flexblock-reasons.html index d8d0b20..1312745 100644 --- a/doc/styleguide/item-flexblock-reasons.html +++ b/doc/styleguide/item-flexblock-reasons.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Reasons + +

-
+
+

Bla bla bla

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
    +
    +

    • Why WebSlides? Work better, faster.

      Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

      @@ -165,16 +173,16 @@

      WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    -
    +
    +
    +
-
- -
- - Markup - - 
<ul class="flexblock reasons">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock reasons">
   <li>
     <h2>Why WebSlides? Work better, faster.</h2>
     <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
@@ -184,14 +192,15 @@
     <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-reasons.scss, line 5 -
+
+ Source: modules/_flexblock-reasons.scss, line 5 +
-
- +
+ + diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-flexblock-specs.html index a489391..387f992 100644 --- a/doc/styleguide/item-flexblock-specs.html +++ b/doc/styleguide/item-flexblock-specs.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Specs + +

-
+
+

Bla bla bla

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
    +
    +

    • Ultra-Fast WiFi

      @@ -175,16 +183,16 @@
    -
    +
    +
    +
-
- -
- - Markup - - 
<ul class="flexblock specs">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock specs">
     <li>
       <div>
         <h2>Ultra-Fast WiFi</h2>
@@ -204,14 +212,15 @@
       </div>
     </li>
     </ul>

-          

+
-
- Source: modules/_flexblock-specs.scss, line 5 -
+
+ Source: modules/_flexblock-specs.scss, line 5 +
-
- +
+ + diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-flexblock-steps.html index 085d0b3..833f1aa 100644 --- a/doc/styleguide/item-flexblock-steps.html +++ b/doc/styleguide/item-flexblock-steps.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Bla bla bla

+
-
+
+

+ + Steps + +

-
+
+

Bla bla bla

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
    +
    +

    • 01. Passion

      When you're really passionate about your job, you can change the world.

      @@ -181,16 +189,16 @@
-
+
+
+
-
- -
- - Markup - - 
<ul class="flexblock steps">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock steps">
   <li>
     <h2>01. Passion</h2>
     <p>When you're really passionate about your job, you can change the world.</p>
@@ -216,14 +224,15 @@
     </ul>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-steps.scss, line 6 -
+
+ Source: modules/_flexblock-steps.scss, line 6 +
-
- + + + diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html index e6bcb5e..5d099c9 100644 --- a/doc/styleguide/item-flexblock.html +++ b/doc/styleguide/item-flexblock.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,209 +13,207 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Flexblock + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-forms-user.html b/doc/styleguide/item-forms-user.html index 5203654..dc66a40 100644 --- a/doc/styleguide/item-forms-user.html +++ b/doc/styleguide/item-forms-user.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,169 +13,178 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + User + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+
-
+
+
+
-
- -
- - Markup - - 
<div class="user">
+            

+              
+                  Markup
+              
+              
<div class="user">
   <input type="text" placeholder="Username" />
   <button>Log in</button>
 </div>

-          

+
-
- Source: modules/_form.scss, line 139 -
+
+ Source: modules/_form.scss, line 139 +
-
- +
+
+ diff --git a/doc/styleguide/item-forms.html b/doc/styleguide/item-forms.html index bf0b9b3..4d1d56c 100644 --- a/doc/styleguide/item-forms.html +++ b/doc/styleguide/item-forms.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Forms + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-grid.html b/doc/styleguide/item-grid.html index 270f2ea..5769d9a 100644 --- a/doc/styleguide/item-grid.html +++ b/doc/styleguide/item-grid.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,174 +13,161 @@ - -
-
-

WebSlides

-
- +
+
-
-

Basic Grid (Flexible blocks) +

+ +
+

+ + Grid + +

+ +
+

Basic Grid (Flexible blocks) Auto-fill & Equal height

-
- -
- -
-
- Examples -
- -
- Default styling
-
-
-
-

WebSlides is really easy

-

Each parent <section> in the #webslides element is an individual slide.

-

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

-
-
-

WebSlides is the clean

-

Each parent <section> in the #webslides element is an individual slide.

-
-
-
-
+
-
- .vertical-align -
-
- Vertical align +
+
+ Examples
+ +
+ Default styling +
+
-
+

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

@@ -193,13 +180,34 @@ Auto-fill & Equal height

-
-
- - Markup - - 
<div class="grid [modifier class]">
+              

+                .vertical-align
+              

+              

+                Vertical align
+              

+              

+                

+  

+    
WebSlides is really easy

+    
Each parent <section> in the #webslides element is an individual slide.

+    
Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+  

+  

+    
WebSlides is the clean

+    
Each parent <section> in the #webslides element is an individual slide.

+  

+

+                

+              

+
+ +
+ + Markup + + 
<div class="grid [modifier class]">
   <div class="column">
     <h3><strong>WebSlides is really easy</strong></h3>
     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
@@ -210,14 +218,15 @@ Auto-fill & Equal height

     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
   </div>
 </div>
-
+ -
- Source: modules/_grid.scss, line 1 -
+
+ Source: modules/_grid.scss, line 1 +
-
- +
+
+
diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 6614d50..4a3d6a9 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,211 +13,220 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Align content + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
+
+ Default styling +
+ +
+

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.

-
-
+
+
-
- .alignright -
-
- Align right. -
-
-
+
+ .alignright +
+
+ Align right. +
+
+

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.

-
-
-
- .alignleft -
-
- Align left. -
-
-
+
+
+
+ .alignleft +
+
+ Align left. +
+
+

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.

-
-
-
- .aligncenter -
-
- Align center. -
-
-
+
+
+
+ .aligncenter +
+
+ Align center. +
+
+

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.

-
-
-
+
+
+
-
- - Markup - - 
<div>
+            

+              
+                  Markup
+              
+              
<div>
   <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
   <p>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.</p>
 </div>

-          

+
-
- Source: _base.scss, line 143 -
+
+ Source: _base.scss, line 143 +
-
- +
+
+
diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index 1b2d874..0122cf6 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,171 +13,180 @@ - -
-
-

WebSlides

-
- +
+
-
-

Adds a rounded radis

+
+
+

+ + Radius + +

+ +
+

Adds a rounded radis

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ 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. +
+
+
+ +
+ +
+ + Markup + + 
<div class="bg-black radius">
+  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>
+
+ +
+ Source: _base.scss, line 129
- -
-
- Example -
- - -
-
- 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. +
-
-
- -
- -
- - Markup - - 
<div class="bg-black radius">
-  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>
-
- -
- Source: _base.scss, line 129 -
- -
- diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index 363b0f3..fa86426 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,171 +13,180 @@ - -
-
-

WebSlides

-
- +
+
-
-

Drops a shadow under the layer. The layer containing the shadow has to have a solid background

+
+
+

+ + Shadows + +

+ +
+

Drops a shadow under the layer. The layer containing the shadow has to have a solid background

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ 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. +
+
+
+ +
+ +
+ + Markup + + 
<div class="bg-white shadow">
+  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>
+
+ +
+ Source: _base.scss, line 73
- -
-
- Example -
- - -
-
- 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. +
-
-
- -
- -
- - Markup - - 
<div class="bg-white shadow">
-  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>
-
- -
- Source: _base.scss, line 73 -
- -
- diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index 41a2fe4..aa54f44 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,236 +13,245 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Resizing + +

+ + +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .size-80 +
+
+ resize to 80%. +
+
+ +
+
+
+ .size-70 +
+
+ resize to 70%. +
+
+ +
+
+
+ .size-60 +
+
+ resize to 60%. +
+
+ +
+
+
+ .size-50 +
+
+ resize to 50%. +
+
+ +
+
+
+ .size-40 +
+
+ resize to 40%. +
+
+ +
+
+
+ .size-30 +
+
+ resize to 30%. +
+
+ +
+
+
+ .size-20 +
+
+ resize to 20%. +
+
+ +
+
+
+ +
+ + Markup + + 
<img src="../../../static/images/iphone.png" class="[modifier class]" />
+
+ +
+ Source: _base.scss, line 199 +
- -
-
- Examples -
- -
- Default styling -
- -
- -
-
- -
- .size-80 -
-
- resize to 80%. -
-
- -
-
-
- .size-70 -
-
- resize to 70%. -
-
- -
-
-
- .size-60 -
-
- resize to 60%. -
-
- -
-
-
- .size-50 -
-
- resize to 50%. -
-
- -
-
-
- .size-40 -
-
- resize to 40%. -
-
- -
-
-
- .size-30 -
-
- resize to 30%. -
-
- -
-
-
- .size-20 -
-
- resize to 20%. -
-
- -
-
-
- -
- - Markup - - 
<img src="../../../static/images/iphone.png" class="[modifier class]" />
-
- -
- Source: _base.scss, line 199 -
- -
- +
+
diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index 13eea2d..b82d4b0 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Layout + +

+ + +
+
- - - -
- +
+ diff --git a/doc/styleguide/item-longform.html b/doc/styleguide/item-longform.html index 6a05203..bada9be 100644 --- a/doc/styleguide/item-longform.html +++ b/doc/styleguide/item-longform.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Longform + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+

Lorem ipsum

-
+
+
+
-
- -
- - Markup - - 
<section class="wrap longform">
+            

+              
+                  Markup
+              
+              
<section class="wrap longform">
   <p>Lorem ipsum</p>
 </section>

-          

+
-
- Source: modules/_longform.scss, line 1 -
+
+ Source: modules/_longform.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html index 253468d..28abe9e 100644 --- a/doc/styleguide/item-media-embed.html +++ b/doc/styleguide/item-media-embed.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,180 +13,184 @@ - -
-
-

WebSlides

-
- +
+
-
-

Responsive background video -https://fvsch.com/code/video-background/

+
+
+

+ + Embed + +

+ +
+

Responsive Media (videos, iframe...)

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ +
+
+
+ +
+ +
+ + Markup + + 
<div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+
+ +
+ Source: modules/_media.scss, line 1
- -
-
- Example -
- - -
-
-
-
-
-
- -
- -
- - Markup - - 
<div class="fullscreen">
-  <div class="embed">
-    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
-      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-    </video>
-  </div>
-</div>
-
- -
- Source: modules/_media.scss, line 35 -
- -
- @@ -220,3 +224,6 @@ +built using kss-node. --> + + diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html index beaf974..44e40d0 100644 --- a/doc/styleguide/item-media.html +++ b/doc/styleguide/item-media.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,155 +13,162 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Media + +

+ + +
+
- - - -
- +
+ diff --git a/doc/styleguide/item-navigation.html b/doc/styleguide/item-navigation.html index 184928c..a7a6217 100644 --- a/doc/styleguide/item-navigation.html +++ b/doc/styleguide/item-navigation.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,252 +13,260 @@ - -
-
-

WebSlides

-
- +
+
-
-

Responsive Media (videos, iframe...)

+
-
+
+

+ + Navigation + +

-
+
+

Responsive Media (videos, iframe...)

-
-
- Examples -
- -
- Default styling
-
- -
-
- -
- .navbar -
-
- Navigation bar -
-
- -
-
-
- .aligncenter -
-
- Center alignment -
-
- -
-
-
- .alignright -
-
- Right alignment -
-
- -
-
-
- - Markup - - 
<nav role="navigation" class="[modifier class]">
+          

+            

+              Examples
+            

+
+              

+                Default styling
+              

+
+            

+              
+              

+            

+
+              

+                .navbar
+              

+              

+                Navigation bar
+              

+              

+                
+                

+              

+              

+                .aligncenter
+              

+              

+                Center alignment
+              

+              

+                
+                

+              

+              

+                .alignright
+              

+              

+                Right alignment
+              

+              

+                
+                

+              

+          

+
+            

+              
+                  Markup
+              
+              
<nav role="navigation" class="[modifier class]">
   <ul>
     <li><a href="">About</a></li>
     <li><a href="">Clients</a></li>
@@ -274,14 +282,15 @@
     </li>
   </ul>
 </nav>

-          

+
-
- Source: modules/_navigation.scss, line 1 -
+
+ Source: modules/_navigation.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/item-screenshots.html b/doc/styleguide/item-screenshots.html index 23bdcdf..f3fac06 100644 --- a/doc/styleguide/item-screenshots.html +++ b/doc/styleguide/item-screenshots.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,173 +13,182 @@ - -
-
-

WebSlides

-
- +
+
-
-

HTML browser

+
-
+
+

+ + Screenshots + +

-
+
+

HTML browser

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
Foddie
-
+
+
+
-
- -
- - Markup - - 
<figure class="browser">
+            

+              
+                  Markup
+              
+              
<figure class="browser">
   <img src="http://lorempixel.com/500/500/food/" />
   <figcaption>Foddie</figcaption>
 </figure>

-          

+
-
- Source: modules/_browser.scss, line 1 -
+
+ Source: modules/_browser.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-slide-background-anim.html index 03a081f..4938944 100644 --- a/doc/styleguide/item-slide-background-anim.html +++ b/doc/styleguide/item-slide-background-anim.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Animated + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+
-
+
+
+
-
- -
- - Markup - - 
<section class="aligncenter bg-black">
+            

+              
+                  Markup
+              
+              
<section class="aligncenter bg-black">
   <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 140 -
+
+ Source: modules/_slides-bg.scss, line 140 +
-
- +
+ + diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html index b4cf28d..ef3bc6d 100644 --- a/doc/styleguide/item-slide-background-video.html +++ b/doc/styleguide/item-slide-background-video.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,145 +13,153 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Video + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+
@@ -160,16 +168,16 @@

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

-
+
+
+
-
- -
- - Markup - - 
<section>
+            

+              
+                  Markup
+              
+              
<section>
   <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
     <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
   </video>
@@ -178,14 +186,15 @@
     <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
   </div>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 92 -
+
+ Source: modules/_slides-bg.scss, line 92 +
-
- + + + diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html index 366ebad..a204824 100644 --- a/doc/styleguide/item-slide-background.html +++ b/doc/styleguide/item-slide-background.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,314 +13,323 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Backgrounds + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
+
+ Default styling +
+ +
+
-
-
+
+
-
- .background -
-
- Center. -
-
-
+
+ .background +
+
+ Center. +
+
+
-
-
-
- .background-top -
-
- Top. -
-
-
+
+
+
+ .background-top +
+
+ Top. +
+
+
-
-
-
- .background-bottom -
-
- Bottom. -
-
-
+
+
+
+ .background-bottom +
+
+ Bottom. +
+
+
-
-
-
- .background-center -
-
- Center. -
-
-
+
+
+
+ .background-center +
+
+ Center. +
+
+
-
-
-
- .background-center-top -
-
- Center top. -
-
-
+
+
+
+ .background-center-top +
+
+ Center top. +
+
+
-
-
-
- .background-left-top -
-
- Left top. -
-
-
+
+
+
+ .background-left-top +
+
+ Left top. +
+
+
-
-
-
- .background-right-top -
-
- Right top. -
-
-
+
+
+
+ .background-right-top +
+
+ Right top. +
+
+
-
-
-
- .background-center-bottom -
-
- Center bottom. -
-
-
+
+
+
+ .background-center-bottom +
+
+ Center bottom. +
+
+
-
-
-
- .background-left-bottom -
-
- Left bottom. -
-
-
+
+
+
+ .background-left-bottom +
+
+ Left bottom. +
+
+
-
-
-
- .background-right-bottom -
-
- Right bottom. -
-
-
+
+
+
+ .background-right-bottom +
+
+ Right bottom. +
+
+
-
-
-
- .background-left -
-
- Left. -
-
-
+
+
+
+ .background-left +
+
+ Left. +
+
+
-
-
-
- .background-right -
-
- Right. -
-
-
+
+
+
+ .background-right +
+
+ Right. +
+
+
-
-
-
+
+
+
-
- - Markup - - 
<section>
+            

+              
+                  Markup
+              
+              
<section>
   <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 15 -
+
+ Source: modules/_slides-bg.scss, line 15 +
-
- +
+ + diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html index 643436b..0387114 100644 --- a/doc/styleguide/item-slide.html +++ b/doc/styleguide/item-slide.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,161 +13,167 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Slide + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/item-slides-bottom.html b/doc/styleguide/item-slides-bottom.html index c76671b..10235ba 100644 --- a/doc/styleguide/item-slides-bottom.html +++ b/doc/styleguide/item-slides-bottom.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,182 +13,191 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Align bottom + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
-

Content

-
-
-
+
+ Default styling +
-
- Slide alignment -
-
- bottom -

Content

-
-
- - Markup - - 
<section class="slide-bottom">
+              

+                Slide alignment
+              

+              

+                bottom
+              

+              

+                

+  
Content

+

+                

+              

+
+ +
+ + Markup + + 
<section class="slide-bottom">
   <p>Content</p>
 </section>
-
+ -
- Source: modules/_slides.scss, line 74 -
+
+ Source: modules/_slides.scss, line 74 +
-
- +
+ + diff --git a/doc/styleguide/item-slides-top.html b/doc/styleguide/item-slides-top.html index 1fc21b1..f906fae 100644 --- a/doc/styleguide/item-slides-top.html +++ b/doc/styleguide/item-slides-top.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,182 +13,191 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Align top + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
-

Content

-
-
-
+
+ Default styling +
-
- Slide alignment -
-
- top -

Content

-
-
- - Markup - - 
<section class="slide-top">
+              

+                Slide alignment
+              

+              

+                top
+              

+              

+                

+  
Content

+

+                

+              

+
+ +
+ + Markup + + 
<section class="slide-top">
   <p>Content</p>
 </section>
-
+ -
- Source: modules/_slides.scss, line 60 -
+
+ Source: modules/_slides.scss, line 60 +
-
- +
+ + diff --git a/doc/styleguide/item-slides.html b/doc/styleguide/item-slides.html index bdfd2bb..7f1f7fb 100644 --- a/doc/styleguide/item-slides.html +++ b/doc/styleguide/item-slides.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,213 +13,216 @@ - -
-
-

WebSlides

-
- +
+
-
-

Fullscreen. Vertically and horizontally centered. +

+ +
+

+ + Slides + +

+ +
+

Fullscreen. Vertically and horizontally centered. Fade transition to all slides. All HTML elements will have those styles

+
+ +
+ +
+
+ Example +
+ + +
+
+

Content

+
+
+
+ +
+ +
+ + Markup + + 
<section>
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 1
- -
-
- Example -
- - -
-
-

Content

-
-
-
- -
- -
- - Markup - - 
<section>
-  <p>Content</p>
-</section>
-
- -
- Source: modules/_slides.scss, line 1 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-columns.html b/doc/styleguide/item-typography-columns.html index 2c8a26c..6df77e1 100644 --- a/doc/styleguide/item-typography-columns.html +++ b/doc/styleguide/item-typography-columns.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Magazine Two Columns

+
+
+

+ + Columns + +

+ +
+

Magazine Two Columns

+ +
+ +
+ +
+
+ Example +
+ + +
+

Column 1 text

Column 2 text

+
+
+ +
+ +
+ + Markup + + 
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+
+ +
+ Source: _typography.scss, line 346
- -
-
- Example -
- - -
-

Column 1 text

Column 2 text

-
-
- -
- -
- - Markup - - 
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
-
- -
- Source: _typography.scss, line 346 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-context.html b/doc/styleguide/item-typography-context.html index c887a42..304157d 100644 --- a/doc/styleguide/item-typography-context.html +++ b/doc/styleguide/item-typography-context.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Heading with border

+
+
+

+ + Context + +

+ +
+

Heading with border

+ +
+ +
+ +
+
+ Example +
+ + +
+

Why WebSlides?

+
+
+ +
+ +
+ + Markup + + 
<p class="text-context">Why WebSlides?</p>
+
+ +
+ Source: _typography.scss, line 376
- -
-
- Example -
- - -
-

Why WebSlides?

-
-
- -
- -
- - Markup - - 
<p class="text-context">Why WebSlides?</p>
-
- -
- Source: _typography.scss, line 376 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-data.html b/doc/styleguide/item-typography-data.html index 2998e98..c07cd93 100644 --- a/doc/styleguide/item-typography-data.html +++ b/doc/styleguide/item-typography-data.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Numbers (results, sales... )-

+
+
+

+ + Data + +

+ +
+

Numbers (results, sales... )-

+ +
+ +
+ +
+
+ Example +
+ + +
+

23,478,289

+
+
+ +
+ +
+ + Markup + + 
<p class="text-data">23,478,289</p>
+
+ +
+ Source: _typography.scss, line 314
- -
-
- Example -
- - -
-

23,478,289

-
-
- -
- -
- - Markup - - 
<p class="text-data">23,478,289</p>
-
- -
- Source: _typography.scss, line 314 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-emoji.html b/doc/styleguide/item-typography-emoji.html index d5fce7e..ab7afa5 100644 --- a/doc/styleguide/item-typography-emoji.html +++ b/doc/styleguide/item-typography-emoji.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

You'll love this

+
+
+

+ + Emoji + +

+ +
+

You'll love this

+ +
+ +
+ +
+
+ Example +
+ + +
+

πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

+
+
+ +
+ +
+ + Markup + + 
<p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
+
+ +
+ Source: _typography.scss, line 296
- -
-
- Example -
- - -
-

πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

-
-
- -
- -
- - Markup - - 
<p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
-
- -
- Source: _typography.scss, line 296 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-info.html b/doc/styleguide/item-typography-info.html index 75f69f0..06b953d 100644 --- a/doc/styleguide/item-typography-info.html +++ b/doc/styleguide/item-typography-info.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Error, warning, success...

+
+
+

+ + Info Messages + +

+ +
+

Error, warning, success...

+ +
+ +
+ +
+
+ Example +
+ + +
+

Psychiatrists have long debated whether it really exists.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+
+ +
+ Source: _typography.scss, line 546
- -
-
- Example -
- - -
-

Psychiatrists have long debated whether it really exists.

-
-
- -
- -
- - Markup - - 
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
-
- -
- Source: _typography.scss, line 546 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-interviews.html b/doc/styleguide/item-typography-interviews.html index 17455df..e938cd5 100644 --- a/doc/styleguide/item-typography-interviews.html +++ b/doc/styleguide/item-typography-interviews.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Questions & Answers

+
-
+
+

+ + Interviews + +

-
+
+

Questions & Answers

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
Driftwood

It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?

@@ -173,16 +181,16 @@

I don't know, let's hear it again.

-
+
+
+
-
- -
- - Markup - - 
<dl class="text-interview">
+            

+              
+                  Markup
+              
+              
<dl class="text-interview">
   <dt>Driftwood</dt>
   <dd>
     <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
@@ -200,14 +208,15 @@
     <p>I don't know, let's hear it again.</p>
   </dd>
 </dl>

-          

+
-
- Source: _typography.scss, line 504 -
+
+ Source: _typography.scss, line 504 +
-
- +
+ + diff --git a/doc/styleguide/item-typography-intro.html b/doc/styleguide/item-typography-intro.html index e25ffdb..6ba1ee4 100644 --- a/doc/styleguide/item-typography-intro.html +++ b/doc/styleguide/item-typography-intro.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Typography Classes = .text-

+
+
+

+ + Intro + +

+ +
+

Typography Classes = .text-

+ +
+ +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-intro">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 206
- -
-
- Example -
- - -
-

Create a simple web presence.

-
-
- -
- -
- - Markup - - 
<p class="text-intro">Create a simple web presence.</p>
-
- -
- Source: _typography.scss, line 206 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-label.html b/doc/styleguide/item-typography-label.html index 3bb5c73..3ffbb29 100644 --- a/doc/styleguide/item-typography-label.html +++ b/doc/styleguide/item-typography-label.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,163 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Label + +

+ + +
+ +
+
+ Example +
+ + +
+

Website: http://webslides.tv

+
+
+ +
+ +
+ + Markup + + 
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+
+ +
+ Source: _typography.scss, line 333 +
- -
-
- Example -
- - -
-

Website: http://webslides.tv

-
-
- -
- -
- - Markup - - 
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
-
- -
- Source: _typography.scss, line 333 -
- -
- + + diff --git a/doc/styleguide/item-typography-landings.html b/doc/styleguide/item-typography-landings.html index 0861594..9f544a0 100644 --- a/doc/styleguide/item-typography-landings.html +++ b/doc/styleguide/item-typography-landings.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

h1,h2... Promo/Landings

+
+
+

+ + Landings + +

+ +
+

h1,h2... Promo/Landings

+ +
+ +
+ +
+
+ Example +
+ + +
+

Landings

+
+
+ +
+ +
+ + Markup + + 
<h1 class="text-landing">Landings</h1>
+
+ +
+ Source: _typography.scss, line 233
- -
-
- Example -
- - -
-

Landings

-
-
- -
- -
- - Markup - - 
<h1 class="text-landing">Landings</h1>
-
- -
- Source: _typography.scss, line 233 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-lowercase.html b/doc/styleguide/item-typography-lowercase.html index 2086e2d..6fc09df 100644 --- a/doc/styleguide/item-typography-lowercase.html +++ b/doc/styleguide/item-typography-lowercase.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,163 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Lowercase + +

+ + +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-lowercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 286 +
- -
-
- Example -
- - -
-

Create a simple web presence.

-
-
- -
- -
- - Markup - - 
<p class="text-lowercase">Create a simple web presence.</p>
-
- -
- Source: _typography.scss, line 286 -
- -
- + + diff --git a/doc/styleguide/item-typography-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html index 615c404..6b40381 100644 --- a/doc/styleguide/item-typography-pull_quote.html +++ b/doc/styleguide/item-typography-pull_quote.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,173 +13,182 @@ - -
-
-

WebSlides

-
- +
+
-
-

Pull Quote Right/Left

+
-
+
+

+ + Pull Quote + +

-
+
+

Pull Quote Right/Left

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+
+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

-
+
+
+
-
- -
- - Markup - - 
<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>
+            

+              
+                  Markup
+              
+              
<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-right">Psychiatrists have long debated whether it really exists.</p>
 <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>

-          

+
-
- Source: _typography.scss, line 449 -
+
+ Source: _typography.scss, line 449 +
-
- +
+ + diff --git a/doc/styleguide/item-typography-separator.html b/doc/styleguide/item-typography-separator.html index ef60cbd..81b6e5c 100644 --- a/doc/styleguide/item-typography-separator.html +++ b/doc/styleguide/item-typography-separator.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Stars *

+
+
+

+ + Separator + +

+ +
+

Stars *

+ +
+ +
+ +
+
+ Example +
+ + +
+

Separator

+
+
+ +
+ +
+ + Markup + + 
<p class="text-separator">Separator</p>
+
+ +
+ Source: _typography.scss, line 418
- -
-
- Example -
- - -
-

Separator

-
-
- -
- -
- - Markup - - 
<p class="text-separator">Separator</p>
-
- -
- Source: _typography.scss, line 418 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-serif.html b/doc/styleguide/item-typography-serif.html index c14ec7b..71b75cd 100644 --- a/doc/styleguide/item-typography-serif.html +++ b/doc/styleguide/item-typography-serif.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Maitree font

+
+
+

+ + Serif + +

+ +
+

Maitree font

+ +
+ +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-serif">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 220
- -
-
- Example -
- - -
-

Create a simple web presence.

-
-
- -
- -
- - Markup - - 
<p class="text-serif">Create a simple web presence.</p>
-
- -
- Source: _typography.scss, line 220 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-subtitle.html b/doc/styleguide/item-typography-subtitle.html index 80c30df..4366eaf 100644 --- a/doc/styleguide/item-typography-subtitle.html +++ b/doc/styleguide/item-typography-subtitle.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Subtitle (Before h1, h2)

+
+
+

+ + Subtitule + +

+ +
+

Subtitle (Before h1, h2)

+ +
+ +
+ +
+
+ Example +
+ + +
+

Powered by #WebSlides .text-subtitle

+
+
+ +
+ +
+ + Markup + + 
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+
+ +
+ Source: _typography.scss, line 250
- -
-
- Example -
- - -
-

Powered by #WebSlides .text-subtitle

-
-
- -
- -
- - Markup - - 
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
-
- -
- Source: _typography.scss, line 250 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-symbols.html b/doc/styleguide/item-typography-symbols.html index e8f84b9..80495a8 100644 --- a/doc/styleguide/item-typography-symbols.html +++ b/doc/styleguide/item-typography-symbols.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
-
-

Stars *

+
+
+

+ + Symbols + +

+ +
+

Stars *

+ +
+ +
+ +
+
+ Example +
+ + +
+

* * *

+
+
+ +
+ +
+ + Markup + + 
<p class="text-symbols">* * *</p>
+
+ +
+ Source: _typography.scss, line 404
- -
-
- Example -
- - -
-

* * *

-
-
- -
- -
- - Markup - - 
<p class="text-symbols">* * *</p>
-
- -
- Source: _typography.scss, line 404 -
- -
- +
+ diff --git a/doc/styleguide/item-typography-uppercase.html b/doc/styleguide/item-typography-uppercase.html index 042bca7..5f8bc62 100644 --- a/doc/styleguide/item-typography-uppercase.html +++ b/doc/styleguide/item-typography-uppercase.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,163 +13,172 @@ - -
-
-

WebSlides

-
- +
+
+
+ +
+

+ + Uppercase + +

+ + +
+ +
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-uppercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 276 +
- -
-
- Example -
- - -
-

Create a simple web presence.

-
-
- -
- -
- - Markup - - 
<p class="text-uppercase">Create a simple web presence.</p>
-
- -
- Source: _typography.scss, line 276 -
- -
- + + diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html index b707cd6..b066153 100644 --- a/doc/styleguide/item-typography.html +++ b/doc/styleguide/item-typography.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,239 +13,232 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Typography + +

+ + +
+
- - - -
- + + diff --git a/doc/styleguide/kss-assets/images/down_arrow.svg b/doc/styleguide/kss-assets/images/down_arrow.svg new file mode 100644 index 0000000..422b72a --- /dev/null +++ b/doc/styleguide/kss-assets/images/down_arrow.svg @@ -0,0 +1,35 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/styleguide/kss-assets/images/up_arrow.svg b/doc/styleguide/kss-assets/images/up_arrow.svg new file mode 100644 index 0000000..6f5537e --- /dev/null +++ b/doc/styleguide/kss-assets/images/up_arrow.svg @@ -0,0 +1,35 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css index 05c64e4..0e20b82 100644 --- a/doc/styleguide/kss-assets/kss.css +++ b/doc/styleguide/kss-assets/kss.css @@ -1,34 +1,56 @@ +[class*='kss-'] { + font-family: 'San Francisco'; } + .kss-style { color: #444; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; } .kss-style a { - color: #0645ad; + color: #d1783e; text-decoration: none; - transition-property: color; - transition-duration: 0.5s; } + transition-duration: .5s; + transition-property: color; } .kss-style a:visited { - color: #0645ad; } - .kss-style a:hover, .kss-style a:focus { - color: #2272f7; } - .kss-style a:active { - color: #faa700; } + color: #d1783e; } + .kss-style a:focus { + color: #e5b290; } + .kss-style a:active, .kss-style a:hover { + color: #d1783e; } .kss-style a:hover, .kss-style a:active { outline: 0; } + .kss-style a.kss-nav__menu-link { + color: #2e3337; + font-size: 1.3rem; + font-weight: 900; } + .kss-style a.kss-nav__menu-link-active { + color: #93cdcf; } .kss-style p { - margin: 12px 0 24px 0; } - .kss-style h1, .kss-style h2, .kss-style h3, .kss-style h4, .kss-style h5, .kss-style h6 { - margin: 24px 0 0 0; - font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + margin: 12px 0 24px; } + .kss-style h1, + .kss-style h2, + .kss-style h3, + .kss-style h4, + .kss-style h5, + .kss-style h6 { color: #111; - line-height: 1.15em; } - .kss-style h4, .kss-style h5, .kss-style h6 { + font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; + font-weight: 900; + line-height: 1.15em; + margin: 24px 0 0; } + .kss-style h4, + .kss-style h5, + .kss-style h6 { font-weight: bold; } .kss-style h1 { - font-size: 40px; } + font-size: 44px; } .kss-style h2 { - font-size: 36px; } + font-size: 40px; } + .kss-style h2::before { + color: #e2e3e5; + content: '#'; + margin-left: -30px; + position: absolute; } .kss-style h3 { font-size: 34px; } .kss-style h4 { @@ -38,43 +60,48 @@ .kss-style h6 { font-size: 28px; } .kss-style blockquote { - color: #666; + border-left: 0.5em #e6e6e6 solid; + color: #999; margin: 0; - padding-left: 24px; - border-left: 0.5em #d9d9d9 solid; } + padding-left: 24px; } .kss-style hr { + border: 0; + border-bottom: 1px solid #e6e6e6; + border-top: 1px solid #dddddd; display: block; height: 2px; - border: 0; - border-top: 1px solid #dddddd; - border-bottom: 1px solid #e6e6e6; margin: 24px 0; padding: 0; } - .kss-style pre, .kss-style code, .kss-style kbd, .kss-style samp { - font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; + .kss-style pre, + .kss-style code, + .kss-style kbd, + .kss-style samp { color: #2b2b2b; + font-family: Menlo, "Ubuntu Mono", "Lucida Console", "Courier New", Courier, monospace; font-size: 1em; } .kss-style pre { - white-space: pre; - overflow: scroll; } + overflow: scroll; + white-space: pre; } .kss-style ins { - color: #111; background: #ff9; + color: #111; text-decoration: none; } .kss-style mark { - color: #111; background: #ff0; + color: #111; font-weight: bold; } - .kss-style sub, .kss-style sup { + .kss-style sub, + .kss-style sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .kss-style sup { - top: -0.5em; } + top: -.5em; } .kss-style sub { - bottom: -0.25em; } - .kss-style ul, .kss-style ol { + bottom: -.25em; } + .kss-style ul, + .kss-style ol { margin: 24px 0; padding: 0 0 0 24px; } .kss-style li p:last-child { @@ -82,9 +109,8 @@ .kss-style dd { margin: 0 0 0 24px; } .kss-style img { - max-width: 100%; border: 0; - -ms-interpolation-mode: bicubic; + max-width: 100%; vertical-align: middle; } .kss-style table { border-collapse: collapse; @@ -92,36 +118,46 @@ .kss-style td { vertical-align: top; } @media print { - .kss-style a, .kss-style a:visited { + .kss-style a, + .kss-style a:visited { text-decoration: underline; } .kss-style hr { - height: 1px; border: 0; - border-bottom: 1px solid black; } + border-bottom: 1px solid #000; + height: 1px; } .kss-style a[href]:after { content: " (" attr(href) ")"; } - .kss-style a[href^="javascript:"]:after, .kss-style a[href^="#"]:after { - content: ""; } + .kss-style a[href^='javascript:']:after, + .kss-style a[href^='#']:after { + content: ''; } .kss-style abbr[title]:after { content: " (" attr(title) ")"; } - .kss-style pre, .kss-style blockquote { + .kss-style pre, + .kss-style blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } - .kss-style tr, .kss-style img { + .kss-style tr, + .kss-style img { page-break-inside: avoid; } .kss-style img { - max-width: 100% !important; } - .kss-style p, .kss-style h2, .kss-style h3 { + max-width: 100%; } + .kss-style p, + .kss-style h2, + .kss-style h3 { orphans: 3; widows: 3; } - .kss-style h2, .kss-style h3 { + .kss-style h2, + .kss-style h3 { page-break-after: avoid; } } #kss-node { + background: #fff; margin: 0; padding: 20px; - background: #fff; } + /* SPAN elements with the classes below are added by prettyprint. */ + /* plain text */ + /* Specify class=linenums on a pre to get line numbering */ } #kss-node.kss-fullscreen-mode .kss-sidebar, #kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen), #kss-node.kss-fullscreen-mode .kss-github { @@ -131,194 +167,145 @@ padding: 0; } #kss-node .kss-main, #kss-node .kss-sidebar { - float: left; - margin-right: -100%; + border: 0; + border-right: 1px solid #e2e3e5; box-sizing: border-box; } } - #kss-node .kss-main { - width: 100%; - margin: 0 auto; } - @media screen and (min-width: 769px) { - #kss-node .kss-main { - width: 80%; - margin-left: 20%; - padding: 0 20px 0 30px; } } + @media screen and (min-width: 769px) { + #kss-node .kss-main { + padding: 0 20px 0 30px; } } #kss-node .kss-sidebar { - border-bottom: 1px solid #ddd; } + border-right: 1px solid #e2e3e5; } @media screen and (min-width: 769px) { #kss-node .kss-sidebar { - position: fixed; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; border-bottom: 0; - background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), radial-gradient(#fff, #eee); - box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.7); } } - -#kss-node .kss-doc-title { - margin: 0; } - @media screen and (min-width: 769px) { - #kss-node .kss-doc-title { - font-size: 1.5em; } } - -#kss-node .kss-header, -#kss-node .kss-nav { - position: relative; } - @media screen and (min-width: 769px) { - #kss-node .kss-header, - #kss-node .kss-nav { - margin-top: 2em; } } - #kss-node .kss-header ul, #kss-node .kss-header ol, #kss-node .kss-header li, - #kss-node .kss-nav ul, - #kss-node .kss-nav ol, - #kss-node .kss-nav li { - display: block; - float: none; } - #kss-node .kss-header li, - #kss-node .kss-nav li { - margin-left: 3.2rem; } - -#kss-node .kss-nav__menu { - margin-top: 12px; - margin-bottom: 12px; - padding: 0; - list-style-type: none; } - -#kss-node .kss-nav__menu-item { - display: inline-block; - padding-right: 24px; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-item { - display: list-item; - padding-right: 0; } } - -#kss-node .kss-nav__menu-link { - position: relative; - display: inline-block; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-link:before { - content: ' '; - position: absolute; - left: -20px; - width: 0; - height: 100%; - background-color: transparent; } } - #kss-node .kss-nav__menu-link.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; } - -#kss-node .kss-nav__menu-child { - display: none; } - @media screen and (min-width: 769px) { - #kss-node .kss-nav__menu-child { + padding: 150px 10px 0 20px; } } + #kss-node .kss-doc-title { + margin: 0; } + #kss-node .kss-doc-title img { + max-width: 40px; + vertical-align: middle; } + @media screen and (min-width: 769px) { + #kss-node .kss-doc-title { + font-size: 1.5em; } } + #kss-node .kss-nav { + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav { + margin-top: 2em; } } + #kss-node .kss-nav ul, + #kss-node .kss-nav ol, + #kss-node .kss-nav li { display: block; - list-style-type: none; - margin: 0; - padding: 0; } - #kss-node .kss-nav__menu-child li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; } - #kss-node .kss-nav__menu-child li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; } } - -#kss-node .kss-nav__ref { - color: #333; - font-weight: bold; } - #kss-node .kss-nav__ref:after { - content: ' '; } - -#kss-node .kss-nav__ref-child { - font-weight: normal; } - -#kss-node { - /* SPAN elements with the classes below are added by prettyprint. */ - /* plain text */ - /* string content */ - /* a keyword */ - /* a comment */ - /* a type name */ - /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - /* a markup tag name */ - /* a markup attribute name */ - /* a markup attribute value */ - /* a declaration; a variable name */ - /* a function name */ - /* Use higher contrast and text-weight for printable form. */ - /* Specify class=linenums on a pre to get line numbering */ } + float: none; } + #kss-node .kss-nav li { + margin-left: 3.2rem; } + #kss-node .kss-nav .kss-nav-has-children > a::before { + content: url("./images/down_arrow.svg"); } + #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url("./images/up_arrow.svg"); } + #kss-node .kss-nav__menu { + list-style-type: none; + margin-bottom: 12px; + margin-top: 12px; + padding: 0; } + #kss-node .kss-nav__menu-item { + display: inline-block; + padding-right: 24px; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-item { + display: list-item; + padding-right: 0; } } + #kss-node .kss-nav__menu-link { + display: inline-block; + position: relative; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-link:before { + background-color: transparent; + content: ' '; + height: 100%; + left: -20px; + position: absolute; + width: 0; } } + #kss-node .kss-nav__menu-child { + display: none; } + @media screen and (min-width: 769px) { + #kss-node .kss-nav__menu-child { + display: block; + list-style-type: none; + margin: 0; + padding: 0; } + #kss-node .kss-nav__menu-child li { + padding: 15px 0 0; } + #kss-node .kss-nav__menu-child li:last-child { + padding: 15px 0; } } + #kss-node .kss-nav__ref { + color: #6a737a; } + #kss-node .kss-nav__ref:after { + content: ' '; } + #kss-node .kss-nav__ref-child { + font-weight: normal; } #kss-node .kss-section { - padding-top: 2.4rem; - padding-bottom: 2.4rem; } + padding-bottom: 2.4rem; + padding-top: 2.4rem; } #kss-node .kss-section.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; - overflow: auto !important; - padding: 20px; } + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; + overflow: auto; + padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; } #kss-node .kss-title { margin-bottom: 0; } #kss-node .is-fullscreen .kss-title { margin-top: 0; } #kss-node .kss-title__ref { + color: #333; display: block; font-size: 16px; - line-height: 16px; - color: #666; } + line-height: 16px; } #kss-node .kss-title__ref:before { content: 'Section '; } #kss-node .kss-title__permalink { - display: block; color: #000; + display: block; text-decoration: none; } #kss-node .kss-title__permalink:hover, #kss-node .kss-title__permalink:focus, #kss-node .kss-title__permalink:active { - color: #0645ad; } + color: #d1783e; } @media screen and (min-width: 607px) { #kss-node .kss-title__permalink:hover .kss-title__permalink-hash, #kss-node .kss-title__permalink:focus .kss-title__permalink-hash, #kss-node .kss-title__permalink:active .kss-title__permalink-hash { display: inline; } } #kss-node .kss-title__permalink-hash { - display: none; - color: #ccc; } + color: #999; + display: none; } #kss-node .kss-toolbar { - margin: 6px 0 24px; display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; line-height: 1; + margin: 6px 0 24px; padding: 3px; } #kss-node .kss-toolbar a { box-sizing: content-box; display: inline-block; - width: 16px; height: 16px; + overflow: visible; padding: 3px; - vertical-align: top; position: relative; - overflow: visible; } + vertical-align: top; + width: 16px; } #kss-node .kss-toolbar a + a { margin-left: 6px; } #kss-node .kss-toolbar a .kss-toolbar__icon-fill { - fill: #ccc; } + fill: #999; } #kss-node .kss-toolbar a svg.on { display: none; } #kss-node .kss-toolbar a:focus, #kss-node .kss-toolbar a:hover { @@ -326,51 +313,51 @@ #kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill, #kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill { fill: #000; } #kss-node .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; + background: #fff; + border: solid 1px #999; bottom: 100%; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + clip: rect(1px, 1px, 1px, 1px); + color: #000; + cursor: help; + display: inline-block; + height: 1px; left: -10px; margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; opacity: 0; - transition: opacity 0.25s; - height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - word-wrap: normal; } + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; + word-wrap: normal; + z-index: 1; } #kss-node .kss-toolbar__tooltip:before, #kss-node .kss-toolbar__tooltip:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; + border-color: #999 transparent; + border-style: solid; border-width: 7px 5px 0; - border-color: #666 transparent; - border-style: solid; } + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; } #kss-node .kss-toolbar__tooltip:after { - bottom: -6px; - border-top-color: #fff; } + border-top-color: #fff; + bottom: -6px; } #kss-node a:focus > .kss-toolbar__tooltip, #kss-node a:hover > .kss-toolbar__tooltip { - opacity: 1; clip: auto; height: auto; - width: auto; - overflow: visible; } + opacity: 1; + overflow: visible; + width: auto; } #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen], #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides], #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; } + background-color: #999; + border-color: #999; } #kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill, #kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill, #kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill { @@ -386,8 +373,8 @@ #kss-node .kss-parameters { display: table; list-style-type: none; - margin-top: 0; margin-left: 0; + margin-top: 0; padding-left: 0; } #kss-node .kss-parameters__title { font-weight: bold; } @@ -402,23 +389,23 @@ #kss-node .kss-parameters__default-value code { white-space: nowrap; } #kss-node .kss-modifier__wrapper { - border: 1px solid #ccc; + border: 1px solid #999; padding: 0 10px 10px; } #kss-node .is-fullscreen .kss-modifier__wrapper { + border: 0; margin-left: -20px; margin-right: -20px; padding-left: 0; - padding-right: 0; - border: none; } + padding-right: 0; } #kss-node .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; - font-weight: bold; } + background-color: #999; + border-bottom: 1px solid #999; + font-weight: bold; + margin: 0 -10px 10px; + padding: 10px; } #kss-node .is-fullscreen .kss-modifier__heading { - margin: 0 20px 10px; - border: 1px solid #ccc; } + border: 1px solid #999; + margin: 0 20px 10px; } #kss-node .kss-modifier__default-name { font-weight: bold; margin-bottom: 12px; } @@ -427,8 +414,8 @@ margin-right: 20px; } #kss-node .kss-modifier__name { float: left; - padding-right: 10px; - font-weight: bold; } + font-weight: bold; + padding-right: 10px; } #kss-node .is-fullscreen .kss-modifier__name { margin-left: 20px; } #kss-node .kss-modifier__description { @@ -436,64 +423,64 @@ #kss-node .is-fullscreen .kss-modifier__description { margin-right: 20px; } #kss-node .kss-modifier__example { - clear: left; border: 2px dashed transparent; + clear: left; + margin: -2px -2px 22px; position: relative; - z-index: 0; - margin: -2px -2px 22px; } + z-index: 0; } #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } #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 { - z-index: -1; + border: 2px solid #000; box-sizing: border-box; content: ''; + height: 5px; position: absolute; width: 5px; - height: 5px; - border: 2px solid #000; } + z-index: -1; } #kss-node.kss-guides-mode .kss-modifier__example { border-color: #000; } #kss-node.kss-guides-mode .kss-modifier__example:before { - top: -5px; + border-left: 0; + border-top: 0; left: -5px; - border-top: 0; - border-left: 0; } + top: -5px; } #kss-node.kss-guides-mode .kss-modifier__example:after { - top: -5px; - right: -5px; + border-right: 0; border-top: 0; - border-right: 0; } + right: -5px; + top: -5px; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before { left: auto; right: 0; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after { - right: auto; - left: 0; } + left: 0; + right: auto; } #kss-node .kss-modifier__example-footer { clear: both; } #kss-node.kss-guides-mode .kss-modifier__example-footer:before { - bottom: -5px; - left: -5px; border-bottom: 0; - border-left: 0; } - #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border-left: 0; bottom: -5px; - right: -5px; + left: -5px; } + #kss-node.kss-guides-mode .kss-modifier__example-footer:after { + border-bottom: 0; border-right: 0; - border-bottom: 0; } + bottom: -5px; + right: -5px; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before { left: auto; right: 0; } #kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after { - right: auto; - left: 0; } + left: 0; + right: auto; } #kss-node .kss-markup { - margin: 24px 0; - border: 1px solid #ccc; } + border: 1px solid #999; + margin: 24px 0; } #kss-node .kss-markup[open] summary { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #999; margin-bottom: 3px; } #kss-node .kss-markup summary { padding-left: 10px; } @@ -507,100 +494,83 @@ #kss-node .kss-github { display: block; position: absolute; - top: 0; - right: 0; } } + right: 0; + top: 0; } } #kss-node .kss-github img { border: 0; } #kss-node .pln { color: #000; } - #kss-node .str { - color: #080; } - #kss-node .kwd { - color: #008; } - #kss-node .com { - color: #800; } - #kss-node .typ { - color: #606; } - #kss-node .lit { - color: #066; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #660; } - #kss-node .tag { - color: #008; } - #kss-node .atn { - color: #606; } - #kss-node .atv { - color: #080; } - #kss-node .dec, #kss-node .var { - color: #606; } - #kss-node .fun { - color: red; } - @media print, projection { - #kss-node .str { - color: #060; } - #kss-node .kwd { - color: #006; - font-weight: bold; } - #kss-node .com { - color: #600; - font-style: italic; } - #kss-node .typ { - color: #404; - font-weight: bold; } - #kss-node .lit { - color: #044; } - #kss-node .pun, #kss-node .opn, #kss-node .clo { - color: #440; } - #kss-node .tag { - color: #006; - font-weight: bold; } - #kss-node .atn { - color: #404; } - #kss-node .atv { - color: #060; } } #kss-node ol.linenums { - margin: 0; - padding: 0 0 3px 0; list-style-type: none; - /* Alternate shading for lines */ } + margin: 0; + padding: 0 0 3px; } #kss-node ol.linenums li { + background: #fff; + border-bottom: 1px solid #999; min-height: 24px; - border-bottom: 1px solid #eee; - padding: 0 10px; - background: #fff; } + padding: 0 10px; } #kss-node ol.linenums li:first-child { padding-top: 3px; } - #kss-node ol.linenums li.L0, - #kss-node ol.linenums li.L2, - #kss-node ol.linenums li.L4, - #kss-node ol.linenums li.L6, - #kss-node ol.linenums li.L8 { - background: #fcfcfc; } + +.kss-container { + display: grid; + grid-template-columns: 25% 75%; } + +.kss-header { + background-color: #2f3742; + display: flex; + padding: 0 2.4rem; + position: fixed; } + .kss-header h1, + .kss-header li a { + color: #fff; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; } + .kss-header li a:hover { + color: #93cdcf; } + .kss-header .kss-menu-active { + border-bottom: 4px solid #93cdcf; + box-sizing: border-box; + color: #93cdcf; } + +.kss-sub-header { + background: #f3f3f5; + border-bottom: 4px solid #e7e7e9; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; } #kssref-layout-radius .radius { padding: 2.4rem; } -#kssref-base-backgrounds span[class*=bg] { +#kssref-base-backgrounds span[class*='bg'] { display: inline-block; - padding: 1.2rem; - margin-left: -4px; } + margin-left: -4px; + padding: 1.2rem; } -#kssref-base-backgrounds-transparent div[class*=bg] { - padding: 2rem; - margin: 0; } - #kssref-base-backgrounds-transparent div[class*=bg] > div[class*=bg] { - padding: 6rem; - margin: 3rem; } +#kssref-base-backgrounds-transparent div[class*='bg'] { + margin: 0; + padding: 2rem; } + #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] { + margin: 3rem; + padding: 6rem; } -#kssref-base-backgrounds-gradient div[class*=bg] { - padding: 4rem; - margin: 3rem; } +#kssref-base-backgrounds-gradient div[class*='bg'] { + margin: 3rem; + padding: 4rem; } #kssref-slide-background-anim .slide { - clip: rect(0px, 200px, 200px, 0px); + clip: rect(0, 200px, 200px, 0); position: absolute; } #kssref-slide-background-anim .kss-modifier__example { - width: 200px; height: 200px; - margin: 0 auto; } + margin: 0 auto; + width: 200px; } diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss index 234a73c..ea1ca77 100644 --- a/doc/styleguide/kss-assets/kss.scss +++ b/doc/styleguide/kss-assets/kss.scss @@ -1,27 +1,53 @@ // ------------------------------------------------------------------------------ // Variables - Colors, Fonts, etc. // ------------------------------------------------------------------------------ -$kss-colors-background : #fff; +$kss-black: #000; +$kss-gray: #999; +$kss-white: #fff; +$kss-transparent: rgba(0, 0, 0, 0); +$kss-dark-gray: #333; +$kss-shadow: rgba(0, 0, 0, .25); -$kss-colors-foreground : #444; -$kss-colors-heading : #111; -$kss-colors-quotes : #666; +$kss-colors-header-bg: #2f3742; +$kss-colors-header-font: #fff; +$kss-colors-header-link-active: #93cdcf; +$kss-colors-subheader-bg: #f3f3f5; +$kss-colors-subheader-border: #e7e7e9; -$kss-colors-link : #0645ad; -$kss-colors-link-visited : #0645ad; -$kss-colors-link-hover : lighten($kss-colors-link, 20%); -$kss-colors-link-active : #faa700; +$kss-colors-background: $kss-white; +$kss-colors-border-sep: #e2e3e5; -$kss-font-body : Helvetica, 'Helvetica Neue', Arial, sans-serif; -$kss-font-code : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace; +$kss-colors-menu-link: #2e3337; +$kss-colors-menu-link-active: #93cdcf; +$kss-colors-submenu-link: #6a737a; -$kss-font-size : 16px; -$kss-vertical-rhythm : $kss-font-size * 1.5; +$kss-colors-foreground: #444; +$kss-colors-heading: #111; +$kss-colors-heading-side: #e2e3e5; +$kss-colors-quotes: $kss-gray; + +$kss-colors-ins-bg: #ff9; +$kss-colors-mark-bg: #ff0; + +$kss-colors-link: #d1783e; +$kss-colors-link-visited: #d1783e; +$kss-colors-link-hover: lighten($kss-colors-link, 20%); +$kss-colors-link-active: #d1783e; + +$kss-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif; +$kss-font-code: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace; + +$kss-font-size: 16px; +$kss-vertical-rhythm: $kss-font-size * 1.5; // ------------------------------------------------------------------------------ // Wrap all of this builder's base HTML styling inside a .kss-style selector. // ------------------------------------------------------------------------------ +[class*='kss-'] { + font-family: 'San Francisco'; +} + .kss-style { color: $kss-colors-foreground; font-family: $kss-font-body; @@ -31,106 +57,145 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; a { color: $kss-colors-link; text-decoration: none; + transition-duration: .5s; transition-property: color; - transition-duration: 0.5s; &:visited { color: $kss-colors-link-visited; } - &:hover, &:focus { color: $kss-colors-link-hover; } - &:active { color: $kss-colors-link-active; } + + &:active, + &:hover { + color: $kss-colors-link-active; + } &:hover, &:active { outline: 0; } + + &.kss-nav__menu-link { + color: $kss-colors-menu-link; + font-size: 1.3rem; + font-weight: 900; + } + + &.kss-nav__menu-link-active { + color: $kss-colors-menu-link-active; + } } p { - margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0; + margin: ($kss-vertical-rhythm / 2) 0 $kss-vertical-rhythm; } - h1, h2, h3, h4, h5, h6 { - margin: $kss-vertical-rhythm 0 0 0; - font-family: $kss-font-body; + h1, + h2, + h3, + h4, + h5, + h6 { color: $kss-colors-heading; + font-family: $kss-font-body; + font-weight: 900; line-height: 1.15em; + margin: $kss-vertical-rhythm 0 0; } - h4, h5, h6 { + h4, + h5, + h6 { font-weight: bold; } - h1 { font-size: $kss-font-size * 2.5; } - h2 { font-size: $kss-font-size * 2.25; } + h1 { font-size: $kss-font-size * 2.75; } + + h2 { + font-size: $kss-font-size * 2.5; + + &::before { + color: $kss-colors-heading-side; + content: '#'; + margin-left: -30px; + position: absolute; + } + } + h3 { font-size: $kss-font-size * 2.125; } h4 { font-size: $kss-font-size * 2; } h5 { font-size: $kss-font-size * 1.875; } h6 { font-size: $kss-font-size * 1.75; } blockquote { + border-left: .5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; color: $kss-colors-quotes; margin: 0; padding-left: $kss-vertical-rhythm; - border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid; } hr { + border: 0; + border-bottom: 1px solid darken($kss-colors-background, 10%); + border-top: 1px solid lighten($kss-colors-foreground, 60%); display: block; height: 2px; - border: 0; - border-top: 1px solid lighten($kss-colors-foreground, 60%); - border-bottom: 1px solid darken($kss-colors-background, 10%); margin: $kss-vertical-rhythm 0; padding: 0; } - pre, code, kbd, samp { - font-family: $kss-font-code; + pre, + code, + kbd, + samp { color: mix($kss-colors-foreground, $kss-colors-heading, 50%); + font-family: $kss-font-code; font-size: 1em; } pre { - white-space: pre; overflow: scroll; + white-space: pre; } ins { + background: $kss-colors-ins-bg; color: $kss-colors-heading; - background: #ff9; text-decoration: none; } mark { + background: $kss-colors-mark-bg; color: $kss-colors-heading; - background: #ff0; font-weight: bold; } - sub, sup { + sub, + sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } - sup { top: -0.5em; } - sub { bottom: -0.25em; } - ul, ol { + sup { top: -.5em; } + sub { bottom: -.25em; } + + ul, + ol { margin: $kss-vertical-rhythm 0; padding: 0 0 0 $kss-vertical-rhythm; } + li p:last-child { margin: 0; } + dd { margin: 0 0 0 $kss-vertical-rhythm; } img { - max-width:100%; border: 0; - -ms-interpolation-mode: bicubic; + max-width: 100%; vertical-align: middle; } @@ -138,21 +203,57 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; border-collapse: collapse; border-spacing: 0; } + td { vertical-align: top; } @media print { - a, a:visited { text-decoration: underline; } - hr { height: 1px; border:0; border-bottom:1px solid black; } - a[href]:after { content: " (" attr(href) ")"; } - a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - abbr[title]:after { content: " (" attr(title) ")"; } - pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; } - tr, img { page-break-inside: avoid; } - img { max-width: 100% !important; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } + a, + a:visited { + text-decoration: underline; + } + + hr { + border: 0; + border-bottom: 1px solid $kss-black; + height: 1px; + } + + a[href]:after { content: ' (' attr(href) ')'; } + + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; + } + + abbr[title]:after { content: ' (' attr(title) ')'; } + + pre, + blockquote { + border: 1px solid $kss-gray; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, + img { + page-break-inside: avoid; + } + + img { max-width: 100%; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } } } @@ -161,9 +262,9 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; // ------------------------------------------------------------------------------ #kss-node { + background: $kss-white; margin: 0; padding: 20px; - background: #fff; &.kss-fullscreen-mode { .kss-sidebar, @@ -178,57 +279,41 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; .kss-main, .kss-sidebar { - float: left; - margin-right: -100%; + border: 0; + border-right: 1px solid $kss-colors-border-sep; box-sizing: border-box; } } .kss-main { - width: 100%; - margin: 0 auto; @media screen and (min-width: 769px) { - width: 80%; - margin-left: 20%; padding: 0 20px 0 30px; } } .kss-sidebar { - border-bottom:1px solid #ddd; + border-right: 1px solid $kss-colors-border-sep; @media screen and (min-width: 769px) { - position: fixed; - width: 20%; - height: 100%; - overflow: auto; - padding: 0 10px 0 20px; border-bottom: 0; - background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee); - background-image: url(noise-low.png), radial-gradient(#fff, #eee); - box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7); + padding: 150px 10px 0 20px; } } -} - -// ------------------------------------------------------------------------------ -// Sidebar-area components -// ------------------------------------------------------------------------------ - -#kss-node { .kss-doc-title { margin: 0; + img { + max-width: 40px; + vertical-align: middle; + } + @media screen and (min-width: 769px) { font-size: 1.5em; } } - .kss-header, .kss-nav { position: relative; @@ -236,7 +321,9 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; margin-top: 2em; } - & ul, & ol, & li { + & ul, + & ol, + & li { display: block; float: none; } @@ -244,13 +331,21 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; & li { margin-left: 3.2rem; } + + .kss-nav-has-children > a::before { + content: url('./images/down_arrow.svg'); + } + + .kss-nav-has-children > a.kss-nav__menu-link-active::before { + content: url('./images/up_arrow.svg'); + } } .kss-nav__menu { - margin-top: ($kss-vertical-rhythm/2); - margin-bottom: ($kss-vertical-rhythm/2); - padding: 0; list-style-type: none; + margin-bottom: ($kss-vertical-rhythm / 2); + margin-top: ($kss-vertical-rhythm / 2); + padding: 0; } .kss-nav__menu-item { @@ -264,25 +359,19 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } .kss-nav__menu-link { - position: relative; display: inline-block; + position: relative; &:before { @media screen and (min-width: 769px) { + background-color: $kss-transparent; content: ' '; - position: absolute; - left: -20px; - width: 0; height: 100%; - background-color: rgba(#000, 0); + left: -20px; + position: absolute; + width: 0; } } - - &.is-in-viewport:before { - background-color: #000; - width: 5px; - transition: background-color .4s, width .6s; - } } .kss-nav__menu-child { @@ -294,87 +383,81 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; margin: 0; padding: 0; - // @TODO: The ul is output even when there are no children. Fix this, so - // we can put these :first-child and :last child styles back on the ul. - li:first-child { - margin-top: 10px; - border-top: 1px solid #ccc; - padding: 10px 0 0; - } + li { + padding: 15px 0 0; - li:last-child { - margin-bottom: 10px; - border-bottom: 1px solid #ccc; - padding: 0 0 10px; + &:last-child { + padding: 15px 0; + } } } } .kss-nav__ref { - color: #333; - font-weight: bold; + color: $kss-colors-submenu-link; &:after { content: ' '; } } + .kss-nav__ref-child { font-weight: normal; } -} -// ------------------------------------------------------------------------------ -// Content-area components -// ------------------------------------------------------------------------------ - -#kss-node { + // ------------------------------------------------------------------------------ + // Content-area components + // ------------------------------------------------------------------------------ .kss-section { - padding-top: 2.4rem; padding-bottom: 2.4rem; + padding-top: 2.4rem; // "fullscreen" styles copied from Mozilla's default stylesheet. &.is-fullscreen { - position: fixed !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - margin: 0 !important; - min-width: 0 !important; - max-width: none !important; - min-height: 0 !important; - max-height: none !important; - box-sizing: border-box !important; - object-fit: contain !important; - transform: none !important; + bottom: 0; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + object-fit: contain; // Turn on scrolling if needed. - overflow: auto !important; + overflow: auto; padding: 20px; + position: fixed; + right: 0; + top: 0; + transform: none; + width: 100%; } } .kss-title { margin-bottom: 0; } + .is-fullscreen .kss-title { margin-top: 0; } + .kss-title__ref { + color: $kss-dark-gray; display: block; font-size: $kss-font-size; line-height: $kss-font-size; - color: #666; &:before { content: 'Section '; } } + .kss-title__permalink { + color: $kss-black; display: block; - color: #000; text-decoration: none; &:hover, @@ -389,38 +472,34 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } } } + .kss-title__permalink-hash { + color: $kss-gray; display: none; - color: #ccc; } .kss-toolbar { - margin: 6px 0 24px; display: inline-block; - border: 1px solid #eee; - background-color: #f9f9f9; - border-right-color: #e0e0e0; - border-bottom-color: #e0e0e0; line-height: 1; + margin: 6px 0 24px; padding: 3px; a { box-sizing: content-box; display: inline-block; - width: 16px; height: 16px; - padding: 3px; - vertical-align: top; - // Tooltip wrapper styles: - position: relative; overflow: visible; + padding: 3px; + position: relative; + vertical-align: top; + width: 16px; + a { margin-left: 6px; } .kss-toolbar__icon-fill { - fill: #ccc; + fill: $kss-gray; } svg.on { @@ -429,76 +508,77 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; &:focus, &:hover { - border-color: #000; + border-color: $kss-black; .kss-toolbar__icon-fill { - fill: #000; + fill: $kss-black; } } } } + .kss-toolbar__tooltip { - position: absolute; - z-index: 1; - display: inline-block; + background: $kss-white; + border: solid 1px $kss-gray; bottom: 100%; + box-shadow: 2px 2px 2px $kss-shadow; + clip: rect(1px, 1px, 1px, 1px); + color: $kss-black; + cursor: help; + display: inline-block; + height: 1px; left: -10px; margin-bottom: 5px; - border: solid 1px #666; - padding: 8px 10px 6px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); - white-space: nowrap; - color: #000; - background: #fff; - cursor: help; opacity: 0; - transition: opacity 0.25s; - // Visually hidden - height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); + padding: 8px 10px 6px; + position: absolute; + transition: opacity .25s; + white-space: nowrap; + width: 1px; word-wrap: normal; + z-index: 1; // Solid grey triangle. &:before, &:after { - content: ''; - position: absolute; - bottom: -8px; - left: 15px; - width: 0; - height: 0; - border-width: 7px 5px 0; - border-color: #666 transparent; + border-color: $kss-gray transparent; border-style: solid; + border-width: 7px 5px 0; + bottom: -8px; + content: ''; + height: 0; + left: 15px; + position: absolute; + width: 0; } // White triangle knock-out. &:after { + border-top-color: $kss-white; bottom: -6px; - border-top-color: #fff; } } + a:focus, a:hover { > .kss-toolbar__tooltip { - opacity: 1; - // Visually hidden off clip: auto; height: auto; - width: auto; + opacity: 1; overflow: visible; + width: auto; } } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen], &.kss-guides-mode .kss-toolbar a[data-kss-guides], &.kss-markup-mode .kss-toolbar a[data-kss-markup] { - border-color: #666; - background-color: #666; + background-color: $kss-gray; + border-color: $kss-gray; .kss-toolbar__icon-fill { - fill: #fff; + fill: $kss-white; } svg.on { @@ -513,158 +593,181 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; .kss-parameters { display: table; list-style-type: none; - margin-top: 0; margin-left: 0; + margin-top: 0; padding-left: 0; } + .kss-parameters__title { font-weight: bold; } + .kss-parameters__item { display: table-row; } + .kss-parameters__name { display: table-cell; padding-right: 20px; white-space: nowrap; } + .kss-parameters__description { display: table-cell; } + .kss-parameters__default-value code { white-space: nowrap; } .kss-modifier__wrapper { - border: 1px solid #ccc; + border: 1px solid $kss-gray; padding: 0 10px 10px; } + .is-fullscreen .kss-modifier__wrapper { - // Un-do padding on .kss-section. + border: 0; margin-left: -20px; margin-right: -20px; - // Remove all padding on the wrapper padding-left: 0; padding-right: 0; - border: none; } + .kss-modifier__heading { - margin: 0 -10px 10px -10px; - padding: 10px; - border-bottom: 1px solid #ccc; - background-color: #eee; + background-color: $kss-gray; + border-bottom: 1px solid $kss-gray; font-weight: bold; + margin: 0 -10px 10px; + padding: 10px; } + .is-fullscreen .kss-modifier__heading { + border: 1px solid $kss-gray; margin: 0 20px 10px; - border: 1px solid #ccc; } + .kss-modifier__default-name { font-weight: bold; margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__default-name { margin-left: 20px; margin-right: 20px; } + .kss-modifier__name { float: left; - padding-right: 10px; font-weight: bold; + padding-right: 10px; } + .is-fullscreen .kss-modifier__name { margin-left: 20px; } + .kss-modifier__description { margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__description { margin-right: 20px; } + .kss-modifier__example { - clear: left; border: 2px dashed transparent; + clear: left; + margin: -2px -2px ($kss-vertical-rhythm - 2px); position: relative; // Contain the example's absolute positioning. z-index: 0; // Establishes a local stacking context. - margin: -2px -2px ($kss-vertical-rhythm - 2px); &:last-child { margin-bottom: 0; } } + &.kss-guides-mode .kss-modifier__example, &.kss-guides-mode .kss-modifier__example-footer { &:before, &:after { - z-index: -1; + border: 2px solid $kss-black; box-sizing: border-box; content: ''; + height: 5px; position: absolute; width: 5px; - height: 5px; - border: 2px solid #000; + z-index: -1; } } + &.kss-guides-mode .kss-modifier__example { - border-color: #000; + border-color: $kss-black; &:before { - top: -5px; - left: -5px; - border-top: 0; border-left: 0; - } - &:after { - top: -5px; - right: -5px; border-top: 0; + left: -5px; + top: -5px; + } + + &:after { border-right: 0; + border-top: 0; + right: -5px; + top: -5px; } } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { &:before { left: auto; right: 0; } + &:after { - right: auto; left: 0; + right: auto; } } + .kss-modifier__example-footer { clear: both; } + &.kss-guides-mode .kss-modifier__example-footer { &:before { - bottom: -5px; - left: -5px; border-bottom: 0; border-left: 0; + bottom: -5px; + left: -5px; } + &:after { + border-bottom: 0; + border-right: 0; bottom: -5px; right: -5px; - border-right: 0; - border-bottom: 0; } } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { &:before { left: auto; right: 0; } + &:after { - right: auto; left: 0; + right: auto; } } .kss-markup { + border: 1px solid $kss-gray; margin: $kss-vertical-rhythm 0; - border: 1px solid #ccc; &[open] summary { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $kss-gray; margin-bottom: 3px; } @@ -682,13 +785,13 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } .kss-github { - display:none; + display: none; @media screen and (min-width: 501px) { display: block; position: absolute; - top: 0; right: 0; + top: 0; } img { @@ -701,61 +804,77 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; // ------------------------------------------------------------------------------ /* SPAN elements with the classes below are added by prettyprint. */ - .pln { color: #000 } /* plain text */ + .pln { color: $kss-black; } /* plain text */ - .str { color: #080 } /* string content */ - .kwd { color: #008 } /* a keyword */ - .com { color: #800 } /* a comment */ - .typ { color: #606 } /* a type name */ - .lit { color: #066 } /* a literal value */ - /* punctuation, lisp open bracket, lisp close bracket */ - .pun, .opn, .clo { color: #660 } - .tag { color: #008 } /* a markup tag name */ - .atn { color: #606 } /* a markup attribute name */ - .atv { color: #080 } /* a markup attribute value */ - .dec, .var { color: #606 } /* a declaration; a variable name */ - .fun { color: red } /* a function name */ - - /* Use higher contrast and text-weight for printable form. */ - @media print, projection { - .str { color: #060 } - .kwd { color: #006; font-weight: bold } - .com { color: #600; font-style: italic } - .typ { color: #404; font-weight: bold } - .lit { color: #044 } - .pun, .opn, .clo { color: #440 } - .tag { color: #006; font-weight: bold } - .atn { color: #404 } - .atv { color: #060 } - } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { - margin: 0; - padding: 0 0 3px 0; list-style-type: none; + margin: 0; + padding: 0 0 3px; li { + background: $kss-white; + border-bottom: 1px solid $kss-gray; min-height: $kss-vertical-rhythm; - border-bottom: 1px solid #eee; padding: 0 10px; - background: #fff; &:first-child { padding-top: 3px; } } - /* Alternate shading for lines */ - li.L0, - li.L2, - li.L4, - li.L6, - li.L8 { - background: #fcfcfc; - } } } +.kss-container { + display: grid; + grid-template-columns: 25% 75%; +} + +// ------------------------------------------------------------------------------ +// Sidebar-area components +// ------------------------------------------------------------------------------ +.kss-header { + background-color: $kss-colors-header-bg; + display: flex; + padding: 0 2.4rem; + position: fixed; + + h1, + li a { + color: $kss-colors-header-font; + display: inline-block; + font-family: 'San Francisco'; + font-size: .8em; + font-weight: bold; + line-height: 7.2rem; + padding: 0; + } + + li a:hover { + color: $kss-colors-header-link-active; + } + + .kss-menu-active { + border-bottom: 4px solid $kss-colors-header-link-active; + box-sizing: border-box; + color: $kss-colors-header-link-active; + } + +} + +.kss-sub-header { + background: $kss-colors-subheader-bg; + border-bottom: 4px solid $kss-colors-subheader-border; + font-size: 14px; + padding: 1rem 2.4rem; + position: fixed; + top: 72px; + width: 100%; + z-index: 1; +} + + // WebSlides #kssref-layout-radius { @@ -765,38 +884,39 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } #kssref-base-backgrounds { - & span[class*=bg] { + & span[class*='bg'] { display: inline-block; - padding: 1.2rem; margin-left: -4px; + padding: 1.2rem; } } #kssref-base-backgrounds-transparent { - & div[class*=bg] { - padding: 2rem; + & div[class*='bg'] { margin: 0; + padding: 2rem; - & > div[class*=bg] { - padding: 6rem; + & > div[class*='bg'] { margin: 3rem; + padding: 6rem; } } } #kssref-base-backgrounds-gradient { - & div[class*=bg] { - padding: 4rem; + & div[class*='bg'] { margin: 3rem; + padding: 4rem; } } #kssref-slide-background-anim .slide { - clip: rect(0px, 200px, 200px, 0px); + clip: rect(0, 200px, 200px, 0); position: absolute; } + #kssref-slide-background-anim .kss-modifier__example { - width: 200px; height: 200px; margin: 0 auto; + width: 200px; } diff --git a/doc/styleguide/section-avatars.html b/doc/styleguide/section-avatars.html index c88bc24..584a39b 100644 --- a/doc/styleguide/section-avatars.html +++ b/doc/styleguide/section-avatars.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,177 +13,186 @@ - -
-
-

WebSlides

-
- +
+
-
-

You'll love this

+
-
+
+

+ + Avatars + +

-
+
+

You'll love this

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
- +
+ -
+
+
+
-
- -
- - Markup - - 
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
+            

+              
+                  Markup
+              
+              
<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
 <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
 <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
 <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
 <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
 <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />

-          

+
-
- Source: modules/_avatars.scss, line 5 -
+
+ Source: modules/_avatars.scss, line 5 +
-
- +
+ + diff --git a/doc/styleguide/section-badgets.html b/doc/styleguide/section-badgets.html index 556da3c..471dd4d 100644 --- a/doc/styleguide/section-badgets.html +++ b/doc/styleguide/section-badgets.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,169 +13,178 @@ - -
-
-

WebSlides

-
- +
+
-
-

App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

+
+
+

+ + Badges + +

+ +
+

App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

+ +
+ +
+ +
+
+ Example +
+ + +
+

Google Play

+

App Store

+
+
+ +
+ +
+ + Markup + + 
<p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+
+ +
+ Source: modules/_badges.scss, line 1
- -
-
- Example -
- - -
-

Google Play

-

App Store

-
-
- -
- -
- - Markup - - 
<p class="badge-android">Google Play</p>
-<p class="badge-ios">App Store</p>
-
- -
- Source: modules/_badges.scss, line 1 -
- -
- +
+ diff --git a/doc/styleguide/section-base.html b/doc/styleguide/section-base.html index 3ff6b87..c9b582d 100644 --- a/doc/styleguide/section-base.html +++ b/doc/styleguide/section-base.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,190 +13,189 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Base + +

+ + +
+
+
+ +
+

+ + Backgrounds + +

+ +
+

Colors we use for backgrounds.

+ +
+ +
+ +
+
+ Example +
- -
-
- -
-

- - - 3.1 - - #Base.backgrounds - - - Backgrounds - -

- -
-

Colors we use for backgrounds.

- -
- -
- -
-
- Example -
- - -
- Primary #44d +
+ Primary #44d Secondary #67d Light #f7f9fb Black #000 @@ -209,16 +208,16 @@ Red #c23 White #fff Facebook #3b5998 -
+
+
+
-
- -
- - Markup - - 
<span class="bg-primary size-20">Primary #44d</span>
+            

+              
+                  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>
@@ -231,120 +230,109 @@
 <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>

-          

+
+ +
+ Source: _color.scss, line 107 +
+ +
+
+ +
+

+ + Gradient Backgrounds + +

+ +
+

Colors we use for backgrounds.

+ +
-
- Source: _color.scss, line 107
-
-
- -
-

- - - 3.1.1 - - #Base.backgrounds.gradient - - - Gradient Backgrounds - -

- -
-

Colors we use for backgrounds.

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
Horizontal
+
+
Horizontal
Vertical
Radial
-
+
+
+
-
- -
- - Markup - - 
  <div class="bg-gradient-h">Horizontal</div>
+            

+              
+                  Markup
+              
+              
  <div class="bg-gradient-h">Horizontal</div>
   <div class="bg-gradient-v">Vertical</div>
   <div class="bg-gradient-r">Radial</div>

-          

+
+ +
+ Source: _color.scss, line 194 +
+ +
+
+ +
+

+ + Transparent Backgrounds + +

+ +
+

Colors we use for backgrounds.

+ +
-
- Source: _color.scss, line 194
-
-
- -
-

- - - 3.1.2 - - #Base.backgrounds.transparent - - - Transparent Backgrounds - -

- -
-

Colors we use for backgrounds.

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
+
+
Dark
Light
Gradient
-
+
+
+
-
- -
- - Markup - - 
<div class="bg-red">
+            

+              
+                  Markup
+              
+              
<div class="bg-red">
   <div class="bg-trans-dark">Dark</div>
   <div class="bg-trans-light">Light</div>
   <div class="bg-trans-gradient">Gradient</div>
 </div>

-          

+
-
- Source: _color.scss, line 168 -
+
+ Source: _color.scss, line 168 +
-
- +
+
+ diff --git a/doc/styleguide/section-blocks.html b/doc/styleguide/section-blocks.html index c1f6487..49e36a3 100644 --- a/doc/styleguide/section-blocks.html +++ b/doc/styleguide/section-blocks.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,247 +13,237 @@ - -
-
-

WebSlides

-
- +
+
+
-
+
+

+ + Blocks + +

-
-
- Example -
- - -
- Avatar @jlantunez -
-
-
- - Markup - - 
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
-
- -
- Source: modules/_quotes.scss, line 28 -
- - -
- -
-

- - - 4.2 - - #Blocks.CTA - - - Call to action - -

+
+ +
+

+ + Cites + +

+ + +
+ +
+
+ Example +
+ + +
+ Avatar @jlantunez +
+
-
-
- Example
+
+ + Markup + + 
<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
+
-
-
+
+ Source: modules/_quotes.scss, line 28 +
+ +
+
+ +
+

+ + Call to action + +

+ + +
+ +
+
+ Example +
+ + +
+

$40

@@ -262,16 +252,16 @@

Lorem ipsum

-
+
+
+
-
- -
- - Markup - - 
<div class="cta">
+            

+              
+                  Markup
+              
+              
<div class="cta">
   <div class="number">
     <p><span><sup>$</sup>40</span></p>
   </div>
@@ -280,39 +270,33 @@
     <p>Lorem ipsum</p>
   </div>
 </div>

-          

+
-
- Source: modules/_promos.scss, line 1 -
- - -
- -
-

- - - 4.3 - - #Blocks.cta-cover - - - Headings - -

- - -
- -
-
- Example +
+ Source: modules/_promos.scss, line 1
+
+
-
-
+
+

+ + Headings + +

+ + +
+ +
+
+ Example +
+ + +
+

HTML Presentations Made Easy

@@ -321,16 +305,16 @@ Demos Β· Github

-
+
+
+
-
- -
- - Markup - - 
<div class="cta-cover">
+            

+              
+                  Markup
+              
+              
<div class="cta-cover">
   <h1><strong>HTML Presentations</strong> Made Easy</h1>
   <p class="alignright">
     <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
@@ -339,137 +323,119 @@
     <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> Β· <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
   </p>
 </div>

-          

+
-
- Source: modules/_promos.scss, line 75 -
- -
-
- -
-

- - - 4.4 - - #Blocks.Navigation - - - Slides navigation - -

- - -
- -
-
- Example +
+ Source: modules/_promos.scss, line 75
+
+
-
- - -
- - Markup - - 
<div id="navigation">
+            

+              
+                  Markup
+              
+              
<div id="navigation">
   <a id="next" href="#" title="Arrow Keys">β†’</a>
   <a id="previous" href="#" title="Arrow Keys">←</a>
   <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
 </div>

-          

+
-
- Source: modules/_slides-navigation.scss, line 1 -
- -
-
- -
-

- - - 4.5 - - #Blocks.Quotes - - - Quotes - -

- - -
- -
-
- Example +
+ Source: modules/_slides-navigation.scss, line 1
+
+
-
-
+
+

+ + Quotes + +

+ + +
+ +
+
+ Example +
+ + +
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

-
+
+
+
-
- -
- - Markup - - 
<blockquote>
+            

+              
+                  Markup
+              
+              
<blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 </blockquote>

-          

+
-
- Source: modules/_quotes.scss, line 1 -
- -
-
- -
-

- - - 4.6 - - #Blocks.TOC - - - Table of contents - -

- - -
- -
-
- Example +
+ Source: modules/_quotes.scss, line 1
+
+
-
-
+
+

+ + Table of contents + +

+ + +
+ +
+
+ Example +
+ + +
+
  1. @@ -494,16 +460,16 @@
-
+
+
+
-
- -
- - Markup - - 
<div class="toc">
+            

+              
+                  Markup
+              
+              
<div class="toc">
   <ol>
     <li>
       <a href="#" title="Go to Learning to see">
@@ -528,14 +494,15 @@
     </li>
   </ol>
 </div>

-          

+
-
- Source: modules/_toc.scss, line 1 -
+
+ Source: modules/_toc.scss, line 1 +
-
- + + + diff --git a/doc/styleguide/section-buttons.html b/doc/styleguide/section-buttons.html index 80e5ccc..92aefdf 100644 --- a/doc/styleguide/section-buttons.html +++ b/doc/styleguide/section-buttons.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,176 +13,185 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Buttons + +

-
+
-
-
- Examples -
- -
- Default styling +
+
+ Examples
-
- Download -
-
+
+ Default styling +
-
- .radius -
-
- Rounded corners -
- Download + Download
-
-
- - Markup - - 
<a href="#" class="button [modifier class]">Download</a>
-
+
+ .radius +
+
+ Rounded corners +
+
+ Download +
+
+
-
- Source: modules/_button.scss, line 1 -
+
+ + Markup + + 
<a href="#" class="button [modifier class]">Download</a>
+
-
- +
+ Source: modules/_button.scss, line 1 +
+ +
+ + diff --git a/doc/styleguide/section-cards.html b/doc/styleguide/section-cards.html index 40456f5..8f995a1 100644 --- a/doc/styleguide/section-cards.html +++ b/doc/styleguide/section-cards.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,149 +13,157 @@ - -
-
-

WebSlides

-
- +
+
-
-

Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

+
-
+
+

+ + Cards + +

-
+
+

Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
iPhone

iPhone 7

@@ -163,16 +171,16 @@

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

-
+
+
+
-
- -
- - Markup - - 
  <div class="card-50">
+            

+              
+                  Markup
+              
+              
  <div class="card-50">
     <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
     <div class="flex-content">
       <h2>iPhone 7</h2>
@@ -180,14 +188,15 @@
       <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
     </div>
   </div>

-          

+
-
- Source: modules/_cards.scss, line 1 -
+
+ Source: modules/_cards.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/section-content.html b/doc/styleguide/section-content.html new file mode 100644 index 0000000..f9f067f --- /dev/null +++ b/doc/styleguide/section-content.html @@ -0,0 +1,282 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
+

WebSlides - Documentation 1.5.0

+ +
+
+

WebSlides - Documentation 1.5.0

+
+
+
+ +
+
+ +
+ +
+

+ + Content + +

+ + +
+ + + +
+
+ +
+

+ + Work / ResumΓ© / CV + +

+ + +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="work">
+  <li class="work-label">
+    <p class="work-title">Work</p>
+    <p class="work-client">Client</p>
+    <p class="work-services">Services</p>
+    <p class="work-date">Year</p>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Redesign of Netflix</span></p>
+      <p class="work-client"><span>Netflix</span></p>
+      <p class="work-services"><span>Frontend</span></p>
+      <p class="work-date"><span>2015-2016</span></p>
+    </a>
+  </li>
+  <li>
+    <a href="#" rel="external">
+      <p class="work-title"><span>Airbnb TV Commercials</span></p>
+      <p class="work-client"><span>Airbnb</span></p>
+      <p class="work-services"><span>Video, Storytelling</span></p>
+      <p class="work-date"><span>2015</span></p>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_work.scss, line 1 +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-elements.html b/doc/styleguide/section-elements.html index e3e56be..46b16df 100644 --- a/doc/styleguide/section-elements.html +++ b/doc/styleguide/section-elements.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,180 +13,180 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Elements + +

+ + +
+
+
+ +
+

+ + Tables + +

+
-
-
- -
-

- - - 7.1 - - #Elements.Tables - - - Tables - -

+
+
+ Example +
-
- -
-
- Example -
- - -
- +
+
@@ -216,16 +216,16 @@
Plans
-
+
+
+
-
- -
- - Markup - - 
<table>
+            

+              
+                  Markup
+              
+              
<table>
   <thead>
    <tr>
      <th>Plans</th>
@@ -255,57 +255,52 @@
     </tr>
   </tbody>
 </table>

-          

+
-
- Source: modules/_tables.scss, line 1 -
- -
-
- -
-

- - - 7.2 - - #Elements.Try - - - Try - -

- - -
- -
-
- Example +
+ Source: modules/_tables.scss, line 1
+
+
+ +
+

+ + Try + +

+ + +
+ +
+
+ Example +
+ + +
+ Try element +
+
-
- Try element -
-
+
+ + Markup + + 
<a href="#" class="try">Try element</a>
+
-
- - Markup - - 
<a href="#" class="try">Try element</a>
-
+
+ Source: modules/_form.scss, line 96 +
-
- Source: modules/_form.scss, line 96 -
- -
- + + + diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html index 9c20571..245d245 100644 --- a/doc/styleguide/section-flexblock.html +++ b/doc/styleguide/section-flexblock.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,238 +13,229 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Flexblock + +

+ + +
+
+
+ +
+

+ + Activity + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
- -
-
- -
-

- - - 8.1 - - #Flexblock.Activity - - - Activity - -

- -
-

Bla bla bla

- -
- -
- -
-
- Example -
- - -
-
-
- -
- - Markup - - 
<ul class="flexblock activity">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock activity">
   <li>
     <a href="#" title="UX Designer at ACME">
       <div>
@@ -339,78 +330,40 @@
     </a>
   </li>
 </ul>

-          

+
+ +
+ Source: modules/_flexblock-activity.scss, line 5 +
+ +
+
+ +
+

+ + Flexblocks + +

+ +
+

Auto-fill & Equal height columns

+ +
-
- Source: modules/_flexblock-activity.scss, line 5
-
-
- -
-

- - - 8.2 - - #Flexblock.Blink - - - Flexblocks - -

- -
-

Auto-fill & Equal height columns

- -
- -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
- -
-
+
+ Default styling +
-
- .blink -
-
- Linkable block -
-
-
- .border -
-
- With border -
-
-
+
+
+
+ .border +
+
+ With border +
+
+ +
+
+
-
- - Markup - - 
<ul class="flexblock [modifier class]">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock [modifier class]">
   <li>
     <a href="#">
       Item 1
@@ -493,80 +478,40 @@
      </a>
   </li>
 </ul>

-          

+
+ +
+ Source: modules/_flexblock.scss, line 6 +
+ +
+
+ +
+

+ + Clients + +

+ +
+

Highlight clients information

+ +
-
- Source: modules/_flexblock.scss, line 6
-
-
- -
-

- - - 8.3 - - #Flexblock.Clients - - - Clients - -

- -
-

Highlight clients information

- -
- -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
- -
-
+
+ Default styling +
-
- .border -
-
- with border -
-
-
-
- - Markup - - 
<ul class="flexblock clients [modifier class]">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock clients [modifier class]">
   <li>
     <a href="#" title="Client">
       <figure>
@@ -622,77 +601,38 @@
     </a>
   </li>
 </ul>
-
+ + +
+ Source: modules/_flexblock-clients.scss, line 5 +
+ +
+
+ +
+

+ + Features + +

+ +
+

Special features

+ +
-
- Source: modules/_flexblock-clients.scss, line 5
-
-
- -
-

- - - 8.4 - - #Flexblock.Features - - - Features - -

- -
-

Special features

- -
- -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
    -
  • -
    -

    100% customizable

    - Well documented. -
    -
    • -
  • -
    - $48 -

    Extra virgin olive oil

    - The Spanish caviar. -
    -
    • -
  • -
    -

    - Ultra-fast Wifi -

    - Simple file sharing. -
    -
    • -
-
-
+
+ Default styling +
-
- .border -
-
- with border -
  • @@ -719,13 +659,46 @@
-
-
- - Markup - - 
<ul class="flexblock features">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
    
+  
  • 
+    
    
+      
     100% customizable
    
+      Well documented.
+    
    
+  
    • 
+  
  • 
+    
    
+      $48
+      
    Extra virgin olive oil
    
+      The Spanish caviar.
+    
    
+  
    • 
+  
  • 
+    
    
+      
    
+        Ultra-fast Wifi
+      
    
+      Simple file sharing.
+    
    
+  
    • 
+

+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock features">
   <li>
     <div>
       <h2> <span>100<sup>%</sup></span> customizable</h2>
@@ -748,43 +721,37 @@
     </div>
   </li>
 </ul>
-
+ + +
+ Source: modules/_flexblock-features.scss, line 5 +
+ +
+
+ +
+

+ + Gallery + +

+ +
+

Beautiful gallery

+ +
-
- Source: modules/_flexblock-features.scss, line 5
-
-
- -
-

- - - 8.5 - - #Flexblock.Gallery - - - Gallery - -

- -
-

Beautiful gallery

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
-
- -
- - Markup - - 
<ul class="flexblock gallery">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock gallery">
   <li>
     <a href="#">
       <figure>
@@ -863,43 +830,37 @@
     </a>
   </li>
 </ul>

-          

+
+ +
+ Source: modules/_flexblock-gallery.scss, line 7 +
+ +
+
+ +
+

+ + Gallery + Overflow + +

+ +
+

Beautiful gallery with overlay content

+ +
-
- Source: modules/_flexblock-gallery.scss, line 7
-
-
- -
-

- - - 8.5.1 - - #Flexblock.Gallery.Overlay - - - Gallery + Overflow - -

- -
-

Beautiful gallery with overlay content

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
-
- -
- - Markup - - 
<ul class="flexblock gallery">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock gallery">
   <li>
     <a href="#">
       <div class="overlay">
@@ -966,73 +927,40 @@
     </a>
   </li>
 </ul>

-          

+
+ +
+ Source: modules/_flexblock-gallery.scss, line 50 +
+ +
+
+ +
+

+ + Metrics + +

+ +
+

Bla bla bla

+ +
-
- Source: modules/_flexblock-gallery.scss, line 50
-
-
- -
-

- - - 8.6 - - #Flexblock.Metrics - - - Metrics - -

- -
-

Bla bla bla

- -
- -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
    -
  • Founded - 2016 -
    • -
  • - 24M - Subscribers -
    • -
  • - Revenue: - $16M -
    • -
  • - Monthly Growth - 64% -
    • -
-
-
+
+ Default styling +
-
- .border -
-
- with border -
-
    +
    • Founded 2016
      • @@ -1051,13 +979,40 @@
-
-
- - Markup - - 
<ul class="flexblock metrics  [modifier class]">
+              

+                .border
+              

+              

+                with border
+              

+              

+                
    
+  
  •  Founded
+    2016
+  
    • 
+  
  • 
+    24M
+    Subscribers
+  
    • 
+  
  • 
+    Revenue:
+    $16M
+  
    • 
+  
  • 
+    Monthly Growth
+    64%
+  
    • 
+

+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock metrics  [modifier class]">
   <li> Founded
     <span>2016</span>
   </li>
@@ -1074,88 +1029,40 @@
     <span>64%</span>
   </li>
 </ul>
-
+ + +
+ Source: modules/_flexblock-metrics.scss, line 5 +
+ +
+
+ +
+

+ + Plans + +

+ +
+

Bla bla bla

+ +
-
- Source: modules/_flexblock-metrics.scss, line 5
-
-
- -
-

- - - 8.7 - - #Flexblock.Plans - - - Plans - -

- -
-

Bla bla bla

- -
- -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
- -
-
+
+ Default styling +
-
- .blink -
-
- block linkable -
-
-
-
- - Markup - - 
<ul class="flexblock plans [modifier class]">
+              

+                .blink
+              

+              

+                block linkable
+              

+              

+                
+                

+              

+
+ +
+ + Markup + + 
<ul class="flexblock plans [modifier class]">
   <li>
     <a href="#" title="Purchase">
       <h2>Basic</h2>
@@ -1227,43 +1176,37 @@
     </a>
   </li>
 </ul>
-
+ + +
+ Source: modules/_flexblock-plans.scss, line 5 +
+ +
+
+ +
+

+ + Reasons + +

+ +
+

Bla bla bla

+ +
-
- Source: modules/_flexblock-plans.scss, line 5
-
-
- -
-

- - - 8.8 - - #Flexblock.Reasons - - - Reasons - -

- -
-

Bla bla bla

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
    +
    +

    • Why WebSlides? Work better, faster.

      Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

      @@ -1273,16 +1216,16 @@

      WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    -
    +
    +
    +
-
- -
- - Markup - - 
<ul class="flexblock reasons">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock reasons">
   <li>
     <h2>Why WebSlides? Work better, faster.</h2>
     <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
@@ -1292,43 +1235,37 @@
     <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
   </li>
 </ul>

-          

+
+ +
+ Source: modules/_flexblock-reasons.scss, line 5 +
+ +
+
+ +
+

+ + Specs + +

+ +
+

Bla bla bla

+ +
-
- Source: modules/_flexblock-reasons.scss, line 5
-
-
- -
-

- - - 8.9 - - #Flexblock.Specs - - - Specs - -

- -
-

Bla bla bla

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
    +
    +

    • Ultra-Fast WiFi

      @@ -1348,16 +1285,16 @@
    -
    +
    +
    +
-
- -
- - Markup - - 
<ul class="flexblock specs">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock specs">
     <li>
       <div>
         <h2>Ultra-Fast WiFi</h2>
@@ -1377,43 +1314,37 @@
       </div>
     </li>
     </ul>

-          

+
+ +
+ Source: modules/_flexblock-specs.scss, line 5 +
+ +
+
+ +
+

+ + Steps + +

+ +
+

Bla bla bla

+ +
-
- Source: modules/_flexblock-specs.scss, line 5
-
-
- -
-

- - - 8.10 - - #Flexblock.Steps - - - Steps - -

- -
-

Bla bla bla

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
    +
    +

    • 01. Passion

      When you're really passionate about your job, you can change the world.

      @@ -1439,16 +1370,16 @@
-
+
+
+
-
- -
- - Markup - - 
<ul class="flexblock steps">
+            

+              
+                  Markup
+              
+              
<ul class="flexblock steps">
   <li>
     <h2>01. Passion</h2>
     <p>When you're really passionate about your job, you can change the world.</p>
@@ -1474,14 +1405,15 @@
     </ul>
   </li>
 </ul>

-          

+
-
- Source: modules/_flexblock-steps.scss, line 6 -
+
+ Source: modules/_flexblock-steps.scss, line 6 +
-
- +
+
+ diff --git a/doc/styleguide/section-forms.html b/doc/styleguide/section-forms.html index 1a1761e..0e872b8 100644 --- a/doc/styleguide/section-forms.html +++ b/doc/styleguide/section-forms.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,198 +13,200 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Forms + +

+ + +
+
+
+ +
+

+ + User + +

+
-
-
- -
-

- - - 9.1 - - #Forms.User - - - User - -

+
+
+ Example +
-
- -
-
- Example -
- - -
-
+
+
-
+
+
+
-
- -
- - Markup - - 
<div class="user">
+            

+              
+                  Markup
+              
+              
<div class="user">
   <input type="text" placeholder="Username" />
   <button>Log in</button>
 </div>

-          

+
-
- Source: modules/_form.scss, line 139 -
+
+ Source: modules/_form.scss, line 139 +
-
- + + + diff --git a/doc/styleguide/section-grid.html b/doc/styleguide/section-grid.html index bb72ad6..fb2c23b 100644 --- a/doc/styleguide/section-grid.html +++ b/doc/styleguide/section-grid.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,174 +13,161 @@ - -
-
-

WebSlides

-
- +
+
-
-

Basic Grid (Flexible blocks) +

+ +
+

+ + Grid + +

+ +
+

Basic Grid (Flexible blocks) Auto-fill & Equal height

-
- -
- -
-
- Examples -
- -
- Default styling
-
-
-
-

WebSlides is really easy

-

Each parent <section> in the #webslides element is an individual slide.

-

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

-
-
-

WebSlides is the clean

-

Each parent <section> in the #webslides element is an individual slide.

-
-
-
-
+
-
- .vertical-align -
-
- Vertical align +
+
+ Examples
+ +
+ Default styling +
+
-
+

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

@@ -193,13 +180,34 @@ Auto-fill & Equal height

-
-
- - Markup - - 
<div class="grid [modifier class]">
+              

+                .vertical-align
+              

+              

+                Vertical align
+              

+              

+                

+  

+    
WebSlides is really easy

+    
Each parent <section> in the #webslides element is an individual slide.

+    
Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+  

+  

+    
WebSlides is the clean

+    
Each parent <section> in the #webslides element is an individual slide.

+  

+

+                

+              

+
+ +
+ + Markup + + 
<div class="grid [modifier class]">
   <div class="column">
     <h3><strong>WebSlides is really easy</strong></h3>
     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
@@ -210,14 +218,15 @@ Auto-fill & Equal height

     <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
   </div>
 </div>
-
+ -
- Source: modules/_grid.scss, line 1 -
+
+ Source: modules/_grid.scss, line 1 +
-
- +
+
+
diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 6c8d06e..9e1b9d9 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,476 +13,457 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Layout + +

+ + +
+
+
+ +
+

+ + Align content + +

+
-
-
- -
-

- - - 11.1 - - #Layout.Alignment - - - Align content - -

- - -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
+
+ Default styling +
+ +
+

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.

-
-
+
+
-
- .alignright -
-
- Align right. -
-
-
+
+ .alignright +
+
+ Align right. +
+
+

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.

-
-
-
- .alignleft -
-
- Align left. -
-
-
+
+
+
+ .alignleft +
+
+ Align left. +
+
+

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.

-
-
-
- .aligncenter -
-
- Align center. -
-
-
+
+
+
+ .aligncenter +
+
+ Align center. +
+
+

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.

-
-
-
+
+
+
-
- - Markup - - 
<div>
+            

+              
+                  Markup
+              
+              
<div>
   <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
   <p>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.</p>
 </div>

-          

+
+ +
+ Source: _base.scss, line 143 +
+ +
+
+ +
+

+ + Radius + +

+ +
+

Adds a rounded radis

+ +
-
- Source: _base.scss, line 143
-
-
- -
-

- - - 11.2 - - #Layout.Radius - - - Radius - -

- -
-

Adds a rounded radis

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
+
+
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.
-
+
+
+
-
- -
- - Markup - - 
<div class="bg-black radius">
+            

+              
+                  Markup
+              
+              
<div class="bg-black radius">
   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>

-          

+
+ +
+ Source: _base.scss, line 129 +
+ +
+
+ +
+

+ + Shadows + +

+ +
+

Drops a shadow under the layer. The layer containing the shadow has to have a solid background

+ +
-
- Source: _base.scss, line 129
-
-
- -
-

- - - 11.3 - - #Layout.Shadow - - - Shadows - -

- -
-

Drops a shadow under the layer. The layer containing the shadow has to have a solid background

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
+
+
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.
-
+
+
+
-
- -
- - Markup - - 
<div class="bg-white shadow">
+            

+              
+                  Markup
+              
+              
<div class="bg-white shadow">
   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>

-          

+
-
- Source: _base.scss, line 73 -
- -
-
- -
-

- - - 11.4 - - #Layout.Sizes - - - Resizing - -

- - -
- -
-
- Examples +
+ Source: _base.scss, line 73
-
- Default styling +
+
+ +
+

+ + Resizing + +

+ + +
+ +
+
+ Examples
-
- -
+
+ Default styling +
+ +
+ +
+
+ +
+ .size-80 +
+
+ resize to 80%. +
+
+ +
+
+
+ .size-70 +
+
+ resize to 70%. +
+
+ +
+
+
+ .size-60 +
+
+ resize to 60%. +
+
+ +
+
+
+ .size-50 +
+
+ resize to 50%. +
+
+ +
+
+
+ .size-40 +
+
+ resize to 40%. +
+
+ +
+
+
+ .size-30 +
+
+ resize to 30%. +
+
+ +
+
+
+ .size-20 +
+
+ resize to 20%. +
+
+ +
+
-
- .size-80 -
-
- resize to 80%. -
-
- -
-
-
- .size-70 -
-
- resize to 70%. -
-
- -
-
-
- .size-60 -
-
- resize to 60%. -
-
- -
-
-
- .size-50 -
-
- resize to 50%. -
-
- -
-
-
- .size-40 -
-
- resize to 40%. -
-
- -
-
-
- .size-30 -
-
- resize to 30%. -
-
- -
-
-
- .size-20 -
-
- resize to 20%. -
-
- -
-
-
+
+ + Markup + + 
<img src="../../../static/images/iphone.png" class="[modifier class]" />
+
-
- - Markup - - 
<img src="../../../static/images/iphone.png" class="[modifier class]" />
-
+
+ Source: _base.scss, line 199 +
-
- Source: _base.scss, line 199 -
- -
- + +
+ diff --git a/doc/styleguide/section-longform.html b/doc/styleguide/section-longform.html index 0b1bd21..a263dbf 100644 --- a/doc/styleguide/section-longform.html +++ b/doc/styleguide/section-longform.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,167 +13,176 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Longform + +

-
+
-
-
- Example -
+
+
+ Example +
-
-
+
+

Lorem ipsum

-
+
+
+
-
- -
- - Markup - - 
<section class="wrap longform">
+            

+              
+                  Markup
+              
+              
<section class="wrap longform">
   <p>Lorem ipsum</p>
 </section>

-          

+
-
- Source: modules/_longform.scss, line 1 -
+
+ Source: modules/_longform.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html index a23e13c..5e3f923 100644 --- a/doc/styleguide/section-media.html +++ b/doc/styleguide/section-media.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,274 +13,261 @@ - -
-
-

WebSlides

-
-
- -
- +
+ +
+ +
+

+ + Media + +

+
-
- - Markup - - 
<div class="fullscreen">
-  <div class="embed">
-    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
-      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-    </video>
-  </div>
-</div>
-
-
- Source: modules/_media.scss, line 1 -
- -
+
+
-
-

- - - 13.1 - - #Media.Embed - - - Fullscreen - -

+
+

+ + Fullscreen + +

-
-

Responsive background video +

+

Responsive background video https://fvsch.com/code/video-background/

+
+ +
+ +
+
+ Example +
+ + +
+
+ +
+
+
+
-
+
+ + Markup + + 
<div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+
-
-
- Example +
+ Source: modules/_media.scss, line 35
+
+
-
-
-
- +
+

+ + Embed + +

+ +
+

Responsive Media (videos, iframe...)

+ +
+ +
+ +
+
+ Example +
+ + +
+
+ +
+
+
+ +
+ +
+ + Markup + + 
<div class="embed">
+  <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+    <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+  </video>
+</div>
+
+ +
+ Source: modules/_media.scss, line 1 +
+ +
-
- - - - -
- - Markup - - 
<div class="fullscreen">
-  <div class="embed">
-    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
-      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-    </video>
-  </div>
-</div>
-
- -
- Source: modules/_media.scss, line 35 -
- - - diff --git a/doc/styleguide/section-navigation.html b/doc/styleguide/section-navigation.html index f2fe872..58ad0a0 100644 --- a/doc/styleguide/section-navigation.html +++ b/doc/styleguide/section-navigation.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,252 +13,260 @@ - -
-
-

WebSlides

-
- +
+
-
-

Responsive Media (videos, iframe...)

+
-
+
+

+ + Navigation + +

-
+
+

Responsive Media (videos, iframe...)

-
-
- Examples -
- -
- Default styling
-
- -
-
- -
- .navbar -
-
- Navigation bar -
-
- -
-
-
- .aligncenter -
-
- Center alignment -
-
- -
-
-
- .alignright -
-
- Right alignment -
-
- -
-
-
- - Markup - - 
<nav role="navigation" class="[modifier class]">
+          

+            

+              Examples
+            

+
+              

+                Default styling
+              

+
+            

+              
+              

+            

+
+              

+                .navbar
+              

+              

+                Navigation bar
+              

+              

+                
+                

+              

+              

+                .aligncenter
+              

+              

+                Center alignment
+              

+              

+                
+                

+              

+              

+                .alignright
+              

+              

+                Right alignment
+              

+              

+                
+                

+              

+          

+
+            

+              
+                  Markup
+              
+              
<nav role="navigation" class="[modifier class]">
   <ul>
     <li><a href="">About</a></li>
     <li><a href="">Clients</a></li>
@@ -274,14 +282,15 @@
     </li>
   </ul>
 </nav>

-          

+
-
- Source: modules/_navigation.scss, line 1 -
+
+ Source: modules/_navigation.scss, line 1 +
-
- +
+
+ diff --git a/doc/styleguide/section-screenshots.html b/doc/styleguide/section-screenshots.html index 0e82e93..a091e0e 100644 --- a/doc/styleguide/section-screenshots.html +++ b/doc/styleguide/section-screenshots.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,173 +13,182 @@ - -
-
-

WebSlides

-
- +
+
-
-

HTML browser

+
-
+
+

+ + Screenshots + +

-
+
+

HTML browser

-
-
- Example -
+
+ +
+ +
+
+ Example +
-
-
+
+
Foddie
-
+
+
+
-
- -
- - Markup - - 
<figure class="browser">
+            

+              
+                  Markup
+              
+              
<figure class="browser">
   <img src="http://lorempixel.com/500/500/food/" />
   <figcaption>Foddie</figcaption>
 </figure>

-          

+
-
- Source: modules/_browser.scss, line 1 -
+
+ Source: modules/_browser.scss, line 1 +
-
- +
+ + diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html index bdfe500..a61d6f3 100644 --- a/doc/styleguide/section-slide.html +++ b/doc/styleguide/section-slide.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,427 +13,414 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Slide + +

+ + +
+
+
+ +
+

+ + Backgrounds + +

+
-
-
- -
-

- - - 16.1 - - #Slide.Background - - - Backgrounds - -

- - -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
+
+ Default styling +
+ +
+
-
-
+
+
-
- .background -
-
- Center. -
-
-
+
+ .background +
+
+ Center. +
+
+
-
-
-
- .background-top -
-
- Top. -
-
-
+
+
+
+ .background-top +
+
+ Top. +
+
+
-
-
-
- .background-bottom -
-
- Bottom. -
-
-
+
+
+
+ .background-bottom +
+
+ Bottom. +
+
+
-
-
-
- .background-center -
-
- Center. -
-
-
+
+
+
+ .background-center +
+
+ Center. +
+
+
-
-
-
- .background-center-top -
-
- Center top. -
-
-
+
+
+
+ .background-center-top +
+
+ Center top. +
+
+
-
-
-
- .background-left-top -
-
- Left top. -
-
-
+
+
+
+ .background-left-top +
+
+ Left top. +
+
+
-
-
-
- .background-right-top -
-
- Right top. -
-
-
+
+
+
+ .background-right-top +
+
+ Right top. +
+
+
-
-
-
- .background-center-bottom -
-
- Center bottom. -
-
-
+
+
+
+ .background-center-bottom +
+
+ Center bottom. +
+
+
-
-
-
- .background-left-bottom -
-
- Left bottom. -
-
-
+
+
+
+ .background-left-bottom +
+
+ Left bottom. +
+
+
-
-
-
- .background-right-bottom -
-
- Right bottom. -
-
-
+
+
+
+ .background-right-bottom +
+
+ Right bottom. +
+
+
-
-
-
- .background-left -
-
- Left. -
-
-
+
+
+
+ .background-left +
+
+ Left. +
+
+
-
-
-
- .background-right -
-
- Right. -
-
-
+
+
+
+ .background-right +
+
+ Right. +
+
+
-
-
-
+
+
+
-
- - Markup - - 
<section>
+            

+              
+                  Markup
+              
+              
<section>
   <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 15 -
- -
-
- -
-

- - - 16.1.1 - - #Slide.Background.Anim - - - Animated - -

- - -
- -
-
- Example +
+ Source: modules/_slides-bg.scss, line 15
+
+
-
-
+
+

+ + Animated + +

+ + +
+ +
+
+ Example +
+ + +
+
-
+
+
+
-
- -
- - Markup - - 
<section class="aligncenter bg-black">
+            

+              
+                  Markup
+              
+              
<section class="aligncenter bg-black">
   <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 140 -
- -
-
- -
-

- - - 16.1.2 - - #Slide.Background.Video - - - Video - -

- - -
- -
-
- Example +
+ Source: modules/_slides-bg.scss, line 140
+
+
-
-
+
+

+ + Video + +

+ + +
+ +
+
+ Example +
+ + +
+
@@ -442,16 +429,16 @@

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

-
+
+
+ - - -
- - Markup - - 
<section>
+            

+              
+                  Markup
+              
+              
<section>
   <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
     <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
   </video>
@@ -460,14 +447,15 @@
     <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
   </div>
 </section>

-          

+
-
- Source: modules/_slides-bg.scss, line 92 -
+
+ Source: modules/_slides-bg.scss, line 92 +
-
- + + + diff --git a/doc/styleguide/section-slides.html b/doc/styleguide/section-slides.html index 2addc19..dadad80 100644 --- a/doc/styleguide/section-slides.html +++ b/doc/styleguide/section-slides.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,388 +13,373 @@ - -
-
-

WebSlides

-
- +
+
-
-

Slide with no padding (full card, .embed youtube video...)

+
+
+

+ + fullscreen + +

+ +
+

Slide with no padding (full card, .embed youtube video...)

+ +
+ +
+ +
+
+ Example +
+ + +
+
+

Content

+
+
+
+ +
+ +
+ + Markup + + 
<section>
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 43
+
-
-
- Example -
+
+

+ + Slides + +

- -
-
-

Content

-
-
-
- -
- -
- - Markup - - 
<section>
-  <p>Content</p>
-</section>
-
- -
- Source: modules/_slides.scss, line 43 -
- -
-
- -
-

- - - 17 - - #Slides - - - Slides - -

- -
-

Fullscreen. Vertically and horizontally centered. +

+

Fullscreen. Vertically and horizontally centered. Fade transition to all slides. All HTML elements will have those styles

-
- -
- -
-
- Example -
- - -
-
-

Content

-
-
-
+
-
- - Markup - - 
<section>
+          

+            

+              Example
+            

+
+
+            

+              

+  
Content

+

+              

+            

+
+          

+
+            

+              
+                  Markup
+              
+              
<section>
   <p>Content</p>
 </section>

-          

+
+ +
+ Source: modules/_slides.scss, line 1 +
+ +
+
+ +
+

+ + Align bottom + +

+ -
- Source: modules/_slides.scss, line 1
-
-
- -
-

- - - 17.1 - - #Slides.Bottom - - - Align bottom - -

- - -
- -
-
- Examples -
- -
- Default styling +
+
+ Examples
-
-
-

Content

-
-
-
+
+ Default styling +
-
- Slide alignment -
-
- bottom -

Content

-
-
- - Markup - - 
<section class="slide-bottom">
-  <p>Content</p>
-</section>
-
- -
- Source: modules/_slides.scss, line 74 -
- -
-
- -
-

- - - 17.2 - - #Slides.Top - - - Align top - -

- - -
- -
-
- Examples -
- -
- Default styling -
- -
-
+
+ Slide alignment +
+
+ bottom +
+
+

Content

-
+
+
-
- Slide alignment -
-
- top +
+ + Markup + + 
<section class="slide-bottom">
+  <p>Content</p>
+</section>
+
+ +
+ Source: modules/_slides.scss, line 74 +
+ +
+
+ +
+

+ + Align top + +

+ + +
+ +
+
+ Examples
+ +
+ Default styling +
+

Content

-
-
- - Markup - - 
<section class="slide-top">
+              

+                Slide alignment
+              

+              

+                top
+              

+              

+                

+  
Content

+

+                

+              

+
+ +
+ + Markup + + 
<section class="slide-top">
   <p>Content</p>
 </section>
-
+ -
- Source: modules/_slides.scss, line 60 -
+
+ Source: modules/_slides.scss, line 60 +
- - + +
+ diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html index 77e8e00..9e60b7c 100644 --- a/doc/styleguide/section-typography.html +++ b/doc/styleguide/section-typography.html @@ -2,7 +2,7 @@ - WebSlides + WebSlides - Documentation 1.5.0 @@ -13,503 +13,459 @@ - -
-
-

WebSlides

-
- +
+
+ +
+ +
+

+ + Typography + +

+ + +
+
+
+
+

+ + Columns + +

+
+

Magazine Two Columns

-
-
- -
-

- - - 18.1 - - #Typography.Columns - - - Columns - -

- -
-

Magazine Two Columns

- -
- -
- -
-
- Example -
- - -
-

Column 1 text

Column 2 text

-
-
+
-
- - Markup - - 
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
-
+
+
+ Example +
-
- Source: _typography.scss, line 346 -
-
-
- -
-

- - - 18.2 - - #Typography.Context - - - Context - -

- -
-

Heading with border

+
+

Column 1 text

Column 2 text

+
+
-
+
+ + Markup + + 
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+
-
-
- Example +
+ Source: _typography.scss, line 346
+
+
-
-

Why WebSlides?

-
-
+
+

+ + Context + +

+ +
+

Heading with border

+ +
-
- - Markup - - 
<p class="text-context">Why WebSlides?</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 376 -
-
-
- -
-

- - - 18.3 - - #Typography.Data - - - Data - -

- -
-

Numbers (results, sales... )-

+
+

Why WebSlides?

+
+
-
+
+ + Markup + + 
<p class="text-context">Why WebSlides?</p>
+
-
-
- Example +
+ Source: _typography.scss, line 376
+
+
-
-

23,478,289

-
-
+
+

+ + Data + +

+ +
+

Numbers (results, sales... )-

+ +
-
- - Markup - - 
<p class="text-data">23,478,289</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 314 -
-
-
- -
-

- - - 18.4 - - #Typography.Emoji - - - Emoji - -

- -
-

You'll love this

+
+

23,478,289

+
+
-
+
+ + Markup + + 
<p class="text-data">23,478,289</p>
+
-
-
- Example +
+ Source: _typography.scss, line 314
+
+
-
-

πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

-
-
+
+

+ + Emoji + +

+ +
+

You'll love this

+ +
-
- - Markup - - 
<p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 296 -
-
-
- -
-

- - - 18.5 - - #Typography.Info - - - Info Messages - -

- -
-

Error, warning, success...

+
+

πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

+
+
-
+
+ + Markup + + 
<p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
+
-
-
- Example +
+ Source: _typography.scss, line 296
+
+
-
-

Psychiatrists have long debated whether it really exists.

-
-
+
+

+ + Info Messages + +

+ +
+

Error, warning, success...

+ +
-
- - Markup - - 
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
-
+
+
+ Example +
+ + +
+

Psychiatrists have long debated whether it really exists.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+
+ +
+ Source: _typography.scss, line 546 +
+ +
+
+ +
+

+ + Interviews + +

+ +
+

Questions & Answers

+ +
-
- Source: _typography.scss, line 546
-
-
- -
-

- - - 18.6 - - #Typography.Interviews - - - Interviews - -

- -
-

Questions & Answers

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-
+
+
Driftwood

It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?

@@ -527,16 +483,16 @@

I don't know, let's hear it again.

-
+
+
+
-
- -
- - Markup - - 
<dl class="text-interview">
+            

+              
+                  Markup
+              
+              
<dl class="text-interview">
   <dt>Driftwood</dt>
   <dd>
     <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
@@ -554,478 +510,419 @@
     <p>I don't know, let's hear it again.</p>
   </dd>
 </dl>

-          

-
-        

-          Source: _typography.scss, line 504
-        

-
-
-
- -
-

- - - 18.7 - - #Typography.Intro - - - Intro - -

- -
-

Typography Classes = .text-

+ +
+ Source: _typography.scss, line 504
-
+
+
-
-
- Example -
+
+

+ + Intro + +

+
+

Typography Classes = .text-

-
-

Create a simple web presence.

-
-
+
-
- - Markup - - 
<p class="text-intro">Create a simple web presence.</p>
-
- -
- Source: _typography.scss, line 206 -
- -
-
- -
-

- - - 18.8 - - #Typography.Label - - - Label - -

+
+
+ Example +
-
+
+

Create a simple web presence.

+
+
-
-
- Example
+
+ + Markup + + 
<p class="text-intro">Create a simple web presence.</p>
+
-
-

Website: http://webslides.tv

-
+
+ Source: _typography.scss, line 206
+
+
+ +
+

+ + Label + +

+ +
-
- - Markup - - 
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 333 -
-
-
- -
-

- - - 18.9 - - #Typography.Landings - - - Landings - -

- -
-

h1,h2... Promo/Landings

+
+

Website: http://webslides.tv

+
+
-
+
+ + Markup + + 
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+
-
-
- Example +
+ Source: _typography.scss, line 333
+
+
-
-

Landings

-
-
+
+

+ + Landings + +

+ +
+

h1,h2... Promo/Landings

+ +
-
- - Markup - - 
<h1 class="text-landing">Landings</h1>
-
- -
- Source: _typography.scss, line 233 -
- -
-
- -
-

- - - 18.10 - - #Typography.Lowercase - - - Lowercase - -

+
+
+ Example +
-
+
+

Landings

+
+
-
-
- Example
+
+ + Markup + + 
<h1 class="text-landing">Landings</h1>
+
-
-

Create a simple web presence.

-
+
+ Source: _typography.scss, line 233
+
+
+ +
+

+ + Lowercase + +

+ +
-
- - Markup - - 
<p class="text-lowercase">Create a simple web presence.</p>
-
+
+
+ Example +
+ + +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-lowercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 286 +
+ +
+
+ +
+

+ + Pull Quote + +

+ +
+

Pull Quote Right/Left

+ +
-
- Source: _typography.scss, line 286
-
-
- -
-

- - - 18.11 - - #Typography.Pull_Quote - - - Pull Quote - -

- -
-

Pull Quote Right/Left

- -
- -
- -
-
- Example -
+
+
+ Example +
-
-

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+
+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

-
+
+
+
-
- -
- - Markup - - 
<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>
+            

+              
+                  Markup
+              
+              
<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-right">Psychiatrists have long debated whether it really exists.</p>
 <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>

-          

-
-        

-          Source: _typography.scss, line 449
-        

-
-
-
- -
-

- - - 18.12 - - #Typography.Separator - - - Separator - -

- -
-

Stars *

+ +
+ Source: _typography.scss, line 449
-
+
+
-
-
- Example -
+
+

+ + Separator + +

+
+

Stars *

-
-

Separator

-
-
+
-
- - Markup - - 
<p class="text-separator">Separator</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 418 -
-
-
- -
-

- - - 18.13 - - #Typography.Serif - - - Serif - -

- -
-

Maitree font

+
+

Separator

+
+
-
+
+ + Markup + + 
<p class="text-separator">Separator</p>
+
-
-
- Example +
+ Source: _typography.scss, line 418
+
+
-
-

Create a simple web presence.

-
-
+
+

+ + Serif + +

+ +
+

Maitree font

+ +
-
- - Markup - - 
<p class="text-serif">Create a simple web presence.</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 220 -
-
-
- -
-

- - - 18.14 - - #Typography.Subtitle - - - Subtitule - -

- -
-

Subtitle (Before h1, h2)

+
+

Create a simple web presence.

+
+
-
+
+ + Markup + + 
<p class="text-serif">Create a simple web presence.</p>
+
-
-
- Example +
+ Source: _typography.scss, line 220
+
+
-
-

Powered by #WebSlides .text-subtitle

-
-
+
+

+ + Subtitule + +

+ +
+

Subtitle (Before h1, h2)

+ +
-
- - Markup - - 
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 250 -
-
-
- -
-

- - - 18.15 - - #Typography.Symbols - - - Symbols - -

- -
-

Stars *

+
+

Powered by #WebSlides .text-subtitle

+
+
-
+
+ + Markup + + 
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+
-
-
- Example +
+ Source: _typography.scss, line 250
+
+
-
-

* * *

-
-
+
+

+ + Symbols + +

+ +
+

Stars *

+ +
-
- - Markup - - 
<p class="text-symbols">* * *</p>
-
- -
- Source: _typography.scss, line 404 -
- -
-
- -
-

- - - 18.16 - - #Typography.Uppercase - - - Uppercase - -

+
+
+ Example +
-
+
+

* * *

+
+
-
-
- Example
+
+ + Markup + + 
<p class="text-symbols">* * *</p>
+
-
-

Create a simple web presence.

-
+
+ Source: _typography.scss, line 404
+
+
+ +
+

+ + Uppercase + +

+ +
-
- - Markup - - 
<p class="text-uppercase">Create a simple web presence.</p>
-
+
+
+ Example +
-
- Source: _typography.scss, line 276 -
-
- +
+

Create a simple web presence.

+
+
+ +
+ +
+ + Markup + + 
<p class="text-uppercase">Create a simple web presence.</p>
+
+ +
+ Source: _typography.scss, line 276 +
+ + + + diff --git a/kss-config.json b/kss-config.json index 16dbe9e..0de2f42 100644 --- a/kss-config.json +++ b/kss-config.json @@ -1,6 +1,6 @@ { - "title": "WebSlides", - + "title": "WebSlides - Documentation 1.5.0", + "logo": "../../static/images/favicons/favicon.svg", "source": "src/scss/", "destination": "doc/styleguide/", @@ -9,6 +9,12 @@ "css": [ "../../static/css/webslides.css" + ], + + "mainmenu": [ + {"title" : "WebSlides", "url" : "../../index.html"}, + {"title" : "Documentation", "url" : "./"}, + {"title" : "Demos", "url" : ".../demos/index.html"} ] } diff --git a/package.json b/package.json index efd75b0..c95e831 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "presentation", "css" ], - "author": "Jose LuΓ­s AntΓΊnez ", + "author": "Jose Luis AntΓΊnez ", "contributors": [ { - "name": "LuΓ­s SacristΓ‘n" + "name": "Luis SacristΓ‘n" }, { "name": "Antonio Laguna", @@ -42,7 +42,7 @@ "eslint-plugin-jest": "^20.0.3", "extract-text-webpack-plugin": "^3.0.0", "jest": "^20.0.4", - "kss": "^3.0.0-beta.18", + "kss": "git+https://github.com/webslides/kss-node", "michelangelo": "^0.6.1", "node-sass": "^4.5.3", "npm-run-all": "^4.0.2", @@ -68,7 +68,9 @@ "lint:css": "sass-lint -v -f stylish", "dev": "webpack-dev-server", "test": "jest && codecov", - "kss": "kss --config kss-config.json" + "kss": "npm-run-all -p kss:*", + "kss:css": "node-sass doc/kss/templates/default/kss-assets/kss.scss doc/kss/templates/default/kss-assets/kss.css", + "kss:doc": "kss --config kss-config.json" }, "jest": { "collectCoverage": true diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss index b1bafd1..827a291 100644 --- a/src/scss/modules/_work.scss +++ b/src/scss/modules/_work.scss @@ -1,6 +1,32 @@ -/*========================================= -8. Work/ResumΓ©/CV
    -=========================================== */ +// Work / ResumΓ© / CV +// +// Markup: +// +// +// Styleguide Content.Resume .work { clear: both; display: flex; diff --git a/static/css/webslides.css b/static/css/webslides.css index 3d681c4..5c8123d 100644 --- a/static/css/webslides.css +++ b/static/css/webslides.css @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-08-13 + * Date: 2017-09-17 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -644,7 +644,6 @@ https://github.com/daneden/animate.css */ -webkit-animation-duration: 5s; animation-duration: 5s; } -/*=== 1.3 Responsive Media (videos, iframe...) === */ .embed { height: 0; overflow: hidden; @@ -652,9 +651,7 @@ https://github.com/daneden/animate.css */ padding-bottom: 56.6%; /*aspect ratio: 4:3*/ /*padding-bottom: 75%;*/ - position: relative; - /* -- Responsive background video - https://fvsch.com/code/video-background/ -- */ } + position: relative; } .embed iframe, .embed object, .embed embed, @@ -705,8 +702,6 @@ https://github.com/daneden/animate.css */ top: 0; width: 100%; } } -/*=== HTML Browser (Screenshots) ================ */ -/*
    img
    */ .browser { border-radius: .3rem; margin: 0 auto 3.2rem; @@ -734,8 +729,6 @@ https://github.com/daneden/animate.css */ .browser:before { font-size: 1.6rem; } } -/*=== 1.4. Basic Grid (Flexible blocks) -Auto-fill & Equal height === */ .grid { clear: both; display: -webkit-box; @@ -1065,18 +1058,15 @@ h2 [class*='bg-'], 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; } @@ -1084,7 +1074,6 @@ h1 span { .text-landing { letter-spacing: 1.6rem; } } -/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */ .text-subtitle { letter-spacing: .2rem; margin-bottom: 0; @@ -1102,7 +1091,6 @@ h1 span { .text-lowercase { text-transform: lowercase; } -/* -- Emoji (you'll love this) -- */ .text-emoji { font-size: 6.8rem; line-height: 8.8rem; } @@ -1111,7 +1099,6 @@ h1 span { font-size: 12.8rem; line-height: 16rem; } } -/* -- Numbers (results, sales... 23,478,289 iphones) -- */ .text-data { font-size: 6.4rem; line-height: 8rem; @@ -1127,7 +1114,6 @@ h1 span { text-transform: uppercase; width: 12.8rem; } -/* -- Magazine Two Columns -- */ @media (min-width: 768px) { .text-cols { -webkit-column-count: 2; @@ -1147,7 +1133,6 @@ h1 span { padding: 0; text-transform: uppercase; } -/* -- Heading with border -- */ .text-context { position: relative; } .text-context:before { @@ -1161,7 +1146,6 @@ h1 span { .text-context.text-uppercase { letter-spacing: .1rem; } -/* -- Separator/Symbols (stars ***...) -- */ .text-symbols { font-weight: 600; letter-spacing: .8rem; @@ -1184,7 +1168,6 @@ h1 span { .text-separator:before { margin-top: 1.2rem; } } -/* -- Pull Quote (Right/Left) -- */ [class*='text-pull'] { font-size: 2.4rem; font-weight: 400; @@ -1219,12 +1202,6 @@ figure[class*='text-pull-'] { margin-top: .8rem; padding-top: 0; } -/* -- Interviews (Questions & Answers) --- */ -/* --
    -
    name
    -

    question or answer

    -
    ---- */ .text-interview dt { font-weight: 600; margin-bottom: 0; @@ -1238,7 +1215,6 @@ figure[class*='text-pull-'] { white-space: nowrap; width: 30%; } } -/* -- Info Messages (error, warning, success... -- */ .text-info { font-size: 1.6rem; line-height: 2.4rem; } @@ -1339,10 +1315,6 @@ header[role='banner'] { vertical-align: middle; width: 4.8rem; } -/*========================================= -4. Navigation -=========================================== */ -/*=== 4.1. Navbars === */ nav ul { display: -webkit-box; display: -ms-flexbox; @@ -1416,12 +1388,6 @@ nav.navbar ul li { -ms-flex-pack: start; justify-content: flex-start; } } -/*============================================ -5. SLIDES (Full Screen) -Vertically and horizontally centered -============================================== */ -/* Fade transition to all slides. -* = All HTML elements will have those styles.*/ section * { -webkit-animation: fadeIn .6s ease-in-out; animation: fadeIn .6s ease-in-out; } @@ -1459,20 +1425,17 @@ section, padding-bottom: 12rem; padding-top: 12rem; } } -/*slide with no padding (full card, .embed youtube video...) */ .fullscreen { padding: 0; /* Fixed/Visible header? padding:8.2rem 0 0 0; */ } -/* slide alignment - top */ .slide-top { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } -/* slide alignment - bottom */ .slide-bottom { -webkit-box-pack: end; -ms-flex-pack: end; @@ -1534,10 +1497,7 @@ form[class*='bg-'] { /*=== BG Positions === */ .background { background-position: center; - background-size: cover; - /*fullscreen video -