Skip to content

Commit 1580669

Browse files
wesleycolewesleycole
committed
syntax highlighting is working
1 parent 6ef6217 commit 1580669

40 files changed

+1478
-33
lines changed

‎_component/accordion/component-twig.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% raw %}<div>
2+
{{site.title}}
3+
</div>{% endraw %}

‎_component/accordion/component-wp.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<?php the_title(); ?>
3+
</div>

‎_component/accordion/component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<h2>HTML</h2>
3+
</div>

‎_component/accordion/example.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="component.css" />
7+
<link rel="stylesheet" href="../../assets/css/examples.css" />
8+
9+
<script>
10+
/* Add to <head> */
11+
// Remove no-js and add 'js' to the HTML
12+
document.documentElement.className = document.documentElement.className.replace('no-js', ' ');
13+
document.documentElement.className += ' js ';
14+
</script>
15+
16+
</head>
17+
<body>
18+
19+
<h2>Testing</h2>
20+
21+
<script src="component.js"></script>
22+
<script src="component-usage.js"></script>
23+
</body>
24+
</html>

‎_component/accordion/index.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ title: Accordion
33
layout: component
44
path_slug: accordion
55
category: ui
6+
iframe_height: medium
67
---
78

8-
## Accordion
9+
Accordions are used widely throughout our sites. Often, they are used as a ACF Flexible Section.
10+
11+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
12+
13+
{% include partials/tabs.md %}

‎_component/blogpost/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Blog Post
3+
layout: component
34
path_slug: blogpost
45
category: content
56
---

‎_component/blogroll/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Blog Roll
3+
layout: component
34
path_slug: blogroll
45
category: content
56
---

‎_component/button/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Button
3+
layout: component
34
path_slug: button
45
category: ui
56
---

‎_component/image/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Image
3+
layout: component
34
path_slug: image
45
category: content
56
---

‎_component/logo/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Logo
3+
layout: component
34
path_slug: logo
45
category: content
56
---

‎_component/tabs/index.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Tabs
3+
layout: component
4+
layout: component
5+
path_slug: tabs
6+
category: ui
7+
iframe_height: medium
8+
---

‎_component/testimonial/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Testimonial
3+
layout: component
34
path_slug: testimonial
45
category: content
56
---

‎_includes/partials/tabs.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div id="html-tab"></div>
2+
```html
3+
{% include_relative component.html %}
4+
```
5+
6+
```php
7+
{% include_relative component-wp.html %}
8+
```
9+
10+
```twig
11+
{% include_relative component-twig.html %}
12+
```

‎_layouts/component.md

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
---
22
layout: default
33
---
4-
<div class="content">
5-
<div class="component">
6-
{% if page.title %}
7-
<h2>{{ page.title }}</h2>
8-
{% endif %}
9-
10-
{{ content }}
11-
</div>
4+
<div class="Component">
5+
{% if page.title %}
6+
<h1>{{ page.title }}</h1>
7+
{% endif %}
8+
9+
{{ content }}
1210
</div>

‎_layouts/default.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
<div class="SiteContainer">
2121
<nav class="SiteNav">
2222
<div class="Logo">
23-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 69.08"><defs><style>.a{fill:#fff;}</style></defs><title>objectiv-wordmark-white-fill</title><path class="a" d="M81.5,17.31a19.44,19.44,0,0,0-8.06-1.86c-4.27,0-8.14,1.17-11.1,4.34V4H50.89V55h11V50.95H62c2,3.72,7,5.38,11,5.38,11.93,0,19.3-9.17,19.3-20.68C92.25,27.72,88.87,20.75,81.5,17.31ZM71.22,45.64c-5.58,0-9.31-4.41-9.31-9.86a9.45,9.45,0,1,1,18.89.07A9.52,9.52,0,0,1,71.22,45.64Z"/><path class="a" d="M98.81,53.74c0,3-.21,5.79-4.07,5.79H93.22v9.55h2.83c11.17,0,14.2-4.34,14.2-14.89V16.75H98.81Z"/><path class="a" d="M137.07,15.44C125.83,15.44,117,24.89,117,36a20.3,20.3,0,0,0,20.27,20.27c8.62,0,15.37-5.58,18.68-13.24H144.24a8.21,8.21,0,0,1-7,3.59c-4.48,0-8.27-2.69-9-7.24H157a15,15,0,0,0,.28-3C157.27,24.82,148.79,15.44,137.07,15.44Zm-8.62,16.2c.9-4.14,4.55-6.55,8.69-6.55s7.79,2.41,8.69,6.55Z"/><path class="a" d="M182.37,45.57c-5.58,0-9.1-4.34-9.1-9.72,0-5.17,3.31-9.72,8.82-9.72a8.81,8.81,0,0,1,8.55,5.38h11.58c-2-9.72-10.48-16.06-20.27-16.06a20.08,20.08,0,0,0-20.2,20.34,20.55,20.55,0,0,0,40.54,4.69H190.64A8.8,8.8,0,0,1,182.37,45.57Z"/><polygon class="a" points="222.29 4 210.85 4 210.85 16.75 205.2 16.75 205.2 25.76 210.85 25.76 210.85 55.02 222.29 55.02 222.29 25.76 227.81 25.76 227.81 16.75 222.29 16.75 222.29 4"/><rect class="a" x="232.78" y="16.75" width="11.44" height="38.26"/><polygon class="a" points="276.14 16.75 268.83 40.61 268.7 40.61 261.39 16.75 249.53 16.75 263.25 55.02 274.21 55.02 288 16.75 276.14 16.75"/><circle class="a" cx="104.53" cy="6.45" r="6.45"/><circle class="a" cx="238.5" cy="6.45" r="6.45"/><path class="a" d="M18.72,3A26.39,26.39,0,0,0,0,10.79l8.39,8.39A14.6,14.6,0,1,1,29,39.83l8.39,8.39A26.47,26.47,0,0,0,18.72,3Z"/><path class="a" d="M4.12,29.51A14.6,14.6,0,0,0,29,39.83L8.39,19.18A14.56,14.56,0,0,0,4.12,29.51Z"/></svg>
23+
<a href="{{ site.baseurl }}/">
24+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 69.08"><defs><style>.a{fill:#fff;}</style></defs><title>objectiv-wordmark-white-fill</title><path class="a" d="M81.5,17.31a19.44,19.44,0,0,0-8.06-1.86c-4.27,0-8.14,1.17-11.1,4.34V4H50.89V55h11V50.95H62c2,3.72,7,5.38,11,5.38,11.93,0,19.3-9.17,19.3-20.68C92.25,27.72,88.87,20.75,81.5,17.31ZM71.22,45.64c-5.58,0-9.31-4.41-9.31-9.86a9.45,9.45,0,1,1,18.89.07A9.52,9.52,0,0,1,71.22,45.64Z"/><path class="a" d="M98.81,53.74c0,3-.21,5.79-4.07,5.79H93.22v9.55h2.83c11.17,0,14.2-4.34,14.2-14.89V16.75H98.81Z"/><path class="a" d="M137.07,15.44C125.83,15.44,117,24.89,117,36a20.3,20.3,0,0,0,20.27,20.27c8.62,0,15.37-5.58,18.68-13.24H144.24a8.21,8.21,0,0,1-7,3.59c-4.48,0-8.27-2.69-9-7.24H157a15,15,0,0,0,.28-3C157.27,24.82,148.79,15.44,137.07,15.44Zm-8.62,16.2c.9-4.14,4.55-6.55,8.69-6.55s7.79,2.41,8.69,6.55Z"/><path class="a" d="M182.37,45.57c-5.58,0-9.1-4.34-9.1-9.72,0-5.17,3.31-9.72,8.82-9.72a8.81,8.81,0,0,1,8.55,5.38h11.58c-2-9.72-10.48-16.06-20.27-16.06a20.08,20.08,0,0,0-20.2,20.34,20.55,20.55,0,0,0,40.54,4.69H190.64A8.8,8.8,0,0,1,182.37,45.57Z"/><polygon class="a" points="222.29 4 210.85 4 210.85 16.75 205.2 16.75 205.2 25.76 210.85 25.76 210.85 55.02 222.29 55.02 222.29 25.76 227.81 25.76 227.81 16.75 222.29 16.75 222.29 4"/><rect class="a" x="232.78" y="16.75" width="11.44" height="38.26"/><polygon class="a" points="276.14 16.75 268.83 40.61 268.7 40.61 261.39 16.75 249.53 16.75 263.25 55.02 274.21 55.02 288 16.75 276.14 16.75"/><circle class="a" cx="104.53" cy="6.45" r="6.45"/><circle class="a" cx="238.5" cy="6.45" r="6.45"/><path class="a" d="M18.72,3A26.39,26.39,0,0,0,0,10.79l8.39,8.39A14.6,14.6,0,1,1,29,39.83l8.39,8.39A26.47,26.47,0,0,0,18.72,3Z"/><path class="a" d="M4.12,29.51A14.6,14.6,0,0,0,29,39.83L8.39,19.18A14.56,14.56,0,0,0,4.12,29.51Z"/></svg>
25+
</a>
2426
</div>
2527
<h1 class="screen-reader-text">Objectiv Component Library</h1>
2628
<aside>

‎_site/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# Objectiv Component Library
1+
# Objectiv Component Library
2+
3+
https://objectivco.github.io/component-library/

‎_site/assets/css/main.css

+229
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,228 @@ h5 { font-size: 1.5rem; }
161161

162162
p, ul, ol { color: #555; font-size: 1.8rem; margin: 14px 0px 18px 0px; transition: all 0.3s ease-in-out; }
163163

164+
/* Code */
165+
code, pre { font-family: "PT Mono", Menlo, "Courier New", monospace; font-size: .8em; }
166+
167+
code { padding: .25em .5em; color: #005980; background-color: #efefef; border-radius: .2rem; }
168+
169+
pre { display: block; line-height: 1.4; margin: 0 0 1rem; overflow: auto; white-space: pre; }
170+
171+
pre code { padding: 0; color: inherit; background-color: transparent; border: 0; }
172+
173+
.highlight { margin: 0; font-size: 1.6rem; }
174+
175+
.highlight pre { margin-bottom: 0; }
176+
177+
.highlight + .highlight { margin-top: 1rem; }
178+
179+
.highlight { margin: 0 0 1rem; padding: .75rem; overflow-x: auto; }
180+
181+
.highlight .hll { background-color: #ffffcc; }
182+
183+
.highlight { background: #f0f0f0; }
184+
185+
.highlight .c { color: #60a0b0; font-style: italic; }
186+
187+
/* Comment */
188+
.highlight .err { border: 1px solid #FF0000; }
189+
190+
/* Error */
191+
.highlight .k { color: #007020; font-weight: bold; }
192+
193+
/* Keyword */
194+
.highlight .o { color: #666666; }
195+
196+
/* Operator */
197+
.highlight .ch { color: #60a0b0; font-style: italic; }
198+
199+
/* Comment.Hashbang */
200+
.highlight .cm { color: #60a0b0; font-style: italic; }
201+
202+
/* Comment.Multiline */
203+
.highlight .cp { color: #007020; }
204+
205+
/* Comment.Preproc */
206+
.highlight .cpf { color: #60a0b0; font-style: italic; }
207+
208+
/* Comment.PreprocFile */
209+
.highlight .c1 { color: #60a0b0; font-style: italic; }
210+
211+
/* Comment.Single */
212+
.highlight .cs { color: #60a0b0; background-color: #fff0f0; }
213+
214+
/* Comment.Special */
215+
.highlight .gd { color: #A00000; }
216+
217+
/* Generic.Deleted */
218+
.highlight .ge { font-style: italic; }
219+
220+
/* Generic.Emph */
221+
.highlight .gr { color: #FF0000; }
222+
223+
/* Generic.Error */
224+
.highlight .gh { color: #000080; font-weight: bold; }
225+
226+
/* Generic.Heading */
227+
.highlight .gi { color: #00A000; }
228+
229+
/* Generic.Inserted */
230+
.highlight .go { color: #888888; }
231+
232+
/* Generic.Output */
233+
.highlight .gp { color: #c65d09; font-weight: bold; }
234+
235+
/* Generic.Prompt */
236+
.highlight .gs { font-weight: bold; }
237+
238+
/* Generic.Strong */
239+
.highlight .gu { color: #800080; font-weight: bold; }
240+
241+
/* Generic.Subheading */
242+
.highlight .gt { color: #0044DD; }
243+
244+
/* Generic.Traceback */
245+
.highlight .kc { color: #007020; font-weight: bold; }
246+
247+
/* Keyword.Constant */
248+
.highlight .kd { color: #007020; font-weight: bold; }
249+
250+
/* Keyword.Declaration */
251+
.highlight .kn { color: #007020; font-weight: bold; }
252+
253+
/* Keyword.Namespace */
254+
.highlight .kp { color: #007020; }
255+
256+
/* Keyword.Pseudo */
257+
.highlight .kr { color: #007020; font-weight: bold; }
258+
259+
/* Keyword.Reserved */
260+
.highlight .kt { color: #902000; }
261+
262+
/* Keyword.Type */
263+
.highlight .m { color: #40a070; }
264+
265+
/* Literal.Number */
266+
.highlight .s { color: #4070a0; }
267+
268+
/* Literal.String */
269+
.highlight .na { color: #4070a0; }
270+
271+
/* Name.Attribute */
272+
.highlight .nb { color: #007020; }
273+
274+
/* Name.Builtin */
275+
.highlight .nc { color: #0e84b5; font-weight: bold; }
276+
277+
/* Name.Class */
278+
.highlight .no { color: #60add5; }
279+
280+
/* Name.Constant */
281+
.highlight .nd { color: #555555; font-weight: bold; }
282+
283+
/* Name.Decorator */
284+
.highlight .ni { color: #d55537; font-weight: bold; }
285+
286+
/* Name.Entity */
287+
.highlight .ne { color: #007020; }
288+
289+
/* Name.Exception */
290+
.highlight .nf { color: #06287e; }
291+
292+
/* Name.Function */
293+
.highlight .nl { color: #002070; font-weight: bold; }
294+
295+
/* Name.Label */
296+
.highlight .nn { color: #0e84b5; font-weight: bold; }
297+
298+
/* Name.Namespace */
299+
.highlight .nt { color: #062873; font-weight: bold; }
300+
301+
/* Name.Tag */
302+
.highlight .nv { color: #bb60d5; }
303+
304+
/* Name.Variable */
305+
.highlight .ow { color: #007020; font-weight: bold; }
306+
307+
/* Operator.Word */
308+
.highlight .w { color: #bbbbbb; }
309+
310+
/* Text.Whitespace */
311+
.highlight .mb { color: #40a070; }
312+
313+
/* Literal.Number.Bin */
314+
.highlight .mf { color: #40a070; }
315+
316+
/* Literal.Number.Float */
317+
.highlight .mh { color: #40a070; }
318+
319+
/* Literal.Number.Hex */
320+
.highlight .mi { color: #40a070; }
321+
322+
/* Literal.Number.Integer */
323+
.highlight .mo { color: #40a070; }
324+
325+
/* Literal.Number.Oct */
326+
.highlight .sa { color: #4070a0; }
327+
328+
/* Literal.String.Affix */
329+
.highlight .sb { color: #4070a0; }
330+
331+
/* Literal.String.Backtick */
332+
.highlight .sc { color: #4070a0; }
333+
334+
/* Literal.String.Char */
335+
.highlight .dl { color: #4070a0; }
336+
337+
/* Literal.String.Delimiter */
338+
.highlight .sd { color: #4070a0; font-style: italic; }
339+
340+
/* Literal.String.Doc */
341+
.highlight .s2 { color: #4070a0; }
342+
343+
/* Literal.String.Double */
344+
.highlight .se { color: #4070a0; font-weight: bold; }
345+
346+
/* Literal.String.Escape */
347+
.highlight .sh { color: #4070a0; }
348+
349+
/* Literal.String.Heredoc */
350+
.highlight .si { color: #70a0d0; font-style: italic; }
351+
352+
/* Literal.String.Interpol */
353+
.highlight .sx { color: #c65d09; }
354+
355+
/* Literal.String.Other */
356+
.highlight .sr { color: #235388; }
357+
358+
/* Literal.String.Regex */
359+
.highlight .s1 { color: #4070a0; }
360+
361+
/* Literal.String.Single */
362+
.highlight .ss { color: #517918; }
363+
364+
/* Literal.String.Symbol */
365+
.highlight .bp { color: #007020; }
366+
367+
/* Name.Builtin.Pseudo */
368+
.highlight .fm { color: #06287e; }
369+
370+
/* Name.Function.Magic */
371+
.highlight .vc { color: #bb60d5; }
372+
373+
/* Name.Variable.Class */
374+
.highlight .vg { color: #bb60d5; }
375+
376+
/* Name.Variable.Global */
377+
.highlight .vi { color: #bb60d5; }
378+
379+
/* Name.Variable.Instance */
380+
.highlight .vm { color: #bb60d5; }
381+
382+
/* Name.Variable.Magic */
383+
.highlight .il { color: #40a070; }
384+
385+
/* Literal.Number.Integer.Long */
164386
.SiteContainer { padding-left: 30rem; }
165387

166388
.SiteNav { background: #ff4247; bottom: 0; left: 0; position: fixed; right: auto; top: 0; width: 30rem; overflow-y: scroll; }
@@ -190,3 +412,10 @@ p, ul, ol { color: #555; font-size: 1.8rem; margin: 14px 0px 18px 0px; transitio
190412

191413
.SiteNav .ComponentList-item > a { border-radius: 4px; color: #fff; padding: 5px 10px; }
192414
.SiteNav .ComponentList-item > a:hover { background: rgba(0, 0, 0, 0.1); }
415+
416+
iframe { width: 100%; border: 5px solid #eee; padding: 0; margin: 20px auto 0; display: block; max-width: calc(100vw - 45px); position: relative; transition: width linear .2s, transform linear .2s; }
417+
iframe.h-small { height: 100px; }
418+
iframe.h-medium { height: 350px; }
419+
iframe.h-large { height: 550px; }
420+
iframe.w-iframe__small { width: 400px; }
421+
iframe.w-iframe__medium { width: 700px; }

0 commit comments

Comments
 (0)