Skip to content

Commit 12f0684

Browse files
HikwaMehluliHikwaMehluli
committed
Add Notes about Coat of Arms + Align Google font Imports
1 parent 92f33aa commit 12f0684

12 files changed

Lines changed: 42 additions & 32 deletions

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Real world examples of websites in Zimbabwe with interactive SVG's:
1111
## Features
1212

1313
- **National overview** — Zoomable SVG map of all 10 provinces on `index.html`
14+
- **Coat of arms** — Zimbabwe coat of arms logo in the header of every page
1415
- **Per-province pages** — Detailed ward boundaries for each province with breadcrumb navigation
1516
- **Pan & zoom** — Drag to pan, buttons to zoom in/out/reset
1617
- **Tooltips** — Hover over any region to see its name (powered by TippyJS)
@@ -82,6 +83,8 @@ Run `npm run js-dev` (development, unminified) or `npm run js-prod` (production,
8283
├── index.html National overview map
8384
├── {province}.html 10 per-province ward maps
8485
├── dist/
86+
│ ├── img/
87+
│ │ └── zimbabwe_coat_of_arms.svg Logo in every page header
8588
│ ├── js/
8689
│ │ └── app.js Webpack-bundled JS (tippy.js, Popper, svg-pan-zoom + init code)
8790
│ ├── css/
@@ -114,6 +117,13 @@ Map colours are controlled via CSS custom properties defined in `src/scss/style.
114117
| `--color-hover` | `#5f6035` | Hover colour |
115118
| `--color-stroke` | `black` | Stroke outline colour |
116119

120+
### Header logo
121+
122+
Every page header displays **Zimbabwe's coat of arms** (`dist/img/zimbabwe_coat_of_arms.svg`). It sits inside a `<span>` alongside the page `<h1>`, linked to `index.html`. Styled in `src/scss/style.scss`:
123+
124+
- **Default:** 200px wide, floated left with 10px padding-right
125+
- **Mobile (<768px):** 150px wide (responsive media query)
126+
117127
### Rebuilding CSS
118128

119129
```bash

‎bulawayo.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Bulawayo</title>
8+
<title>Bulawayo Province | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎harare.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Harare</title>
8+
<title>Harare Province | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎manicaland.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Manicaland</title>
8+
<title>Manicaland Province | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎mashonaland-central.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Mashonaland Central</title>
8+
<title>Mashonaland Central | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎mashonaland-east.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Mashonaland East</title>
8+
<title>Mashonaland East | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎mashonaland-west.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Mashonaland West</title>
8+
<title>Mashonaland West | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎masvingo.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Masvingo Province</title>
8+
<title>Masvingo Province | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

‎matebeleland-north.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Matebeleland North</title>
8+
<title>Matebeleland North | Zimbabwe National and Provincial Delimitation Maps</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="./dist/css/app.css">
1313
</head>
1414

0 commit comments

Comments
 (0)