diff options
Update ads templates
20 files changed, 142 insertions, 22 deletions
| -rw-r--r-- | docs/components.html | 14 | ||||
| -rw-r--r-- | docs/dist/docs.css | 5 | ||||
| -rw-r--r-- | docs/dist/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 14 | ||||
| -rw-r--r-- | docs/experimentals.html | 14 | ||||
| -rw-r--r-- | docs/getting-started.html | 14 | ||||
| -rw-r--r-- | docs/index.html | 18 | ||||
| -rw-r--r-- | docs/layout.html | 14 | ||||
| -rw-r--r-- | docs/src/_ads.pug | 17 | ||||
| -rw-r--r-- | docs/src/components.pug | 2 | ||||
| -rw-r--r-- | docs/src/contents/_ad-c.pug | 3 | ||||
| -rw-r--r-- | docs/src/contents/_ad-g.pug | 13 | ||||
| -rw-r--r-- | docs/src/elements.pug | 2 | ||||
| -rw-r--r-- | docs/src/experimentals.pug | 2 | ||||
| -rw-r--r-- | docs/src/getting-started.pug | 2 | ||||
| -rw-r--r-- | docs/src/index.pug | 5 | ||||
| -rw-r--r-- | docs/src/layout.pug | 2 | ||||
| -rw-r--r-- | docs/src/scss/docs.scss | 5 | ||||
| -rw-r--r-- | docs/src/utilities.pug | 2 | ||||
| -rw-r--r-- | docs/utilities.html | 14 |
diff --git a/docs/components.html b/docs/components.html index 6405fb4..b15b040 100644 --- a/docs/components.html +++ b/docs/components.html @@ -131,6 +131,17 @@ <div class="docs-content" id="content"> <div class="container" id="accordions"> <h3 class="s-title"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>Accordions are used to toggle sections of content.</p> <div class="docs-demo columns"> <div class="column col-6 col-md-12"> @@ -482,6 +493,9 @@ </div> <div class="container" id="cards"> <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>Cards are flexible content containers.</p> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 68d17bc..0bbfd6a 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -152,7 +152,8 @@ .docs-content .docs-ad { background: #f8f9fa; border-radius: .1rem; - display: inline-block; + display: block; + margin: 2rem 0; padding: .4rem; position: relative; } @@ -387,7 +388,6 @@ .section-updates .card { border: 0; - color: #727e96; margin-bottom: 1rem; } @@ -541,6 +541,7 @@ @media (min-width: 1366px) { .docs-ad.docs-ad-sidebar { bottom: 1rem; + margin: 0; position: fixed; right: 1rem; width: 7.3rem; diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 47fe08d..27422c7 100644 --- a/docs/dist/docs.min.css +++ b/docs/dist/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index cbb78f5..e7856f8 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -131,6 +131,17 @@ <div class="docs-content" id="content"> <div class="container" id="typography"> <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4> <div class="docs-demo columns"> @@ -380,6 +391,9 @@ </div> <div class="container" id="buttons"> <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>Buttons include simple button styles for actions in different types and sizes.</p> <div class="docs-demo columns"> <div class="column col-12"> diff --git a/docs/experimentals.html b/docs/experimentals.html index 22c20f2..f369752 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -139,6 +139,17 @@ </div> <div class="container" id="autocomplete"> <h3 class="s-title"><a class="anchor" href="#autocomplete" aria-hidden="true">#</a>Autocomplete</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p> <div class="docs-demo columns"> <div class="column col-9 col-xs-12"> @@ -245,6 +256,9 @@ </div> <div class="container" id="calendars"> <h3 class="s-title"><a class="anchor" href="#calendars" aria-hidden="true">#</a>Calendars</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> <div class="docs-demo columns"> <div class="column col-4 col-md-12"> diff --git a/docs/getting-started.html b/docs/getting-started.html index f3c7f96..e7a99a7 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -137,6 +137,17 @@ </div> <div class="container" id="installation"> <h3 class="s-title"><a class="anchor" href="#installation" aria-hidden="true">#</a>Installation</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p> <h4 class="s-subtitle" id="install-manually"><a class="anchor" href="#install-manually" aria-hidden="true">#</a>Install manually</h4> <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p> @@ -163,6 +174,9 @@ </div> <div class="container" id="custom"> <h3 class="s-title"><a class="anchor" href="#custom" aria-hidden="true">#</a>Custom version</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p> <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/" target="_blank">Sass Source Code</a></p> <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p> diff --git a/docs/index.html b/docs/index.html index fc52de8..8615293 100644 --- a/docs/index.html +++ b/docs/index.html @@ -47,6 +47,21 @@ </div> </div> </div> + <div class="columns"> + <div class="column col-12"> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> + </div> + </div> </div> </div> <div class="section section-features bg-primary text-light text-center"> @@ -94,6 +109,9 @@ </div> </div> <footer class="section section-footer"> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <div class="docs-footer container grid-lg" id="copyright"> <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> diff --git a/docs/layout.html b/docs/layout.html index e1edf36..7f60315 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -131,6 +131,17 @@ <div class="docs-content" id="content"> <div class="container" id="grid"> <h3 class="s-title"><a class="anchor" href="#grid" aria-hidden="true">#</a>Flexbox grid</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>Layout includes flexbox based responsive grid system with 12 columns.</p> <div class="docs-demo columns"> <div class="column"> @@ -327,6 +338,9 @@ </div> <div class="container" id="responsive"> <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p> <div class="docs-demo columns"> <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> diff --git a/docs/src/_ads.pug b/docs/src/_ads.pug deleted file mode 100644 index c7e1c91..0000000 --- a/docs/src/_ads.pug +++ /dev/null @@ -1,17 +0,0 @@ -block ad-adsense - .docs-ad - .hide-md - script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') - // GitHub-lg - ins.adsbygoogle(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') - script. - (adsbygoogle = window.adsbygoogle || []).push({}); - .show-md - // GitHub-sm - ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734') - script. - (adsbygoogle = window.adsbygoogle || []).push({}); - -block ad-carbons - .docs-ad.docs-ad-sidebar - script#_carbonads_js(async='', type='text/javascript', src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio')
\ No newline at end of file diff --git a/docs/src/components.pug b/docs/src/components.pug index 377ae12..9f0ee6a 100644 --- a/docs/src/components.pug +++ b/docs/src/components.pug @@ -8,6 +8,7 @@ block variables block docs-content //- Accordions +docs-heading('accordions', 'Accordions') + include contents/_ad-g.pug include contents/accordions.pug //- Avatars @@ -28,6 +29,7 @@ block docs-content //- Cards +docs-heading('cards', 'Cards') + include contents/_ad-c.pug include contents/cards.pug //- Chips diff --git a/docs/src/contents/_ad-c.pug b/docs/src/contents/_ad-c.pug new file mode 100644 index 0000000..f331444 --- /dev/null +++ b/docs/src/contents/_ad-c.pug @@ -0,0 +1,3 @@ +block ad-carbons + .docs-ad.docs-ad-sidebar.text-center + script#_carbonads_js(async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file diff --git a/docs/src/contents/_ad-g.pug b/docs/src/contents/_ad-g.pug new file mode 100644 index 0000000..675430b --- /dev/null +++ b/docs/src/contents/_ad-g.pug @@ -0,0 +1,13 @@ +block ad-adsense + .docs-ad + .hide-md.text-center + script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') + // GitHub-lg + ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') + script. + (adsbygoogle = window.adsbygoogle || []).push({}); + .show-md.text-center + // GitHub-sm + ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734') + script. + (adsbygoogle = window.adsbygoogle || []).push({});
\ No newline at end of file diff --git a/docs/src/elements.pug b/docs/src/elements.pug index 15b78e4..c80dba2 100644 --- a/docs/src/elements.pug +++ b/docs/src/elements.pug @@ -8,6 +8,7 @@ block variables block docs-content //- Typography +docs-heading('typography', 'Typography') + include contents/_ad-g.pug include contents/typography.pug //- Tables @@ -16,6 +17,7 @@ block docs-content //- Buttons +docs-heading('buttons', 'Buttons') + include contents/_ad-c.pug include contents/buttons.pug //- Forms diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug index ed253fc..c21a2a4 100644 --- a/docs/src/experimentals.pug +++ b/docs/src/experimentals.pug @@ -12,10 +12,12 @@ block docs-content //- Autocomplete +docs-heading('autocomplete', 'Autocomplete') + include contents/_ad-g.pug include contents/autocomplete.pug //- Calendars +docs-heading('calendars', 'Calendars') + include contents/_ad-c.pug include contents/calendars.pug //- Carousels diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index 7a7155b..3b91823 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -12,10 +12,12 @@ block docs-content //- Installation +docs-heading('installation', 'Installation') + include contents/_ad-g.pug include contents/installation.pug //- Custom +docs-heading('custom', 'Custom version') + include contents/_ad-c.pug include contents/custom.pug //- Accessibility diff --git a/docs/src/index.pug b/docs/src/index.pug index 847c4fb..75b28ba 100644 --- a/docs/src/index.pug +++ b/docs/src/index.pug @@ -41,6 +41,10 @@ block content span.card-title Modern .card-body | Elegantly designed and developed elements and components + .columns + .column.col-12 + include contents/_ad-g.pug + .section.section-features.bg-primary.text-light.text-center .container.grid-lg h2 Introduction @@ -81,4 +85,5 @@ block content .card-footer a.btn.btn-primary(href='getting-started.html') Explore footer.section.section-footer + include contents/_ad-c.pug include _footer.pug
\ No newline at end of file diff --git a/docs/src/layout.pug b/docs/src/layout.pug index b2bc502..5aa8bc5 100644 --- a/docs/src/layout.pug +++ b/docs/src/layout.pug @@ -8,10 +8,12 @@ block variables block docs-content //- Flexbox grid +docs-heading('grid', 'Flexbox grid') + include contents/_ad-g.pug include contents/grid.pug //- Responsive +docs-heading('responsive', 'Responsive') + include contents/_ad-c.pug include contents/responsive.pug //- Navbar diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss index 8887d4d..ae9c28b 100644 --- a/docs/src/scss/docs.scss +++ b/docs/src/scss/docs.scss @@ -159,7 +159,8 @@ .docs-ad { background: $bg-color; border-radius: $border-radius; - display: inline-block; + display: block; + margin: 2rem 0; padding: $layout-spacing; position: relative; @@ -397,7 +398,6 @@ .card { border: 0; - color: lighten($body-font-color, 15%); margin-bottom: 1rem; } } @@ -587,6 +587,7 @@ .docs-ad { &.docs-ad-sidebar { bottom: 1rem; + margin: 0; position: fixed; right: 1rem; width: 7.3rem; diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug index 0443ece..4263420 100644 --- a/docs/src/utilities.pug +++ b/docs/src/utilities.pug @@ -8,6 +8,7 @@ block variables block docs-content //- Colors +docs-heading('colors', 'Color utilities') + include contents/_ad-g.pug include contents/colors.pug //- Cursor @@ -16,6 +17,7 @@ block docs-content //- Display +docs-heading('display', 'Display utilities') + include contents/_ad-c.pug include contents/display.pug //- Divider diff --git a/docs/utilities.html b/docs/utilities.html index 1f4d775..08eb91a 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -131,6 +131,17 @@ <div class="docs-content" id="content"> <div class="container" id="colors"> <h3 class="s-title"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <p>Color utilities are used for changing colors for text, link and background.</p> <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4> <div class="docs-demo columns"> @@ -229,6 +240,9 @@ </div> <div class="container" id="display"> <h3 class="s-title"><a class="anchor" href="#display" aria-hidden="true">#</a>Display utilities</h3> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> <p>Display utilities are used for display and hidden things.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- display: block; --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> |