First bits of layout
Also changed footer text to not claim rights we don't have.
This commit is contained in:
parent
514229256b
commit
d868a70895
3 changed files with 120 additions and 7 deletions
|
@ -1,9 +1,7 @@
|
|||
<footer>
|
||||
The above variably-named Shark Game<br />
|
||||
© <a href="https://cirri.al/">Cirrial</a>, 2014-2016<br />
|
||||
© <a href="https://github.com/spencers145/">spencers145</a>, 2020-2021<br
|
||||
/>
|
||||
All rights reserved.
|
||||
The above variably-named Shark Game courtesy of:<br />
|
||||
<a href="https://cirri.al/">Cirrial</a>, 2014-2016<br />
|
||||
<a href="https://github.com/spencers145/">spencers145</a>, 2020-2021
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -1 +1,105 @@
|
|||
<header id="title">save</header>
|
||||
<script>
|
||||
const discordLink = "https://discord.gg/eYqApFkFPY";
|
||||
|
||||
const mainHeaderButtons = {
|
||||
save() {
|
||||
console.log("save");
|
||||
},
|
||||
options() {
|
||||
console.log("options");
|
||||
},
|
||||
help() {
|
||||
console.log("help");
|
||||
},
|
||||
reset() {
|
||||
console.log("reset");
|
||||
},
|
||||
};
|
||||
const otherHeaderButtons = {
|
||||
changelog() {
|
||||
console.log("changelog");
|
||||
},
|
||||
credits() {
|
||||
console.log("credits");
|
||||
},
|
||||
donate() {
|
||||
console.log("donate");
|
||||
},
|
||||
discord() {
|
||||
console.log("discord");
|
||||
},
|
||||
notice() {
|
||||
console.log("notice");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<ul id="main-header-buttons">
|
||||
{#each Object.entries(mainHeaderButtons) as [name, onClick]}
|
||||
<li><a on:click={onClick} href={"javascript:;"}>{name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
<ul id="other-header-buttons">
|
||||
{#each Object.entries(otherHeaderButtons) as [name, onClick]}
|
||||
<li><a on:click={name === "discord" ? undefined : onClick} href={name === "discord" ? discordLink : "javascript:;"}>{name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: var(--color-med);
|
||||
text-shadow: 2px 2px 3px var(--color-darker);
|
||||
color: var(--color-lighter);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
> ul {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 0.2em 0.8em;
|
||||
padding: 0.2em 0.8em;
|
||||
|
||||
> li {
|
||||
pointer-events: initial;
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
|
||||
&:before {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
&:first-child:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
> a:link,
|
||||
> a:visited {
|
||||
color: var(--color-lighter);
|
||||
filter: none;
|
||||
}
|
||||
> a:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
}
|
||||
|
||||
&#main-header-buttons {
|
||||
float: left;
|
||||
}
|
||||
&#other-header-buttons {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1 +1,12 @@
|
|||
<main id="wrapper">Wrapper</main>
|
||||
<main>Wrapper</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
background-color: var(--color-dark);
|
||||
margin: 2.5em auto;
|
||||
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
Reference in a new issue