test
This commit is contained in:
BOT Alex
parent
37d075fbd6
commit
4e4747d718
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 708 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
|
|
@ -1,290 +1,292 @@
|
|||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||
<script lang="ts">
|
||||
import "$lib/app.css";
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
export let hideOnPrint: boolean;
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let isMobile : boolean;
|
||||
|
||||
let navbarHidden : boolean = true;
|
||||
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
}
|
||||
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
afterNavigate(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
hideOnPrint = params.get('hideOnPrint') === '1';
|
||||
//console.log(hideOnPrint);
|
||||
});
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { themeChange } from 'theme-change'
|
||||
onMount(() => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
|
||||
themeChange(false) // false parameter is required for svelte
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar pr-4 bg-base-200">
|
||||
{#if !isMobile}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed">
|
||||
<a on:click={resetNavBar} href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a on:click={resetNavBar} href="/">Home</a> -->
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
<slot />
|
||||
|
||||
<!-- About footer -->
|
||||
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="about-container">
|
||||
<div class="credits">
|
||||
<span>© 2023-2024</span>
|
||||
<br>
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3><b>About this website</b></h3>
|
||||
<!-- <a href="/" target="_blank">Recursion</a> -->
|
||||
<div class="flex justify-center">
|
||||
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
|
||||
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
|
||||
</div>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
||||
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3><b>Contact</b></h3>
|
||||
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
|
||||
<div class="mt-2"></div>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<!-- <span>Discord</span> -->
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
/* Nav bar. */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
width: 64px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
#logo-text {
|
||||
font-size: 24px;
|
||||
color: oklch(var(--bc));
|
||||
font-family: var(--title-font);
|
||||
margin: 0;
|
||||
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 22px;
|
||||
font-family: var(--title-font);
|
||||
// Text color
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
/* Footer. */
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
padding: 25px 0;
|
||||
background-color: oklch(var(--b3));
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-container {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
color: oklch(var(--bc));
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.about-container > div {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.social > img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
footer h3 {
|
||||
margin-top: 0px;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text2);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if footerCollapse}
|
||||
<style>
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
justify-content: center !important;
|
||||
gap: 25px;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
{#if isMobile}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{/if}
|
||||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||
<script lang="ts">
|
||||
import "$lib/app.css";
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
export let hideOnPrint: boolean;
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let isMobile : boolean;
|
||||
|
||||
let navbarHidden : boolean = true;
|
||||
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
}
|
||||
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
afterNavigate(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
hideOnPrint = params.get('hideOnPrint') === '1';
|
||||
//console.log(hideOnPrint);
|
||||
});
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { themeChange } from 'theme-change'
|
||||
onMount(() => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
|
||||
themeChange(false) // false parameter is required for svelte
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar pr-4 bg-base-200">
|
||||
{#if !isMobile}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed">
|
||||
<a on:click={resetNavBar} href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a on:click={resetNavBar} href="/">Home</a> -->
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
<slot />
|
||||
|
||||
<!-- About footer -->
|
||||
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="about-container">
|
||||
<div class="credits">
|
||||
<span>© 2023-2024</span>
|
||||
<br>
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3><b>About this website</b></h3>
|
||||
<!-- <a href="/" target="_blank">Recursion</a> -->
|
||||
<div class="flex justify-center">
|
||||
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
|
||||
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
|
||||
</div>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
||||
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3><b>Contact</b></h3>
|
||||
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
|
||||
<div class="mt-2"></div>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<!-- <span>Discord</span> -->
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
/* Nav bar. */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
width: 64px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
#logo-text {
|
||||
font-size: 24px;
|
||||
color: oklch(var(--bc));
|
||||
font-family: var(--title-font);
|
||||
margin: 0;
|
||||
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 22px;
|
||||
font-family: var(--title-font);
|
||||
// Text color
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
/* Footer. */
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
padding: 25px 0;
|
||||
background-color: oklch(var(--b3));
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-container {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
color: oklch(var(--bc));
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.about-container > div {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.social > img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
footer h3 {
|
||||
margin-top: 0px;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text2);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if footerCollapse}
|
||||
<style>
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
justify-content: center !important;
|
||||
gap: 25px;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
{#if isMobile}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,244 +1,244 @@
|
|||
<script lang="ts">
|
||||
import ProfileSpacer from './comps/ProfileSpacer.svelte';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
import NewsCard from '$lib/posts/NewsCard.svelte';
|
||||
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
||||
import Button from '$lib/IO/Button.svelte';
|
||||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import { tick } from 'svelte'
|
||||
|
||||
|
||||
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
|
||||
import Carousel from './comps/Carousel.svelte';
|
||||
|
||||
import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
|
||||
import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
|
||||
import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
|
||||
|
||||
import Blood1 from "$lib/GamePreviews/Blood-title.png"
|
||||
import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
|
||||
import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
|
||||
import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
|
||||
import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
|
||||
|
||||
import Time1 from "$lib/GamePreviews/Time-1.png"
|
||||
import Time2 from "$lib/GamePreviews/time-2.png"
|
||||
import Time3 from "$lib/GamePreviews/time-3.png"
|
||||
import Time4 from "$lib/GamePreviews/time-4.png"
|
||||
import Time5 from "$lib/GamePreviews/time-5.gif"
|
||||
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
||||
|
||||
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
|
||||
<img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
|
||||
<div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">
|
||||
{#if !mobile}
|
||||
Deprived Devs
|
||||
{:else}
|
||||
Deprived
|
||||
<br/>
|
||||
<h1 class="-mt-6 prose" style="font-size: 2rem;">
|
||||
Devs
|
||||
</h1>
|
||||
{/if}
|
||||
</h1>
|
||||
{#if mobile}
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center w-full px-8 py-4">
|
||||
<div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
|
||||
<h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers
|
||||
</h1>
|
||||
|
||||
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
|
||||
<span>
|
||||
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
|
||||
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
|
||||
<span>
|
||||
<p>Hi, I use Arch, btw.</p>
|
||||
<p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
|
||||
<span>
|
||||
<p>Hi, I am [insert text here]</p>
|
||||
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space -->
|
||||
<div class="py-8 flex justify-center">
|
||||
<div style="width: 50%;">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
|
||||
<article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h1>
|
||||
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
|
||||
<article class="pt-16 prose {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
|
||||
<p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<!-- Corro rebounce -->
|
||||
<div class="games card bg-base-100 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Corrobot1,
|
||||
Corrobot2,
|
||||
Corrobot3,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Corrobot-rebounce</h2>
|
||||
<p>A 3D sequel to Corrobot-Takeover</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blood -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Blood1,
|
||||
Blood2,
|
||||
Blood3,
|
||||
Blood4,
|
||||
Blood5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Unnamed blood game</h2>
|
||||
<p>A game based on an unique kind of combat</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Time1,
|
||||
Time2,
|
||||
Time3,
|
||||
Time4,
|
||||
Time5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">One More Time</h2>
|
||||
<p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">What's next?</h2>
|
||||
<div class="skeleton mt-1 h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="flex grow"/>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.main-title {
|
||||
width: 80%;
|
||||
font-family: var(--title-font);
|
||||
}
|
||||
|
||||
.developersProfile{
|
||||
border-left: dashed oklch(var(--p));
|
||||
}
|
||||
|
||||
#backgroundGif{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 40vh;
|
||||
object-fit: cover;
|
||||
filter: blur(5px) brightness(0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if !mobile}
|
||||
<style>
|
||||
.games {
|
||||
width: 24rem /* 384px */;
|
||||
}
|
||||
</style>
|
||||
|
||||
{:else}
|
||||
<style>
|
||||
.games {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
<script lang="ts">
|
||||
import ProfileSpacer from './comps/ProfileSpacer.svelte';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
import NewsCard from '$lib/posts/NewsCard.svelte';
|
||||
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
||||
import Button from '$lib/IO/Button.svelte';
|
||||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import { tick } from 'svelte'
|
||||
|
||||
|
||||
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
|
||||
import Carousel from './comps/Carousel.svelte';
|
||||
|
||||
import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
|
||||
import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
|
||||
import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
|
||||
|
||||
import Blood1 from "$lib/GamePreviews/Blood-title.png"
|
||||
import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
|
||||
import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
|
||||
import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
|
||||
import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
|
||||
|
||||
import Time1 from "$lib/GamePreviews/Time-1.png"
|
||||
import Time2 from "$lib/GamePreviews/time-2.png"
|
||||
import Time3 from "$lib/GamePreviews/time-3.png"
|
||||
import Time4 from "$lib/GamePreviews/time-4.png"
|
||||
import Time5 from "$lib/GamePreviews/time-5.gif"
|
||||
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
||||
|
||||
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
|
||||
<img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
|
||||
<div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">
|
||||
{#if !mobile}
|
||||
Deprived Devs
|
||||
{:else}
|
||||
Deprived
|
||||
<br/>
|
||||
<h1 class="-mt-6 prose" style="font-size: 2rem;">
|
||||
Devs
|
||||
</h1>
|
||||
{/if}
|
||||
</h1>
|
||||
{#if mobile}
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center w-full px-8 py-4">
|
||||
<div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
|
||||
<h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers
|
||||
</h1>
|
||||
|
||||
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
|
||||
<span>
|
||||
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
|
||||
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
|
||||
<span>
|
||||
<p>Hi, I use Arch, btw.</p>
|
||||
<p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<div class="developersProfile pl-4 font-mono">
|
||||
<h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
|
||||
<span>
|
||||
<p>Hi, I am [insert text here]</p>
|
||||
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space -->
|
||||
<div class="py-8 flex justify-center">
|
||||
<div style="width: 50%;">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
|
||||
<article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h1>
|
||||
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
|
||||
<article class="pt-16 prose {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
|
||||
<p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<!-- Corro rebounce -->
|
||||
<div class="games card bg-base-100 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Corrobot1,
|
||||
Corrobot2,
|
||||
Corrobot3,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Corrobot-rebounce</h2>
|
||||
<p>A 3D sequel to Corrobot-Takeover</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blood -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Blood1,
|
||||
Blood2,
|
||||
Blood3,
|
||||
Blood4,
|
||||
Blood5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Unnamed blood game</h2>
|
||||
<p>A game based on an unique kind of combat</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Time1,
|
||||
Time2,
|
||||
Time3,
|
||||
Time4,
|
||||
Time5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">One More Time</h2>
|
||||
<p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">What's next?</h2>
|
||||
<div class="skeleton mt-1 h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="flex grow"/>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.main-title {
|
||||
width: 80%;
|
||||
font-family: var(--title-font);
|
||||
}
|
||||
|
||||
.developersProfile{
|
||||
border-left: dashed oklch(var(--p));
|
||||
}
|
||||
|
||||
#backgroundGif{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 40vh;
|
||||
object-fit: cover;
|
||||
filter: blur(5px) brightness(0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if !mobile}
|
||||
<style>
|
||||
.games {
|
||||
width: 24rem /* 384px */;
|
||||
}
|
||||
</style>
|
||||
|
||||
{:else}
|
||||
<style>
|
||||
.games {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let images: string[] = []; // Expose images as a parameter
|
||||
let currentIndex: number = 0;
|
||||
|
||||
let startX: number | null = null; // Track touch start X position
|
||||
let deltaX: number = 0; // Track touch delta X
|
||||
|
||||
const nextSlide = (): void => {
|
||||
currentIndex = (currentIndex + 1) % images.length;
|
||||
};
|
||||
|
||||
const prevSlide = (): void => {
|
||||
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
||||
};
|
||||
|
||||
const handleTouchStart = (event: TouchEvent): void => {
|
||||
startX = event.touches[0].clientX;
|
||||
};
|
||||
|
||||
const handleTouchMove = (event: TouchEvent): void => {
|
||||
if (startX !== null) {
|
||||
deltaX = event.touches[0].clientX - startX;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = (): void => {
|
||||
if (startX !== null) {
|
||||
if (deltaX > 50) {
|
||||
prevSlide(); // Swipe right
|
||||
} else if (deltaX < -50) {
|
||||
nextSlide(); // Swipe left
|
||||
}
|
||||
}
|
||||
// Reset touch variables
|
||||
startX = null;
|
||||
deltaX = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 0 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.control {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 5px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="carousel"
|
||||
on:touchstart|preventDefault={handleTouchStart}
|
||||
on:touchmove|preventDefault={handleTouchMove}
|
||||
on:touchend|preventDefault={handleTouchEnd}
|
||||
>
|
||||
<div
|
||||
class="slides"
|
||||
style="transform: translateX(-{currentIndex * 100}%);"
|
||||
>
|
||||
{#each images as image (image)}
|
||||
<img class="slide" src={image} alt="Carousel Slide" />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control" on:click={prevSlide}><</button>
|
||||
<button class="control" on:click={nextSlide}>></button>
|
||||
</div>
|
||||
|
||||
<div class="indicators">
|
||||
{#each images as _, index}
|
||||
<div
|
||||
class="indicator {index === currentIndex ? 'active' : ''}"
|
||||
on:click={() => (currentIndex = index)}
|
||||
></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="profileSpacer"></div>
|
||||
|
||||
<style>
|
||||
.profileSpacer{
|
||||
height: 1px;
|
||||
border-bottom: solid oklch(var(--b3));
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
|
@ -1,51 +1,51 @@
|
|||
/* --- FONTS --- */
|
||||
@font-face {
|
||||
font-family: "CozetteVector";
|
||||
src:
|
||||
local("CozetteVector"),
|
||||
url("/fonts/CozetteVector.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NotoSans";
|
||||
src:
|
||||
local("NotoSans"),
|
||||
url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NotoSans, var(--main-font);
|
||||
color: var(--text1); /* Default to primary text color. */
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, a:link a:visited {
|
||||
color: var(--text1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: .32px;
|
||||
border-radius: .25rem;
|
||||
padding: 0 .5rem;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
/* Print-specific styles */
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
/* --- FONTS --- */
|
||||
@font-face {
|
||||
font-family: "CozetteVector";
|
||||
src:
|
||||
local("CozetteVector"),
|
||||
url("/fonts/CozetteVector.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NotoSans";
|
||||
src:
|
||||
local("NotoSans"),
|
||||
url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NotoSans, var(--main-font);
|
||||
color: var(--text1); /* Default to primary text color. */
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, a:link a:visited {
|
||||
color: var(--text1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: .32px;
|
||||
border-radius: .25rem;
|
||||
padding: 0 .5rem;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
/* Print-specific styles */
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
:root {
|
||||
--title-font: 'CozetteVector';
|
||||
--main-font: 'Segoe UI';
|
||||
--text1: #eee; /* Primary text. */
|
||||
--text2: #cac9c6; /* Secondary text. */
|
||||
--text3: #b0afad; /* Third text color. */
|
||||
--text4: #868584; /* Fourth text color. */
|
||||
--background: #232222;
|
||||
--background1: #1b1a1a;
|
||||
--primary: #227c9d;
|
||||
--secondary: #ffcb77;
|
||||
--accent: #17c3b2;
|
||||
}
|
||||
:root {
|
||||
--title-font: 'CozetteVector';
|
||||
--main-font: 'Segoe UI';
|
||||
--text1: #eee; /* Primary text. */
|
||||
--text2: #cac9c6; /* Secondary text. */
|
||||
--text3: #b0afad; /* Third text color. */
|
||||
--text4: #868584; /* Fourth text color. */
|
||||
--background: #232222;
|
||||
--background1: #1b1a1a;
|
||||
--primary: #227c9d;
|
||||
--secondary: #ffcb77;
|
||||
--accent: #17c3b2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography"), require('daisyui'),],
|
||||
daisyui: {
|
||||
themes: [
|
||||
"forest",
|
||||
],
|
||||
|
||||
},
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography"), require('daisyui'),],
|
||||
daisyui: {
|
||||
themes: [
|
||||
"forest",
|
||||
],
|
||||
|
||||
},
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
});
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue