From efecd75247adb863058e376bda1273b8221d5804 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Sun, 19 May 2024 14:29:22 +0200 Subject: [PATCH] feat: integrate desktop main nav --- css/nav.css | 119 +++++++++++++++++++++++++++++++ img/nav-logo.png | Bin 0 -> 16267 bytes index.html | 177 ++++++++++++++++++++++++++++++----------------- index.js | 66 +++++------------- stylesheet.css | 68 +++--------------- 5 files changed, 261 insertions(+), 169 deletions(-) create mode 100644 css/nav.css create mode 100644 img/nav-logo.png diff --git a/css/nav.css b/css/nav.css new file mode 100644 index 0000000..10c9108 --- /dev/null +++ b/css/nav.css @@ -0,0 +1,119 @@ +.nav { + --background: var(--dark); + + position: sticky; + top: 0; + overflow: hidden; + padding: 0 var(--space-small); +} + +.nav--content { + max-width: var(--width); + margin: 0 auto; + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto auto; +} + +.nav--title { + grid-area: 1 / 1 / 3 / 2; + background: var(--background); + padding-top: var(--space-small); +} + +.nav--menu { + grid-area: 1 / 2 / 2 / 3; + overflow: hidden; + background: var(--background); + display: grid; + grid-template-columns: 1fr auto; + /* make the nav background full page width */ + margin: 0 -50vw; + padding: 0 50vw; +} + +.nav--menu-section { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 0; + margin: 0; +} + +.nav--menu-item { + list-style: none; + flex-grow: 1; + display: flex; +} + +.nav--menu-link { + flex-grow: 1; + padding: var(--space-large) var(--space-small); + + font-family: Knewave; + font-size: var(--fz-3); + color: var(--primary-color); + text-transform: uppercase; + text-align: center; + text-decoration: none; +} + +.nav--menu-link:hover { + background: var(--primary-color); + color: var(--on-primary); +} + +toggle-menu-button { + width: 34px; + height: 34px; + position: absolute; + top: 0; + right: 0; + display: none; + cursor: pointer; +} + +toggle-menu-button .bar { + display: block; + background-color: #777; + width: 20px; + height: 2px; + border-radius: 100px; + position: absolute; + top: 18px; + right: 7px; + transition: all 0.5s; +} + +toggle-menu-button .bar:first-child { + transform: translateY(-6px); +} + +.nav__open toggle-menu-button .bar { + transform: rotate(45deg); +} + +.nav__open toggle-menu-button .bar:first-child { + transform: rotate(-45deg); +} + +@media (max-width: 768px) { + .nav--menu { + max-height: 0; + display: flex; + flex-direction: column; + transition: all 0.2s ease-out; + } + + .nav--menu-section { + flex-direction: column; + } + + .nav--toggle-button { + display: block; + } + + .nav__open .nav--menu { + max-height: 100vh; + } +} diff --git a/img/nav-logo.png b/img/nav-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..4996bc62e7255c3f26d39f137cf70e114f8054fb GIT binary patch literal 16267 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 C)aO_L literal 0 HcmV?d00001 diff --git a/index.html b/index.html index ef87c18..1162987 100644 --- a/index.html +++ b/index.html @@ -1,69 +1,118 @@ - - - - - Frog Collective - - - - - - - - - -
-
- Frog Collective - + + + + + Frog Collective + + + + + + + + + + +
+
+

Frog Collective

+ +

+ Welcome to the cozy world of the Frog Collective, where big dreams come in small packages! We're not your typical gaming behemoth + with a massive team and towering office buildings. Nope, we're just two passionate souls huddled around a couple of computers, + fueled by an insatiable love for crafting little nuggets of joy that won't break the bank. +

+

+ Here we specialize in creating bite-sized adventures that anyone can pick up and play, but only the true gaming aficionados + can conquer. Think of us as the David to the Goliaths of the gaming industry. Our games might be small, but they will keep you + coming back for more. Now, you might be wondering, how on earth do two people manage to steer the ship in this vast ocean of pixels? + Well, let me tell you, it's all about that sweet, sweet collective decision-making magic. We're like yin and yang, balancing each + other's quirks and strengths as we navigate the treacherous waters of game development. +

+

+ Whether it's brainstorming ideas over a late-night pizza session or duking it out over the perfect shade of blue for our + protagonist's cape, every decision is a team effort. And hey, when you've only got two heads in the game, you learn to trust + each other's instincts real quick. So, if you're tired of the same old cookie-cutter games and fancy a little dose of indie charm, + strap in and join us on this wild ride through the pixelated cosmos. Who knows, you might just discover your new favorite addiction + in the unlikeliest of places. Welcome to Frog Collective – where small is mighty, and fun knows no bounds! +

+ +
+

+ News Title +

+
+ 02/05/2024 +
+ +
+ Here we specialize in creating bite-sized adventures that anyone + can pick up and play, but only the true gaming aficionados can + conquer. Think of us as the David to the Goliaths of the gaming + industry. Our games might be small, but they will keep you coming + back for more. Now, you might be wondering, how on earth do two + people manage to steer the ship in this vast ocean of pixels? Well, + let me tell you, it's all about that sweet, sweet collective + decision-making magic. We're like yin and yang, balancing each + other's quirks and strengths as we navigate the treacherous waters + of game development. +
+
+ +
+

+ News Title +

+
+ 02/05/2024 +
+ +
+ Here we specialize in creating bite-sized adventures that anyone + can pick up and play, but only the true gaming aficionados can + conquer. Think of us as the David to the Goliaths of the gaming + industry. Our games might be small, but they will keep you coming + back for more. Now, you might be wondering, how on earth do two + people manage to steer the ship in this vast ocean of pixels? Well, + let me tell you, it's all about that sweet, sweet collective + decision-making magic. We're like yin and yang, balancing each + other's quirks and strengths as we navigate the treacherous waters + of game development. +
-
-
- -
-
-
-
- -
-
- - -
- -
- -

Frog Collective

- -

- Welcome to the cozy world of the Frog Collective, where big dreams come in small packages! We're not your typical gaming behemoth - with a massive team and towering office buildings. Nope, we're just two passionate souls huddled around a couple of computers, - fueled by an insatiable love for crafting little nuggets of joy that won't break the bank. -

-

- Here we specialize in creating bite-sized adventures that anyone can pick up and play, but only the true gaming aficionados - can conquer. Think of us as the David to the Goliaths of the gaming industry. Our games might be small, but they will keep you - coming back for more. Now, you might be wondering, how on earth do two people manage to steer the ship in this vast ocean of pixels? - Well, let me tell you, it's all about that sweet, sweet collective decision-making magic. We're like yin and yang, balancing each - other's quirks and strengths as we navigate the treacherous waters of game development. -

-

- Whether it's brainstorming ideas over a late-night pizza session or duking it out over the perfect shade of blue for our - protagonist's cape, every decision is a team effort. And hey, when you've only got two heads in the game, you learn to trust - each other's instincts real quick. So, if you're tired of the same old cookie-cutter games and fancy a little dose of indie charm, - strap in and join us on this wild ride through the pixelated cosmos. Who knows, you might just discover your new favorite addiction - in the unlikeliest of places. Welcome to Frog Collective – where small is mighty, and fun knows no bounds! -

-
- + diff --git a/index.js b/index.js index c3e20ef..464062c 100644 --- a/index.js +++ b/index.js @@ -1,53 +1,25 @@ - -class FCMenu extends HTMLElement { - #rollBack; - - connectedCallback() { - const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; - window.addEventListener(windowsChangeEvent, this.closeMenu.bind(this)); - } - - toggleHorizontal() { - this.classList.remove('closing'); - for(const element of this.querySelectorAll('.fc-toggle-menu')) { - element.classList.toggle('pure-menu-horizontal'); - } - } - - toggleMenu() { - // Set timeout so that the panel has a chance to roll up before the menu switches states. - if (this.classList.contains('open')) { - this.classList.add('closing'); - this.#rollBack = setTimeout(this.toggleHorizontal.bind(this), 500); - } - else { - if (this.classList.contains('closing')) { - clearTimeout(this.#rollBack); - } else { - this.toggleHorizontal(); - } - } - this.classList.toggle('open'); - }; - - closeMenu() { - if (this.classList.contains('open')) { - this.toggleMenu(); - } - } -} -window.customElements.define('fc-menu', FCMenu) - -class FCMenuToggleButton extends HTMLElement { +class ToggleMenuButton extends HTMLElement { connectedCallback() { this.addEventListener('click', this.onClick.bind(this)) + const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; + window.addEventListener(windowsChangeEvent, this.close.bind(this)) } - onClick() { - const menu = this.closest("fc-menu"); - console.assert(menu != null); - menu.toggleMenu(); - e.preventDefault(); + get targetElement() { + const targetElementId = this.getAttribute('target') + const targetElement = document.getElementById(targetElementId) + console.assert(targetElement !== undefined) + return targetElement + } + + onClick(evt) { + this.targetElement.classList.toggle('nav__open') + evt.preventDefault() + } + + close() { + this.targetElement.classList.remone('nav__open') } } -window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton) + +window.customElements.define('toggle-menu-button', ToggleMenuButton) diff --git a/stylesheet.css b/stylesheet.css index e8e14f1..937b83d 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -2,14 +2,21 @@ --color: #161616; --primary-color: #E04855; - --on-primary: black; + --on-primary: white; --dark: #161616; --on-dark: #E04855; - --space-xsmall: 5px; + --space-small: 10px; --space-medium: 20px; + --space-large: 30px; + + --width: 1100px; + + --fz-1: 2rem; + --fz-2: 1.5rem; + --fz-3: 1.125rem; } body { @@ -56,61 +63,6 @@ p { background-image: url(img/frog-cwak.png); } -fc-menu { - background-image: url(img/background-black-red.jpg); - margin-bottom: 1em; - height: 2.4em; - overflow: hidden; - transition: height 0.5s; -} - -fc-menu .pure-menu-heading { - color: var(--primary-color); - font-weight: 900; - font-size: large; -} - -fc-menu .pure-menu-link { - color: #DB2937; -} - -fc-menu.open { - height: 14em; -} - -fc-menu-toggle-button { - width: 34px; - height: 34px; - position: absolute; - top: 0; - right: 0; - display: none; - cursor: pointer; -} - -fc-menu-toggle-button .bar { - display: block; - background-color: #777; - width: 20px; - height: 2px; - border-radius: 100px; - position: absolute; - top: 18px; - right: 7px; - transition: all 0.5s; -} - -fc-menu-toggle-button .bar:first-child { - transform: translateY(-6px); -} - -.open fc-menu-toggle-button .bar { - transform: rotate(45deg); -} - -.open fc-menu-toggle-button .bar:first-child { - transform: rotate(-45deg); -} .fc-right-menu { text-align: right; @@ -121,7 +73,7 @@ fc-menu-toggle-button .bar:first-child { text-align: left; } - fc-menu-toggle-button { + toggle-menu-button { display: block; } }