Compare commits
2 commits
ea3269647e
...
e459005a46
| Author | SHA1 | Date | |
|---|---|---|---|
| e459005a46 | |||
| e66ca9cd85 |
5 changed files with 186 additions and 56 deletions
|
|
@ -27,12 +27,8 @@
|
|||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
body {
|
||||
min-width: 720px;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
|
|
@ -40,6 +36,14 @@
|
|||
transition-duration: var(--default--transition);
|
||||
transition-property: color,background-color;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
</style>
|
||||
|
||||
%sveltekit.head%
|
||||
|
|
|
|||
|
|
@ -1,35 +1,55 @@
|
|||
<script>
|
||||
import DarkModeToggle from "./DarkModeToggle.svelte";
|
||||
import Logo from "./Logo.svelte";
|
||||
|
||||
let y = 0;
|
||||
</script>
|
||||
|
||||
<nav class="bg-secondary">
|
||||
<h1 class="title"><Logo /></h1>
|
||||
<nav class={y === 0 ? "" : "scrolled"}>
|
||||
<a href="/"><h1 class="title"><Logo />Incremental Social</h1></a>
|
||||
<div class="flex-spacer" />
|
||||
<!-- TODO only show these links when logged in -->
|
||||
<a href="https://cinny.incremental.social">Matrix</a>
|
||||
<a href="https://git.incremental.social">Code</a>
|
||||
<div class="separator" />
|
||||
<DarkModeToggle />
|
||||
<a href="https://auth.incremental.social" class="btn primary login" target="_blank">login/register</a>
|
||||
<div class="separator" />
|
||||
<a href="https://auth.incremental.social" class="btn primary">login/register</a>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<style>
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
width: calc(1440px - 64px);
|
||||
max-width: 95%;
|
||||
height: 64px;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav.scrolled {
|
||||
background-color: var(--nord6);
|
||||
}
|
||||
|
||||
:global(.dark nav.scrolled) {
|
||||
background-color: var(--nord-deep-dark) !important;
|
||||
}
|
||||
|
||||
nav > * {
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 400%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +59,7 @@
|
|||
}
|
||||
|
||||
:global(.container>*) {
|
||||
width: 600px;
|
||||
width: 1280px;
|
||||
max-width: 95%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
|
@ -48,4 +68,10 @@
|
|||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
background-color: var(--nord9);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,139 @@
|
|||
<script>
|
||||
import Logo from "./Logo.svelte";
|
||||
import Logo from './Logo.svelte';
|
||||
</script>
|
||||
|
||||
<div class="logo-container">
|
||||
<div class="logo">
|
||||
<div class="logo-bg"><Logo /></div>
|
||||
<Logo />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row gutter-tiny" style="width: 900px; align-items: stretch;">
|
||||
<div class="col xs-12 sm-6">
|
||||
<p>
|
||||
Welcome to <Logo />(AKA "incremental social")! <Logo /> is a website for connecting with fellow "incrementalists": developers and enjoyers of incremental games!
|
||||
</p>
|
||||
<p>
|
||||
Use a variety of different services to chat, share updates, and post your own projects - all with one account. Most of the services also federate, allowing you to use your <Logo /> account to connect to other servers and participate in communities for your other interests as well!
|
||||
</p>
|
||||
<div class="col sm-12 md-6">
|
||||
<h2>Connect with your fellow incremental games developers and enjoyers!</h2>
|
||||
<h3>
|
||||
Use a variety of different services to chat, share updates, and post your own projects - all
|
||||
with one account.
|
||||
</h3>
|
||||
<!-- TODO replace with "Welcome back, $USER" when logged in -->
|
||||
<a href="https://auth.incremental.social" class="btn primary">login/register</a>
|
||||
</div>
|
||||
<div class="col sm-12 md-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row gutter-tiny" style="width: 900px; align-items: stretch;">
|
||||
<div class="col sm-12 md-4 feature">
|
||||
<h4>Federated</h4>
|
||||
<p>Each of these services federate with other servers, allowing you to use your <Logo /> account to participate in any other communities you have interest in as well!</p>
|
||||
</div>
|
||||
<div class="col xs-12 sm-6" style="border-left: solid 1px var(--nord9);">
|
||||
<h3>A Kind Place To Be</h3>
|
||||
<p>
|
||||
The moderating team at <Logo />, headed by <a href="https://matrix.to/#/@thepaperpilot:incremental.social">@thepaperpilot@incremental.social</a>, strive to make this place a friendly and safe space for everyone. Each service has a strict no harassment policy.
|
||||
</p>
|
||||
<div class="col sm-12 md-4 feature">
|
||||
<h4>Kind</h4>
|
||||
<p>The moderating team at <Logo />, headed by <a href="https://matrix.to/#/@thepaperpilot:incremental.social">@thepaperpilot@incremental.social</a>, strive to make this place a friendly and safe space for everyone. Each service has a strict no harassment policy.</p>
|
||||
</div>
|
||||
<div class="col sm-12 md-4 feature">
|
||||
<h4>Encompassing</h4>
|
||||
<p>The selection of services are designed to fulfill all your social needs with the incremental games community - whether it be chatting, microblogging, developing, or sharing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Services</h3>
|
||||
<h2 style="text-align: center; margin-top: 80px">Services</h2>
|
||||
|
||||
<div class="row gutter-tiny" style="width: 900px">
|
||||
<div class="col xs-12 sm-6">
|
||||
<div class="callout minimal info">
|
||||
<h3 class="callout-title">Matrix</h3>
|
||||
Chat with others in a discord-like interface, but without the centralization or monetization. Join public rooms specific to a game you're making/playing through, general discussion, or even some off-topic interest you think other incrementalists would enjoy. You can use the web client (Cinny) or any other Matrix client.
|
||||
<div class="links">
|
||||
<a href="https://cinny.incremental.social" class="btn primary" target="_blank">Open Cinny</a>
|
||||
<a href="https://matrix.org/ecosystem/clients/" class="btn secondary" target="_blank">Other Clients</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-12 md-6">
|
||||
<div class="callout minimal info">
|
||||
<h4 class="callout-title">Matrix</h4>
|
||||
Chat with others in a discord-like interface, but without the centralization or monetization. Join
|
||||
public rooms specific to a game you're making/playing through, general discussion, or even some
|
||||
off-topic interest you think other incrementalists would enjoy. You can use the web client (Cinny)
|
||||
or any other Matrix client.
|
||||
<div class="links">
|
||||
<a href="https://cinny.incremental.social" class="btn primary" target="_blank">Open Cinny</a
|
||||
>
|
||||
<a href="https://matrix.org/ecosystem/clients/" class="btn secondary" target="_blank"
|
||||
>Other Clients</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h3:not(.callout-title) {
|
||||
text-align: center;
|
||||
}
|
||||
.logo-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 35vmin;
|
||||
margin-top: -80px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.callout {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.callout>.links {
|
||||
.logo {
|
||||
font-size: 30vmin;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: calc(100% - 50px);
|
||||
z-index: -2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotateZ(-10deg);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo-bg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
filter: blur(72px);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: xx-large;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: large;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: calc(2 * var(--gutter-tiny));
|
||||
}
|
||||
|
||||
.feature::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--gutter-tiny);
|
||||
left: var(--gutter-tiny);
|
||||
right: var(--gutter-tiny);
|
||||
bottom: var(--gutter-tiny);
|
||||
background-color: var(--nord1);
|
||||
border-radius: 8px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature h4,
|
||||
.feature p {
|
||||
margin: var(--gutter-tiny);
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.callout {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.callout > .links {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: calc(100% - 50px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
<button on:click={toggle} class="info btn">
|
||||
<div on:click={toggle} on:keypress={toggle} role="button" tabindex="0">
|
||||
<span class="material-symbols-outlined">
|
||||
{#if dark}
|
||||
light_mode
|
||||
|
|
@ -26,14 +26,25 @@
|
|||
dark_mode
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
{@html `
|
||||
<script>
|
||||
if (window.localStorage.getItem("${darkModeKey}") !== null) {
|
||||
window.dark = window.localStorage.getItem("${darkModeKey}") !== 'false';
|
||||
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
} else if (/*window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches*/true) {
|
||||
window.dark = true;
|
||||
} else {
|
||||
window.dark = false;
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
<span>+1👤</span>
|
||||
|
||||
<style>
|
||||
span {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue