feat: Add initial content
This commit is contained in:
parent
d31076bb24
commit
68fbcb088e
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"livePreview.autoRefreshPreview": "On Changes to Saved Files"
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
66
index.html
66
index.html
|
|
@ -1,13 +1,69 @@
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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>
|
<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/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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
||||||
|
</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>
|
<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>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
|
||||||
|
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 {
|
||||||
|
connectedCallback() {
|
||||||
|
this.addEventListener('click', this.onClick.bind(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const menu = this.closest("fc-menu");
|
||||||
|
console.assert(menu != null);
|
||||||
|
menu.toggleMenu();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton)
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
body{
|
||||||
|
background-image: url(img/background.jpg);
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
text-align: justify;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #161616;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Knewave", system-ui;
|
||||||
|
color: #161616;
|
||||||
|
font-size: xx-large;
|
||||||
|
font-weight: 900;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 2em;
|
||||||
|
align-self: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator{
|
||||||
|
width: 150px;
|
||||||
|
height: 125px;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
background-image: url(img/frog.png);
|
||||||
|
}
|
||||||
|
.separator:hover{
|
||||||
|
background-image: url(img/frog-hover.png);
|
||||||
|
}
|
||||||
|
.separator:active{
|
||||||
|
background-image: url(img/frog-cwak.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu */
|
||||||
|
|
||||||
|
fc-menu {
|
||||||
|
background-image: url(img/background-black-red.jpg);
|
||||||
|
margin-bottom: 1em;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
height: 2.4em;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-transition: height 0.5s;
|
||||||
|
-moz-transition: height 0.5s;
|
||||||
|
-ms-transition: height 0.5s;
|
||||||
|
transition: height 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
fc-menu .pure-menu-heading {
|
||||||
|
color: #DB2937;
|
||||||
|
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 {
|
||||||
|
background-color: #777;
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 7px;
|
||||||
|
-webkit-transition: all 0.5s;
|
||||||
|
-moz-transition: all 0.5s;
|
||||||
|
-ms-transition: all 0.5s;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
fc-menu-toggle-button .bar:first-child {
|
||||||
|
-webkit-transform: translateY(-6px);
|
||||||
|
-moz-transform: translateY(-6px);
|
||||||
|
-ms-transform: translateY(-6px);
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.open fc-menu-toggle-button .bar {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-moz-transform: rotate(45deg);
|
||||||
|
-ms-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.open fc-menu-toggle-button .bar:first-child {
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-moz-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-right-menu {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 47.999em) {
|
||||||
|
|
||||||
|
.fc-right-menu {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
fc-menu-toggle-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue