Skip to content

Commit e0d7ee9

Browse files
johnojohno
committed
Merge pull request tachyons-css#20 from tachyons-css/code-highlight
Code highlighting, component titles, and dir cleanup
2 parents 65e024b + 26c7404 commit e0d7ee9

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)