frog-collective/frog-website
frog-collective
/
frog-website
5
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

feat: integrate desktop main nav

This commit is contained in:
Corentin 2024-05-19 14:29:22 +02:00
parent 409aa430d8
commit efecd75247
5 changed files with 261 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
css/nav.css Normal file
View File

@ -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;
}
}

BIN
img/nav-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

177
index.html
View File

@ -1,69 +1,118 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
<title>Frog Collective</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
<link rel="stylesheet" href="stylesheet.css"/>
<script type="module" src="index.js"></script>
</head>
<body>
<fc-menu class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading">Frog Collective</a>
<fc-menu-toggle-button><s class="bar"></s><s class="bar"></s></fc-menu-toggle-button>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
<title>Frog Collective</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
<link rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="css/nav.css"/>
<script type="module" src="index.js"></script>
</head>
<body>
<nav class="nav" id="nav">
<div class="nav--content">
<div class="nav--menu">
<ul class="nav--menu-section">
<li class="nav--menu-item">
<a href="#" class="nav--menu-link">Collective</a>
</li>
<li class="nav--menu-item">
<a href="#" class="nav--menu-link">Games</a>
</li>
<li class="nav--menu-item">
<a href="#" class="nav--menu-link">News</a>
</li>
<li class="nav--menu-item">
<a href="#" class="nav--menu-link">Contact</a>
</li>
</ul>
<ul class="nav--menu-section">
<li class="nav--menu-item">
<a href="#" class="nav--menu-link">Itch.io</a>
</li>
</ul>
</div>
<div class="nav--title">
<img class="nav--logo" src="img/nav-logo.png" title="Frog Collective"></img>
</div>
<toggle-menu-button target="nav" class="nav--toggle-button">
<s class="bar"></s>
<s class="bar"></s>
</toggle-menu-button>
</div>
</nav>
<div class="content">
<div class="separator"></div>
<h1>Frog Collective</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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!
</p>
<div class="news">
<h3 class="news--title">
News Title
</div>
<div class="news--date">
02/05/2024
</div>
<div class="news--content">
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.
</div>
</div>
<div class="news">
<h3 class="news--title">
News Title
</div>
<div class="news--date">
02/05/2024
</div>
<div class="news--content">
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.
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal fc-toggle-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Collective</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal fc-toggle-menu fc-right-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Itch.io</a></li>
</ul>
</div>
</div>
</fc-menu>
<div class="content">
<div class="separator"></div>
<h1>Frog Collective</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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!
</p>
</div>
</body>
</body>
</html>

66
index.js
View File

@ -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)

68
stylesheet.css
View File

@ -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;
}
}