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

Hero variable system, CSS fallbacks, header cleanup, remove mobile overrides

Browse Source 
- Hero card fully variable-driven: --hero-card-bg/color/overlay/border-radius/padding/max-width
- Alternative hero variant: --hero-alt-card-* for secondary theme
- Overlay bg-position and bg-size now customizable via variables
- Mobile breakpoint: photo bg hidden, hero full-bleed on small screens
- Added fallback values to 1365 var() calls in template.css
- .btn --btn-bg changed from transparent to var(--body-bg) in dark/light themes
- .offcanvas-header .btn-close gets background-color from overlay
- Stripped file info headers (@package/DEFGROUP/VERSION) from 48 files, kept copyright/SPDX
- Synced all theme variables across standard and custom templates
- Removed 26 mobile.php layout overrides
- Added *.py to .gitignore, card-border-radius fallback

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-02 11:17:53 -05:00
parent a0cc9020a4
commit 26e7be57d3
54 changed files with 2143 additions and 4742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/media/css/editor.css
View File

@@ -4,15 +4,6 @@
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/editor.css
VERSION: 03.09.02
BRIEF: Stylesheet for Joomla editor content within MokoCassiopeia template
*/
/* STYLES FOR JOOMLA! EDITOR */

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

@@ -1,16 +1,8 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
/* 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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Styles
PATH: ./media/templates/site/mokocassiopeia/css/fonts/fira-sans.css
VERSION: 03.09.02
BRIEF: Fira Sans font family definitions (self-hosted)
*/
/*

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

@@ -1,16 +1,8 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
/* 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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Styles
PATH: ./media/templates/site/mokocassiopeia/css/fonts/noto-sans.css
VERSION: 03.09.02
BRIEF: Noto Sans font family definitions (self-hosted)
*/
/*

9
src/media/css/fonts/osaka.css
View File

@@ -1,7 +1,8 @@
/**
* @package MokoCassiopeia
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 3 or later
/* 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
*/
@font-face {

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

@@ -1,16 +1,8 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
/* 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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Styles
PATH: ./media/templates/site/mokocassiopeia/css/fonts/roboto.css
VERSION: 03.09.02
BRIEF: Roboto font family definitions (self-hosted)
*/
/*

9
src/media/css/system/searchtools/searchtools.css
View File

@@ -4,15 +4,6 @@
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/system/searchtools/searchtools.css
VERSION: 03.09.02
BRIEF: Stylesheet for Joomla search tools integration in MokoCassiopeia template
*/
.js-stools-container-bar {

9
src/media/css/template-rtl.css
View File

@@ -4,15 +4,6 @@
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/template-rtl.css
VERSION: 03.09.02
BRIEF: Right-to-left (RTL) layout stylesheet for MokoCassiopeia template
*/
/*!

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

File diff suppressed because it is too large Load Diff

33
src/media/css/theme/dark.standard.css
View File

@@ -5,16 +5,6 @@
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css
VERSION: 03.09.02
BRIEF: Standard dark mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* DARK THEME
* --------------------------------------------- */
@@ -526,6 +516,8 @@ color-scheme: dark;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.3);
--hero-overlay-bg-position: center;
--hero-overlay-bg-size: cover;
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
@@ -541,6 +533,25 @@ color-scheme: dark;
--hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80));
--hero-secondary-color: #f1f5f9;
/* ===== HERO CARD (inner .hero element) ===== */
/* Default card — uses primary variant values */
--hero-card-bg: var(--hero-primary-bg-color);
--hero-card-color: var(--hero-primary-color);
--hero-card-overlay: var(--hero-primary-overlay);
--hero-card-border-radius: .5rem;
--hero-card-padding-x: 2rem;
--hero-card-padding-y: 3rem;
--hero-card-max-width: 600px;
/* Alternative card — uses secondary variant values */
--hero-alt-card-bg: var(--hero-secondary-bg-color);
--hero-alt-card-color: var(--hero-secondary-color);
--hero-alt-card-overlay: var(--hero-secondary-overlay);
--hero-alt-card-border-radius: .5rem;
--hero-alt-card-padding-x: 2rem;
--hero-alt-card-padding-y: 3rem;
--hero-alt-card-max-width: 600px;
/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
--block-color-1: var(--secondary-bg);
--block-text-1: var(--body-color);
@@ -820,7 +831,7 @@ color-scheme: dark;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: var(--white);
--btn-bg: transparent;
--btn-bg: var(--body-bg);
--btn-border-width: 1px;
--btn-border-color: transparent;
--btn-border-radius: 0.25rem;

33
src/media/css/theme/light.standard.css
View File

@@ -5,16 +5,6 @@
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_standard.css
VERSION: 03.09.02
BRIEF: Standard light mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* LIGHT THEME
* --------------------------------------------- */
@@ -525,6 +515,8 @@ color-scheme: light;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.1);
--hero-overlay-bg-position: center;
--hero-overlay-bg-size: cover;
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
@@ -540,6 +532,25 @@ color-scheme: light;
--hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75));
--hero-secondary-color: #f1f5f9;
/* ===== HERO CARD (inner .hero element) ===== */
/* Default card — uses primary variant values */
--hero-card-bg: var(--hero-primary-bg-color);
--hero-card-color: var(--hero-primary-color);
--hero-card-overlay: var(--hero-primary-overlay);
--hero-card-border-radius: .5rem;
--hero-card-padding-x: 2rem;
--hero-card-padding-y: 3rem;
--hero-card-max-width: 600px;
/* Alternative card — uses secondary variant values */
--hero-alt-card-bg: var(--hero-secondary-bg-color);
--hero-alt-card-color: var(--hero-secondary-color);
--hero-alt-card-overlay: var(--hero-secondary-overlay);
--hero-alt-card-border-radius: .5rem;
--hero-alt-card-padding-x: 2rem;
--hero-alt-card-padding-y: 3rem;
--hero-alt-card-max-width: 600px;
/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
--block-color-1: var(--color-primary);
--block-text-1: var(--body-color);
@@ -819,7 +830,7 @@ color-scheme: light;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: hsl(210, 11%, 15%);
--btn-bg: transparent;
--btn-bg: var(--body-bg);
--btn-border-width: 1px;
--btn-border-color: transparent;
--btn-border-radius: 0.25rem;