@data-visuals/create 7.6.4 → 7.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/__common__/app/styles/components/_graphic.scss +1 -1
- package/templates/__common__/app/templates/includes/figma2html-config.html +1 -1
- package/templates/__common__/config/tasks/graphics-meta.js +2 -0
- package/templates/__common__/config/tasks/parse-figma2html.js +10 -5
- package/templates/feature/app/index.html +25 -0
- package/templates/feature/app/styles/components/_authors.scss +15 -0
- package/templates/feature/app/styles/components/_brief-promo.scss +27 -0
- package/templates/feature/app/styles/components/_images.scss +19 -0
- package/templates/feature/app/styles/components/_related-content.scss +39 -0
- package/templates/feature/app/styles/main-queso.scss +4 -0
- package/templates/feature/app/templates/includes/authors.html +98 -0
- package/templates/feature/app/templates/includes/brief-promo.html +36 -0
- package/templates/feature/app/templates/includes/contributors.html +85 -0
- package/templates/feature/app/templates/includes/svg-defs.html +6 -2
- package/templates/feature/app/templates/includes/trust-project.html +34 -0
- package/templates/feature/app/templates/macros/processors-queso.html +32 -0
package/package.json
CHANGED
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
if (frames.length == 2) {
|
|
22
22
|
style.textContent = '#f2h-frame-664 { display: block !important; } #f2h-frame-320 { display: none !important; } @media (max-width: 663px) { #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
|
|
23
23
|
} else {
|
|
24
|
-
style.textContent = '#f2h-frame-
|
|
24
|
+
style.textContent = '#f2h-frame-1140 { display: block !important; } #f2h-frame-664, #f2h-frame-320 { display: none !important; } @media (max-width: 1039px) { #f2h-frame-1140, #f2h-frame-320 { display: none !important; } #f2h-frame-664 { display: block !important; }} @media (max-width: 663px) { #f2h-frame-1140, #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
|
|
25
25
|
}
|
|
26
26
|
</script>
|
|
@@ -281,6 +281,8 @@ module.exports = async localURL => {
|
|
|
281
281
|
const browser = await puppeteer
|
|
282
282
|
.launch({
|
|
283
283
|
executablePath: process.env.CHROME_INSTALL_PATH || CHROME_INSTALL_PATH,
|
|
284
|
+
// Hot fix on puppeteer in Feb 2025
|
|
285
|
+
headless: false,
|
|
284
286
|
})
|
|
285
287
|
.catch(err => {
|
|
286
288
|
logErrorMessage(err);
|
|
@@ -118,13 +118,18 @@ const organizeFiles = async file => {
|
|
|
118
118
|
|
|
119
119
|
// main function
|
|
120
120
|
module.exports = async () => {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
let figma2htmlExports;
|
|
122
|
+
try {
|
|
123
|
+
// check if a figma2html-exports directory exists in the workspace directory
|
|
124
|
+
// if so, extract zip files and move files
|
|
125
|
+
figma2htmlExports = fs.readdirSync('workspace/figma2html-exports');
|
|
126
|
+
figma2htmlExports.forEach(file => {
|
|
124
127
|
if (file.includes('.zip')) {
|
|
125
128
|
organizeFiles(file);
|
|
126
129
|
}
|
|
127
|
-
})
|
|
128
|
-
})
|
|
130
|
+
})
|
|
131
|
+
} catch (err) {
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
129
134
|
};
|
|
130
135
|
|
|
@@ -51,6 +51,11 @@
|
|
|
51
51
|
|
|
52
52
|
<p class="t-copy">Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.</p>
|
|
53
53
|
|
|
54
|
+
{# Brief promo #}
|
|
55
|
+
{% include "includes/brief-promo.html" %}
|
|
56
|
+
|
|
57
|
+
<p class="t-copy">Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.</p>
|
|
58
|
+
|
|
54
59
|
<h2 class="t-copy t-copy--subheader">{{ 'A cool subhead here' | widont }}</h2>
|
|
55
60
|
|
|
56
61
|
<p class="t-copy">Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.</p>
|
|
@@ -70,10 +75,30 @@
|
|
|
70
75
|
</div>
|
|
71
76
|
|
|
72
77
|
{{ ad('gray', 'footer') }}
|
|
78
|
+
|
|
79
|
+
{# Authors and contributors #}
|
|
80
|
+
{% include "includes/authors.html" %}
|
|
81
|
+
{% if context['contributors'] %}
|
|
82
|
+
{% include "includes/contributors.html" %}
|
|
83
|
+
{% endif %}
|
|
84
|
+
|
|
85
|
+
{# Trust project #}
|
|
86
|
+
{% include "includes/trust-project.html" %}
|
|
73
87
|
{% endblock content %}
|
|
74
88
|
</article>
|
|
75
89
|
</main>
|
|
76
90
|
<aside>
|
|
91
|
+
{# Related story topics #}
|
|
92
|
+
<section id="related-story-topics" class="c-plugin c-plugin--default c-plugin--narrow is-hidden-print">
|
|
93
|
+
<h2 class="t-size-s has-xs-btm-marg">Explore related story topics</h2>
|
|
94
|
+
<p class="c-tags l-flex">
|
|
95
|
+
{% for topic in context['related_story_topics'] %}
|
|
96
|
+
<a href="{{ topic['topic_link'] }}" ga-event-category="article-tag" class="c-tag c-tag__inner has-bg-white-off is-rounded-b">{{ topic['topic_title'] }}</a>
|
|
97
|
+
{% endfor %}
|
|
98
|
+
</p>
|
|
99
|
+
</section>
|
|
100
|
+
|
|
101
|
+
{# Related stories #}
|
|
77
102
|
<div class="related-content l-container has-page-padding" id="related-content-container"></div>
|
|
78
103
|
<div id="ribbon-container"></div>
|
|
79
104
|
</aside>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// brief promo
|
|
2
|
+
#brief-promo {
|
|
3
|
+
.c-prompt {
|
|
4
|
+
margin: 3.125rem auto;
|
|
5
|
+
background-color: #000;
|
|
6
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.c-prompt__content {
|
|
10
|
+
gap: 1.25rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-mini-form .c-button {
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
font-size: 0.83em;
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.has-xs-btm-marg {
|
|
20
|
+
margin-bottom: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.c-mini-form {
|
|
24
|
+
display: block;
|
|
25
|
+
width: 80%;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
figcaption {
|
|
2
|
+
font-size: 13.5px;
|
|
3
|
+
max-width: 664px;
|
|
4
|
+
color: #4a4a4a;
|
|
5
|
+
margin: 0 auto;
|
|
6
|
+
padding: calc(0.85rem - 10px) 0 0;
|
|
7
|
+
|
|
8
|
+
@media (max-width: 43.5em) {
|
|
9
|
+
padding: calc(0.85rem - 10px) 0.85rem 0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-icon svg {
|
|
14
|
+
position: relative;
|
|
15
|
+
top: 0.15em;
|
|
16
|
+
fill: currentColor;
|
|
17
|
+
height: 1.1em;
|
|
18
|
+
width: 1.1em;
|
|
19
|
+
}
|
|
@@ -76,3 +76,42 @@
|
|
|
76
76
|
letter-spacing: 0.05em;
|
|
77
77
|
text-transform: uppercase;
|
|
78
78
|
}
|
|
79
|
+
|
|
80
|
+
.related-stories {
|
|
81
|
+
.t-links-underlined-hover {
|
|
82
|
+
border-bottom: 0px solid #a1d2df;
|
|
83
|
+
transition: all .15s ease-in-out;
|
|
84
|
+
box-shadow: inset 0 0 #a1d2df;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.t-links-underlined-hover:hover {
|
|
88
|
+
border-bottom: 1px solid #a1d2df;
|
|
89
|
+
box-shadow: inset 0 -2px 0 0 #a1d2df;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// related story topics
|
|
94
|
+
#related-story-topics {
|
|
95
|
+
max-width: 664px;
|
|
96
|
+
margin: 2.5rem auto;
|
|
97
|
+
|
|
98
|
+
@media (max-width: 664px) {
|
|
99
|
+
padding: 0 0.85rem;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.c-tags {
|
|
104
|
+
flex-wrap: wrap;
|
|
105
|
+
gap: .5rem .4rem;
|
|
106
|
+
|
|
107
|
+
.c-tag {
|
|
108
|
+
font-family: $font-sans-serif;
|
|
109
|
+
padding-left: 1rem;
|
|
110
|
+
padding-right: 1rem;
|
|
111
|
+
font-size: .85rem;
|
|
112
|
+
}
|
|
113
|
+
:hover {
|
|
114
|
+
background-color: #348094;
|
|
115
|
+
color: white;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -20,6 +20,10 @@
|
|
|
20
20
|
@import 'components/navbar';
|
|
21
21
|
@import 'components/details';
|
|
22
22
|
@import 'components/ribbon';
|
|
23
|
+
@import 'components/related-content';
|
|
24
|
+
@import 'components/brief-promo';
|
|
25
|
+
@import 'components/images';
|
|
26
|
+
@import 'components/authors';
|
|
23
27
|
@import 'components/chart';
|
|
24
28
|
@import 'components/graphic';
|
|
25
29
|
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<section class="t-copy t-links-underlined is-hidden-print">
|
|
2
|
+
<hr class="has-bg-gray-light has-giant-btm-marg" />
|
|
3
|
+
<h2 class="is-sr-only">Information about the authors</h2>
|
|
4
|
+
|
|
5
|
+
<div class="c-author-info__container l-flex l-flex-column l-ai-center">
|
|
6
|
+
<div
|
|
7
|
+
id="staff-author"
|
|
8
|
+
class="c-author-info__container l-flex l-flex-column"
|
|
9
|
+
>
|
|
10
|
+
{% for author in context['staff_authors'] %}
|
|
11
|
+
<div class="c-author-info__trib-author-container l-flex l-ai-center">
|
|
12
|
+
{% if author['author_photo'] %}
|
|
13
|
+
<a class="t-links-unset" href="{{ author['author_link'] }}">
|
|
14
|
+
<noscript>
|
|
15
|
+
<img
|
|
16
|
+
width="68"
|
|
17
|
+
height="100"
|
|
18
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
19
|
+
src="{{ author['author_photo'] }}"
|
|
20
|
+
/>
|
|
21
|
+
</noscript>
|
|
22
|
+
<img
|
|
23
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
24
|
+
class="l-display-block js-lazy-image has-bg-gray-dark js-lazy-image--loaded"
|
|
25
|
+
data-src="{{ author['author_photo'] }}"
|
|
26
|
+
width="68"
|
|
27
|
+
height="100"
|
|
28
|
+
src="{{ author['author_photo'] }}"
|
|
29
|
+
/>
|
|
30
|
+
</a>
|
|
31
|
+
{% endif %}
|
|
32
|
+
<div>
|
|
33
|
+
<h3 class="has-xxxs-btm-marg t-weight-bold t-size-m">
|
|
34
|
+
<a href="{{ author['author_link'] }}">
|
|
35
|
+
{{ author['author_name'] }}
|
|
36
|
+
</a>
|
|
37
|
+
</h3>
|
|
38
|
+
<h4
|
|
39
|
+
class="has-text-gray-dark t-weight-normal has-b-btm-marg t-size-xs t-sans t-lsp-m t-uppercase"
|
|
40
|
+
>
|
|
41
|
+
{{ author['author_title'] }}
|
|
42
|
+
</h4>
|
|
43
|
+
<div
|
|
44
|
+
class="c-author-info__contacts-container l-flex l-flex-column t-size-xs t-sans"
|
|
45
|
+
>
|
|
46
|
+
{% if author['author_email'] %}
|
|
47
|
+
<p class="l-flex l-ai-center">
|
|
48
|
+
<a
|
|
49
|
+
tabindex="-1"
|
|
50
|
+
href="mailto:{{ author['author_email'] }}"
|
|
51
|
+
class="c-icon t-links-unset has-text-teal c-author-info__contact-icon"
|
|
52
|
+
>
|
|
53
|
+
<span class="c-icon"
|
|
54
|
+
><svg aria-hidden="true">
|
|
55
|
+
<use xlink:href="#envelope"></use></svg
|
|
56
|
+
></span>
|
|
57
|
+
</a>
|
|
58
|
+
|
|
59
|
+
<a href="mailto:{{ author['author_email'] }}">
|
|
60
|
+
{{ author['author_email'] }}
|
|
61
|
+
</a>
|
|
62
|
+
</p>
|
|
63
|
+
{% endif %} {% if author['author_twitter'] %}
|
|
64
|
+
<p class="l-flex l-ai-center">
|
|
65
|
+
<a
|
|
66
|
+
tabindex="-1"
|
|
67
|
+
href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
68
|
+
class="c-icon t-links-unset t-size-xs c-author-info__contact-icon"
|
|
69
|
+
>
|
|
70
|
+
<svg aria-hidden="true">
|
|
71
|
+
<use xlink:href="#twitter"></use>
|
|
72
|
+
</svg>
|
|
73
|
+
</a>
|
|
74
|
+
|
|
75
|
+
<a href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
76
|
+
>@{{ author['author_twitter'] }}</a
|
|
77
|
+
>
|
|
78
|
+
</p>
|
|
79
|
+
{% endif %}
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
{% endfor %}
|
|
84
|
+
</div>
|
|
85
|
+
<div id="nonstaff-author">
|
|
86
|
+
<h3 class="t-size-m has-xxxs-btm-marg t-weight-normal">
|
|
87
|
+
<em>
|
|
88
|
+
<strong>{{ context['nonstaff_authors'][0].author_name }}</strong>
|
|
89
|
+
</em>
|
|
90
|
+
</h3>
|
|
91
|
+
<h4
|
|
92
|
+
class="t-uppercase t-lsp-m t-size-xs t-weight-normal t-sans has-text-gray-dark t-lsp-m has-text-gray-dark"
|
|
93
|
+
>
|
|
94
|
+
{{ context['nonstaff_authors'][0].author_title }}
|
|
95
|
+
</h4>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<div id="brief-promo" class="c-plugin c-plugin--seamless c-plugin--flush">
|
|
2
|
+
<div class="c-plugin__inner">
|
|
3
|
+
<div class="c-prompt c-prompt--box c-prompt--livestream">
|
|
4
|
+
<div class="c-prompt__content t-align-center">
|
|
5
|
+
<img
|
|
6
|
+
class="c-prompt__img"
|
|
7
|
+
src="https://static.texastribune.org/media/prompts/promo-brief-logo.png"
|
|
8
|
+
alt="Logo for The Brief newsletter."
|
|
9
|
+
/>
|
|
10
|
+
<div class="c-prompt__txt t-size-b t-lsp-s t-lh-m">
|
|
11
|
+
The most important Texas news,<br />sent weekday mornings.
|
|
12
|
+
</div>
|
|
13
|
+
<div
|
|
14
|
+
class="c-mini-form has-xs-btm-marg"
|
|
15
|
+
href="https://www.texastribune.org/newsletters/the-brief/"
|
|
16
|
+
>
|
|
17
|
+
<a
|
|
18
|
+
class="c-mini-form__submit"
|
|
19
|
+
href="https://www.texastribune.org/newsletters/the-brief/"
|
|
20
|
+
>
|
|
21
|
+
<div
|
|
22
|
+
id="main-form-submit"
|
|
23
|
+
aria-label="Sign up"
|
|
24
|
+
tabindex="0"
|
|
25
|
+
role="button"
|
|
26
|
+
aria-pressed="false"
|
|
27
|
+
class="c-button c-button--s c-sign-up__submit button has-text-black-off l-width-full l-display-block has-bg-yellow"
|
|
28
|
+
>
|
|
29
|
+
Sign up
|
|
30
|
+
</div>
|
|
31
|
+
</a>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<section class="t-copy t-links-underlined is-hidden-print">
|
|
2
|
+
<br />
|
|
3
|
+
<h2 class="t-sans t-size-b t-uppercase t-lsp-b has-s-btm-marg">
|
|
4
|
+
Contributors
|
|
5
|
+
</h2>
|
|
6
|
+
|
|
7
|
+
<div class="c-author-info__container l-flex l-flex-column l-ai-center">
|
|
8
|
+
<div id="contributor" class="c-author-info__container l-flex l-flex-column">
|
|
9
|
+
{% for author in context['contributors'] %}
|
|
10
|
+
<div class="c-author-info__trib-author-container l-flex l-ai-center">
|
|
11
|
+
{% if author['author_photo'] %}
|
|
12
|
+
<a class="t-links-unset" href="{{ author['author_link'] }}">
|
|
13
|
+
<noscript>
|
|
14
|
+
<img
|
|
15
|
+
width="68"
|
|
16
|
+
height="100"
|
|
17
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
18
|
+
src="{{ author['author_photo'] }}"
|
|
19
|
+
/>
|
|
20
|
+
</noscript>
|
|
21
|
+
<img
|
|
22
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
23
|
+
class="l-display-block js-lazy-image has-bg-gray-dark js-lazy-image--loaded"
|
|
24
|
+
data-src="{{ author['author_photo'] }}"
|
|
25
|
+
width="68"
|
|
26
|
+
height="100"
|
|
27
|
+
src="{{ author['author_photo'] }}"
|
|
28
|
+
/>
|
|
29
|
+
</a>
|
|
30
|
+
{% endif %}
|
|
31
|
+
<div>
|
|
32
|
+
<h3 class="has-xxxs-btm-marg t-weight-bold t-size-m">
|
|
33
|
+
<a href="{{ author['author_link'] }}">
|
|
34
|
+
{{ author['author_name'] }}
|
|
35
|
+
</a>
|
|
36
|
+
</h3>
|
|
37
|
+
<h4
|
|
38
|
+
class="has-text-gray-dark t-weight-normal has-b-btm-marg t-size-xs t-sans t-lsp-m t-uppercase"
|
|
39
|
+
>
|
|
40
|
+
{{ author['author_title'] }}
|
|
41
|
+
</h4>
|
|
42
|
+
<div
|
|
43
|
+
class="c-author-info__contacts-container l-flex l-flex-column t-size-xs t-sans"
|
|
44
|
+
>
|
|
45
|
+
{% if author['author_email'] %}
|
|
46
|
+
<p class="l-flex l-ai-center">
|
|
47
|
+
<a
|
|
48
|
+
tabindex="-1"
|
|
49
|
+
href="mailto:{{ author['author_email'] }}"
|
|
50
|
+
class="c-icon t-links-unset has-text-teal c-author-info__contact-icon"
|
|
51
|
+
>
|
|
52
|
+
<span class="c-icon"
|
|
53
|
+
><svg aria-hidden="true">
|
|
54
|
+
<use xlink:href="#envelope"></use></svg
|
|
55
|
+
></span>
|
|
56
|
+
</a>
|
|
57
|
+
|
|
58
|
+
<a href="mailto:{{ author['author_email'] }}">
|
|
59
|
+
{{ author['author_email'] }}
|
|
60
|
+
</a>
|
|
61
|
+
</p>
|
|
62
|
+
{% endif %} {% if author['author_twitter'] %}
|
|
63
|
+
<p class="l-flex l-ai-center">
|
|
64
|
+
<a
|
|
65
|
+
tabindex="-1"
|
|
66
|
+
href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
67
|
+
class="c-icon t-links-unset t-size-xs c-author-info__contact-icon"
|
|
68
|
+
>
|
|
69
|
+
<svg aria-hidden="true">
|
|
70
|
+
<use xlink:href="#twitter"></use>
|
|
71
|
+
</svg>
|
|
72
|
+
</a>
|
|
73
|
+
|
|
74
|
+
<a href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
75
|
+
>@{{ author['author_twitter'] }}</a
|
|
76
|
+
>
|
|
77
|
+
</p>
|
|
78
|
+
{% endif %}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
{% endfor %}
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</section>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
2
|
<defs>
|
|
3
|
-
<symbol id="twitter" viewBox="0 0
|
|
3
|
+
<symbol id="twitter" viewBox="0 0 1200 1227">
|
|
4
4
|
<title>twitter</title>
|
|
5
|
-
<path d="
|
|
5
|
+
<path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"></path>
|
|
6
6
|
</symbol>
|
|
7
7
|
<symbol id="facebook" viewBox="0 0 16 28">
|
|
8
8
|
<title>facebook</title>
|
|
@@ -27,5 +27,9 @@
|
|
|
27
27
|
<title>drawn-left-arrow</title>
|
|
28
28
|
<path d="M1.027 3.583c1.137 1.309 2.179 2.765 3.076 4.314l0.072 0.135c0.64 1.082 2.211 0.13 1.667-0.975-0.367-0.738-0.722-1.349-1.11-1.937l0.042 0.068c4.009 1.971 7.060 5.378 8.52 9.534l0.036 0.117c1.687 4.737 2.053 11.636-1.314 15.743-0.305 0.376 0.092 1.027 0.554 0.722 4.822-3.292 4.213-11.77 2.676-16.623-1.508-4.787-4.757-8.652-8.987-10.93l-0.099-0.049c1.036-0.339 1.934-0.764 2.766-1.286l-0.052 0.030c0.787-0.489 0.524-1.917-0.5-1.845-2.527 0.171-4.882 0.642-7.116 1.379l0.203-0.058c-0.417 0.129-0.715 0.511-0.715 0.963 0 0.271 0.107 0.516 0.281 0.697l-0-0z"></path>
|
|
29
29
|
</symbol>
|
|
30
|
+
<symbol id="camera" viewBox="0 0 30 28">
|
|
31
|
+
<title>camera</title>
|
|
32
|
+
<path d="M15 10.5c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zM26 4c2.203 0 4 1.797 4 4v14c0 2.203-1.797 4-4 4H4c-2.203 0-4-1.797-4-4V8c0-2.203 1.797-4 4-4h3.5l.797-2.125C8.688.844 9.906 0 11 0h8c1.094 0 2.312.844 2.703 1.875L22.5 4H26zM15 22c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z"></path>
|
|
33
|
+
</symbol>
|
|
30
34
|
</defs>
|
|
31
35
|
</svg>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<br />
|
|
2
|
+
<p class="t-copy t-size-b t-links-underlined t-lh-m">
|
|
3
|
+
<span class="c-icon c-icon--baseline t-size-m has-tiny-right-marg">
|
|
4
|
+
<svg
|
|
5
|
+
aria-hidden="true"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
viewBox="0 0 64 64"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="#fff"
|
|
11
|
+
d="M60.2 53.8c0 3.5-2.9 6.4-6.4 6.4H10.2c-3.5 0-6.4-2.9-6.4-6.4V10.2c0-3.5 2.9-6.4 6.4-6.4h43.5c3.5 0 6.4 2.9 6.4 6.4v43.6z"
|
|
12
|
+
></path>
|
|
13
|
+
<g fill="#121212">
|
|
14
|
+
<path
|
|
15
|
+
d="M53.8 0H10.2C4.6 0 0 4.6 0 10.2v43.5C0 59.4 4.6 64 10.2 64h43.5C59.4 64 64 59.4 64 53.8V10.2C64 4.6 59.4 0 53.8 0zm6.4 53.8c0 3.5-2.9 6.4-6.4 6.4H10.2c-3.5 0-6.4-2.9-6.4-6.4V10.2c0-3.5 2.9-6.4 6.4-6.4h43.5c3.5 0 6.4 2.9 6.4 6.4v43.6z"
|
|
16
|
+
></path>
|
|
17
|
+
<path
|
|
18
|
+
d="M38.3 49.3H25.7c-.3 0-.5-.2-.5-.5V27.3c0-.3-.3-.6-.6-.6H13.5c-.3 0-.5-.2-.5-.5v-11c0-.3.2-.5.5-.5h37.1c.3 0 .5.2.5.5v11.1c0 .3-.2.5-.5.5H39.3c-.3 0-.5.2-.5.5v21.6c0 .2-.2.4-.5.4z"
|
|
19
|
+
></path>
|
|
20
|
+
</g>
|
|
21
|
+
</svg> </span
|
|
22
|
+
>
|
|
23
|
+
<em>
|
|
24
|
+
<a href="https://www.texastribune.org/about/privacy-policy/"
|
|
25
|
+
>Learn about The Texas Tribune’s policies</a
|
|
26
|
+
>, including our partnership with
|
|
27
|
+
<a
|
|
28
|
+
href="https://www.texastribune.org/about/#trust-project"
|
|
29
|
+
class="l-display-ib"
|
|
30
|
+
>The Trust Project</a
|
|
31
|
+
>
|
|
32
|
+
to increase transparency in news.
|
|
33
|
+
</em>
|
|
34
|
+
</p>
|
|
@@ -20,6 +20,38 @@
|
|
|
20
20
|
<h2 class="t-copy t-copy--subheader">{{ value | widont }}</h2>
|
|
21
21
|
{% endmacro %}
|
|
22
22
|
|
|
23
|
+
{# Simple photo/video embeds here. They will lazy load by default. #}
|
|
24
|
+
{% macro image(type, caption, alt_text, url, thumbnail_url, credit) %}
|
|
25
|
+
{% if type == 'video' %}
|
|
26
|
+
<div class="image">
|
|
27
|
+
<div class="video-container">
|
|
28
|
+
<video width="100%" preload="none" autoplay loop muted playsinline poster="{{ thumbnail_url }}">Your browser does not support the video tag.
|
|
29
|
+
<source src="{{ url }}" type="video/mp4">
|
|
30
|
+
<p>{{ alt_text }}</p>
|
|
31
|
+
</video></div>
|
|
32
|
+
<figcaption class="caption">
|
|
33
|
+
<span>{{ caption }}</span> <span class="c-icon">
|
|
34
|
+
<svg area-hidden="true">
|
|
35
|
+
<use xlink:href="#camera"></use>
|
|
36
|
+
</svg>
|
|
37
|
+
</span> <span class="credit">{{ credit }}</span>
|
|
38
|
+
</figcaption>
|
|
39
|
+
</div>
|
|
40
|
+
{% elif type == 'photo' %}
|
|
41
|
+
<div class="image">
|
|
42
|
+
<div class="photo-container">
|
|
43
|
+
<img src="{{ url }}" loading="lazy" alt="{{ alt_text }}" width="100%">
|
|
44
|
+
</div>
|
|
45
|
+
<figcaption class="caption">
|
|
46
|
+
<span>{{ caption }} </span><span class="c-icon">
|
|
47
|
+
<svg area-hidden="true">
|
|
48
|
+
<use xlink:href="#camera"></use>
|
|
49
|
+
</svg></span><span class="credit"> {{ credit }}</span>
|
|
50
|
+
</figcaption>
|
|
51
|
+
</div>
|
|
52
|
+
{% endif %}
|
|
53
|
+
{% endmacro %}
|
|
54
|
+
|
|
23
55
|
{# set type to roof for roof ads, footer for footer ads #}
|
|
24
56
|
{% macro ad(value, type) %}
|
|
25
57
|
<div class="plugin plugin--centered">
|