MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Fonts, title alignment, clear rows, custom themes (03.09.10)

Browse Source 
Fonts:
- Roboto CSS updated to v51 paths (was v30)
- New CSS for Fredoka and Pacifico
- Remove orphan fira-sans.css and noto-sans.css (no woff2 files)
- Updated fonts README

CSS:
- clear: both on top-a, top-b, bottom-a, bottom-b, breadcrumbs
- .title-center and .title-right alignment classes
- Banner overlay height variable

Custom themes (for dev testing):
- light.custom.css: Warm Earth (brown/saddle brown palette)
- dark.custom.css: Deep Purple (purple/teal palette)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-07 23:49:56 -05:00
parent 00dd666197
commit 50a6f006ac
10 changed files with 2361 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/media/css/fonts/fira-sans.css
View File

@@ -1,56 +0,0 @@
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
*/
/*
* IMPORTANT: Font files must be downloaded separately
*
* This CSS file references Fira Sans font files that must be manually downloaded
* and placed in the fonts directory. See GOOGLE_FONTS_README.md in the fonts
* directory for download instructions.
*
* Required files:
* - fira-sans-v17-latin-100.woff2
* - fira-sans-v17-latin-300.woff2
* - fira-sans-v17-latin-regular.woff2
* - fira-sans-v17-latin-700.woff2
*/
/* Fira Sans Thin (100) */
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('../../fonts/fira-sans-v17-latin-100.woff2') format('woff2');
}
/* Fira Sans Light (300) */
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../../fonts/fira-sans-v17-latin-300.woff2') format('woff2');
}
/* Fira Sans Regular (400) */
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/fira-sans-v17-latin-regular.woff2') format('woff2');
}
/* Fira Sans Bold (700) */
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/fira-sans-v17-latin-700.woff2') format('woff2');
}

10
src/media/css/fonts/fredoka.css Normal file
View File

@@ -0,0 +1,10 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* SPDX-License-Identifier: GPL-3.0-or-later
* Fredoka — self-hosted from src/media/fonts/
*/
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300; font-display: swap; src: url('../../fonts/fredoka-v17-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/fredoka-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/fredoka-v17-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/fredoka-v17-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/fredoka-v17-latin-700.woff2') format('woff2'); }

56
src/media/css/fonts/noto-sans.css
View File

@@ -1,56 +0,0 @@
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
*/
/*
* IMPORTANT: Font files must be downloaded separately
*
* This CSS file references Noto Sans font files that must be manually downloaded
* and placed in the fonts directory. See GOOGLE_FONTS_README.md in the fonts
* directory for download instructions.
*
* Required files:
* - noto-sans-v36-latin-100.woff2
* - noto-sans-v36-latin-300.woff2
* - noto-sans-v36-latin-regular.woff2
* - noto-sans-v36-latin-700.woff2
*/
/* Noto Sans Thin (100) */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('../../fonts/noto-sans-v36-latin-100.woff2') format('woff2');
}
/* Noto Sans Light (300) */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../../fonts/noto-sans-v36-latin-300.woff2') format('woff2');
}
/* Noto Sans Regular (400) */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/noto-sans-v36-latin-regular.woff2') format('woff2');
}
/* Noto Sans Bold (700) */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/noto-sans-v36-latin-700.woff2') format('woff2');
}

6
src/media/css/fonts/pacifico.css Normal file
View File

@@ -0,0 +1,6 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* SPDX-License-Identifier: GPL-3.0-or-later
* Pacifico — self-hosted from src/media/fonts/
*/
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/pacifico-v23-latin-regular.woff2') format('woff2'); }

75
src/media/css/fonts/roboto.css
View File

@@ -1,56 +1,23 @@
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* SPDX-License-Identifier: GPL-3.0-or-later
* Roboto — self-hosted from src/media/fonts/
*/
/*
* IMPORTANT: Font files must be downloaded separately
*
* This CSS file references Roboto font files that must be manually downloaded
* and placed in the fonts directory. See GOOGLE_FONTS_README.md in the fonts
* directory for download instructions.
*
* Required files:
* - roboto-v30-latin-100.woff2
* - roboto-v30-latin-300.woff2
* - roboto-v30-latin-regular.woff2
* - roboto-v30-latin-700.woff2
*/
/* Roboto Thin (100) */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('../../fonts/roboto-v30-latin-100.woff2') format('woff2');
}
/* Roboto Light (300) */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../../fonts/roboto-v30-latin-300.woff2') format('woff2');
}
/* Roboto Regular (400) */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
/* Roboto Bold (700) */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/roboto-v30-latin-700.woff2') format('woff2');
}
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; font-display: swap; src: url('../../fonts/roboto-v51-latin-100.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 100; font-display: swap; src: url('../../fonts/roboto-v51-latin-100italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 200; font-display: swap; src: url('../../fonts/roboto-v51-latin-200.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 200; font-display: swap; src: url('../../fonts/roboto-v51-latin-200italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('../../fonts/roboto-v51-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; font-display: swap; src: url('../../fonts/roboto-v51-latin-300italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/roboto-v51-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('../../fonts/roboto-v51-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/roboto-v51-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; font-display: swap; src: url('../../fonts/roboto-v51-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/roboto-v51-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 600; font-display: swap; src: url('../../fonts/roboto-v51-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/roboto-v51-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; font-display: swap; src: url('../../fonts/roboto-v51-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 800; font-display: swap; src: url('../../fonts/roboto-v51-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 800; font-display: swap; src: url('../../fonts/roboto-v51-latin-800italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: url('../../fonts/roboto-v51-latin-900.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; font-display: swap; src: url('../../fonts/roboto-v51-latin-900italic.woff2') format('woff2'); }

8
src/media/css/template.css
View File

@@ -14624,6 +14624,10 @@ iframe {
line-height: 1.3;
}
/* Module title alignment — apply via module class suffix */
.title-center [class*="__title"] { text-align: center; }
.title-right [class*="__title"] { text-align: right; }
/* ── MODULE: Statistics ── */
.mod-stats__list {
margin: 0;
@@ -14853,8 +14857,10 @@ iframe {
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
.container-bottom-b,
.mod-breadcrumbs {
position: relative;
clear: both;
}
.container-top-a>*,

1143
src/media/css/theme/dark.custom.css Normal file
View File

File diff suppressed because it is too large Load Diff

1152
src/media/css/theme/light.custom.css Normal file
View File

File diff suppressed because it is too large Load Diff

142
src/media/fonts/GOOGLE_FONTS_README.md
View File

@@ -1,131 +1,31 @@
<!--
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
<!-- Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
SPDX-License-Identifier: GPL-3.0-or-later
VERSION: 03.09.10
-->
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
FILE: src/media/fonts/GOOGLE_FONTS_README.md
VERSION: 03.09.03
BRIEF: Instructions for downloading Google Fonts for self-hosting
-->
# Self-Hosted Google Fonts
# Google Fonts - Download Instructions
Fonts are served locally to avoid external CDN dependencies and improve privacy/performance.
This directory should contain self-hosted Google Font files to eliminate CDN dependencies.
## Available Fonts
## ⚠️ Manual Download Required
| Font | Weights | Styles | CSS File |
|------|---------|--------|----------|
| Roboto | 100–900 | Normal + Italic | `css/fonts/roboto.css` |
| Fredoka | 300–700 | Normal | `css/fonts/fredoka.css` |
| Pacifico | 400 | Normal | `css/fonts/pacifico.css` |
| Osaka | — | — | `css/fonts/osaka.css` |
The Google Font `.woff2` files are **NOT included** in the repository and must be downloaded manually before using non-default font schemes.
## Adding New Fonts
**Currently Available:**
- ✅ Osaka font (local TTF file, included)
1. Run `php scripts/download-google-fonts.php` or manually download woff2 files
2. Place files in `src/media/fonts/`
3. Create a CSS file in `src/media/css/fonts/` with `@font-face` declarations
4. Register the CSS in `joomla.asset.json`
5. Add the font as an option in `templateDetails.xml` font selector
**Requires Manual Download:**
- ❌ Roboto fonts (4 weight variants)
- ❌ Noto Sans fonts (4 weight variants)
- ❌ Fira Sans fonts (4 weight variants)
## File Naming Convention
## Required Font Files
`{font-name}-v{version}-latin-{weight}.woff2`
Download the following `.woff2` font files and place them in this directory:
### Roboto Font Files
- `roboto-v30-latin-100.woff2` (Thin)
- `roboto-v30-latin-300.woff2` (Light)
- `roboto-v30-latin-regular.woff2` (Regular)
- `roboto-v30-latin-700.woff2` (Bold)
### Noto Sans Font Files
- `noto-sans-v36-latin-100.woff2` (Thin)
- `noto-sans-v36-latin-300.woff2` (Light)
- `noto-sans-v36-latin-regular.woff2` (Regular)
- `noto-sans-v36-latin-700.woff2` (Bold)
### Fira Sans Font Files
- `fira-sans-v17-latin-100.woff2` (Thin)
- `fira-sans-v17-latin-300.woff2` (Light)
- `fira-sans-v17-latin-regular.woff2` (Regular)
- `fira-sans-v17-latin-700.woff2` (Bold)
## How to Download
### Option 1: Using google-webfonts-helper (Recommended)
1. Visit https://gwfh.mranftl.com/
2. Search for each font (Roboto, Noto Sans, Fira Sans)
3. Select character sets: **latin** (or add latin-ext if needed)
4. Select styles:
- ☑ 100 (thin)
- ☑ 300 (light)
- ☑ 400 (regular)
- ☑ 700 (bold)
5. In step 3, ensure **Modern Browsers** is selected (woff2 format)
6. In step 4, click **Download files**
7. Extract the `.woff2` files to this directory
### Option 2: Using google-font-installer (Node.js)
```bash
npm install -g google-font-installer
cd src/media/fonts/
# Download Roboto
google-font-installer Roboto:100,300,400,700
# Download Noto Sans
google-font-installer "Noto Sans:100,300,400,700"
# Download Fira Sans
google-font-installer "Fira Sans:100,300,400,700"
```
### Option 3: Manual Download Script (Linux/macOS)
```bash
#!/bin/bash
# Run this from src/media/fonts/ directory
download_font() {
local font_url="$1"
local output_dir="."
# Download CSS
css=$(curl -s -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36" "$font_url")
# Extract and download woff2 files
echo "$css" | grep -oP 'https://fonts\.gstatic\.com[^\)]*\.woff2' | while read url; do
filename=$(basename "$url")
echo "Downloading $filename..."
curl -s "$url" -o "$output_dir/$filename"
done
}
download_font "https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap"
download_font "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;400;700&display=swap"
download_font "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;400;700&display=swap"
```
## Font CSS Files
The corresponding CSS files with `@font-face` declarations are located in:
- `../css/fonts/roboto.css`
- `../css/fonts/noto-sans.css`
- `../css/fonts/fira-sans.css`
These CSS files reference the `.woff2` files in this directory.
## License
All Google Fonts are open source and licensed under the SIL Open Font License (OFL).
- Roboto: Apache License 2.0
- Noto Sans: SIL Open Font License 1.1
- Fira Sans: SIL Open Font License 1.1
## References
- Google Fonts: https://fonts.google.com/
- google-webfonts-helper: https://gwfh.mranftl.com/
- Font Licensing: https://fonts.google.com/attribution
Examples: `roboto-v51-latin-regular.woff2`, `fredoka-v17-latin-700.woff2`

2
src/templateDetails.xml
View File

@@ -36,7 +36,7 @@
</server>
</updateservers>
<name>MokoCassiopeia</name>
<version>03.09.09</version>
<version>03.09.10</version>
<scriptfile>script.php</scriptfile>
<creationDate>2026-03-26</creationDate>
<author>Jonathan Miller || Moko Consulting</author>