From 99bd49e901c986fcf20ef89bc86dae152ad7e791 Mon Sep 17 00:00:00 2001 From: Andre Levesque <0sniffs_scaled@icloud.com> Date: Tue, 3 Dec 2024 23:39:38 -0500 Subject: [PATCH] visual and functional enhancements --- docs/assets/css/base.css | 140 ++++++++++++++++++++------------- docs/assets/css/components.css | 103 ++++++++---------------- docs/assets/css/overrides.css | 62 +++++++++------ docs/index.md | 4 +- mkdocs.yml | 8 +- 5 files changed, 160 insertions(+), 157 deletions(-) diff --git a/docs/assets/css/base.css b/docs/assets/css/base.css index 45e26418..e5899800 100644 --- a/docs/assets/css/base.css +++ b/docs/assets/css/base.css @@ -1,57 +1,91 @@ -/* Updated content for base.css */ +/* Base.css: Reset and global styles */ +/* Typography */ :root { - /* Typography */ - --body-font-family: 'DM Sans', sans-serif; - --h1-font-size: 48px; - --h2-font-size: 40px; - --h3-font-size: 36px; - --nav-font-size: 16px; /* Updated navbar font size */ - --toc-font-size: 18px; /* Updated ToC font size */ - - /* Colors */ - --primary-color: #FC6C6D; - --secondary-color: #2D6F72; - --section-bg-color: #f9f9f9; - --white-color: #ffffff; - --dark-color: #000000; - --text-color: #717275; - --border-color: #e9eaeb; - } - - body { - font-family: var(--body-font-family); - background-color: var(--white-color); - color: var(--text-color); - } - - h1, h2, h3, h4, h5, h6 { - font-family: var(--body-font-family); - color: var(--dark-color); + --font-family-base: 'DM Sans', sans-serif; + --font-size-base: 16px; + --line-height-base: 1.6; + --color-primary: #2D6F72; /* Emphasize CivicTechWR green */ + --color-secondary: #000000; /* Dark for contrast */ + --color-light: #ffffff; /* White background */ + --color-text: #717275; /* Subtle text color */ + --color-border: #e9eaeb; /* Neutral border color */ +} + +body { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--color-text); + background-color: var(--color-light); + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { font-weight: 700; - } - - h1 { - font-size: var(--h1-font-size); - } - - h2 { - font-size: var(--h2-font-size); - color: var(--secondary-color); - } - - h3 { - font-size: var(--h3-font-size); - } - - /* General link styles */ - a { - color: var(--primary-color); + color: var(--color-secondary); + margin: 0; +} + +a { + color: var(--color-primary); + text-decoration: none; +} + +a:hover { + color: var(--color-secondary); +} + +/* Utility Classes */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +.section-padding { + padding: 4rem 0; +} + +.text-center { + text-align: center; +} + +.text-primary { + color: var(--color-primary); +} + +/* Hero Section */ +.hero { + background: linear-gradient(to right, #2D6F72, #ffffff); + color: var(--color-light); + text-align: center; + padding: 60px 20px; + border-radius: 10px; + margin-bottom: 30px; +} + +.hero h1 { + font-size: 36px; + font-weight: bold; +} + +.hero p { + font-size: 18px; + color: #f9f9f9; +} + +.hero a { + color: var(--color-light); + font-weight: bold; + padding: 10px 20px; + border: 2px solid var(--color-light); + border-radius: 5px; text-decoration: none; - transition: color 0.3s; - } - - a:hover { - color: var(--secondary-color); - } - \ No newline at end of file +} + +.hero a:hover { + background-color: var(--color-light); + color: var(--color-primary); +} \ No newline at end of file diff --git a/docs/assets/css/components.css b/docs/assets/css/components.css index 052baa8b..7e9c6114 100644 --- a/docs/assets/css/components.css +++ b/docs/assets/css/components.css @@ -1,84 +1,43 @@ -/* Navbar */ -.navbar { - background-color: transparent; - padding: 15px; -} - -.navbar .nav-link { - font-size: var(--menu-font-size); - color: var(--secondary-color); - margin-right: 20px; -} - -.navbar .nav-link:hover { - color: var(--primary-color); - border-bottom: 2px solid var(--primary-color); -} - -/* Hero Section */ -.hero { - background: url("../images/bg-theme.png") no-repeat center center; - background-size: cover; - padding: 150px 0; - text-align: center; -} - -.hero h1 { - font-size: var(--h1-font-size); - color: var(--white-color); +/* Buttons */ +button, .btn { + background-color: var(--color-primary); + color: var(--color-light); + border-radius: 5px; + padding: 10px 20px; + transition: background-color 0.3s ease, transform 0.2s ease; } -.hero p { - font-size: var(--p-font-size); - color: var(--white-color); +button:hover, .btn:hover { + background-color: var(--color-secondary); + transform: scale(1.05); } -.hero .cta-button { - background-color: var(--primary-color); - color: var(--white-color); - padding: 10px 20px; - border-radius: 50px; +/* Navigation bar */ +.navbar { + background: var(--color-light); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 10px 20px; } -/* Buttons */ -.btn-primary { - background-color: var(--primary-color); - color: var(--white-color); - padding: 10px 20px; - border-radius: 50px; +.navbar a { + color: var(--color-secondary); + font-weight: 500; + font-size: 14px; } -.btn-primary:hover { - background-color: var(--secondary-color); -} -/* Top Navigation Links */ -.md-nav__item a { - font-size: var(--nav-font-size); - font-weight: 700; - color: var(--link-color); - text-decoration: none; - padding: 10px 15px; +.navbar a:hover { + color: var(--color-primary); } -.md-nav__item a:hover { - color: var(--secondary-color); - text-decoration: underline; -} -/* ToC Header */ -.md-sidebar__title { - font-size: var(--toc-font-size); - font-weight: 700; - color: var(--dark-color); -} - -/* ToC Links */ -.md-sidebar__item a { - font-size: var(--toc-font-size); - color: var(--link-color); - text-decoration: none; +/* Hero Section */ +.hero { + background: linear-gradient(90deg, #2D6F72, #ffffff); + color: var(--color-light); + text-align: center; + padding: 100px 20px; } -.md-sidebar__item a:hover { - color: var(--secondary-color); - text-decoration: underline; -} +.hero h1 { + font-size: 48px; + font-weight: 700; +} \ No newline at end of file diff --git a/docs/assets/css/overrides.css b/docs/assets/css/overrides.css index 5816c4be..84329092 100644 --- a/docs/assets/css/overrides.css +++ b/docs/assets/css/overrides.css @@ -1,33 +1,43 @@ -/* Override Material Theme Defaults */ -.md-nav__item a { - color: var(--secondary-color); - font-size: var(--menu-font-size); +/* Override specific styles */ + +/* Table of Contents */ +.toc { + background-color: var(--color-light); + border: 1px solid var(--color-border); + padding: 10px 15px; + border-radius: 8px; +} + +.toc a { + color: var(--color-primary); + font-size: 14px; +} + +.toc a:hover { + color: var(--color-secondary); +} + +/* Footer */ +.footer { + background: var(--color-secondary); + color: var(--color-light); + text-align: center; + padding: 20px; } -.md-nav__item a:hover { - color: var(--primary-color); +.footer a { + color: var(--color-primary); } -.md-header { - background-color: var(--dark-color); +.footer a:hover { + color: var(--color-light); } -.md-footer { - background-color: var(--section-bg-color); - color: var(--dark-color); +/* Adjust navigation hover effects */ +.navbar a { + transition: color 0.3s ease; } -/* Adjusting spacing for ToC sidebar */ -.md-sidebar { - padding: 20px 15px; - } - - /* Increasing spacing between ToC links */ - .md-sidebar__item { - margin-bottom: 10px; - } - - /* Adding custom styles for the Home link */ - .md-nav__item:first-child a { - font-size: 18px; /* Slightly larger for the home link */ - font-weight: bold; - } \ No newline at end of file + +.navbar a:hover { + color: var(--color-secondary); +} \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 4884cead..6228cb39 100644 --- a/docs/index.md +++ b/docs/index.md @@ -24,14 +24,14 @@ Learn how to communicate, contribute, and plan effectively: Keep track of past discussions and decisions: -- [2024-06-19 Meeting Minutes](meeting-minutes/2024-06-19_Meeting_Minutes.md) +- [2024-06-19 Recap](recaps/2024-06-19_recap.md) ### Templates Useful templates for effective collaboration: - [Event Planning Template](ctwr-templates/Event_Planning_Template.md) -- [Meeting Minutes Template](ctwr-templates/Meeting_Minutes_Template.md) +- [Recaps Template](ctwr-templates/Recaps_Template.md) ### FAQ diff --git a/mkdocs.yml b/mkdocs.yml index e53adda5..026c31c7 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -11,8 +11,8 @@ theme: - search.suggest - search.highlight palette: - primary: blue - accent: blue + primary: white + accent: indigo toggle: icon: material/brightness-4 name: Switch @@ -20,7 +20,7 @@ theme: font: text: "Roboto, Arial, sans-serif" code: "Roboto Mono, Courier New, monospace" - logo: assets/civictechwr_logo_white.png + logo: assets/civictechwr_logo_black.png favicon: assets/civictechwr_logo_white.png # Plugins plugins: @@ -52,7 +52,7 @@ nav: - Guide: guidelines/Event_Planning_Guide.md - Template: ctwr-templates/Event_Planning_Template.md - Social Media Guidelines: guidelines/SocialMedia_Guidelines.md - - Meeting Minutes: + - Recaps: - Overview: recaps/index.md # High-level overview for meeting minutes - June 18, 2024: recaps/2024-06-19_recap.md - Templates: