Skip to content

Commit 725bb17

Browse files
author
mrmrs
committed
Generate new version of white-space page
1 parent 21618f5 commit 725bb17

File tree

1 file changed

+101
-70
lines changed

1 file changed

+101
-70
lines changed

‎docs/typography/white-space/index.html‎

Lines changed: 101 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -16,47 +16,60 @@
1616
<header class="w-100 pa3 ph5-ns bg-near-white">
1717
<div class="dt w-100">
1818
<div class="dtc v-mid tl w-50">
19-
<a class="f5 f4-ns fw6 mt0 mb1 link black-50">
19+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
2020
Tachyons
21-
</a>
22-
<a href="/" class="link dim dn">
23-
<div class="mw2 dib v-mid mr2">
24-
<img src="img/logo.jpg" class="db w-100 br-100">
21+
<div class="dib">
22+
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.2-beta</small>
2523
</div>
2624
</a>
27-
<div class="dib v-mid">
28-
<small class="nowrap f6 mt2 mt3-ns pr2 black-50">v4.0.0-beta</small>
29-
<small class="nowrap fw6 f6 f5-ns mt2 mt3-ns pl2 black-50 dn"><%= size %></small>
30-
</div>
3125
</div>
32-
<div class="dn dtc-l v-mid w-50 tr">
33-
<a class="f6 b link dim dib mr2 black-70" href="#principles">Principles</a>
34-
<a class="f6 b link dim dib mr2 black-70" href="#getting-started">Getting Started</a>
26+
<div class="db dtc v-mid w-100 tr">
27+
28+
<a title="Documentation" href="/docs/"
29+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
30+
Docs
31+
</a>
3532
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
36-
class="f6 b dim link black-70 mr1">
33+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
3734
GitHub
3835
</a>
39-
<a title="Tachyons Npm Modules" href="#npm"
40-
class="f6 b link black-70 tc dim ml1">
36+
<a title="Tachyons Npm Modules" href="/#npm"
37+
class="f6 b link black-50 dim dib">
4138
Npm
4239
</a>
4340
</div>
4441
</div>
45-
<nav class="pv2">
46-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/">Docs</a>
47-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/general">General</a>
48-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/typography">Typography</a>
49-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/layout">Layout</a>
50-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/themes">Themes</a>
51-
</nav>
5242
</header>
5343

5444
<main class="">
45+
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
46+
<h4 class="f4 mv0 fw6 dib mr4">white-space</h4>
47+
<span class="f4 b dib pl0 ml0 mr4">v2.0.3</span>
48+
<span class="f4 b dib pl0 ml0 mr4">154 B</span>
49+
<div>
50+
<dl class="dib mr4 mt0">
51+
<dt class="f6 db">Declarations </dt>
52+
<dd class="db pl0 ml0 f4 f2-ns b">12</span></dd>
53+
</dl>
54+
<dl class="dib mr4">
55+
<dt class="f6 db pr2">Selectors </dt>
56+
<dd class="db pl0 ml0 f4 f2-ns b">12</dd>
57+
</dl>
58+
<dl class="dib mr4">
59+
<dt class="f6 db pr2">Max. Specificity Score </dt>
60+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
61+
</dl>
62+
<dl class="dib mr4">
63+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
64+
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
65+
</dl>
66+
</div>
67+
</article>
5568
<div class="ph3 ph5-ns pt4 pb5">
56-
<h2 class="f3 bold">Examples</h2>
57-
<p class="f3">This text is formatted the same way in the source and printed three times, with the only difference being which white-space class is attached.</p>
58-
<h3 class="f5 book pt4 caps">Normal</h3>
59-
<p class="ws-norm measure">
69+
<h2 class="f4 bold">Examples</h2>
70+
<p class="f4 measure">This text is formatted the same way in the source and printed three times, with the only difference being which white-space class is attached.</p>
71+
<h3 class="f5 book pt4 code">.ws-normal</h3>
72+
<p class="ws-normal measure">
6073

6174
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
6275

@@ -73,8 +86,8 @@ <h3 class="f5 book pt4 caps">Normal</h3>
7386
ipsum dolor sit amet.
7487

7588
</p>
76-
<h3 class="f5 book pt4 caps">Nowrap</h3>
77-
<p class="ws-nowrap measure">
89+
<h3 class="f5 book pt4 code">.nowrap</h3>
90+
<p class="nowrap measure">
7891
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
7992

8093
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
@@ -90,8 +103,8 @@ <h3 class="f5 book pt4 caps">Nowrap</h3>
90103
ipsum dolor sit amet.
91104

92105
</p>
93-
<h3 class="f5 book pt4 caps">Pre</h3>
94-
<p class="ws-pre measure">
106+
<h3 class="f5 book pt4 code">.pre</h3>
107+
<p class="pre measure">
95108
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
96109

97110
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
@@ -122,12 +135,12 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
122135
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" class="link fw6 blue dim">MDN - White Space</a>
123136
</div>
124137
</div>
125-
<section class="bg-dark-gray white pt4 pb5">
138+
<section class="bg-near-white black-70 pt4 pb5">
126139
<header class="ph3 ph5-ns pt4">
127140
<kbd class="yellow">src/_white-space.css</kbd>
128141
</header>
129142
<pre class="ph3 ph5-ns">
130-
<code class="small">
143+
<code class="code" style="font-size: .75rem;">
131144
@custom-media --breakpoint-not-small screen and (min-width: 48em);
132145
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
133146
@custom-media --breakpoint-large screen and (min-width: 64em);
@@ -168,74 +181,92 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
168181
<div class="ph3 ph5-ns pt3 pb5">
169182
<section>
170183
<h2 class="f6 fw7 ttu tracked">General</h2>
171-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
172-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
184+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
185+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
173186
<section class="cf w-100 mt3">
174187
<article class="fn fl-ns w-100 w-25-l">
175188
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
176-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
177-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
178-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
179-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
180-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
181-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
182-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
183-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
184-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
185-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
186-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
189+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
190+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
191+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
192+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
193+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
194+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
195+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
196+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
197+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
198+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
199+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
187200
</article>
188201
<article class="fn fl-ns w-100 w-25-l">
189202
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
190-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
191-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
192-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
193-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
194-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
195-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
196-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
197-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
198-
<a class="f4 fw6 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
203+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
204+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
205+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
206+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
207+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
208+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
209+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
210+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
211+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
199212
</article>
200213
<article class="fn fl-ns w-100 w-25-l">
201214
<h2 class="f6 fw7 ttu tracked">Theming</h2>
202-
<a class="f4 fw6 dim link mid-gray db pv1" href="themes/hovers/" title="Hovers">Hovers</a>
203-
<a class="f4 fw6 dim link mid-gray db pv1" href="themes/background-size/" title="Background Size">Background Size</a>
204-
<a class="f4 fw6 dim link mid-gray db pv1" href="themes/borders/" title="Borders">Borders</a>
205-
<a class="f4 fw6 dim link mid-gray db pv1" href="themes/border-radius/" title="Border Radius">Border Radius</a>
215+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
216+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
217+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
218+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
206219
</article>
207220
</section>
208221
</section>
209222
</div>
210223

211224
</main>
212-
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
213-
<small class="f6 measure db lh-copy">
225+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
226+
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
227+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
228+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
229+
</svg>
230+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
231+
</a>
232+
<article>
233+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
234+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
235+
</article>
236+
237+
<p>
238+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
239+
Join our Slack Channel
240+
</a>
241+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
242+
Open an Issue
243+
</a>
244+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
245+
GitHub
246+
</a>
247+
</p>
248+
<p class="measure copy lh-copy">
249+
Have a question? Need help? Feel free to open an issue on GitHub or ask a question in our slack channel. We're here to try and help make designing in the browser fun.
250+
</p>
251+
<small class="f6 measure db lh-copy mt5">
214252
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
215253
that always moves faster than light.
216254
The word comes from the Greek:
217255

218256
ταχύς or tachys, meaning "swift, quick, fast, rapid"
219257
</small>
220-
221-
<p>
222-
223-
<a class="black-70 link dim b" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
224-
Join our Slack Channel
225-
</a>
226-
</p>
227258
</footer>
228259

229-
230-
<script>
260+
<script>
231261
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
232262
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
233-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
263+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
234264
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
235265

236266
ga('create', 'UA-55773803-1', 'auto');
237267
ga('send', 'pageview');
238268

239269
</script>
270+
240271
</body>
241272
</html>

0 commit comments

Comments
 (0)