Update content/formatting
This commit is contained in:
parent
064d627d4d
commit
20b43b933e
@ -2,6 +2,13 @@
|
||||
export let title = "Quartznet";
|
||||
</script>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="description col-md-5">
|
||||
<h1 class="title">{title}</h1>
|
||||
<p>Software, Games, Science, Space!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
display: flex;
|
||||
@ -20,10 +27,3 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="description col-md-5">
|
||||
<h1 class="title">{title}</h1>
|
||||
<p>Software, Games, Science, Space!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,22 +44,22 @@
|
||||
const toCssString = (props) =>
|
||||
Object.keys(props).reduce(
|
||||
(str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`,
|
||||
""
|
||||
"",
|
||||
);
|
||||
|
||||
$: cssBg = toCssString(Object.assign({}, styleBg, customStyleBg));
|
||||
$: cssWindow = toCssString(
|
||||
Object.assign({}, styleWindow, customStyleWindow)
|
||||
Object.assign({}, styleWindow, customStyleWindow),
|
||||
);
|
||||
$: cssContent = toCssString(
|
||||
Object.assign({}, styleContent, customStyleContent)
|
||||
Object.assign({}, styleContent, customStyleContent),
|
||||
);
|
||||
|
||||
const open = (
|
||||
NewComponent,
|
||||
newProps = {},
|
||||
style = { bg: {}, window: {}, content: {} },
|
||||
newCallback = () => {}
|
||||
newCallback = () => {},
|
||||
) => {
|
||||
Component = NewComponent;
|
||||
props = newProps;
|
||||
@ -213,7 +213,8 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
border-radius: 1.5rem;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 1px black;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@ -229,7 +230,8 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
height: 1px;
|
||||
background: black;
|
||||
transform-origin: center;
|
||||
transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
transition:
|
||||
height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,21 @@
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Quartznet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/admin">Admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
a {
|
||||
font-size: 1rem;
|
||||
@ -33,21 +51,3 @@
|
||||
border-bottom: 2px solid var(--line-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Quartznet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/admin">Admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<svelte:head>
|
||||
<script>
|
||||
if (document) {
|
||||
const defaultTheme = 'dark';
|
||||
const defaultTheme = "dark";
|
||||
const itemTheme = localStorage.getItem("theme") ?? defaultTheme;
|
||||
|
||||
localStorage.setItem("theme", itemTheme);
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
export let onClick;
|
||||
</script>
|
||||
|
||||
<a href="/admin">Admin</a>
|
||||
|
||||
<style>
|
||||
img {
|
||||
display: inline-block;
|
||||
@ -12,5 +14,3 @@
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href="/admin">Admin</a>
|
||||
|
||||
@ -4,16 +4,8 @@
|
||||
|
||||
let games = [
|
||||
{
|
||||
name: "Sirius",
|
||||
link: "./sirius",
|
||||
img: "img/600x300.png",
|
||||
size: { width: 600, height: 300 },
|
||||
description:
|
||||
"A 2D game about a wannabe space captain exploring the galaxy.",
|
||||
},
|
||||
{
|
||||
name: "Quartz",
|
||||
link: "./sirius",
|
||||
name: "Test",
|
||||
link: "/",
|
||||
img: "img/600x300.png",
|
||||
size: { width: 600, height: 300 },
|
||||
description: "Test",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import Banner from '$lib/Banner.svelte'
|
||||
import Banner from "$lib/Banner.svelte";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - About</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="About"/>
|
||||
<Banner title="About" />
|
||||
|
||||
<main class="container">
|
||||
<section>
|
||||
@ -15,9 +15,11 @@
|
||||
<p>A small team developing games and software.</p>
|
||||
|
||||
<h3>Why the name Quartznet</h3>
|
||||
<p>Naming things is hard. We ended up with the name quartz and added net making quartznet.
|
||||
|
||||
<p>
|
||||
Naming things is hard. We ended up with the name quartz and added
|
||||
net making quartznet.
|
||||
</p>
|
||||
<h3>SPAAAAACEEEE</h3>
|
||||
<p>Space!</p>
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
@ -1,20 +1,34 @@
|
||||
<script>
|
||||
import Banner from '$lib/Banner.svelte'
|
||||
import Banner from "$lib/Banner.svelte";
|
||||
|
||||
let services = [
|
||||
{
|
||||
name: "Status",
|
||||
link: "https://quartznet.info/status",
|
||||
description: "Server monitoring and troubleshooting",
|
||||
},
|
||||
{
|
||||
name: "Gitea",
|
||||
link: "https://git.quartznet.info",
|
||||
description: "Software development version control"
|
||||
}
|
||||
]
|
||||
description: "Software development version control",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - Admin</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="Admin" />
|
||||
|
||||
<main class="container">
|
||||
<section>
|
||||
<h2>Services</h2>
|
||||
<ul>
|
||||
{#each services as service}
|
||||
<li>
|
||||
<a href={service.link}>{service.name}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
section {
|
||||
display: flex;
|
||||
@ -48,22 +62,3 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - Admin</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="Admin"/>
|
||||
|
||||
<main class="container">
|
||||
<section>
|
||||
<h2>Services</h2>
|
||||
<ul>
|
||||
{#each services as service}
|
||||
<li>
|
||||
<a href="{service.link}">{service.name}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -1,37 +1,61 @@
|
||||
<script>
|
||||
import Banner from '$lib/Banner.svelte'
|
||||
import Banner from "$lib/Banner.svelte";
|
||||
|
||||
let username = "";
|
||||
let password = "";
|
||||
|
||||
const submitHandler = () => {
|
||||
alert("TODO: implement login backend");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - Login</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="Login"/>
|
||||
<Banner title="Login" />
|
||||
|
||||
<main class="container">
|
||||
<form on:submit|preventDefault={submitHandler} class="form-signin" method="post">
|
||||
<form
|
||||
on:submit|preventDefault={submitHandler}
|
||||
class="form-signin"
|
||||
method="post"
|
||||
>
|
||||
<div class="form-label-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" class="form-control" bind:value={username}
|
||||
name="username" placeholder="Username" required>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
class="form-control"
|
||||
bind:value={username}
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<label for="inputPassword">Password</label>
|
||||
<input type="password" id="password" class="form-control" bind:value={password}
|
||||
name="password" placeholder="Password" required>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
class="form-control"
|
||||
bind:value={password}
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox mb-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck1">
|
||||
<label class="custom-control-label" for="customCheck1">Remember password</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="customCheck1"
|
||||
/>
|
||||
<label class="custom-control-label" for="customCheck1"
|
||||
>Remember password</label
|
||||
>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
</form>
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import Banner from '$lib/Banner.svelte'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartznet - Sirius</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="Sirius"/>
|
||||
|
||||
<main class="container">
|
||||
<section class="content">
|
||||
<h1>Sirius game</h1>
|
||||
<p>Sirius game. Work in progress</p>
|
||||
<a href="https://quartznet.info/presskit">Presskit</a>
|
||||
</section>
|
||||
</main>
|
||||
Loading…
x
Reference in New Issue
Block a user