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 0000000..4996bc6 Binary files /dev/null and b/img/nav-logo.png differ 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; } }