Skip to content

Commit 92f33aa

Browse files
HikwaMehluliHikwaMehluli
committed
Add: Coat of arms of Zimbabwe + Zimbabwe Facts
1 parent d6eeb57 commit 92f33aa

15 files changed

Lines changed: 259 additions & 5153 deletions

‎bulawayo.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@
1515
<body>
1616
<header>
1717
<a href="index.html">
18-
<h1>Bulawayo Province</h1>
18+
<span>
19+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20+
<h1>Bulawayo Province</h1>
21+
</span>
1922
</a>
2023
<h3>Provinces are constituent political entities of Zimbabwe. Zimbabwe currently has ten provinces, two of which are cities with provincial status. Zimbabwe is a unitary state, and its provinces exercise only the powers that the central government chooses to delegate.</h3>
2124
<nav>

‎dist/api/zim_facts.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ The official symbolism of the Zimbabwean coat of arms is as follows:
1515
- Hoe and Rifle: the transition from war to peace.
1616
- Wreath of gold and green: the mining and agricultural enterprise which "protects our national economy".
1717
- Star: ancient symbol of hope for the future. Tinctured red to "remind us of the suffering of all our people and the need to avoid any recurrence of that suffering".
18-
- Great Zimbabwe Bird: distinctive national emblem.
18+
- Great Zimbabwe Bird: distinctive national emblem.

‎dist/css/app.css‎

Lines changed: 201 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,201 @@
1-
.breadcrumb{padding:.5em 1em;background-color:var(--color-active);border-radius:.25em}.breadcrumb::after{clear:both;content:"";display:table}.breadcrumb li{display:inline-block;float:left;margin:.5em 0}.breadcrumb li::after{display:inline-block;content:"»";margin:0 .6em;color:var(--color-black)}.breadcrumb li:last-of-type::after{display:none}.breadcrumb li>*{display:inline-block;color:var(--color-black)}.breadcrumb li.current>*{color:var(--color-hover)}.breadcrumb a:hover{color:var(--color-hover)}@font-face{font-family:"interactive-map";src:url("../font/interactive-map.eot?93695735");src:url("../font/interactive-map.eot?93695735#iefix") format("embedded-opentype"),url("../font/interactive-map.woff2?93695735") format("woff2"),url("../font/interactive-map.woff?93695735") format("woff"),url("../font/interactive-map.ttf?93695735") format("truetype"),url("../font/interactive-map.svg?93695735#interactive-map") format("svg");font-weight:normal;font-style:normal}[class^=icon-]:before,[class*=" icon-"]:before{font-family:"interactive-map";font-style:normal;font-weight:normal;speak:never;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-minus:before{content:"";color:var(--color-white)}.icon-plus:before{content:"";color:var(--color-white)}.icon-refresh:before{content:"";color:var(--color-white)}:root{--bg-color: #d1d3be;--color-active: #a8a965;--color-hover: #5f6035;--color-stroke: black;--color-black: #222222;--color-white: #ffffff;--transition: all .5s}body{background-color:var(--bg-color);margin:0 auto;width:95%;max-width:1200px;font-family:"Roboto",sans-serif;font-optical-sizing:auto;font-style:normal}header a{color:var(--color-black);text-decoration:none;transition:var(--transition)}header a:hover{color:var(--color-hover)}main.map-container{background-color:var(--bg-color);border:2px solid var(--color-hover);margin:20px 0 20px 0;position:relative}svg{height:450px;width:100%}.outline{border:none;outline:none;fill:var(--color-active);stroke:var(--color-stroke);stroke-width:1;stroke-miterlimit:5;transition:var(--transition)}.outline:hover{cursor:pointer;border:none;outline:none;fill:var(--color-hover);stroke:var(--color-stroke)}svg#zimbabwe .outline{stroke-width:1.5}svg#harare .outline{stroke-width:1}.pan-controls{display:block;padding:0;position:absolute;bottom:15px;left:18px;width:auto}.pan-controls>span{border-radius:50%;background-color:var(--color-hover);color:var(--color-white);cursor:pointer;display:inline-block;font-size:25px;line-height:45px;width:45px;height:45px;margin:0 10px 0 0;text-align:center;transition:var(--transition)}.pan-controls>span:hover{background-color:var(--color-black)}
1+
@charset "UTF-8";
2+
.breadcrumb {
3+
padding: 0.5em 1em;
4+
background-color: var(--color-active);
5+
border-radius: 0.25em;
6+
}
7+
8+
.breadcrumb::after {
9+
clear: both;
10+
content: "";
11+
display: table;
12+
}
13+
14+
.breadcrumb li {
15+
display: inline-block;
16+
float: left;
17+
margin: 0.5em 0;
18+
}
19+
20+
.breadcrumb li::after {
21+
display: inline-block;
22+
content: "»";
23+
margin: 0 0.6em;
24+
color: var(--color-black);
25+
}
26+
27+
.breadcrumb li:last-of-type::after {
28+
display: none;
29+
}
30+
31+
.breadcrumb li > * {
32+
display: inline-block;
33+
color: var(--color-black);
34+
}
35+
36+
.breadcrumb li.current > * {
37+
color: var(--color-hover);
38+
}
39+
40+
.breadcrumb a:hover {
41+
color: var(--color-hover);
42+
}
43+
44+
@font-face {
45+
font-family: "interactive-map";
46+
src: url("../font/interactive-map.eot?93695735");
47+
src: url("../font/interactive-map.eot?93695735#iefix") format("embedded-opentype"), url("../font/interactive-map.woff2?93695735") format("woff2"), url("../font/interactive-map.woff?93695735") format("woff"), url("../font/interactive-map.ttf?93695735") format("truetype"), url("../font/interactive-map.svg?93695735#interactive-map") format("svg");
48+
font-weight: normal;
49+
font-style: normal;
50+
}
51+
[class^=icon-]:before,
52+
[class*=" icon-"]:before {
53+
font-family: "interactive-map";
54+
font-style: normal;
55+
font-weight: normal;
56+
speak: never;
57+
display: inline-block;
58+
text-decoration: inherit;
59+
width: 1em;
60+
margin-right: 0.2em;
61+
text-align: center;
62+
font-variant: normal;
63+
text-transform: none;
64+
line-height: 1em;
65+
margin-left: 0.2em;
66+
-webkit-font-smoothing: antialiased;
67+
-moz-osx-font-smoothing: grayscale;
68+
}
69+
70+
.icon-minus:before {
71+
content: "\e800";
72+
color: var(--color-white);
73+
}
74+
75+
.icon-plus:before {
76+
content: "\e801";
77+
color: var(--color-white);
78+
}
79+
80+
.icon-refresh:before {
81+
content: "\e802";
82+
color: var(--color-white);
83+
}
84+
85+
:root {
86+
/* SVG Map */
87+
--bg-color: #d1d3be;
88+
--color-active: #a8a965;
89+
--color-hover: #5f6035;
90+
--color-stroke: black;
91+
/* General Colors */
92+
--color-black: #222222;
93+
--color-white: #ffffff;
94+
/* Other Variables */
95+
--transition: all .5s;
96+
}
97+
98+
body {
99+
background-color: var(--bg-color);
100+
margin: 0 auto;
101+
width: 95%;
102+
max-width: 1200px;
103+
font-family: "Roboto", sans-serif;
104+
font-optical-sizing: auto;
105+
/* font-weight: <weight>; */
106+
font-style: normal;
107+
}
108+
109+
header a {
110+
color: var(--color-black);
111+
text-decoration: none;
112+
transition: var(--transition);
113+
}
114+
header a:hover {
115+
color: var(--color-hover);
116+
}
117+
header a span img {
118+
width: 200px;
119+
max-width: 100%;
120+
height: auto;
121+
float: left;
122+
padding-right: 10px;
123+
}
124+
@media (max-width: 768px) {
125+
header a span img {
126+
width: 150px;
127+
}
128+
}
129+
130+
main.map-container {
131+
background-color: var(--bg-color);
132+
border: 2px solid var(--color-hover);
133+
margin: 20px 0 20px 0;
134+
position: relative;
135+
}
136+
137+
svg {
138+
height: 450px;
139+
width: 100%;
140+
}
141+
142+
.outline {
143+
border: none;
144+
outline: none;
145+
fill: var(--color-active);
146+
stroke: var(--color-stroke);
147+
stroke-width: 1;
148+
/* stroke-linecap:round; */
149+
/* stroke-linejoin:round; */
150+
stroke-miterlimit: 5;
151+
transition: var(--transition);
152+
}
153+
.outline:hover {
154+
cursor: pointer;
155+
border: none;
156+
outline: none;
157+
fill: var(--color-hover);
158+
stroke: var(--color-stroke);
159+
}
160+
161+
/*******************
162+
Diffritiate map stroke incase of disparances
163+
*******************/
164+
svg#zimbabwe .outline {
165+
stroke-width: 1.5;
166+
}
167+
168+
svg#harare .outline {
169+
stroke-width: 1;
170+
}
171+
172+
/*******************
173+
SVG Pan Zoom Styling
174+
*******************/
175+
.pan-controls {
176+
display: block;
177+
padding: 0;
178+
position: absolute;
179+
bottom: 15px;
180+
left: 18px;
181+
width: auto;
182+
}
183+
184+
.pan-controls > span {
185+
border-radius: 50%;
186+
background-color: var(--color-hover);
187+
color: var(--color-white);
188+
cursor: pointer;
189+
display: inline-block;
190+
font-size: 25px;
191+
line-height: 45px;
192+
width: 45px;
193+
height: 45px;
194+
margin: 0 10px 0 0;
195+
text-align: center;
196+
transition: var(--transition);
197+
}
198+
199+
.pan-controls > span:hover {
200+
background-color: var(--color-black);
201+
}

0 commit comments

Comments
 (0)