@data-visuals/create 7.6.0 → 7.6.2
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__/_babel.config.json +10 -0
- package/templates/__common__/_package.json +2 -2
- package/templates/__common__/app/templates/macros/shares.html +8 -0
- package/templates/feature/app/index.html +3 -1
- package/templates/feature/app/styles/components/_details.scss +118 -0
- package/templates/feature/app/styles/components/_navbar.scss +56 -0
- package/templates/feature/app/styles/main-queso.scss +1 -0
- package/templates/feature/app/templates/components/footer.html +2 -2
- package/templates/feature/app/templates/components/navbar.html +39 -17
- package/templates/feature/app/templates/components/share.html +19 -26
- package/templates/feature/app/templates/includes/shares.html +1 -1
- package/templates/feature/app/templates/includes/svg-defs.html +22 -7
package/package.json
CHANGED
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"dependencies": {
|
|
80
80
|
"@babel/runtime": "^7.0.0",
|
|
81
81
|
"@newswire/frames": "^0.3.1",
|
|
82
|
-
"@texastribune/queso-ui": "^10.
|
|
82
|
+
"@texastribune/queso-ui": "^10.4.0",
|
|
83
83
|
"classnames": "^2.2.5",
|
|
84
84
|
"core-js": "^2.5.7",
|
|
85
85
|
"d3": "^5.0.0",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"preact": "^8.4.1",
|
|
89
89
|
"preact-compat": "^3.18.4",
|
|
90
90
|
"promise-polyfill": "^8.0.0",
|
|
91
|
-
"sass-mq": "^
|
|
91
|
+
"sass-mq": "^6.0.0",
|
|
92
92
|
"whatwg-fetch": "^3.0.0"
|
|
93
93
|
},
|
|
94
94
|
"prettier": {
|
|
@@ -9,3 +9,11 @@ https://twitter.com/share?url={{ href|urlencode }}&text={{ text|urlencode }}{% i
|
|
|
9
9
|
{% macro email(subject, body) %}
|
|
10
10
|
mailto:?subject={{ subject|urlencode }}&body={{ body|urlencode }}
|
|
11
11
|
{% endmacro %}
|
|
12
|
+
|
|
13
|
+
{% macro copy_link(href) %}
|
|
14
|
+
{{ href|urlencode }}?utm_campaign=trib-social-buttons&utm_source=copy&utm_medium=social
|
|
15
|
+
{% endmacro %}
|
|
16
|
+
|
|
17
|
+
{% macro reddit(href, text) %}
|
|
18
|
+
https://www.reddit.com/submit?url={{ href|urlencode }}?utm_campaign=trib-social-buttons&utm_source=copy&utm_medium=social%3Futm_campaign%3Dtrib-social-buttons%26utm_source%3Dreddit%26utm_medium%3Dsocial&title={{ text|urlencode }}
|
|
19
|
+
{% endmacro %}
|
|
@@ -38,7 +38,9 @@
|
|
|
38
38
|
</p>
|
|
39
39
|
</header>
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
<div class="c-details t-size-xs t-uppercase t-lsp-m t-lh-b has-text-black-off has-text-vert-padding has-s-btm-marg t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-page-padding t-align-center">
|
|
42
|
+
{% include 'components/share.html' %}
|
|
43
|
+
</div>
|
|
42
44
|
</div>
|
|
43
45
|
|
|
44
46
|
<div class="t-serif t-links-underlined has-page-padding">
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
.c-details {
|
|
2
|
+
flex-wrap: wrap;
|
|
3
|
+
gap: 10px;
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: space-around; /* ADJUSTMENT */
|
|
6
|
+
// margin-bottom: 1em; // Ensures spacing below the <p> syncs up with font-size
|
|
7
|
+
margin-left: auto; // Centers <p> tag within max-width
|
|
8
|
+
margin-right: auto; // Centers <p> tag within max-width
|
|
9
|
+
// margin-top: 1em; // Ensures spacing above the <p> syncs up with font-size
|
|
10
|
+
max-width: 34em; // Controls the measure
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-details__wrapper {
|
|
14
|
+
flex: 1 0 auto;
|
|
15
|
+
display: flex
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.c-details__spacer {
|
|
19
|
+
flex: auto
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.c-details__icon-link {
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
gap: 6px;
|
|
25
|
+
display: inline-flex
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.c-social-share__dropdown {
|
|
29
|
+
--dropdown-width: 180px;
|
|
30
|
+
margin: 10px 0 0 calc(var(--dropdown-width)/1.5*-1);
|
|
31
|
+
width: var(--dropdown-width);
|
|
32
|
+
z-index: 3;
|
|
33
|
+
background: #fbfbfb;
|
|
34
|
+
border-radius: 6px;
|
|
35
|
+
position: absolute
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.c-social-share__dropdown:before,.c-social-share__dropdown:after {
|
|
39
|
+
content: " ";
|
|
40
|
+
width: 0;
|
|
41
|
+
height: 0;
|
|
42
|
+
border: 10px solid transparent;
|
|
43
|
+
border-top-width: 0;
|
|
44
|
+
border-bottom-color: #d0d0d0;
|
|
45
|
+
margin-left: -10px;
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: -10px;
|
|
48
|
+
left: 80%
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (max-width: 845px) and (min-height:650px) {
|
|
52
|
+
.c-social-share__dropdown:before,.c-social-share__dropdown:after {
|
|
53
|
+
display:none
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.c-social-share__dropdown:after {
|
|
58
|
+
border-bottom-color: #fbfbfb;
|
|
59
|
+
top: -9px
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@media (max-width: 845px) and (min-height:650px) {
|
|
63
|
+
.c-social-share__dropdown {
|
|
64
|
+
width:100%;
|
|
65
|
+
border-bottom-right-radius: 0;
|
|
66
|
+
border-bottom-left-radius: 0;
|
|
67
|
+
position: fixed;
|
|
68
|
+
bottom: 0;
|
|
69
|
+
right: 0
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.c-social-share__dropdown li {
|
|
74
|
+
border-bottom: 1px solid #d0d0d0;
|
|
75
|
+
margin: 0;
|
|
76
|
+
padding: 0
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.c-social-share__dropdown li:last-child {
|
|
80
|
+
border-bottom: none
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.c-social-share__dropdown li a {
|
|
84
|
+
width: 100%;
|
|
85
|
+
gap: 8px;
|
|
86
|
+
margin: 10px 0;
|
|
87
|
+
padding: 0 15px;
|
|
88
|
+
display: flex
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@media (max-width: 845px) and (min-height:650px) {
|
|
92
|
+
.c-social-share__dropdown li a {
|
|
93
|
+
width:100%;
|
|
94
|
+
margin: 0;
|
|
95
|
+
padding: 20px 15px;
|
|
96
|
+
font-size: 1rem
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.c-social-share__dropdown li a:hover {
|
|
101
|
+
text-decoration: none
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.c-social-share[open]>.c-social-share__btn:before {
|
|
105
|
+
content: " ";
|
|
106
|
+
z-index: 2;
|
|
107
|
+
position: fixed;
|
|
108
|
+
top: 0;
|
|
109
|
+
bottom: 0;
|
|
110
|
+
left: 0;
|
|
111
|
+
right: 0
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@media (max-width: 845px) and (min-height:650px) {
|
|
115
|
+
.c-social-share[open]>.c-social-share__btn:before {
|
|
116
|
+
background-color:rgba(0,0,0,.2)
|
|
117
|
+
}
|
|
118
|
+
}
|
|
@@ -12,3 +12,59 @@
|
|
|
12
12
|
margin-right: $size-b;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
.c-navbar__clickable {
|
|
17
|
+
letter-spacing: .07rem;
|
|
18
|
+
font-weight: 700
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.c-navbar__clickable {
|
|
22
|
+
border: none;
|
|
23
|
+
align-items: center;
|
|
24
|
+
padding: 0;
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
transition: all .15s;
|
|
27
|
+
display: flex;
|
|
28
|
+
position: relative
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.c-navbar--light .c-navbar__clickable {
|
|
32
|
+
color: #222;
|
|
33
|
+
background-color: #fff
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.c-navbar--dark .c-navbar__clickable {
|
|
37
|
+
color: #d0d0d0;
|
|
38
|
+
background-color: #222
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.c-navbar--dark .c-navbar__clickable:hover,.c-navbar--dark .c-navbar__clickable:active,.c-navbar--dark .c-navbar__clickable.is-active {
|
|
42
|
+
color: #fff
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (min-width: 52.8125em) {
|
|
46
|
+
.c-navbar__clickable--animated:hover:after {
|
|
47
|
+
background-color:#ffc200
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.c-navbar__clickable.is-active:after {
|
|
52
|
+
background-color: #ffc200
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.c-navbar__clickable:after {
|
|
56
|
+
content: "";
|
|
57
|
+
height: 3px;
|
|
58
|
+
width: 100%;
|
|
59
|
+
transition: background-color .15s;
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 100%;
|
|
62
|
+
left: 0
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@media (min-width: 52.8125em) {
|
|
66
|
+
.c-navbar__clickable:after {
|
|
67
|
+
top: auto;
|
|
68
|
+
bottom: 0
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/terms-of-service/">Terms of Service</a></li>
|
|
11
11
|
<li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/ethics/">Code of Ethics</a></li>
|
|
12
12
|
<li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/privacy-policy/">Privacy Policy</a></li>
|
|
13
|
-
<li class="footer-nav-item"><a class="footer-link footer-link-donate" href="https://support.texastribune.org/">Donate</a></li>
|
|
13
|
+
<li class="footer-nav-item"><a class="footer-link footer-link-donate has-text-yellow" href="https://support.texastribune.org/">Donate</a></li>
|
|
14
14
|
</ul>
|
|
15
15
|
</div>
|
|
16
|
-
</footer>
|
|
16
|
+
</footer>
|
|
@@ -1,20 +1,42 @@
|
|
|
1
|
-
<header class="
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="c-
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<p class="has-text-white is-hidden-until-bp-m t-weight-bold t-links-underlined-hover-thin">{{ context.masthead_title }}</p>
|
|
10
|
-
{% endif %}
|
|
11
|
-
</div>
|
|
12
|
-
<div class="c-navbar__content">
|
|
13
|
-
<div class="c-navbar__items l-align-center-children">
|
|
14
|
-
<a href="https://support.texastribune.org/" class="c-button c-button--standard t-uppercase">
|
|
15
|
-
<span class="t-size-xxs t-lsp-l">Donate</span>
|
|
1
|
+
<header class="gradient-navbar">
|
|
2
|
+
<div class="inner-navbar">
|
|
3
|
+
<div class="c-navbar c-navbar--dark">
|
|
4
|
+
<div class="c-navbar__top l-align-center-x">
|
|
5
|
+
<div class="c-navbar__branding l-align-center-children">
|
|
6
|
+
<a href="https://www.texastribune.org" class="c-navbar__logo">
|
|
7
|
+
<span class="is-sr-only">The Texas Tribune</span>
|
|
8
|
+
{% include 'includes/logo.html' %}
|
|
16
9
|
</a>
|
|
17
|
-
|
|
10
|
+
{% if context.masthead_title %}
|
|
11
|
+
<p class="has-text-white is-hidden-until-bp-m t-weight-bold t-links-underlined-hover-thin">{{ context.masthead_title }}</p>
|
|
12
|
+
{% endif %}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="c-navbar__content">
|
|
15
|
+
<ul class="c-navbar__items t-uppercase t-size-xxs hide_until--l is-hidden-until-bp-l js-toggle-on-search">
|
|
16
|
+
<li class="c-navbar__item">
|
|
17
|
+
<a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/topics/texas-tribune-investigations/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="investigations">Investigations</a>
|
|
18
|
+
</li>
|
|
19
|
+
<li class="c-navbar__item">
|
|
20
|
+
<a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/series/guides/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="guides">Guides</a>
|
|
21
|
+
</li>
|
|
22
|
+
<li class="c-navbar__item">
|
|
23
|
+
<a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/newsletters/" ga-on="click" ga-event-category="subscribe intent" ga-event-action="top nav click" ga-event-label="not frontpage">Newsletters</a>
|
|
24
|
+
</li>
|
|
25
|
+
<li class="c-navbar__item">
|
|
26
|
+
<a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/events/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="events">Events</a>
|
|
27
|
+
</li>
|
|
28
|
+
<li class="c-navbar__item">
|
|
29
|
+
<a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/series/news-apps-graphics-databases/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="data">Data</a>
|
|
30
|
+
</li>
|
|
31
|
+
<li class="c-navbar__item">
|
|
32
|
+
<a class="t-uppercase t-size-xxs c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/about/?utm_medium=top-nav-about" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="about">About</a>
|
|
33
|
+
</li>
|
|
34
|
+
<li class="c-navbar__item">
|
|
35
|
+
<a class="t-uppercase t-size-xxs c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated" href="https://support.texastribune.org/donate?installmentPeriod=once&amount=100&campaignId=7016f000002Gv2vAAC" ga-on="click" ga-event-category="donations" ga-event-action="membership-intent" ga-event-label="c-navbar"><span class="has-text-yellow">Donate</span></a>
|
|
36
|
+
</li>
|
|
37
|
+
</ul>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
18
40
|
</div>
|
|
19
41
|
</div>
|
|
20
|
-
</header>
|
|
42
|
+
</header>
|
|
@@ -1,28 +1,21 @@
|
|
|
1
1
|
{% import "macros/shares.html" as shares %}
|
|
2
2
|
|
|
3
|
-
<div class="c-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<span class="c-button__inner c-icon t-size-s">
|
|
23
|
-
<svg aria-hidden="true">
|
|
24
|
-
<use xlink:href="#icon-envelope"></use>
|
|
25
|
-
</svg>
|
|
26
|
-
</span>
|
|
27
|
-
</a>
|
|
28
|
-
</div>
|
|
3
|
+
<div class="c-details__social-share">
|
|
4
|
+
<details class="c-social-share">
|
|
5
|
+
<summary class="c-social-share__btn" id="native-share">
|
|
6
|
+
<span class="c-details__icon-link t-weight-bold has-text-hover-teal" ga-event-category="social-share" ga-event-action="share-intent">Share
|
|
7
|
+
<span class="c-icon c-icon--baseline">
|
|
8
|
+
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.94 2.11L17.1001 2.13L0.7 18.53L2.17 20L18.5701 3.6L18.5901 9.76L20.68 9.74V0L18.25 0.00999999H10.9501L10.94 2.11Z"></path></svg>
|
|
9
|
+
</span>
|
|
10
|
+
</span>
|
|
11
|
+
</summary>
|
|
12
|
+
<ul class="c-social-share__dropdown has-border t-titlecase has-text-gray-dark">
|
|
13
|
+
<li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="" ga-event-category="social-share" ga-event-action="copy-url-intent" aria-label="Copy URL" id="copy-url"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#link"></use></svg></span>
|
|
14
|
+
<span id="copy-url-text">Copy URL</span></a></li>
|
|
15
|
+
<li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.twitter(CURRENT_PAGE_URL, context.tweet_text, '') }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="twitter-intent" aria-label="Share on Twitter"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#twitter"></use></svg></span>Twitter</a></li>
|
|
16
|
+
<li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.facebook(CURRENT_PAGE_URL) }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="facebook-intent" aria-label="Share on Facebook"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#facebook"></use></svg></span>Facebook</a></li>
|
|
17
|
+
<li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.reddit(CURRENT_PAGE_URL, context.headline ) }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="reddit-intent" aria-label="Share on Reddit"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#reddit"></use></svg></span>Reddit</a></li>
|
|
18
|
+
<li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.email(context.headline, CURRENT_PAGE_URL) }}" ga-event-category="social-share" ga-event-action="email-intent" aria-label="Share this story by email"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#envelope"></use></svg></span>Email</a></li>
|
|
19
|
+
</ul>
|
|
20
|
+
</details>
|
|
21
|
+
</div>
|
|
@@ -1,16 +1,31 @@
|
|
|
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="
|
|
3
|
+
<symbol id="twitter" viewBox="0 0 26 28">
|
|
4
4
|
<title>twitter</title>
|
|
5
|
-
<path
|
|
5
|
+
<path d="M25.312 6.375a10.85 10.85 0 01-2.531 2.609c.016.219.016.438.016.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-.828-7.75-2.266.406.047.797.063 1.219.063 2.359 0 4.531-.797 6.266-2.156a5.056 5.056 0 01-4.719-3.5c.313.047.625.078.953.078.453 0 .906-.063 1.328-.172a5.048 5.048 0 01-4.047-4.953v-.063a5.093 5.093 0 002.281.641 5.044 5.044 0 01-2.25-4.203c0-.938.25-1.797.688-2.547a14.344 14.344 0 0010.406 5.281 5.708 5.708 0 01-.125-1.156 5.045 5.045 0 015.047-5.047 5.03 5.03 0 013.687 1.594 9.943 9.943 0 003.203-1.219 5.032 5.032 0 01-2.219 2.781c1.016-.109 2-.391 2.906-.781z"></path>
|
|
6
6
|
</symbol>
|
|
7
|
-
|
|
7
|
+
<symbol id="facebook" viewBox="0 0 16 28">
|
|
8
8
|
<title>facebook</title>
|
|
9
|
-
<path
|
|
9
|
+
<path d="M14.984.187v4.125h-2.453c-1.922 0-2.281.922-2.281 2.25v2.953h4.578l-.609 4.625H10.25v11.859H5.469V14.14H1.485V9.515h3.984V6.109C5.469 2.156 7.891 0 11.422 0c1.687 0 3.141.125 3.563.187z"></path>
|
|
10
10
|
</symbol>
|
|
11
|
-
<symbol id="
|
|
11
|
+
<symbol id="envelope" viewBox="0 0 28 28">
|
|
12
12
|
<title>envelope</title>
|
|
13
|
-
<path
|
|
13
|
+
<path d="M28 11.094V23.5c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 010 23.5V11.094c.469.516 1 .969 1.578 1.359 2.594 1.766 5.219 3.531 7.766 5.391 1.313.969 2.938 2.156 4.641 2.156h.031c1.703 0 3.328-1.188 4.641-2.156 2.547-1.844 5.172-3.625 7.781-5.391a9.278 9.278 0 001.563-1.359zM28 6.5c0 1.75-1.297 3.328-2.672 4.281-2.438 1.687-4.891 3.375-7.313 5.078-1.016.703-2.734 2.141-4 2.141h-.031c-1.266 0-2.984-1.437-4-2.141-2.422-1.703-4.875-3.391-7.297-5.078-1.109-.75-2.688-2.516-2.688-3.938 0-1.531.828-2.844 2.5-2.844h23c1.359 0 2.5 1.125 2.5 2.5z"></path>
|
|
14
|
+
</symbol>
|
|
15
|
+
<symbol id="link" viewBox="0 0 72 72">
|
|
16
|
+
<title>link</title>
|
|
17
|
+
<path d="M67.6 25.5L55 38.1c-1.2 1.2-3.1 1.2-4.2 0s-1.2-3.1 0-4.2l12.7-12.7c3.5-3.5 3.5-9.2 0-12.7s-9.2-3.5-12.7 0l-16.9 17c-1 1.1-6 6.7 0 12.7 1.2 1.2 1.2 3.1 0 4.2s-3.1 1.2-4.2 0c-8.3-8.3-3.6-17.4 0-21.1L46.5 4.4c5.8-5.8 15.3-5.8 21.1 0s5.9 15.2 0 21.1zm-25.3 4.2c-1.2-1.2-3.1-1.2-4.2 0-1.2 1.2-1.2 3.1 0 4.2 6 6 1 11.6 0 12.7L21.2 63.4c-3.5 3.5-9.2 3.5-12.7 0s-3.5-9.2 0-12.7L21.2 38c1.2-1.2 1.2-3.1 0-4.2s-3.1-1.2-4.2 0L4.4 46.5c-5.8 5.8-5.8 15.3 0 21.1 5.8 5.8 15.3 5.8 21.1 0l16.9-16.9c3.6-3.6 8.3-12.7-.1-21z"></path></symbol>
|
|
18
|
+
<symbol id="reddit" viewBox="0 0 28 28">
|
|
19
|
+
<title>reddit</title>
|
|
20
|
+
<path d="M17.109 18.234c.141.141.141.359 0 .484-.891.891-2.609.969-3.109.969s-2.219-.078-3.109-.969c-.141-.125-.141-.344 0-.484a.34.34 0 01.469 0c.562.578 1.781.766 2.641.766s2.063-.187 2.641-.766a.34.34 0 01.469 0zm-4.796-2.828c0 .766-.625 1.391-1.391 1.391a1.397 1.397 0 01-1.406-1.391A1.4 1.4 0 0110.922 14c.766 0 1.391.625 1.391 1.406zm6.171 0c0 .766-.625 1.391-1.406 1.391a1.394 1.394 0 01-1.391-1.391c0-.781.625-1.406 1.391-1.406a1.4 1.4 0 011.406 1.406zm3.922-1.875a1.867 1.867 0 00-1.875-1.859c-.531 0-1 .219-1.344.562-1.266-.875-2.969-1.437-4.859-1.5l.984-4.422 3.125.703c0 .766.625 1.391 1.391 1.391.781 0 1.406-.641 1.406-1.406s-.625-1.406-1.406-1.406a1.42 1.42 0 00-1.25.781l-3.453-.766c-.172-.047-.344.078-.391.25l-1.078 4.875c-1.875.078-3.563.641-4.828 1.516a1.877 1.877 0 00-1.359-.578 1.867 1.867 0 00-1.875 1.859c0 .75.438 1.375 1.062 1.687a4.024 4.024 0 00-.094.875c0 2.969 3.344 5.375 7.453 5.375 4.125 0 7.469-2.406 7.469-5.375 0-.297-.031-.609-.109-.891a1.878 1.878 0 001.031-1.672zM28 14c0 7.734-6.266 14-14 14S0 21.734 0 14 6.266 0 14 0s14 6.266 14 14z"></path>
|
|
21
|
+
</symbol>
|
|
22
|
+
<symbol id="icon-info" viewBox="0 0 7 13">
|
|
23
|
+
<title>Click to learn more about this district</title>
|
|
24
|
+
<path class="path1" d="M.967 11.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619C2.877 13.534.104 13.744.967 11.01zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path>
|
|
25
|
+
</symbol>
|
|
26
|
+
<symbol id="icon-drawn-left-arrow" viewBox="0 0 17 32">
|
|
27
|
+
<title>drawn-left-arrow</title>
|
|
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>
|
|
14
29
|
</symbol>
|
|
15
30
|
</defs>
|
|
16
|
-
</svg>
|
|
31
|
+
</svg>
|