Skip to content

Commit caebae1

Browse files
wesleycolewesleycole
committed
adding links and link styles
1 parent 8ea112d commit caebae1

File tree

11 files changed

+43
-28
lines changed

11 files changed

+43
-28
lines changed

‎_component/accordion/css/component.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
margin-top: 0;
1515
}
1616

17-
.Accordion-header.Accordion--is-active {
17+
.Accordion-header.is-active {
1818
border-bottom: none;
1919
}
2020

@@ -26,7 +26,7 @@
2626
top: 8px;
2727
}
2828

29-
.Accordion-header.Accordion--is-active:after {
29+
.Accordion-header.is-active:after {
3030
transform: rotate(45deg);
3131
}
3232

@@ -38,6 +38,6 @@
3838
padding: 10px 15px;
3939
}
4040

41-
.Accordion-content.Accordion--is-active {
41+
.Accordion-content.is-active {
4242
display: block;
4343
}

‎_component/accordion/css/component.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
margin-top: 0;
2222
}
2323

24-
&.Accordion--is-active {
24+
&.is-active {
2525
border-bottom: none;
2626

2727
&:after {
@@ -37,7 +37,7 @@
3737
display: none;
3838
padding: 10px 15px;
3939

40-
&.Accordion--is-active {
40+
&.is-active {
4141
display: block;
4242
}
4343
}

‎_component/accordion/js/component.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@
3535
contentLabel = content.getElementsByClassName('Accordion-label')[0];
3636

3737
// Set our active classes
38-
header.classList.toggle('Accordion--is-active');
39-
content.classList.toggle('Accordion--is-active');
38+
header.classList.toggle('is-active');
39+
content.classList.toggle('is-active');
4040

4141
// Focus on the label in the accordion content
4242
contentLabel.focus();
4343

4444
// Let's now set all of our attributes if the accordion is active
45-
if (content.classList.contains('Accordion--is-active')) {
45+
if (content.classList.contains('is-active')) {
4646
header.setAttribute( 'aria-selected', 'true' );
4747
header.setAttribute( 'aria-expanded', 'true' );
4848
content.setAttribute( 'aria-hidden', 'false' );

‎_site/assets/css/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,9 @@ h5 { font-size: 1.5rem; }
163163

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

166+
a { color: #ff4247; }
167+
a:hover { color: #ff0f15; }
168+
166169
/* Code */
167170
code, pre { font-family: "PT Mono", Menlo, "Courier New", monospace; font-size: .8em; }
168171

‎_site/component/accordion/css/component.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
margin-top: 0;
1515
}
1616

17-
.Accordion-header.Accordion--is-active {
17+
.Accordion-header.is-active {
1818
border-bottom: none;
1919
}
2020

@@ -26,7 +26,7 @@
2626
top: 8px;
2727
}
2828

29-
.Accordion-header.Accordion--is-active:after {
29+
.Accordion-header.is-active:after {
3030
transform: rotate(45deg);
3131
}
3232

@@ -38,6 +38,6 @@
3838
padding: 10px 15px;
3939
}
4040

41-
.Accordion-content.Accordion--is-active {
41+
.Accordion-content.is-active {
4242
display: block;
4343
}

‎_site/component/accordion/css/component.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
margin-top: 0;
2222
}
2323

24-
&.Accordion--is-active {
24+
&.is-active {
2525
border-bottom: none;
2626

2727
&:after {
@@ -37,7 +37,7 @@
3737
display: none;
3838
padding: 10px 15px;
3939

40-
&.Accordion--is-active {
40+
&.is-active {
4141
display: block;
4242
}
4343
}

‎_site/component/accordion/index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ <h3 id="css">CSS</h3>
225225
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
226226
<span class="p">}</span>
227227

228-
<span class="nc">.Accordion-header.Accordion--is-active</span> <span class="p">{</span>
228+
<span class="nc">.Accordion-header.is-active</span> <span class="p">{</span>
229229
<span class="nl">border-bottom</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
230230
<span class="p">}</span>
231231

@@ -237,7 +237,7 @@ <h3 id="css">CSS</h3>
237237
<span class="nl">top</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
238238
<span class="p">}</span>
239239

240-
<span class="nc">.Accordion-header.Accordion--is-active</span><span class="nd">:after</span> <span class="p">{</span>
240+
<span class="nc">.Accordion-header.is-active</span><span class="nd">:after</span> <span class="p">{</span>
241241
<span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span>
242242
<span class="p">}</span>
243243

@@ -249,7 +249,7 @@ <h3 id="css">CSS</h3>
249249
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">15px</span><span class="p">;</span>
250250
<span class="p">}</span>
251251

252-
<span class="nc">.Accordion-content.Accordion--is-active</span> <span class="p">{</span>
252+
<span class="nc">.Accordion-content.is-active</span> <span class="p">{</span>
253253
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
254254
<span class="p">}</span>
255255
</code></pre>
@@ -279,7 +279,7 @@ <h3 id="sass">Sass</h3>
279279
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
280280
<span class="p">}</span>
281281

282-
<span class="k">&amp;</span><span class="nc">.Accordion--is-active</span> <span class="p">{</span>
282+
<span class="k">&amp;</span><span class="nc">.is-active</span> <span class="p">{</span>
283283
<span class="nl">border-bottom</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
284284

285285
<span class="k">&amp;</span><span class="nd">:after</span> <span class="p">{</span>
@@ -295,7 +295,7 @@ <h3 id="sass">Sass</h3>
295295
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
296296
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">15px</span><span class="p">;</span>
297297

298-
<span class="k">&amp;</span><span class="nc">.Accordion--is-active</span> <span class="p">{</span>
298+
<span class="k">&amp;</span><span class="nc">.is-active</span> <span class="p">{</span>
299299
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
300300
<span class="p">}</span>
301301
<span class="p">}</span>
@@ -341,14 +341,14 @@ <h3>Plugin</h3>
341341
<span class="nx">contentLabel</span> <span class="o">=</span> <span class="nx">content</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'Accordion-label'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
342342

343343
<span class="c1">// Set our active classes</span>
344-
<span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'Accordion--is-active'</span><span class="p">);</span>
345-
<span class="nx">content</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'Accordion--is-active'</span><span class="p">);</span>
344+
<span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'is-active'</span><span class="p">);</span>
345+
<span class="nx">content</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">'is-active'</span><span class="p">);</span>
346346

347347
<span class="c1">// Focus on the label in the accordion content</span>
348348
<span class="nx">contentLabel</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
349349

350350
<span class="c1">// Let's now set all of our attributes if the accordion is active</span>
351-
<span class="k">if</span> <span class="p">(</span><span class="nx">content</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">'Accordion--is-active'</span><span class="p">))</span> <span class="p">{</span>
351+
<span class="k">if</span> <span class="p">(</span><span class="nx">content</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">'is-active'</span><span class="p">))</span> <span class="p">{</span>
352352
<span class="nx">header</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span> <span class="s1">'aria-selected'</span><span class="p">,</span> <span class="s1">'true'</span> <span class="p">);</span>
353353
<span class="nx">header</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span> <span class="s1">'aria-expanded'</span><span class="p">,</span> <span class="s1">'true'</span> <span class="p">);</span>
354354
<span class="nx">content</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span> <span class="s1">'aria-hidden'</span><span class="p">,</span> <span class="s1">'false'</span> <span class="p">);</span>

‎_site/component/accordion/js/component.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@
3535
contentLabel = content.getElementsByClassName('Accordion-label')[0];
3636

3737
// Set our active classes
38-
header.classList.toggle('Accordion--is-active');
39-
content.classList.toggle('Accordion--is-active');
38+
header.classList.toggle('is-active');
39+
content.classList.toggle('is-active');
4040

4141
// Focus on the label in the accordion content
4242
contentLabel.focus();
4343

4444
// Let's now set all of our attributes if the accordion is active
45-
if (content.classList.contains('Accordion--is-active')) {
45+
if (content.classList.contains('is-active')) {
4646
header.setAttribute( 'aria-selected', 'true' );
4747
header.setAttribute( 'aria-expanded', 'true' );
4848
content.setAttribute( 'aria-hidden', 'false' );

‎_site/index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,11 @@ <h1 id="site-components">Site Components</h1>
121121
<p>We were so inspired by 10up’s Component library that we decided to build our own. Since 10up opensourced their component library, we’ve taken the parts about it that we love and incorporated it to work really well with our new starter theme.</p>
122122

123123
<h3 id="our-setup">Our setup</h3>
124-
<p>Our setup is most likely different from yours, so there will be some difference in how we handle some things from what you might prefer. We have tried to implement an overall structure that can be utilized within different formats. For example, we are switching to working primarily with Timber and Twig for building our these. You will see markup snippets for each component with Twig samples.</p>
124+
<p>Our setup is most likely different from yours, so there will be some difference in how we handle some things from what you might prefer. We have tried to implement an overall structure that can be utilized within different formats. For example, we are switching to working primarily with <a href="https://www.upstatement.com/timber/">Timber</a> and <a href="https://twig.sensiolabs.org/">Twig</a> for building our these. You will see markup snippets for each component with Twig samples.</p>
125125

126-
<p>We also use Advanced Custom Fields (ACF) for handling all of our custom fields. For components that might require some ACF fields, we will be providing the field IDs that will work with the code snippets and the types of fields that we recommend.</p>
126+
<p>We also use <a href="http://advancedcustomfields.com">Advanced Custom Fields (ACF)</a> for handling all of our custom fields. For components that might require some ACF fields, we will be providing the field IDs that will work with the code snippets and the types of fields that we recommend.</p>
127+
128+
<p>One other thing that you might notice that is strange is the way we write our classes. We have been following the <a href="https://suitcss.github.io/">Suit CSS</a> methodology. We find it more readable and follows the component structure found in many new Javascript libraries.</p>
127129

128130
<div class="Categories">
129131

‎assets/css/sass/base/_typography.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,12 @@ ol {
2929
font-size: 1.8rem;
3030
margin: 14px 0px 18px 0px;
3131
transition: all $base-duration $base-timing;
32+
}
33+
34+
a {
35+
color: $red;
36+
37+
&:hover {
38+
color: darken($red, 10);
39+
}
3240
}

0 commit comments

Comments
 (0)