Skip to content

Commit 06fd4f2

Browse files
lektor-botlektor-bot
committed
Synchronized build
1 parent 6c3f163 commit 06fd4f2

File tree

86 files changed

+3705
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+3705
-0
lines changed

‎static/vocabulary/css/library-vars.css

+297
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
/* library vars */
2+
3+
/* brand typsetting */
4+
@font-face {
5+
font-family:"Roboto Condensed";
6+
font-style: normal;
7+
font-weight: 400;
8+
font-display: swap;
9+
src: url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
10+
url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
11+
url('../fonts/RobotoCondensed-Regular.otf') format('opentype');
12+
}
13+
14+
@font-face {
15+
font-family:"Roboto Condensed";
16+
font-style: normal;
17+
font-weight: 700;
18+
font-display: swap;
19+
src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'),
20+
url('../fonts/RobotoCondensed-Bold.woff') format('woff'),
21+
url('../fonts/RobotoCondensed-Bold.otf') format('opentype');
22+
}
23+
24+
@font-face {
25+
font-family: "Source Sans Pro";
26+
font-style: normal;
27+
font-weight: 400;
28+
font-display: swap;
29+
src: url(../fonts/SourceSansPro-Regular.woff2) format("woff2"),
30+
url(../fonts/SourceSansPro-Regular.woff) format("woff"),
31+
url(../fonts/SourceSansPro-Regular.otf) format("opentype");
32+
}
33+
34+
@font-face {
35+
font-family: "Source Sans Pro";
36+
font-style: normal;
37+
font-weight: 600;
38+
font-display: swap;
39+
src: url(../fonts/SourceSansPro-SemiBold.woff2) format("woff2"),
40+
url(../fonts/SourceSansPro-SemiBold.woff) format("woff"),
41+
url(../fonts/SourceSansPro-SemiBold.otf) format("opentype");
42+
}
43+
44+
@font-face {
45+
font-family: "Source Sans Pro";
46+
font-style: normal;
47+
font-weight: 700;
48+
font-display: swap;
49+
src: url(../fonts/SourceSansPro-Bold.woff2) format("woff2"),
50+
url(../fonts/SourceSansPro-Bold.woff) format("woff"),
51+
url(../fonts/SourceSansPro-Bold.otf) format("opentype");
52+
}
53+
54+
@font-face {
55+
font-family: "CC Accidenz Commons";
56+
font-style: normal;
57+
font-weight: 400;
58+
font-display: swap;
59+
src: url(../fonts/CCAccidenzCommons-medium.otf) format("opentype");
60+
}
61+
62+
63+
:root {
64+
/* brand colors */
65+
66+
--vocabulary-brand-color-gold: #FBD43C;
67+
--vocabulary-brand-color-green: #008000;
68+
--vocabulary-brand-color-tomato: #C74200;
69+
--vocabulary-brand-color-turquoise: #05b5da;
70+
71+
--vocabulary-brand-color-soft-gold: #FEF6D8;
72+
73+
--vocabulary-brand-color-soft-green: #E0F5E0;
74+
--vocabulary-brand-color-dark-green: #005d00;
75+
76+
--vocabulary-brand-color-soft-turquoise: #DFF6FC;
77+
78+
--vocabulary-brand-color-soft-tomato: #FEEDE9;
79+
--vocabulary-brand-color-dark-tomato: #903101;
80+
81+
--vocabulary-neutral-color-lighter-gray: #F5F5F5;
82+
--vocabulary-neutral-color-dark-gray: #767676;
83+
84+
/* brand typsetting */
85+
--vocabulary-brand-typeset-nav-family: "Roboto Condensed";
86+
--vocabulary-brand-typeset-nav-weight: bold;
87+
--vocabulary-brand-typeset-nav-color: #767676;
88+
89+
/* whitespace */
90+
--vocabulary-page-edges-space: 5%;
91+
92+
93+
94+
/* brand svg sprite sheet capabilities */
95+
96+
/* note: Be sure you utilize the icons in the way that is most
97+
accessible and semantic.
98+
99+
This system allows for 5 icon implementation strategies:
100+
101+
1. Replace an empty <span> with an icon utterly
102+
<span class="icon icon-name"></span>
103+
104+
2. Replace a readable element with an equivalent meaning icon
105+
<a class="icon-replace icon-name">Mastodon</a>
106+
107+
3. Attach an icon to the :before of an element, leaving content
108+
<a class="icon-attach icon-name">Mastodon</a>
109+
110+
4. Bypass the use of CSS classes, and put icon in content as an
111+
<svg> with <use> fragment identifiers.
112+
<svg>
113+
<use href="/svg/cc/icons/cc-icons.svg#icon-name"></use>
114+
</svg>
115+
116+
5. Target an element precisely with less extraneous "icon name classes",
117+
using mostly CSS. (This could optionally be abstracted further to remove
118+
the need for the .icon class entirely.)
119+
120+
<a class="icon">Mastodon</a>
121+
122+
a:before {
123+
--icon-sprite: var(--icon-name);
124+
--icon-sprite- color: white;
125+
--icon-sprite-size: .8em;
126+
127+
*/
128+
129+
/* set default icon sprite */
130+
--icon-sprite: url('../svg/cc/icons/cc-icons.svg#cc-logo');
131+
--icon-sprite-color: black;
132+
--icon-sprite-size: 1em;
133+
134+
/* cc sprite names */
135+
--cc-logo: url('./../svg/cc/icons/cc-icons.svg#cc-logo');
136+
--cc-heart: url('./../svg/cc/icons/cc-icons.svg#cc-heart');
137+
--cc-heart-filled: url('./../svg/cc/icons/cc-icons.svg#cc-heart-filled');
138+
--cc-quote: url('./../svg/cc/icons/cc-icons.svg#cc-quote');
139+
140+
/* font awesome sprite names */
141+
--fa-angle-down: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-down');
142+
--fa-angle-left: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-left');
143+
--fa-angle-right: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-right');
144+
--fa-angle-up: url('./../svg/font-awesome/icons/fa-icons.svg#fa-angle-up');
145+
--fa-globe: url('./../svg/font-awesome/icons/fa-icons.svg#fa-globe');
146+
--fa-heart: url('./../svg/font-awesome/icons/fa-icons.svg#fa-heart');
147+
--fa-info: url('./../svg/font-awesome/icons/fa-icons.svg#fa-info');
148+
--fa-right-angle: url('./../svg/font-awesome/icons/fa-icons.svg#fa-right-angle');
149+
--fa-search: url('./../svg/font-awesome/icons/fa-icons.svg#fa-search');
150+
151+
--fa-instagram: url('./../svg/font-awesome/icons/fa-icons.svg#fa-instagram');
152+
--fa-twitter: url('./../svg/font-awesome/icons/fa-icons.svg#fa-twitter');
153+
--fa-facebook: url('./../svg/font-awesome/icons/fa-icons.svg#fa-facebook');
154+
--fa-linkedin: url('./../svg/font-awesome/icons/fa-icons.svg#fa-linkedin');
155+
--fa-mastodon: url('./../svg/font-awesome/icons/fa-icons.svg#fa-mastodon');
156+
157+
}
158+
159+
/* establish svg sprite icon defaults */
160+
.icon {
161+
display: inline-block;
162+
/* min-width: 30px;
163+
min-height: 30px; */
164+
height: 1em;
165+
width: 1em;
166+
167+
font-size: var(--icon-sprite-size);
168+
background-color: var(--icon-sprite-color);
169+
-webkit-mask-repeat: no-repeat;
170+
mask-repeat: no-repeat;
171+
172+
-webkit-mask-image: var(--icon-sprite);
173+
mask-image: var(--icon-sprite);
174+
175+
-webkit-mask-size: contain;
176+
mask-size: contain;
177+
}
178+
179+
/* customize a specific sprite via matching class on <span>
180+
with .icon, an element replaced with an icon using .icon-replace,
181+
or attaching an icon to an element :before using .icon-attach,
182+
leaving room for semantic and accessible implementation choices */
183+
184+
.icon.cc-heart, .icon-attach.cc-heart:before {
185+
--icon-sprite: var(--cc-heart);
186+
}
187+
188+
.icon.cc-heart-filled, .icon-attach.cc-heart-filled:before {
189+
--icon-sprite: var(--cc-heart-filled);
190+
}
191+
192+
.icon.cc-quote, .icon-attach.cc-quote:before {
193+
--icon-sprite: var(--cc-quote);
194+
}
195+
196+
.icon.fa-angle-down, .icon-attach.fa-angle-down:before {
197+
--icon-sprite: var(--fa-angle-down);
198+
}
199+
200+
.icon.fa-angle-left, .icon-attach.fa-angle-left:before {
201+
--icon-sprite: var(--fa-angle-left);
202+
}
203+
204+
.icon.fa-angle-right, .icon-attach.fa-angle-rignt:before {
205+
--icon-sprite: var(--fa-angle-right);
206+
}
207+
208+
.icon.fa-angle-up, .icon-attach.fa-angle-up:before {
209+
--icon-sprite: var(--fa-angle-up);
210+
}
211+
212+
.icon.fa-globe, .icon-attach.fa-globe:before {
213+
--icon-sprite: var(--fa-globe);
214+
}
215+
216+
.icon.fa-heart, .icon-attach.fa-heart:before {
217+
--icon-sprite: var(--fa-heart);
218+
}
219+
220+
.icon.fa-info, .icon-attach.fa-info:before {
221+
--icon-sprite: var(--fa-info);
222+
}
223+
224+
.icon.fa-right-angle, .icon-attach.fa-righ-angle:before {
225+
--icon-sprite: var(--fa-heart);
226+
}
227+
228+
.icon.fa-search, .icon-attach.fa-search:before {
229+
--icon-sprite: var(--fa-search);
230+
}
231+
232+
.icon-replace.fa-instagram {
233+
--icon-sprite: var(--fa-instagram);
234+
}
235+
236+
.icon-replace.fa-twitter {
237+
--icon-sprite: var(--fa-twitter);
238+
}
239+
240+
.icon-replace.fa-facebook {
241+
--icon-sprite: var(--fa-facebook);
242+
}
243+
244+
.icon-replace.fa-linkedin {
245+
--icon-sprite: var(--fa-linkedin);
246+
}
247+
248+
.icon-replace.fa-mastodon {
249+
--icon-sprite: var(--fa-mastodon);
250+
}
251+
252+
253+
/* attach an icon to an existing element with a :before */
254+
.icon-attach:before {
255+
display: inline-block;
256+
content: '';
257+
/* min-width: 30px; */
258+
/* min-height: 30px; */
259+
height: 1em;
260+
width: 1em;
261+
262+
font-size: var(--icon-sprite-size);
263+
background-color: var(--icon-sprite-color);
264+
-webkit-mask-repeat: no-repeat;
265+
mask-repeat: no-repeat;
266+
-webkit-mask-image: var(--icon-sprite);
267+
mask-image: var(--icon-sprite);
268+
269+
-webkit-mask-size: contain;
270+
mask-size: contain;
271+
272+
--icon-sprite: var(--cc-logo);
273+
}
274+
275+
.icon-replace {
276+
display: inline-block;
277+
content: '';
278+
text-indent: -1000px;
279+
280+
/* min-width: 30px; */
281+
/* min-height: 30px; */
282+
height: 1em;
283+
width: 1em;
284+
285+
font-size: var(--icon-sprite-size);
286+
background-color: var(--icon-sprite-color);
287+
-webkit-mask-repeat: no-repeat;
288+
mask-repeat: no-repeat;
289+
-webkit-mask-image: var(--icon-sprite);
290+
mask-image: var(--icon-sprite);
291+
292+
-webkit-mask-size: contain;
293+
mask-size: contain;
294+
295+
--icon-sprite: var(--cc-logo);
296+
}
297+

0 commit comments

Comments
 (0)