Skip to content

Commit

Permalink
Update the Docs HTML structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 3, 2017
1 parent 706c357 commit a2f1864
Show file tree
Hide file tree
Showing 13 changed files with 534 additions and 523 deletions.
326 changes: 162 additions & 164 deletions docs/components.html
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
}
/* Spectre docs style */
.section-header {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(248, 249, 250, .9);
padding: 10px 5px;
position: fixed;
Expand Down Expand Up @@ -216,11 +218,11 @@
padding: 0 5px;
}
.docs-sidebar {
padding: 70px 10px 30px 10px;
padding: 70px 10px 50px 10px;
position: relative;
}
.docs-sidebar .docs-nav {
bottom: 30px;
bottom: 50px;
height: calc(100vh - 120px);
overflow-y: auto;
position: fixed;
Expand Down
11 changes: 7 additions & 4 deletions docs/dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ h6 {
}
p {
line-height: 24px;
margin: 0 0 12px;
margin: 0 0 16px;
}
a,
ins,
Expand Down Expand Up @@ -2200,20 +2200,23 @@ code {
border-radius: 2px;
color: inherit;
display: block;
margin: 4px -8px;
margin: 0 -8px;
padding: 4px 8px;
text-decoration: none;
}
.menu .menu-item > a:focus,
.menu .menu-item > a:hover {
background: #fbfbfe;
background: #eff1fa;
color: #5764c6;
}
.menu .menu-item > a:active,
.menu .menu-item > a.active {
background: #eff1fa;
color: #5764c6;
}
.menu .menu-item + .menu-item {
margin-top: 4px;
}
.menu .menu-badge {
float: right;
padding: 4px 0;
Expand Down Expand Up @@ -2397,7 +2400,7 @@ code {
.pagination .page-item a:hover {
color: #5764c6;
}
.pagination .page-item a.disabled {
.pagination .page-item.disabled a {
cursor: default;
opacity: .5;
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre.min.css
View file

Large diffs are not rendered by default.

206 changes: 103 additions & 103 deletions docs/elements.html
View file

Large diffs are not rendered by default.

116 changes: 58 additions & 58 deletions docs/experimentals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@
<link rel="stylesheet" href="css/docs.css" />
</head>
<body>
<section class="section section-header bg-gray">
<section class="grid-header container grid-960">
<div class="section section-header bg-gray">
<div class="grid-header container grid-960">
<nav class="navbar">
<section class="navbar-section">
<div class="navbar-section">
<a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
<a href="index.html" class="navbar-brand">Spectre.css Docs</a>
</section>
<section class="navbar-section">
</div>
<div class="navbar-section">
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
</section>
</div>
</nav>
</section>
</section>
</div>
</div>

<section class="container grid-960">
<section class="columns">
<div class="container grid-960">
<div class="columns">
<div id="sidebar" class="docs-sidebar column col-sm-12">
<div class="docs-nav">
<div class="accordion">
Expand Down Expand Up @@ -254,18 +254,18 @@
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>

<div class="docs-content column col-9 col-sm-12">
<section id="experimentals" class="container">
<div id="experimentals" class="container">
<header class="text-center"><h3><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3></header>
<section class="notes">
<div class="notes">
<p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
</section>
</section>
</div>
</div>

<section id="calendars" class="container">
<div id="calendars" class="container">
<header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p>
</section>
</div>
<div class="columns">
<div class="column col-4 col-md-12">
<div class="calendar">
Expand Down Expand Up @@ -422,13 +422,13 @@
</div>
</div>

</section>
</div>

<section id="carousels" class="container">
<div id="carousels" class="container">
<header class="text-center"><h3><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p>
</section>
</div>
<div class="columns">
<div class="column col-12">
<div class="carousel">
Expand Down Expand Up @@ -487,13 +487,13 @@
</div>
</div>

</section>
</div>

<section id="comparison" class="container">
<div id="comparison" class="container">
<header class="text-center"><h3><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p>
</section>
</div>
<div class="columns">
<div class="column col-12">
<div class="comparison-slider">
Expand Down Expand Up @@ -525,13 +525,13 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>

</section>
</div>

<section id="filters" class="container">
<div id="filters" class="container">
<header class="text-center"><h3><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Filters</strong> are CSS only content filters.</p>
</section>
</div>
<div class="columns">
<div class="column col-12">
<div class="filter">
Expand Down Expand Up @@ -650,13 +650,13 @@
</div>
</div>

</section>
</div>

<section id="meters" class="container">
<div id="meters" class="container">
<header class="text-center"><h3><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Meters</strong> represent the value within the known range.</p>
</section>
</div>
<div class="columns">
<div class="column col-3 col-xs-12">
<meter class="meter" value="20" min="0" max="100"></meter>
Expand All @@ -671,9 +671,9 @@
<meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter>
</div>
</div>
<section class="notes">
<div class="notes">
<p></p>
</section>
</div>

<!-- meters example -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
Expand All @@ -685,13 +685,13 @@
&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">optimum</span>=<span class="atv">&quot;90&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
</code></pre>

</section>
</div>

<section id="parallax" class="container">
<div id="parallax" class="container">
<header class="text-center"><h3><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3></header>
<section class="notes">
<div class="notes">
<p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
</section>
</div>
<div class="columns">
<div class="column col-12">
<div class="parallax">
Expand Down Expand Up @@ -728,13 +728,13 @@ <h2>tvOS parallax demo</h2>
&lt;<span class="tag">/div</span>&gt;
</code></pre>

</section>
</div>

<section id="progress" class="container">
<div id="progress" class="container">
<header class="text-center"><h3><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3></header>
<section class="notes">
<div class="notes">
<p>The <strong>Progress</strong> indicates the progress completion of a task.</p>
</section>
</div>
<div class="columns">
<div class="column col-3 col-xs-12">
<progress class="progress" value="75" max="100"></progress>
Expand All @@ -755,13 +755,13 @@ <h2>tvOS parallax demo</h2>
&lt;<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">&quot;progress&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/progress</span>&gt;
</code></pre>

</section>
</div>

<section id="sliders" class="container">
<div id="sliders" class="container">
<header class="text-center"><h3><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Sliders</strong> are for selecting values from ranges.</p>
</section>
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
<input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50" />
Expand All @@ -775,13 +775,13 @@ <h2>tvOS parallax demo</h2>
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="tag">/</span>&gt;
</code></pre>

</section>
</div>

<section id="timelines" class="container">
<div id="timelines" class="container">
<header class="text-center"><h3><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3></header>
<section class="notes">
<div class="notes">
<p><strong>Timelines</strong> are ordered sequences of activities.</p>
</section>
</div>
<div class="columns">
<div class="column col-9 col-sm-12">
<div class="timeline">
Expand Down Expand Up @@ -869,9 +869,9 @@ <h2>tvOS parallax demo</h2>
&lt;<span class="tag">/div</span>&gt;
</code></pre>

</section>
</div>

<section class="container">
<div class="container">
<div class="divider"></div>
<ul class="pagination">
<li class="page-item page-prev">
Expand All @@ -881,18 +881,18 @@ <h4 class="page-item-title">Utilities</h4>
</a>
</li>
</ul>
</section>
</div>
</div>
</section>
</section>
</div>
</div>

<footer class="section section-footer bg-gray">
<section id="copyright" class="grid-footer container grid-960">
<div id="copyright" class="grid-footer container grid-960">
<p>
<a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span>
</p>
<p>Designed and built with ♥ 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>
</section>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand Down
Loading

0 comments on commit a2f1864

Please sign in to comment.