Skip to content

Commit 37015df

Browse files
HikwaMehluliHikwaMehluli
committed
Make Header More Responsive + Remove unused scripts
1 parent 61bca8c commit 37015df

19 files changed

Lines changed: 97 additions & 146 deletions

‎README.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Real world examples of websites in Zimbabwe with interactive SVG's:
3939
- **SVG maps** — All map coordinates are inline `<polyline points="...">` in the HTML (no external data files)
4040
- **Libraries** (bundled into `dist/js/app.js` via webpack):
4141
- `svg-pan-zoom` — Pan and zoom controls
42-
- `TippyJS` + `Popper.js` — Tooltip popups
42+
- `TippyJS` — Tooltip popups (includes Popper.js under the hood)
4343
- **Fonts**: Roboto + Pliant via Google Fonts
4444
- **Build tools**: Sass (SCSS → CSS), Webpack (JS bundling + CSS inlining)
4545

@@ -71,7 +71,7 @@ npm install
7171
### JS compilation pipeline
7272

7373
1. **Entry point:** `src/js/_entry.js`
74-
2. **Webpack** resolves bare imports (`popper.min.js`, `svg-pan-zoom.min.js`) from `src/js/`, and npm imports (`tippy.js`) from `node_modules/`
74+
2. **Webpack** resolves bare imports (`svg-pan-zoom.min.js`) from `src/js/`, and npm imports (`tippy.js`) from `node_modules/`
7575
3. **CSS imports** (e.g. `tippy.js/dist/tippy.css`) are inlined into the bundle via `style-loader` + `css-loader`
7676
4. **Output:** a single `dist/js/app.js` loaded by all HTML pages
7777

@@ -86,16 +86,14 @@ Run `npm run js-dev` (development, unminified) or `npm run js-prod` (production,
8686
│ ├── img/
8787
│ │ └── zimbabwe_coat_of_arms.svg Logo in every page header
8888
│ ├── js/
89-
│ │ └── app.js Webpack-bundled JS (tippy.js, Popper, svg-pan-zoom + init code)
89+
│ │ └── app.js Webpack-bundled JS (tippy.js, svg-pan-zoom + init code)
9090
│ ├── css/
9191
│ │ └── app.css Compiled SCSS stylesheet
9292
│ └── font/ Custom icon font (interactive-map)
9393
├── src/
9494
│ ├── js/
9595
│ │ ├── _entry.js Webpack entry point
96-
│ │ ├── popper.min.js Vendored Popper.js
97-
│ │ ├── svg-pan-zoom.min.js
98-
│ │ └── tippy.min.js
96+
│ │ └── svg-pan-zoom.min.js
9997
│ └── scss/ SCSS source files
10098
│ ├── _entry.scss Entry point — imports all partials
10199
│ ├── style.scss Map colours, layout, typography
@@ -119,10 +117,11 @@ Map colours are controlled via CSS custom properties defined in `src/scss/style.
119117

120118
### Header logo
121119

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`:
120+
Every page header displays **Zimbabwe's coat of arms** (`dist/img/zimbabwe_coat_of_arms.svg`). The logo sits beside the page `<h1>` in a CSS grid layout, extending alongside the description and breadcrumb. Styled in `src/scss/style.scss`:
123121

124-
- **Default:** 200px wide, floated left with 10px padding-right
125-
- **Mobile (<768px):** 150px wide (responsive media query)
122+
- **Default:** 200px wide, spans the full header height alongside title, description, and breadcrumb
123+
- **Mobile (<600px):** 120px wide, stacks centered above the title (single-column grid)
124+
- **Tablet (600–768px):** 150px wide
126125

127126
### Rebuilding CSS
128127

‎bulawayo.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Bulawayo Province</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Bulawayo Province</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

‎dist/css/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎harare.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Harare Province</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Harare Province</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

‎index.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,11 @@
1515
<body>
1616

1717
<header>
18-
<a href="index.html">
19-
<span>
20-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
21-
<h1>Zimbabwe National and Provincial Delimitation Maps</h1>
22-
</span>
18+
<a href="index.html" class="header-link">
19+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2320
</a>
24-
<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>
21+
<h1>Zimbabwe National and Provincial Delimitation Maps</h1>
22+
<p class="header-description">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.</p>
2523

2624
<nav>
2725
<ol class="breadcrumb">

‎manicaland.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Manicaland Province</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Manicaland Province</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

‎mashonaland-central.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Mashonaland Central</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Mashonaland Central</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

‎mashonaland-east.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Mashonaland East</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Mashonaland East</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

‎mashonaland-west.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414

1515
<body>
1616
<header>
17-
<a href="index.html">
18-
<span>
19-
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
20-
<h1>Mashonaland West</h1>
21-
</span>
17+
<a href="index.html" class="header-link">
18+
<img src="./dist/img/zimbabwe_coat_of_arms.svg" alt="Zimbabwe Coat of Arms">
2219
</a>
23-
<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>
20+
<h1>Mashonaland West</h1>
21+
<p class="header-description">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.</p>
2422
<nav>
2523
<ol class="breadcrumb">
2624
<li><a href="index.html" data-tippy-content="Go Back">Zimbabwe</a></li>

0 commit comments

Comments
 (0)