From a92e1249570b7e22e63c00be1a182c3a28d836f5 Mon Sep 17 00:00:00 2001 From: ro Date: Tue, 23 Apr 2024 13:41:41 -0600 Subject: [PATCH] default theme clean up the default theme included with fipamo was a bit janky, so that's been cleaned to bring it more inline with current accessiblility standards, an updated mobile friendly menu, updated the logo and plugged in the fresh colors. the layout is still a bit boring but the main purpose of the default is to show how templating works, so it needs to be kept as simple as possible but it still has some room for making it pop a bit more. --- .../Controllers/Theming/ThemeController.php | 2 +- .../fipamo-default-v2/assets/css/color.css | 8 +- .../fipamo-default-v2/assets/css/frame.css | 89 ++++++++++++------- .../assets/css/typography.css | 2 +- .../assets/images/global/close.svg | 7 ++ .../images/global/fipamo-logo-primary.svg | 33 +++++++ .../images/global/fipamo-logo-secondary.svg | 33 +++++++ .../assets/images/global/menu.svg | 8 ++ .../assets/images/global/the-logo.svg | 33 ------- .../fipamo-default-v2/assets/scripts/Base.js | 14 ++- .../themes/fipamo-default-v2/base.blade.php | 64 ++----------- .../fipamo-default-v2/includes/menu.blade.php | 17 ++++ .../fipamo-default-v2/includes/nav.blade.php | 10 +++ .../includes/slides.blade.php | 33 +++++++ .../themes/fipamo-default-v2/page.blade.php | 9 +- public/assets/images/global/fipamo-logo.svg | 33 ------- 16 files changed, 227 insertions(+), 168 deletions(-) create mode 100644 content/themes/fipamo-default-v2/assets/images/global/close.svg create mode 100644 content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-primary.svg create mode 100644 content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-secondary.svg create mode 100644 content/themes/fipamo-default-v2/assets/images/global/menu.svg delete mode 100644 content/themes/fipamo-default-v2/assets/images/global/the-logo.svg create mode 100644 content/themes/fipamo-default-v2/includes/menu.blade.php create mode 100644 content/themes/fipamo-default-v2/includes/nav.blade.php create mode 100644 content/themes/fipamo-default-v2/includes/slides.blade.php delete mode 100644 public/assets/images/global/fipamo-logo.svg diff --git a/app/Http/Controllers/Theming/ThemeController.php b/app/Http/Controllers/Theming/ThemeController.php index c35049d..14658c7 100644 --- a/app/Http/Controllers/Theming/ThemeController.php +++ b/app/Http/Controllers/Theming/ThemeController.php @@ -40,7 +40,7 @@ class ThemeController extends Controller $view == 'index' ? $template = $currentTheme . '.index' : $template = $currentTheme . '.page'; - $page = $this->pages->getById('532E2250-F8CB-4E87-9782-8AFBEE88DD5E'); + $page = $this->pages->getById('F4429D34-25E7-4CA9-9B0A-742810277505'); $pageData = $this->sort->page($page); break; case "tags": diff --git a/content/themes/fipamo-default-v2/assets/css/color.css b/content/themes/fipamo-default-v2/assets/css/color.css index fe1970b..c9d714a 100644 --- a/content/themes/fipamo-default-v2/assets/css/color.css +++ b/content/themes/fipamo-default-v2/assets/css/color.css @@ -1,9 +1,11 @@ /* BASE COLORS */ :root { + /* BASE COLORS */ --primary: #1d3040; - --secondary: #fc6399; + --secondary: #f3ebd2; --primary-highlight: #f5ab35; - --secondary-highlight: #63fcc6ff; - --white: #ebe5d4; + --secondary-highlight: #cf436b; + --white: #efebe3; + --grey: #abb7b7; --black: #32302f; } diff --git a/content/themes/fipamo-default-v2/assets/css/frame.css b/content/themes/fipamo-default-v2/assets/css/frame.css index 98aee6e..c4da05a 100644 --- a/content/themes/fipamo-default-v2/assets/css/frame.css +++ b/content/themes/fipamo-default-v2/assets/css/frame.css @@ -8,7 +8,7 @@ html { } html body { - background: var(--white); + background: var(--secondary); margin: 0; padding: 0; perspective: 1px; @@ -24,7 +24,6 @@ html body { a { color: var(--primary); text-decoration: none; - border-bottom: 1px solid var(--secondary); transition: all 0.2s linear; } @@ -47,24 +46,51 @@ code { padding: 3px; } +img.logo-medium { + width: 60px; +} + +#menu-open, +#menu-close { + cursor: pointer; +} + /* HEADER */ header { - background: var(--primary); - height: 90%; width: 100%; - border-top: var(--white) 3px solid; + border-top: var(--secondary) 3px solid; + position: relative; + z-index: 400; } -/* HEADER -> Slideshow */ - -header > div[role="slide-show"] { +div#menu { + position: fixed; width: 100%; - height: 90%; - position: absolute; + height: 100%; + background: var(--secondary-highlight); + z-index: 500; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + visibility: hidden; } -header > div[role="slide-show"] > div[role="slide"] { +div.menu > div.links { + font-size: 2em; + line-height: 1em; +} + +/* Slideshow */ + +div.slide-show { + width: 100%; + height: 90%; + position: relative; +} + +div.slide-show > div.slide { transition: all 0.7s linear; width: 100%; height: 100%; @@ -79,7 +105,7 @@ header > div[role="slide-show"] > div[role="slide"] { opacity: 1; } -header > div[role="slide-show"] > div[role="slide"] > video { +div.slide-show > div.slide > video { width: 100%; height: 100%; object-fit: cover; @@ -102,13 +128,8 @@ nav img { border-bottom: none; } -nav div[role="nav-right"] { - margin-left: auto; - margin-right: 0; -} - -nav a[role="home-link"] { - border-bottom: none; +nav > div.right { + text-align: right; } nav a[role="menu-link"] { @@ -124,19 +145,19 @@ nav a[role="menu-link"] { /* MAIN CONTENT */ main { z-index: 2; - background: var(--white); + background: var(--secondary); line-height: 30px; font-weight: lighter; width: 100%; - color: var(--black); + color: var(--primary); } main > article { position: relative; - background: var(--white); + background: var(--secondary); vertical-align: top; - color: var(--black); - padding: 0 15%; + color: var(--primary); + padding: 0 10%; } main > article > div[role="archives"] { @@ -153,27 +174,31 @@ main article div[role="archives"] h3 { } main > section { - background: var(--primary); + background: var(--secondary-highlight); display: grid; grid-template-columns: 50% 50%; - padding: 0 15%; + padding: 0 10%; max-width: 1000px; - color: var(--secondary); + color: var(--primary); } main > section > div { padding-bottom: 20px; } -main > section[role="page-meta"] > div a { - color: var(--white); +main > sectio.page-meta > div a { + color: var(--primary); } /* FOOTER */ footer { - background: var(--secondary-highlight); - padding: 30px 15%; - color: var(--primary); + background: var(--primary); + padding: 30px 10%; + color: var(--secondary); +} + +footer a { + color: var(--primary-highlight); } /* RESPONSIVE */ diff --git a/content/themes/fipamo-default-v2/assets/css/typography.css b/content/themes/fipamo-default-v2/assets/css/typography.css index cd88d74..e33af25 100644 --- a/content/themes/fipamo-default-v2/assets/css/typography.css +++ b/content/themes/fipamo-default-v2/assets/css/typography.css @@ -6,7 +6,7 @@ h1, h2, h3 { - color: var(--white); + color: var(--primary); } h1 { diff --git a/content/themes/fipamo-default-v2/assets/images/global/close.svg b/content/themes/fipamo-default-v2/assets/images/global/close.svg new file mode 100644 index 0000000..8f2a9ce --- /dev/null +++ b/content/themes/fipamo-default-v2/assets/images/global/close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-primary.svg b/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-primary.svg new file mode 100644 index 0000000..9cfdfcf --- /dev/null +++ b/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-primary.svg @@ -0,0 +1,33 @@ + + + + + diff --git a/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-secondary.svg b/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-secondary.svg new file mode 100644 index 0000000..dd76bae --- /dev/null +++ b/content/themes/fipamo-default-v2/assets/images/global/fipamo-logo-secondary.svg @@ -0,0 +1,33 @@ + + + + + diff --git a/content/themes/fipamo-default-v2/assets/images/global/menu.svg b/content/themes/fipamo-default-v2/assets/images/global/menu.svg new file mode 100644 index 0000000..6724ec1 --- /dev/null +++ b/content/themes/fipamo-default-v2/assets/images/global/menu.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/content/themes/fipamo-default-v2/assets/images/global/the-logo.svg b/content/themes/fipamo-default-v2/assets/images/global/the-logo.svg deleted file mode 100644 index 824cdc4..0000000 --- a/content/themes/fipamo-default-v2/assets/images/global/the-logo.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/content/themes/fipamo-default-v2/assets/scripts/Base.js b/content/themes/fipamo-default-v2/assets/scripts/Base.js index d5fc1ad..a9d7156 100644 --- a/content/themes/fipamo-default-v2/assets/scripts/Base.js +++ b/content/themes/fipamo-default-v2/assets/scripts/Base.js @@ -4,16 +4,24 @@ export default class Base { //-------------------------- constructor() { this.currentSlide = 0; - this.slides = document.querySelectorAll('[role="slide"]'); + this.slides = document.querySelectorAll('.slide'); //alert('FRESH'); + document.getElementById('menu-open').addEventListener('click', e => { + document.getElementById('menu').style.opacity = '100%'; + document.getElementById('menu').style.visibility = 'visible'; + }); + document.getElementById('menu-close').addEventListener('click', e => { + document.getElementById('menu').style.opacity = '0'; + document.getElementById('menu').style.visibility = 'hidden'; + }); this.start(); } start() { if (this.slides.length > 1) { this.slideInterval = setInterval(() => { - this.slides[this.currentSlide].className = 'hide'; + this.slides[this.currentSlide].className = 'hide slide'; this.currentSlide = (this.currentSlide + 1) % this.slides.length; - this.slides[this.currentSlide].className = 'show'; + this.slides[this.currentSlide].className = 'show slide'; }, 3000); } } diff --git a/content/themes/fipamo-default-v2/base.blade.php b/content/themes/fipamo-default-v2/base.blade.php index 07d3586..622bd83 100644 --- a/content/themes/fipamo-default-v2/base.blade.php +++ b/content/themes/fipamo-default-v2/base.blade.php @@ -29,67 +29,17 @@ +
-
- @if(count($media)>1) - @foreach($media as $item) - @if($item['type'] == "mp4") -
- -
- @else -
- @endif - @endforeach - @else - @if(isset($media[0]) && $media != '') - @if($media[0]['type'] == "mp4") -
- -
- @else -
- @endif - @else -
- @endif - @endif -
- + @include('fipamo-default-v2.includes.nav')
-
+ @include('fipamo-default-v2.includes.slides') +
@section('main-content') @show -
+