Skip to content

Commit 26c7404

Browse files
johnojohno
committed
Code highlighting, component titles, and dir cleanup
This adds code highlighting for the component docs and removes the redundant category name in the links section. I've also moved the lib/ directory to src/modules and updated the build bash script accordingly.
1 parent 65e024b commit 26c7404

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1081
-123
lines changed

‎components/articles/title-text-image/index.html‎

Lines changed: 116 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1 class="f4 f3-ns mt4">Articles Title Text Image</h1>
4040
<div class="fl w-100 w-75-ns pr0 pr2-ns">
4141
<h2 class="f5">HTML</h2>
4242
<p class="f5 black-70"></p>
43-
<pre class="pa3 ba br2 b--black-05 h5">
43+
<pre class="pa3 ba br2 b--black-05 h5" id="html">
4444
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
4545
&lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
4646
&lt;img src=&quot;/img/space.jpg&quot; class=&quot;w-100 f5 measure&quot;&gt;
@@ -62,7 +62,7 @@ <h2 class="f5">HTML</h2>
6262
</div>
6363
<div class="fl w-100 w-25-ns pl0 pl2-ns">
6464
<h2 class="f5">CSS</h2>
65-
<pre class="pa3 ba br2 b--black-05 h5">.lh-copy {
65+
<pre class="pa3 ba br2 b--black-05 h5" id="css">.lh-copy {
6666
line-height: 1.6;
6767
}
6868

@@ -141,31 +141,31 @@ <h1 class="f6 b ttu">Other Components</h1>
141141
<div>
142142
<h2 class="f5 mb2 ttc mid-gray">articles</h2>
143143

144-
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Articles Title Text Image</a>
144+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Title Text Image</a>
145145

146-
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Articles Title Text</a>
146+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Title Text</a>
147147

148148
</div>
149149

150150
<div>
151151
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
152152

153-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Layout Flag Object Collapse</a>
153+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Flag Object Collapse</a>
154154

155-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
155+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Flag Object</a>
156156

157-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
157+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Two Column Collapse One</a>
158158

159-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
159+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Two Column</a>
160160

161161
</div>
162162

163163
<div>
164164
<h2 class="f5 mb2 ttc mid-gray">nav</h2>
165165

166-
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Nav Large Title Link List</a>
166+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Large Title Link List</a>
167167

168-
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Nav Title Link List</a>
168+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Title Link List</a>
169169

170170
</div>
171171

@@ -175,6 +175,112 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
175175

176176

177177

178+
<script src="/js/highlight.min.js"></script>
179+
<script>
180+
hljs.highlightBlock(document.querySelector('#css'))
181+
hljs.highlightBlock(document.querySelector('#html'))
182+
</script>
183+
<style>
184+
/*
185+
186+
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
187+
188+
*/
189+
190+
.hljs {
191+
display: block;
192+
overflow-x: auto;
193+
padding: 0.5em;
194+
color: #333;
195+
background: #f8f8f8;
196+
}
197+
198+
.hljs-comment,
199+
.hljs-quote {
200+
color: #998;
201+
font-style: italic;
202+
}
203+
204+
.hljs-keyword,
205+
.hljs-selector-tag,
206+
.hljs-subst {
207+
color: #333;
208+
font-weight: bold;
209+
}
210+
211+
.hljs-number,
212+
.hljs-literal,
213+
.hljs-variable,
214+
.hljs-template-variable,
215+
.hljs-tag .hljs-attr {
216+
color: #008080;
217+
}
218+
219+
.hljs-string,
220+
.hljs-doctag {
221+
color: #d14;
222+
}
223+
224+
.hljs-title,
225+
.hljs-section,
226+
.hljs-selector-id {
227+
color: #900;
228+
font-weight: bold;
229+
}
230+
231+
.hljs-subst {
232+
font-weight: normal;
233+
}
234+
235+
.hljs-type,
236+
.hljs-class .hljs-title {
237+
color: #458;
238+
font-weight: bold;
239+
}
240+
241+
.hljs-tag,
242+
.hljs-name,
243+
.hljs-attribute {
244+
color: #000080;
245+
font-weight: normal;
246+
}
247+
248+
.hljs-regexp,
249+
.hljs-link {
250+
color: #009926;
251+
}
252+
253+
.hljs-symbol,
254+
.hljs-bullet {
255+
color: #990073;
256+
}
257+
258+
.hljs-built_in,
259+
.hljs-builtin-name {
260+
color: #0086b3;
261+
}
262+
263+
.hljs-meta {
264+
color: #999;
265+
font-weight: bold;
266+
}
267+
268+
.hljs-deletion {
269+
background: #fdd;
270+
}
271+
272+
.hljs-addition {
273+
background: #dfd;
274+
}
275+
276+
.hljs-emphasis {
277+
font-style: italic;
278+
}
279+
280+
.hljs-strong {
281+
font-weight: bold;
282+
}
283+
</style>
178284

179285
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
180286
<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;">

‎components/articles/title-text/index.html‎

Lines changed: 116 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h1 class="f4 f3-ns mt4">Articles Title Text</h1>
3939
<div class="fl w-100 w-75-ns pr0 pr2-ns">
4040
<h2 class="f5">HTML</h2>
4141
<p class="f5 black-70"></p>
42-
<pre class="pa3 ba br2 b--black-05 h5">
42+
<pre class="pa3 ba br2 b--black-05 h5" id="html">
4343
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
4444
&lt;h1 class=&quot;&quot;&gt;Title&lt;/h1&gt;
4545
&lt;p class=&quot;measure lh-copy&quot;&gt;
@@ -60,7 +60,7 @@ <h2 class="f5">HTML</h2>
6060
</div>
6161
<div class="fl w-100 w-25-ns pl0 pl2-ns">
6262
<h2 class="f5">CSS</h2>
63-
<pre class="pa3 ba br2 b--black-05 h5">.lh-copy {
63+
<pre class="pa3 ba br2 b--black-05 h5" id="css">.lh-copy {
6464
line-height: 1.6;
6565
}
6666

@@ -123,31 +123,31 @@ <h1 class="f6 b ttu">Other Components</h1>
123123
<div>
124124
<h2 class="f5 mb2 ttc mid-gray">articles</h2>
125125

126-
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Articles Title Text Image</a>
126+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Title Text Image</a>
127127

128-
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Articles Title Text</a>
128+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Title Text</a>
129129

130130
</div>
131131

132132
<div>
133133
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
134134

135-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Layout Flag Object Collapse</a>
135+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Flag Object Collapse</a>
136136

137-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
137+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Flag Object</a>
138138

139-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
139+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Two Column Collapse One</a>
140140

141-
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
141+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Two Column</a>
142142

143143
</div>
144144

145145
<div>
146146
<h2 class="f5 mb2 ttc mid-gray">nav</h2>
147147

148-
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Nav Large Title Link List</a>
148+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Large Title Link List</a>
149149

150-
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Nav Title Link List</a>
150+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Title Link List</a>
151151

152152
</div>
153153

@@ -157,6 +157,112 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
157157

158158

159159

160+
<script src="/js/highlight.min.js"></script>
161+
<script>
162+
hljs.highlightBlock(document.querySelector('#css'))
163+
hljs.highlightBlock(document.querySelector('#html'))
164+
</script>
165+
<style>
166+
/*
167+
168+
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
169+
170+
*/
171+
172+
.hljs {
173+
display: block;
174+
overflow-x: auto;
175+
padding: 0.5em;
176+
color: #333;
177+
background: #f8f8f8;
178+
}
179+
180+
.hljs-comment,
181+
.hljs-quote {
182+
color: #998;
183+
font-style: italic;
184+
}
185+
186+
.hljs-keyword,
187+
.hljs-selector-tag,
188+
.hljs-subst {
189+
color: #333;
190+
font-weight: bold;
191+
}
192+
193+
.hljs-number,
194+
.hljs-literal,
195+
.hljs-variable,
196+
.hljs-template-variable,
197+
.hljs-tag .hljs-attr {
198+
color: #008080;
199+
}
200+
201+
.hljs-string,
202+
.hljs-doctag {
203+
color: #d14;
204+
}
205+
206+
.hljs-title,
207+
.hljs-section,
208+
.hljs-selector-id {
209+
color: #900;
210+
font-weight: bold;
211+
}
212+
213+
.hljs-subst {
214+
font-weight: normal;
215+
}
216+
217+
.hljs-type,
218+
.hljs-class .hljs-title {
219+
color: #458;
220+
font-weight: bold;
221+
}
222+
223+
.hljs-tag,
224+
.hljs-name,
225+
.hljs-attribute {
226+
color: #000080;
227+
font-weight: normal;
228+
}
229+
230+
.hljs-regexp,
231+
.hljs-link {
232+
color: #009926;
233+
}
234+
235+
.hljs-symbol,
236+
.hljs-bullet {
237+
color: #990073;
238+
}
239+
240+
.hljs-built_in,
241+
.hljs-builtin-name {
242+
color: #0086b3;
243+
}
244+
245+
.hljs-meta {
246+
color: #999;
247+
font-weight: bold;
248+
}
249+
250+
.hljs-deletion {
251+
background: #fdd;
252+
}
253+
254+
.hljs-addition {
255+
background: #dfd;
256+
}
257+
258+
.hljs-emphasis {
259+
font-style: italic;
260+
}
261+
262+
.hljs-strong {
263+
font-weight: bold;
264+
}
265+
</style>
160266

161267
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
162268
<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;">

‎components/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,27 @@
2020

2121
articles<br>
2222

23-
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
23+
<a href="/components/articles/title-text-image/index.html">Title Text Image</a><br>
2424

25-
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
25+
<a href="/components/articles/title-text/index.html">Title Text</a><br>
2626

2727

2828
layout<br>
2929

30-
<a href="/components/layout/flag-object-collapse/index.html">Layout Flag Object Collapse</a><br>
30+
<a href="/components/layout/flag-object-collapse/index.html">Flag Object Collapse</a><br>
3131

32-
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
32+
<a href="/components/layout/flag-object/index.html">Flag Object</a><br>
3333

34-
<a href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a><br>
34+
<a href="/components/layout/two-column-collapse-one/index.html">Two Column Collapse One</a><br>
3535

36-
<a href="/components/layout/two-column/index.html">Layout Two Column</a><br>
36+
<a href="/components/layout/two-column/index.html">Two Column</a><br>
3737

3838

3939
nav<br>
4040

41-
<a href="/components/nav/large-title-link-list/index.html">Nav Large Title Link List</a><br>
41+
<a href="/components/nav/large-title-link-list/index.html">Large Title Link List</a><br>
4242

43-
<a href="/components/nav/title-link-list/index.html">Nav Title Link List</a><br>
43+
<a href="/components/nav/title-link-list/index.html">Title Link List</a><br>
4444

4545

4646
</main>

0 commit comments

Comments
 (0)