Skip to content

Commit c7b5e39

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Added country flags to be used when creating chapters.
Added scss files required for the flags to work: _Flag-icon-base.scss _flag-icon-list.scss _flag-icon-more.scss _variables.scss flag-icon.scss - this is now imported in main.scss. Created chapters styles. Added paragraph naked style (just the font). Added content to chapters - still not auto-generated - just to see the styles / shapes and decide on the amount of info in the cards and what buttons we want.
1 parent 4f7480b commit c7b5e39

File tree

521 files changed

+35460
-39
lines changed

Some content is hidden

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

521 files changed

+35460
-39
lines changed

‎_sass/_flag-icon-base.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.flag-icon-background {
2+
background-size: contain;
3+
background-position: 50%;
4+
background-repeat: no-repeat;
5+
}
6+
7+
.flag-icon {
8+
@extend .flag-icon-background;
9+
position: relative;
10+
display: inline-block;
11+
width: (4 / 3) * 1em;
12+
line-height: 1em;
13+
&:before {
14+
content: '\00a0';
15+
}
16+
&.flag-icon-squared {
17+
width: 1em;
18+
}
19+
}
20+
21+
@mixin flag-icon($country) {
22+
.flag-icon-#{$country} {
23+
background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
24+
&.flag-icon-squared {
25+
background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
26+
}
27+
}
28+
}

‎_sass/_flag-icon-list.scss‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
@include flag-icon(ad);
2+
@include flag-icon(ae);
3+
@include flag-icon(af);
4+
@include flag-icon(ag);
5+
@include flag-icon(ai);
6+
@include flag-icon(al);
7+
@include flag-icon(am);
8+
@include flag-icon(ao);
9+
@include flag-icon(aq);
10+
@include flag-icon(ar);
11+
@include flag-icon(as);
12+
@include flag-icon(at);
13+
@include flag-icon(au);
14+
@include flag-icon(aw);
15+
@include flag-icon(ax);
16+
@include flag-icon(az);
17+
@include flag-icon(ba);
18+
@include flag-icon(bb);
19+
@include flag-icon(bd);
20+
@include flag-icon(be);
21+
@include flag-icon(bf);
22+
@include flag-icon(bg);
23+
@include flag-icon(bh);
24+
@include flag-icon(bi);
25+
@include flag-icon(bj);
26+
@include flag-icon(bl);
27+
@include flag-icon(bm);
28+
@include flag-icon(bn);
29+
@include flag-icon(bo);
30+
@include flag-icon(bq);
31+
@include flag-icon(br);
32+
@include flag-icon(bs);
33+
@include flag-icon(bt);
34+
@include flag-icon(bv);
35+
@include flag-icon(bw);
36+
@include flag-icon(by);
37+
@include flag-icon(bz);
38+
@include flag-icon(ca);
39+
@include flag-icon(cc);
40+
@include flag-icon(cd);
41+
@include flag-icon(cf);
42+
@include flag-icon(cg);
43+
@include flag-icon(ch);
44+
@include flag-icon(ci);
45+
@include flag-icon(ck);
46+
@include flag-icon(cl);
47+
@include flag-icon(cm);
48+
@include flag-icon(cn);
49+
@include flag-icon(co);
50+
@include flag-icon(cr);
51+
@include flag-icon(cu);
52+
@include flag-icon(cv);
53+
@include flag-icon(cw);
54+
@include flag-icon(cx);
55+
@include flag-icon(cy);
56+
@include flag-icon(cz);
57+
@include flag-icon(de);
58+
@include flag-icon(dj);
59+
@include flag-icon(dk);
60+
@include flag-icon(dm);
61+
@include flag-icon(do);
62+
@include flag-icon(dz);
63+
@include flag-icon(ec);
64+
@include flag-icon(ee);
65+
@include flag-icon(eg);
66+
@include flag-icon(eh);
67+
@include flag-icon(er);
68+
@include flag-icon(es);
69+
@include flag-icon(et);
70+
@include flag-icon(fi);
71+
@include flag-icon(fj);
72+
@include flag-icon(fk);
73+
@include flag-icon(fm);
74+
@include flag-icon(fo);
75+
@include flag-icon(fr);
76+
@include flag-icon(ga);
77+
@include flag-icon(gb);
78+
@include flag-icon(gd);
79+
@include flag-icon(ge);
80+
@include flag-icon(gf);
81+
@include flag-icon(gg);
82+
@include flag-icon(gh);
83+
@include flag-icon(gi);
84+
@include flag-icon(gl);
85+
@include flag-icon(gm);
86+
@include flag-icon(gn);
87+
@include flag-icon(gp);
88+
@include flag-icon(gq);
89+
@include flag-icon(gr);
90+
@include flag-icon(gs);
91+
@include flag-icon(gt);
92+
@include flag-icon(gu);
93+
@include flag-icon(gw);
94+
@include flag-icon(gy);
95+
@include flag-icon(hk);
96+
@include flag-icon(hm);
97+
@include flag-icon(hn);
98+
@include flag-icon(hr);
99+
@include flag-icon(ht);
100+
@include flag-icon(hu);
101+
@include flag-icon(id);
102+
@include flag-icon(ie);
103+
@include flag-icon(il);
104+
@include flag-icon(im);
105+
@include flag-icon(in);
106+
@include flag-icon(io);
107+
@include flag-icon(iq);
108+
@include flag-icon(ir);
109+
@include flag-icon(is);
110+
@include flag-icon(it);
111+
@include flag-icon(je);
112+
@include flag-icon(jm);
113+
@include flag-icon(jo);
114+
@include flag-icon(jp);
115+
@include flag-icon(ke);
116+
@include flag-icon(kg);
117+
@include flag-icon(kh);
118+
@include flag-icon(ki);
119+
@include flag-icon(km);
120+
@include flag-icon(kn);
121+
@include flag-icon(kp);
122+
@include flag-icon(kr);
123+
@include flag-icon(kw);
124+
@include flag-icon(ky);
125+
@include flag-icon(kz);
126+
@include flag-icon(la);
127+
@include flag-icon(lb);
128+
@include flag-icon(lc);
129+
@include flag-icon(li);
130+
@include flag-icon(lk);
131+
@include flag-icon(lr);
132+
@include flag-icon(ls);
133+
@include flag-icon(lt);
134+
@include flag-icon(lu);
135+
@include flag-icon(lv);
136+
@include flag-icon(ly);
137+
@include flag-icon(ma);
138+
@include flag-icon(mc);
139+
@include flag-icon(md);
140+
@include flag-icon(me);
141+
@include flag-icon(mf);
142+
@include flag-icon(mg);
143+
@include flag-icon(mh);
144+
@include flag-icon(mk);
145+
@include flag-icon(ml);
146+
@include flag-icon(mm);
147+
@include flag-icon(mn);
148+
@include flag-icon(mo);
149+
@include flag-icon(mp);
150+
@include flag-icon(mq);
151+
@include flag-icon(mr);
152+
@include flag-icon(ms);
153+
@include flag-icon(mt);
154+
@include flag-icon(mu);
155+
@include flag-icon(mv);
156+
@include flag-icon(mw);
157+
@include flag-icon(mx);
158+
@include flag-icon(my);
159+
@include flag-icon(mz);
160+
@include flag-icon(na);
161+
@include flag-icon(nc);
162+
@include flag-icon(ne);
163+
@include flag-icon(nf);
164+
@include flag-icon(ng);
165+
@include flag-icon(ni);
166+
@include flag-icon(nl);
167+
@include flag-icon(no);
168+
@include flag-icon(np);
169+
@include flag-icon(nr);
170+
@include flag-icon(nu);
171+
@include flag-icon(nz);
172+
@include flag-icon(om);
173+
@include flag-icon(pa);
174+
@include flag-icon(pe);
175+
@include flag-icon(pf);
176+
@include flag-icon(pg);
177+
@include flag-icon(ph);
178+
@include flag-icon(pk);
179+
@include flag-icon(pl);
180+
@include flag-icon(pm);
181+
@include flag-icon(pn);
182+
@include flag-icon(pr);
183+
@include flag-icon(ps);
184+
@include flag-icon(pt);
185+
@include flag-icon(pw);
186+
@include flag-icon(py);
187+
@include flag-icon(qa);
188+
@include flag-icon(re);
189+
@include flag-icon(ro);
190+
@include flag-icon(rs);
191+
@include flag-icon(ru);
192+
@include flag-icon(rw);
193+
@include flag-icon(sa);
194+
@include flag-icon(sb);
195+
@include flag-icon(sc);
196+
@include flag-icon(sd);
197+
@include flag-icon(se);
198+
@include flag-icon(sg);
199+
@include flag-icon(sh);
200+
@include flag-icon(si);
201+
@include flag-icon(sj);
202+
@include flag-icon(sk);
203+
@include flag-icon(sl);
204+
@include flag-icon(sm);
205+
@include flag-icon(sn);
206+
@include flag-icon(so);
207+
@include flag-icon(sr);
208+
@include flag-icon(ss);
209+
@include flag-icon(st);
210+
@include flag-icon(sv);
211+
@include flag-icon(sx);
212+
@include flag-icon(sy);
213+
@include flag-icon(sz);
214+
@include flag-icon(tc);
215+
@include flag-icon(td);
216+
@include flag-icon(tf);
217+
@include flag-icon(tg);
218+
@include flag-icon(th);
219+
@include flag-icon(tj);
220+
@include flag-icon(tk);
221+
@include flag-icon(tl);
222+
@include flag-icon(tm);
223+
@include flag-icon(tn);
224+
@include flag-icon(to);
225+
@include flag-icon(tr);
226+
@include flag-icon(tt);
227+
@include flag-icon(tv);
228+
@include flag-icon(tw);
229+
@include flag-icon(tz);
230+
@include flag-icon(ua);
231+
@include flag-icon(ug);
232+
@include flag-icon(um);
233+
@include flag-icon(us);
234+
@include flag-icon(uy);
235+
@include flag-icon(uz);
236+
@include flag-icon(va);
237+
@include flag-icon(vc);
238+
@include flag-icon(ve);
239+
@include flag-icon(vg);
240+
@include flag-icon(vi);
241+
@include flag-icon(vn);
242+
@include flag-icon(vu);
243+
@include flag-icon(wf);
244+
@include flag-icon(ws);
245+
@include flag-icon(ye);
246+
@include flag-icon(yt);
247+
@include flag-icon(za);
248+
@include flag-icon(zm);
249+
@include flag-icon(zw);

‎_sass/_flag-icon-more.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@include flag-icon(es-ct);
2+
@include flag-icon(eu);
3+
@include flag-icon(gb-eng);
4+
@include flag-icon(gb-nir);
5+
@include flag-icon(gb-sct);
6+
@include flag-icon(gb-wls);
7+
@include flag-icon(un);

‎_sass/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$flag-icon-css-path: '../../bower_components/flag-icon-css/flags' !default;
2+
$flag-icon-rect-path: '/4x3' !default;
3+
$flag-icon-square-path: '/1x1' !default;

‎_sass/flag-icon.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "variables";
2+
@import "flag-icon-base";
3+
@import "flag-icon-list";
4+
@import "flag-icon-more";

‎_sass/style.scss‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -437,20 +437,62 @@ a {
437437
margin-top: 1em;
438438
}
439439

440+
.chapters__card-columns {
441+
column-count: 2;
442+
}
443+
440444
.chapters__card-main {
441445
background: rgba(0, 0, 0, 0.7);
442446
box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
443447
border: black 1px solid;
448+
//height: 9em;
444449
}
445450

446451
.chapters__card-header {
447452
border-bottom: rgba(129, 129, 129, 0.41) 1px solid;
448453
background-color: $dark-blue;
454+
padding: 0;
449455
}
450456

451457
.chapters__card-title {
452458
@extend .title-light;
453-
font-size: 1.1em;
459+
text-align: center;
460+
font-size: 1.25em;
461+
padding-top: 0.25em;
462+
padding-bottom: 0.25em;
463+
margin-bottom: 0;
464+
}
465+
466+
.chapters__card-paragraph {
467+
@extend .paragraph;
468+
color: $light-blue;
469+
}
470+
471+
.chapters__flag {
472+
margin-right: 0;
473+
border-radius: 5px;
474+
font-size: 1.5em;
475+
margin-left: 0.25em;
476+
margin-top: 0.25em;
477+
}
478+
479+
.chapters__card-button {
480+
@extend .button-standard;
481+
min-width: 50%;
482+
padding: 0;
483+
margin-bottom: 0.25em;
484+
&:hover > .chapters__card-icon {
485+
color: $button-text-hover;
486+
}
487+
}
488+
489+
.chapters__card-icon {
490+
text-align: center;
491+
color: $button-text;
492+
font-size: 1em;
493+
transition: all 0.5s ease-in;
494+
min-width: 100%;
495+
min-height: 100%;
454496
}
455497

456498
.events {

‎_sass/typography.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,10 @@
152152
color: $subtitle;
153153
}
154154

155+
.paragraph {
156+
font-family: 'Playfair Display', serif;
157+
}
158+
155159
.paragraph-dark {
156160
font-size: 1em;
157161
color: $paragraph-dark;

0 commit comments

Comments
 (0)