Skip to content

Commit 757320b

Browse files
gabrielakhannagabrielakhanna
authored
Merge pull request #32 from mcclatchy/PE-392-header-dom-rework
PE-392 header dom rework
2 parents cb8202e + 9c0b09b commit 757320b

File tree

10 files changed

+28
-29
lines changed

10 files changed

+28
-29
lines changed

‎content/decks/section.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616
{{< section-nav >}}
1717

1818

19-
{{- .Page.Scratch.Set "cardIndex" 0 }} <!-- Explicitly set the index to zero -->
20-
{{< card class="lead-item" headline-size="h1" >}}
19+
{{< card class="lead-item" headline-size="h1" >}}
2120

2221
<div class="zone two-rows" data-type="ad">
2322
<fake-ad size="[300,600]"></fake-ad>

‎layouts/shortcodes/big-news.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<section class="big-news paper" data-tb-region="big news">
22
<a href="#" class="label"><h2 class="h5">HURRICANE FLORENCE</h2></a>
3-
<h5 class="latest">LATEST NEWS</h5>
3+
<h5 class="latest h3">LATEST NEWS</h5>
44
<div class="grid" data-children="3">
55
<article class="package" data-tb-region-item>
6-
<h3><a href="#" data-tb-link data-tb-title>Looking for water or gas? Here are some places that have them </a></h3>
6+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Looking for water or gas? Here are some places that have them </a></h3>
77
<time data-tb-date>February 23, 2018 2PM</time>
88
</article>
99
<article class="package" data-tb-region-item>
10-
<h3><a href="#" data-tb-link data-tb-title>Hurricane Irma makes landfall in the Carribean: where's she headed next</a></h3>
10+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Hurricane Irma makes landfall in the Carribean: where's she headed next</a></h3>
1111
<time data-tb-date>February 23, 2018 2PM</time>
1212
</article>
1313
<article class="package" data-tb-region-item>
14-
<h3><a href="#" data-tb-link data-tb-title>Hurricane Irma's menacing eye strenghens</a></h3>
14+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Hurricane Irma's menacing eye strenghens</a></h3>
1515
<time data-tb-date>February 23, 2018 2PM</time>
1616
</article>
1717
</div>
@@ -30,7 +30,7 @@ <h1 class="h1"><a href="#" data-tb-link data-tb-title>Hurricane Florence now a C
3030
<a href="#" data-tb-link><img src="https://www.mcclatchydc.com/news/nation-world/national/7g1ahc/picture174166396/alternates/LANDSCAPE_640/Hurricane%20Irma%202"></a>
3131
</figure>
3232
<div class="package">
33-
<h3><a href="#" data-tb-link data-tb-title>Looking for water or gas? Here are some places that have them </a></h3>
33+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Looking for water or gas? Here are some places that have them </a></h3>
3434
<time data-tb-date>February 23, 2018 2PM</time>
3535
</div>
3636
</article>
@@ -39,7 +39,7 @@ <h3><a href="#" data-tb-link data-tb-title>Looking for water or gas? Here are so
3939
<a href="#" data-tb-link><img src="https://www.miamiherald.com/news/weather/hurricane/c3x8sb/picture172257337/alternates/LANDSCAPE_640/Coconut%20Grove%20Irma%2004%20EKM%20(1)"></a>
4040
</figure>
4141
<div class="package">
42-
<h3><a href="#" data-tb-link data-tb-title>Hurricane Irma makes landfall in the Carribean: where's she headed next</a></h3>
42+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Hurricane Irma makes landfall in the Carribean: where's she headed next</a></h3>
4343
<time data-tb-date>February 23, 2018 2PM</time>
4444
</div>
4545
</article>
@@ -48,7 +48,7 @@ <h3><a href="#" data-tb-link data-tb-title>Hurricane Irma makes landfall in the
4848
<a href="#" data-tb-link><img src="https://www.mcclatchydc.com/news/nation-world/national/w763tv/picture172700996/alternates/LANDSCAPE_640/AP_17254522905028"></a>
4949
</figure>
5050
<div class="package">
51-
<h3><a href="#" data-tb-link data-tb-title>Hurrican Irma makes landfall in the Carribean: where's she headed next</a></h3>
51+
<h3 class="h4"><a href="#" data-tb-link data-tb-title>Hurrican Irma makes landfall in the Carribean: where's she headed next</a></h3>
5252
<time data-tb-date>February 23, 2018 2PM</time>
5353
</div>
5454
</article>

‎layouts/shortcodes/card.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{- $class := .Get "class" -}}
2-
{{- $headlineSize := default "h3" (.Get "headline-size") -}}
2+
{{- $headlineSize := default "h4" (.Get "headline-size") -}}
33
{{- $taboola := .Get "taboola" }}
44

55
{{- .Page.Scratch.Add "cardIndex" 1 }}
@@ -11,7 +11,7 @@
1111
<article class="card {{ $class }}" {{- if $taboola }} data-tb-region-item {{- end }}>
1212
{{- if in $class "lead-item" }}
1313
<div class="package">
14-
<h2 class="caps h6">
14+
<h2 class="h3">
1515
<a class="kicker" href="#" {{- if $taboola }} data-tb-category {{- end }}>{{ .home_section.name }}</a>
1616
</h2>
1717
<h3 class="{{ $headlineSize }}">
@@ -37,7 +37,7 @@ <h3 class="{{ $headlineSize }}">
3737
</a>
3838
</figure>
3939
<div class="package">
40-
<h2 class="caps h6">
40+
<h2 class="h6">
4141
<a class="kicker" href="#" {{- if $taboola }} data-tb-category {{- end }}>{{ .home_section.name }}</a>
4242
</h2>
4343
<h3 class="{{ $headlineSize }}">

‎layouts/shortcodes/digest.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="digest">
77
<div class="paper" {{- with $region }} data-tb-region="{{ $region }}" {{- end }}>
88
<a href="#" class="label {{ $label }}">
9-
<span class="h5">{{ $kicker }}</span>
9+
<span class="h3">{{ $kicker }}</span>
1010
</a>
1111
{{- with (index .Site.Data $feed).items }}
1212
{{- range $index, $story := first 5 . }}
@@ -20,7 +20,7 @@
2020
</figure>
2121
{{- end }}
2222
<div class="package">
23-
<h2 class="h3"><a href="#" {{- with $region }} data-tb-title data-tb-link {{- end }}>{{ $story.title }}</a></h2>
23+
<h2 class="h4"><a href="#" {{- with $region }} data-tb-title data-tb-link {{- end }}>{{ $story.title }}</a></h2>
2424
{{- if and (eq $label "sticky") (eq $index 0) }}
2525
<p class="summary">{{ .summary }}</p>
2626
{{- end }}

‎layouts/shortcodes/read-next.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{- $class := .Get "class" }}
22

33
<div class="card read-next {{ $class }}">
4-
<div class="label sticky"><span class="h5">READ NEXT</span></div>
4+
<div class="label sticky"><span class="h3">READ NEXT</span></div>
55
<figure>
66
<img src="https://www.kansascity.com/living/food-drink/come-into-my-kitchen/tl1ycf/picture205504244/ALTERNATES/LANDSCAPE_1140/0321%20cimk%20kuwata%2003022018%20s%20%284%29" alt="Lorem ipsum dolor sit amet" width="1140" height="161" loading="lazy">
77
</figure>

‎layouts/shortcodes/series-nav.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div>
22
<div class="series-nav package story-module">
3-
<span class="h6">More from this series</span>
3+
<span class="h3">More from this series</span>
44
<hr>
5-
<h2 class="h3">Series headline goes here</h2>
5+
<h2 class="h4">Series headline goes here</h2>
66
<p class="summary">Nullam ultricies hendrerit est a bibendum. Suspendisse scelerisque vitae nisi et consequat. Vivamus cursus vitae ante eu tristique. Sed nec velit maximus diam laoreet venenatis.</p>
77
<div class="package">
88
<span class="h5 expander" onclick="this.classList.toggle('open')">EXPAND ALL</span>

‎layouts/shortcodes/video-digest.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="digest">
44
<div class="paper">
55
<a href="#" class="label">
6-
<span class="h5">{{ $kicker }}</span>
6+
<span class="h3">{{ $kicker }}</span>
77
</a>
88
<div class="package" style="padding-bottom: 0;">
99
<p class="summary gray" style="margin: 0;">McClatchy provides these videos in partnership with content providers. McClatchy earns revenue through this relationship.</p>
@@ -12,35 +12,35 @@
1212
<div class="square-img">
1313
<img src="/img/kitten.jpg">
1414
</div>
15-
<h2 class="h3"><a href="#">Kudlow joins White House that sorely needs cooler heads to prevail</a></h2>
15+
<h2 class="h4"><a href="#">Kudlow joins White House that sorely needs cooler heads to prevail</a></h2>
1616
<time>March 19, 2018 5:34 pm</time>
1717
</article>
1818
<article class="package thumb">
1919
<div class="square-img">
2020
<img src="/img/kitten.jpg">
2121
</div>
22-
<h2 class="h3"><a href="#">The Episcopal Church changed course for our LGBT members</a></h2>
22+
<h2 class="h4"><a href="#">The Episcopal Church changed course for our LGBT members</a></h2>
2323
<time>March 16, 2018 3:42 pm</time>
2424
</article>
2525
<article class="package thumb">
2626
<div class="square-img">
2727
<img src="/img/kitten.jpg">
2828
</div>
29-
<h2 class="h3"><a href="#">The Kansas Republican Party is taking a stance on transgender identity</a></h2>
29+
<h2 class="h4"><a href="#">The Kansas Republican Party is taking a stance on transgender identity</a></h2>
3030
<time>March 16, 2018 3:58 pm</time>
3131
</article>
3232
<article class="package thumb">
3333
<div class="square-img">
3434
<img src="/img/kitten.jpg">
3535
</div>
36-
<h2 class="h3"><a href="#">Letters: Readers discuss teen drinking, tax-cut benefits in Missouri and student protests</a></h2>
36+
<h2 class="h4"><a href="#">Letters: Readers discuss teen drinking, tax-cut benefits in Missouri and student protests</a></h2>
3737
<time>March 16, 2018 4:08 pm</time>
3838
</article>
3939
<article class="package thumb">
4040
<div class="square-img">
4141
<img src="/img/kitten.jpg">
4242
</div>
43-
<h2 class="h3"><a href="#">Administration unveils steps to boost racial equity in govt</a></h2>
43+
<h2 class="h4"><a href="#">Administration unveils steps to boost racial equity in govt</a></h2>
4444
<time>March 16, 2018 4:08 pm</time>
4545
</article>
4646
</div>

‎static/css/atoms.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212

1313
--h1: calc(var(--font-base)*1.55);
1414
--h2: calc(var(--font-base)*1.33);
15-
--h3: calc(var(--font-base)*0.89);
16-
--h4: var(--font-base);
15+
--h3: calc(var(--font-base)*1.11);
16+
--h4: calc(var(--font-base)*0.89);
1717

1818
/* Spacing and alignment */
1919
--space: 20px;
@@ -182,7 +182,7 @@ summary, .summary {
182182
line-height: 1.5em;
183183
}
184184

185-
.label, .label .h5 {
185+
.label, .label .h3 {
186186
font: bold 20px/1em var(--sans);
187187
text-transform: uppercase;
188188
color: var(--text-color);

‎static/css/cards/grid.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121

2222
.grid .lead-item .kicker {
23-
font-size: 1.11rem;
23+
font-size: var(--h3);
2424
}
2525

2626
.grid .lead-item .summary,

‎static/css/cards/related-stories.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
}
99

1010
.related-stories h3 {
11-
font-size: 0.89rem;
11+
font-size: var(--h4);
1212
}
1313

1414
.related-stories h5 {
15-
font-size: 1.11rem;
15+
font-size: var(--h3);
1616
text-transform: uppercase;
1717
margin-top: 0;
1818
margin-bottom: var(--space);

0 commit comments

Comments
 (0)