diff options
Fix Docs bugs
4 files changed, 59 insertions, 52 deletions
| -rw-r--r-- | docs/css/docs.css | 33 | ||||
| -rw-r--r-- | docs/index.html | 9 | ||||
| -rw-r--r-- | docs/src/docs.less | 39 | ||||
| -rw-r--r-- | docs/utilities.html | 30 |
diff --git a/docs/css/docs.css b/docs/css/docs.css index 02a6090..4a05927 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -256,23 +256,15 @@ color: #727e96; } /* Spectre Homepage style */ -.section-header { - -webkit-backdrop-filter: blur(.5rem); - backdrop-filter: blur(.5rem); - background: rgba(248, 249, 250, .9); +.section-hero { padding: 1rem .5rem; - position: fixed; - top: 0; - width: 100%; - z-index: 200; + position: relative; } -.section-header .s-brand { - padding: 0; - position: static; +.section-hero .s-brand { + position: absolute; } -.section-hero { - padding: 1.5rem .5rem; - position: relative; +.section-hero .s-brand h2 { + color: #5764c6; } .section-hero .column { padding: .4rem; @@ -302,7 +294,7 @@ } .grid-hero { margin-bottom: 2rem; - margin-top: 5rem; + margin-top: 6rem; } .grid-hero h1 { color: #454d5d; @@ -419,6 +411,17 @@ .s-content .s-subtitle::before { display: none; } + .section-hero .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + } + .section-hero .s-brand .s-logo { + height: auto; + } + .section-hero .s-brand img { + height: 3.2rem; + width: 3.2rem; + } } @media screen and (max-width: 600px) { .grid-hero h2 { diff --git a/docs/index.html b/docs/index.html index 20489da..2629b7b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,19 +12,14 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="section section-header"> - <div class="grid-header container grid-lg"> + <div class="section section-hero bg-gray"> + <div id="overview" class="grid-hero container grid-lg text-center"> <div class="s-brand"> <div class="s-logo"> <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> <h2>Spectre.css</h2> </div> </div> - </div> - </div> - - <div class="section section-hero bg-gray"> - <div id="overview" class="grid-hero container grid-lg text-center"> <h1>Spectre.css</h1> <h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2> <div class="columns"> diff --git a/docs/src/docs.less b/docs/src/docs.less index b16bf3d..25acc40 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -293,24 +293,17 @@ } /* Spectre Homepage style */ -.section-header { - backdrop-filter: blur(.5rem); // Safari only feature - background: fade(@bg-color, 90%); +.section-hero { padding: 1rem .5rem; - position: fixed; - top: 0; - width: 100%; - z-index: @zindex-2; + position: relative; .s-brand { - padding: 0; - position: static; - } -} + position: absolute; -.section-hero { - padding: 1.5rem .5rem; - position: relative; + h2 { + color: @primary-color; + } + } .column { padding: @layout-spacing; @@ -347,7 +340,7 @@ } .grid-hero { - margin-top: 5rem; + margin-top: 6rem; margin-bottom: 2rem; h1 { @@ -476,6 +469,22 @@ } } } + + .section-hero { + .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + + .s-logo { + height: auto; + } + + img { + height: 3.2rem; + width: 3.2rem; + } + } + } } @media screen and (max-width: 600px) { diff --git a/docs/utilities.html b/docs/utilities.html index 5077792..1f1b9d7 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -261,7 +261,7 @@ <p><span class="text-primary">primary color</span></p> <p><span class="text-secondary">secondary color</span></p> <p><span class="text-gray">gray color</span></p> - <p><span class="text-light bg-dark p-5 rounded">light color</span></p> + <p><span class="text-light bg-dark p-1 rounded">light color</span></p> <p><span class="text-success">success color</span></p> <p><span class="text-warning">warning color</span></p> <p><span class="text-error">error color</span></p> @@ -278,13 +278,13 @@ </code></pre> <div class="docs-note"> - <p><a class="text-primary p-5" href="#colors">primary link</a></p> - <p><a class="text-secondary p-5" href="#colors">secondary link</a></p> - <p><a class="text-gray p-5" href="#colors">gray link</a></p> - <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p> - <p><a class="text-success p-5" href="#colors">success link</a></p> - <p><a class="text-warning p-5" href="#colors">warning link</a></p> - <p><a class="text-error p-5" href="#colors">error link</a></p> + <p><a class="text-primary p-1" href="#colors">primary link</a></p> + <p><a class="text-secondary p-1" href="#colors">secondary link</a></p> + <p><a class="text-gray p-1" href="#colors">gray link</a></p> + <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p> + <p><a class="text-success p-1" href="#colors">success link</a></p> + <p><a class="text-warning p-1" href="#colors">warning link</a></p> + <p><a class="text-error p-1" href="#colors">error link</a></p> </div> <!-- colors example --> @@ -299,13 +299,13 @@ <h4 class="s-subtitle">Background colors</h4> <div class="docs-note"> - <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p> - <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p> - <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p> - <p><span class="bg-gray p-5 rounded">gray bg</span></p> - <p><span class="bg-success text-light p-5 rounded">success bg</span></p> - <p><span class="bg-warning text-light p-5 rounded">warning bg</span></p> - <p><span class="bg-error text-light p-5 rounded">error bg</span></p> + <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p> + <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> + <p><span class="bg-dark text-light p-1 rounded">dark bg</span></p> + <p><span class="bg-gray p-1 rounded">gray bg</span></p> + <p><span class="bg-success text-light p-1 rounded">success bg</span></p> + <p><span class="bg-warning text-light p-1 rounded">warning bg</span></p> + <p><span class="bg-error text-light p-1 rounded">error bg</span></p> </div> <!-- colors example --> |