mckuhei
/
cursedcreationsteam.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #17 from code913/refactor

Browse Source 
Refactor and add comments to make the code easier to understand
main
SolDev69 2 years ago committed by GitHub
parent 355e8a09d2 39aca9159d
commit a9be568abc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 131 additions and 117 deletions
Show Stats Download Patch File Download Diff File

1
src/app.html
Unescape Escape View File

@ -1,3 +1,4 @@
<!-- HTML boilerplate for every page that gets filled with svelte code -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">

113
src/lib/Header.svelte
Unescape Escape View File

@ -1,113 +0,0 @@
<script>
import "@material/web/iconbutton/outlined-icon-button";
import "@material/web/icon/icon";
let navShown = false;
</script>
<header>
<nav>
<a class="brand" href="/">Cursed Creations</a>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<md-outlined-icon-button class="menu" aria-label="Toggle navigation" on:click={(_) => (navShown = !navShown)}>
<!-- https://fonts.google.com/icons -->
<md-icon><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg></md-icon>
</md-outlined-icon-button>
<ul class="links" class:shown={navShown}>
{#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
<li><a {href}>{display}</a></li>
{/each}
</ul>
</nav>
</header>
<style lang="scss">
$space: 4ch;
header {
display: contents;
}
nav {
display: grid;
align-items: center;
column-gap: $space;
padding: #{$space * 0.5};
background: var(--md-sys-color-surface-container-high);
min-height: 5svh;
grid-template: {
areas: "brand links .";
columns: auto auto 1fr;
}
* {
color: var(--md-sys-color-on-surface);
}
a {
text-decoration: none;
&:hover,
&:focus,
&:focus-within,
&:focus-visible {
color: var(--md-sys-color-on-surface-variant);
}
}
:global(.menu) {
display: none;
}
@each $area in ("brand", "menu", "links") {
:global(& .#{$area}) {
grid-area: unquote($area);
}
}
}
.brand {
font-weight: bolder;
font-size: 1.4rem;
}
.menu {
justify-self: end;
}
.links {
list-style-type: none;
display: flex;
padding: 0;
column-gap: $space;
li {
display: contents;
}
}
@media (max-width: 800px) {
nav {
grid-template: {
areas: "brand menu" "links links";
columns: 1fr auto;
rows: auto min-content;
}
}
.menu {
display: revert-layer;
}
.links {
flex-direction: column;
row-gap: #{$space * 0.5};
&:not(.shown) {
display: none;
}
}
}
</style>

1
src/routes/+layout.js
Unescape Escape View File

@ -1 +1,2 @@
// Tells sveltekit to prerender every page so the static adapter in svelte.config.js can do its job
export const prerender = true; export const prerender = true;

121
src/routes/+layout.svelte
Unescape Escape View File

@ -1,11 +1,126 @@
<!-- Code that applies to every single page -->
<!-- <slot /> is a placeholder, it gets replaced by the html of the page currently being viewed -->
<script> <script>
import Header from "$lib/Header.svelte"; import "@material/web/iconbutton/outlined-icon-button";
import "@material/web/icon/icon";
let navShown = false;
</script> </script>
<Header /> <header>
<nav>
<a class="brand" href="/">Cursed Creations</a>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<md-outlined-icon-button aria-label="Toggle navigation" on:click={() => (navShown = !navShown)}>
<!-- https://fonts.google.com/icons -->
<md-icon
><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
></md-icon
>
</md-outlined-icon-button>
<ul class="links" class:shown={navShown}>
{#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
<li><a {href}>{display}</a></li>
{/each}
</ul>
</nav>
</header>
<main><slot /></main> <main><slot /></main>
<style> <style lang="scss">
// Code for the navbar
$space: 4ch;
header {
display: contents;
}
nav {
display: grid;
align-items: center;
column-gap: $space;
padding: #{$space * 0.5};
background: var(--md-sys-color-surface-container-high);
min-height: 5svh;
grid-template: {
areas: "brand links .";
columns: auto auto 1fr;
}
* {
color: var(--md-sys-color-on-surface);
}
a {
text-decoration: none;
&:hover,
&:focus,
&:focus-within,
&:focus-visible {
color: var(--md-sys-color-on-surface-variant);
}
}
@each $area in ("brand", "menu", "links") {
:global(& .#{$area}) {
grid-area: unquote($area);
}
}
}
.brand {
font-weight: bolder;
font-size: 1.4rem;
grid-area: brand;
}
md-outlined-icon-button {
display: none;
justify-self: end;
grid-area: menu;
}
.links {
list-style-type: none;
display: flex;
padding: 0;
column-gap: $space;
grid-area: links;
li {
display: contents;
}
}
@media (max-width: 800px) {
nav {
grid-template: {
areas: "brand menu" "links links";
columns: 1fr auto;
rows: auto min-content;
}
}
md-outlined-icon-button {
display: revert-layer;
}
.links {
flex-direction: column;
row-gap: #{$space * 0.5};
&:not(.shown) {
display: none;
}
}
}
// Code for everything else
// :global() means the css applies to all elements in the output html instead of only applying to elements in this file
main { main {
padding: 2ch; padding: 2ch;
} }

3
src/routes/+page.svelte
Unescape Escape View File

@ -1,3 +1,6 @@
<!-- Homepage at / -->
<!-- -->
<svelte:head> <svelte:head>
<title>Cursed Creations | Home</title> <title>Cursed Creations | Home</title>
</svelte:head> </svelte:head>

4
src/routes/downloads/+layout.svelte
Unescape Escape View File

@ -1,3 +1,7 @@
<!-- Code that applies to every page under /downloads -->
<!-- Refer to src/routes/+layout.svelte for explanation of <slot /> -->
<!-- The code in that layout file also applies here -->
<slot /> <slot />
<style> <style>

4
src/routes/downloads/+page.svelte
Unescape Escape View File

@ -1,5 +1,7 @@
<!-- Main downloads page at /downloads -->
<svelte:head> <svelte:head>
<title>Cursed Creations | Mod Downloadd</title> <title>Cursed Creations | Mod Downloads</title>
</svelte:head> </svelte:head>
<h1>Cursed Creations Minecraft Mods</h1> <h1>Cursed Creations Minecraft Mods</h1>

1
svelte.config.js
Unescape Escape View File

@ -3,6 +3,7 @@ import preprocess from "svelte-preprocess";
const config = { const config = {
kit: { kit: {
// Tells sveltekit to produce static files to upload to github pages
adapter: adapter({ adapter: adapter({
pages: "docs", pages: "docs",
assets: "docs", assets: "docs",

Write Preview
Loading…
Cancel
Save