From 45ec002d1ea331e6a891f122ad0ff3ebaaab3aad Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 6 Mar 2017 16:04:02 +0800 Subject: Add Spectre Experimentals installation to the docs --- docs/css/docs.css | 4 ++-- docs/css/docs.less | 4 ++-- docs/css/docs.min.css | 2 +- docs/index.html | 17 +++++++++++------ 4 files changed, 16 insertions(+), 11 deletions(-) (limited to 'docs') diff --git a/docs/css/docs.css b/docs/css/docs.css index b992717..b4798f0 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -171,7 +171,7 @@ padding: 0 .5rem; } .docs-sidebar { - padding: 6rem 1rem; + padding: 8rem 1rem; } .docs-sidebar .docs-nav { position: relative; @@ -180,7 +180,7 @@ .docs-sidebar .docs-nav { position: sticky; position: -webkit-sticky; - top: 9rem; + top: 7rem; } .docs-sidebar .docs-nav .nav-item a:focus { box-shadow: none; diff --git a/docs/css/docs.less b/docs/css/docs.less index db7ebd5..11c7e4a 100644 --- a/docs/css/docs.less +++ b/docs/css/docs.less @@ -205,7 +205,7 @@ } .docs-sidebar { - padding: 6rem 1rem; + padding: 8rem 1rem; .docs-nav { position: relative; @@ -214,7 +214,7 @@ @supports (position: sticky) { .docs-nav { position: sticky; - top: 9rem; + top: 7rem; // A position: sticky; bug casues box-shadow generates width to the elements .nav-item a:focus { diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index 1c42c7d..08353bf 100644 --- a/docs/css/docs.min.css +++ b/docs/css/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.6"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:499}.section-hero{position:relative;z-index:999}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#444}.grid-header .btn-link{color:#666;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:1rem}.docs-content header{color:#444;padding-top:6rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.navbar .navbar-section{padding:0 .5rem}.docs-sidebar{padding:6rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:9rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.6"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:499}.section-hero{position:relative;z-index:999}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#444}.grid-header .btn-link{color:#666;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:1rem}.docs-content header{color:#444;padding-top:6rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.navbar .navbar-section{padding:0 .5rem}.docs-sidebar{padding:8rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:7rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index f373bdf..51e2cb1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -148,10 +148,11 @@ 
$ bower install spectre.css --save
-

And include it in your website or Web app <head>

+

And include spectre.css in your website or Web app <head>. If you want the Spectre Experimentals components, you can add spectre-exp.css as well.

<link rel="stylesheet" href="dist/spectre.min.css" />
+<link rel="stylesheet" href="dist/spectre-exp.min.css" />
@@ -202,16 +203,20 @@ +
+

Accessibility coming soon

+
+

Browser support

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

    -
  • Chrome (last three)
    • -
  • Microsoft Edge (last three)
    • -
  • Firefox (last three)
    • -
  • Safari (last three)
    • -
  • Opera (last three)
    • +
  • Chrome (last 4)
    • +
  • Microsoft Edge (last 4)
    • +
  • Firefox (last 4)
    • +
  • Safari (last 4)
    • +
  • Opera (last 4)
  • Internet Explorer 10+
-- cgit v1.3.1-23-gd82d