Skip to content

Commit 31c3ce1

Browse files
author
mrmrs
committed
Update hovers docs
1 parent 00e82e5 commit 31c3ce1

File tree

2 files changed

+56
-78
lines changed

2 files changed

+56
-78
lines changed

‎lib/hovers.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,32 @@ var gzip = require('gzip-size')
44
var filesize = require('filesize')
55
var cssstats = require('cssstats')
66

7+
78
var module = require('tachyons-hovers/package.json')
8-
var moduleCss = fs.readFileSync('node_modules/tachyons-hovers/tachyons-hovers.min.css', 'utf8')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-hovers/css/tachyons-hovers.min.css', 'utf8')
910
var moduleObj = cssstats(moduleCss)
1011
var moduleSize = filesize(moduleObj.gzipSize)
12+
var moduleName = module.name.split("tachyons-").pop()
1113

12-
var srcCSS = fs.readFileSync('./src/_hovers.css', 'utf8')
13-
var navDocs = fs.readFileSync('./templates/nav_docs.html', 'utf8')
14-
var siteFooter = fs.readFileSync('./templates/footer.html', 'utf8')
14+
var srcCSS = fs.readFileSync('./src/css/_hovers.css', 'utf8')
15+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
16+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
17+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
18+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
1519

1620

17-
var template = fs.readFileSync('./templates/docs/hovers/index.html', 'utf8')
21+
var template = fs.readFileSync('./src/templates/docs/hovers/index.html', 'utf8')
1822
var tpl = _.template(template)
1923
var html = tpl({
2024
moduleVersion: module.version,
2125
moduleSize: moduleSize,
26+
name: moduleName,
2227
moduleObj: moduleObj,
2328
srcCSS: srcCSS,
2429
navDocs: navDocs,
25-
siteFooter: siteFooter
30+
siteFooter: siteFooter,
31+
googleAnalytics: googleAnalytics,
32+
siteHeader: siteHeader
2633
})
2734

2835
fs.writeFileSync('./docs/themes/hovers/index.html', html)

‎src/templates/docs/hovers/index.html

Lines changed: 43 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,117 +6,88 @@
66
<title>
77
Hovers / Themes / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mrmrs">
9+
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
<header class="bg-dark-gray white pbl">
16-
<div class="bb b--mid-gray phm phl-ns pvl">
17-
<h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
18-
<h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
19-
<span class="thin white-40">/</span>
20-
<h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#themes">Themes</a></h3>
21-
<span class="thin white-40">/</span>
22-
<h4 class="f4 mvn semibold dib">Hover &amp; Focus</h4>
23-
<div class="mtl">
24-
<dl class="white-60 prm light dib mrm">
25-
<dt class="db">Version</dt>
26-
<dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
27-
</dl>
28-
<dl class="white-60 light dib mrm">
29-
<dt class="db">Filesize</dt>
30-
<dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
31-
</dl>
32-
<div class="cf">
33-
<dl class="white-60 dib mrm mtn">
34-
<dt class="db">Declarations </dt>
35-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
15+
16+
<%= siteHeader %>
17+
<main class="">
18+
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
19+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
20+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
21+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
22+
<div>
23+
<dl class="dib mr4 mt0">
24+
<dt class="f6 db">Declarations </dt>
25+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></span></dd>
3626
</dl>
37-
<dl class="white-60 dib mrm">
38-
<dt class="db prs">Selectors </dt>
39-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
27+
<dl class="dib mr4">
28+
<dt class="f6 db pr2">Selectors </dt>
29+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
4030
</dl>
41-
<dl class="white-60 dib mrm">
42-
<dt class="db prs">Max. Specificity Score </dt>
43-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
31+
<dl class="dib mr4">
32+
<dt class="f6 db pr2">Max. Specificity Score </dt>
33+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
4434
</dl>
45-
<dl class="white-60 dib mrm">
46-
<dt class="db prs">Size of Avg. Rule </dt>
47-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
35+
<dl class="dib mr4">
36+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
37+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
4838
</dl>
49-
</div>
5039
</div>
51-
</div>
52-
<div class="phm phl-ns pvm">
53-
<p class="measure f3 lh-copy">
54-
There are two classes for adding hover effects to elements. One dims an element on hover, the other will hide children within an element on hover. The dim class can be used on links of any color to give visual affordance to users
55-
</p>
56-
57-
</div>
58-
</header>
59-
<main class="">
60-
<div class="phm phl-ns ptl pbxl">
40+
</article>
41+
<div class="ph3 ph5-ns pt4 pb5">
6142
<h2 class="f3 bold">Examples</h2>
62-
<h3 class="f5 book ptl caps">Dim Text</h3>
43+
<h3 class="f5 book pt4 caps">Dim Text</h3>
6344
<p>
6445
<a href="#" class="f3 b db dim link pvxs black">This link will dim on hover</a>
6546
<a href="#" class="f3 b db dim link pvxs gray">This link will dim on hover</a>
6647
<a href="#" class="f3 b db dim link pvxs blue">This link will dim on hover</a>
6748
<a href="#" class="f3 b db dim link pvxs dark-blue">This link will dim on hover</a>
6849
<a href="#" class="f3 b db dim link pvxs darkest-blue">This link will dim on hover</a>
6950
</p>
70-
<h3 class="f5 book ptl caps">Dim Card</h3>
51+
<h3 class="f5 book pt4 caps">Dim Card</h3>
7152
<p>
7253
<a href="#" class="link black mw5 db dim pas ba b--gray br2">
7354
<img src="http://placekitten.com/g/600/300" alt="KITTTTTTTY" class="db mbxs" />
7455
<span class="db">Dim any element and its children</span>
7556
</a>
7657
</p>
77-
<h3 class="f5 book ptl caps">Reveal Children on Hover</h3>
58+
<h3 class="f5 book pt4 caps">Reveal Children on Hover</h3>
7859
<a href="#" class="link black mw5 dt hide-child ba b--gray br2" style="background-size: cover; background: transparent url(http://placekitten.com/g/700/300) no-repeat;">
79-
<span class="white b dtc v-mid child bg-black-40 phl pvxl">Reveal children elements on hover</span>
60+
<span class="white b dtc v-mid child bg-black-40 ph4 pvxl">Reveal children elements on hover</span>
8061
</a>
81-
<div class="mtxl cf">
82-
<div class="dib mrl">
83-
<h1 class="f4 ttu tracked semibold">Previous</h1>
84-
<a href="/docs/layout/position/" class="link semibold blue dim">Position</a>
62+
<div class="mt5 cf">
63+
<div class="dib mr4">
64+
<h1 class="f4 ttu tracked fw6">Previous</h1>
65+
<a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
8566
</div>
8667
<div class="dib">
87-
<h1 class="f4 ttu tracked semibold">Next</h1>
88-
<a href="/docs/themes/background-size/" class="link semibold blue dim">Background Size</a>
68+
<h1 class="f4 ttu tracked fw6">Next</h1>
69+
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
8970
</div>
9071
</div>
91-
<div class="mtxl">
92-
<h1 class="f4 ttu tracked semibold">Reference</h1>
93-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db semibold blue dim">MDN - Hover</a>
94-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db semibold blue dim">MDN - Focus</a>
72+
<div class="mt5">
73+
<h1 class="f4 ttu tracked fw6">Reference</h1>
74+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
75+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
9576
</div>
9677
</div>
97-
<section class="bg-dark-gray white ptl pbxl">
98-
<header class="phm phl-ns ptl">
78+
<section class="bg-near-white black-70 pt4 pb5">
79+
<header class="ph3 ph5-ns pt4">
9980
<kbd class="yellow">src/_hovers.css</kbd>
10081
</header>
101-
<pre class="phm phl-ns">
102-
<code class="small">
82+
<pre class="ph3 ph5-ns">
83+
<code class="code" style="font-size: .75rem;">
10384
<%= srcCSS %>
10485
</code>
10586
</pre>
10687
</section>
10788
<%= navDocs %>
10889
</main>
109-
<%= siteFooter %>
110-
111-
<script>
112-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
113-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
114-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
115-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
116-
117-
ga('create', 'UA-55773803-1', 'auto');
118-
ga('send', 'pageview');
119-
120-
</script>
90+
<%= siteFooter %>
91+
<%= googleAnalytics %>
12192
</body>
12293
</html>

0 commit comments

Comments
 (0)