reimplimented NotoSans font
This commit is contained in:
parent
efbaaef915
commit
0405b59ed6
7 changed files with 669 additions and 628 deletions
53
src/app.css
53
src/app.css
|
|
@ -1,6 +1,40 @@
|
|||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "Deprived";
|
||||
default: true;
|
||||
prefersdark: true;
|
||||
--color-base-100: oklch(14% 0 0);
|
||||
--color-base-200: oklch(20% 0 0);
|
||||
--color-base-300: oklch(26% 0 0);
|
||||
--color-base-content: oklch(97% 0 0);
|
||||
--color-primary: oklch(72% 0.219 149.579);
|
||||
--color-primary-content: oklch(98% 0.018 155.826);
|
||||
--color-secondary: oklch(58% 0.233 277.117);
|
||||
--color-secondary-content: oklch(96% 0.018 272.314);
|
||||
--color-accent: oklch(60% 0.25 292.717);
|
||||
--color-accent-content: oklch(96% 0.016 293.756);
|
||||
--color-neutral: oklch(20% 0 0);
|
||||
--color-neutral-content: oklch(98% 0 0);
|
||||
--color-info: oklch(58% 0.158 241.966);
|
||||
--color-info-content: oklch(97% 0.013 236.62);
|
||||
--color-success: oklch(64% 0.2 131.684);
|
||||
--color-success-content: oklch(98% 0.031 120.757);
|
||||
--color-warning: oklch(68% 0.162 75.834);
|
||||
--color-warning-content: oklch(98% 0.026 102.212);
|
||||
--color-error: oklch(57% 0.245 27.325);
|
||||
--color-error-content: oklch(97% 0.013 17.38);
|
||||
--radius-selector: 1rem;
|
||||
--radius-field: 0.5rem;
|
||||
--radius-box: 1rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "dark";
|
||||
color-scheme: "dark";
|
||||
|
|
@ -34,7 +68,6 @@
|
|||
--noise: 1;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "pink";
|
||||
color-scheme: "light";
|
||||
|
|
@ -68,7 +101,6 @@
|
|||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "netherrack";
|
||||
color-scheme: "dark";
|
||||
|
|
@ -138,8 +170,7 @@
|
|||
.bg-grid-100 {
|
||||
background:
|
||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
#f2f2f2;
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||
background-size:
|
||||
4px 4px,
|
||||
4px 4px,
|
||||
|
|
@ -155,8 +186,7 @@
|
|||
.bg-grid-200 {
|
||||
background:
|
||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
#f2f2f2;
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||
background-size:
|
||||
4px 4px,
|
||||
4px 4px,
|
||||
|
|
@ -172,8 +202,7 @@
|
|||
.bg-grid-300 {
|
||||
background:
|
||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||
#f2f2f2;
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||
background-size:
|
||||
4px 4px,
|
||||
4px 4px,
|
||||
|
|
@ -184,4 +213,10 @@
|
|||
80px 80px,
|
||||
80px 80px;
|
||||
background-color: var(--color-base-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
67
src/app.html
67
src/app.html
|
|
@ -1,41 +1,42 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-theme="Green" style="overflow-x: hidden;">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="
|
||||
We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!">
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<html lang="en" data-theme="Deprived" style="overflow-x: hidden">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="description"
|
||||
content="
|
||||
We are the deprived devs, and we are a team of developers specializing in indie game development, full-stack development, and anything tech-related!"
|
||||
/>
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Change theme for site here -->
|
||||
<link rel="stylesheet" href="/stylesheets/global.css" />
|
||||
%sveltekit.head%
|
||||
<!-- Change theme for site here -->
|
||||
<link rel="stylesheet" href="/stylesheets/global.css" />
|
||||
%sveltekit.head%
|
||||
|
||||
<script>
|
||||
let theme = null;
|
||||
<script>
|
||||
let theme = null;
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
theme = localStorage.getItem('theme');
|
||||
}
|
||||
if (typeof localStorage !== "undefined") {
|
||||
theme = localStorage.getItem("theme");
|
||||
}
|
||||
|
||||
window.AvailableThemes = ["green", "netherrack", "dark", "pink"];
|
||||
|
||||
if (!theme) {
|
||||
const randomNumber = Math.floor(Math.random() * 4);
|
||||
console.log("Slecting: " + AvailableThemes[randomNumber]);
|
||||
document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
|
||||
localStorage.setItem('theme', AvailableThemes[randomNumber]);
|
||||
} else {
|
||||
console.log("Slecting: " + theme);
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
</script>
|
||||
window.AvailableThemes = ["green", "netherrack", "dark", "pink"];
|
||||
|
||||
</head>
|
||||
if (!theme) {
|
||||
// const randomNumber = Math.floor(Math.random() * 4);
|
||||
// console.log("Slecting: " + AvailableThemes[randomNumber]);
|
||||
// document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
|
||||
localStorage.setItem("theme", AvailableThemes[0]);
|
||||
}
|
||||
//else {
|
||||
// console.log("Slecting: " + theme);
|
||||
// document.documentElement.setAttribute('data-theme', theme);
|
||||
//}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body style="display: contents">
|
||||
<div class="inline relative w-full h-full">
|
||||
%sveltekit.body%
|
||||
</div>
|
||||
</body>
|
||||
<body style="display: contents">
|
||||
<div class="inline relative w-full h-full">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,333 +1,313 @@
|
|||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||
<script lang="ts">
|
||||
import "../app.css";
|
||||
const buildTime = __BUILD_TIME__;
|
||||
import "../app.css";
|
||||
import { fly } from "svelte/transition";
|
||||
import MediaQuery from "svelte-media-queries";
|
||||
import { Dices } from "@lucide/svelte";
|
||||
let hideOnPrint: boolean = $state(false);
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
import { Dices } from "@lucide/svelte";
|
||||
let hideOnPrint: boolean;
|
||||
let { children } = $props();
|
||||
|
||||
let { children } = $props();
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
const footerCollapseThreshold: string = "1000px";
|
||||
const headerCollapseThreshold: string = "1000px";
|
||||
let footerCollapse: boolean;
|
||||
let isMobile: boolean = $state(false);
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
let navbarHidden: boolean = $state(true);
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let isMobile : boolean;
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
}
|
||||
|
||||
let navbarHidden : boolean = true;
|
||||
import { afterNavigate } from "$app/navigation";
|
||||
afterNavigate(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
hideOnPrint = params.get("hideOnPrint") === "1";
|
||||
console.log(hideOnPrint);
|
||||
});
|
||||
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
import { onMount } from "svelte";
|
||||
import Zooter from "./comps/Zooter.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
const lock = document.createElement("meta");
|
||||
lock.name = "darkreader-lock";
|
||||
document.head.appendChild(lock);
|
||||
});
|
||||
|
||||
function nextTheme() {
|
||||
let theme: string | null = null;
|
||||
|
||||
if (typeof localStorage !== "undefined") {
|
||||
theme = localStorage.getItem("theme");
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
onMount(async () => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
});
|
||||
|
||||
function nextTheme(){
|
||||
let theme: string | null = null;
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
theme = localStorage.getItem('theme');
|
||||
}
|
||||
|
||||
const themesArr = (window as any).AvailableThemes;
|
||||
let nextTheme = "dark";
|
||||
if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
|
||||
|
||||
} else {
|
||||
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||
}
|
||||
|
||||
console.log("Slecting: " + nextTheme);
|
||||
document.documentElement.setAttribute('data-theme', nextTheme);
|
||||
localStorage.setItem('theme', nextTheme);
|
||||
const themesArr = (window as any).AvailableThemes;
|
||||
let nextTheme = "dark";
|
||||
if (
|
||||
theme == "null" ||
|
||||
theme == "undefined" ||
|
||||
theme == undefined ||
|
||||
theme == null
|
||||
) {
|
||||
} else {
|
||||
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||
}
|
||||
|
||||
console.log("Slecting: " + nextTheme);
|
||||
document.documentElement.setAttribute("data-theme", nextTheme);
|
||||
localStorage.setItem("theme", nextTheme);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet SwitchThemeButton()}
|
||||
<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
|
||||
<button class="cursor-pointer" on:click={nextTheme}> <Dices/></button>
|
||||
</div>
|
||||
<div
|
||||
class="tooltip tooltip-bottom grid place-content-center"
|
||||
data-tip="Switch theme"
|
||||
>
|
||||
<button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
<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' : ''} bg-base-300">
|
||||
<div class="nav-bar pr-4">
|
||||
{#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" />
|
||||
<div class=" bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
|
||||
<div class="nav-bar pr-4">
|
||||
{#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="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
||||
|
||||
{@render SwitchThemeButton()}
|
||||
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
|
||||
<a href="/tools" style="width: 7.5rem;">Tools</a>
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
{@render SwitchThemeButton()}
|
||||
|
||||
<a
|
||||
href="/zhen/cv/rev2?hideOnPrint=1"
|
||||
target="_blank"
|
||||
style="width: 7.5rem;">Zhen CV</a
|
||||
>
|
||||
<a href="/tools" style="width: 7.5rem;">Tools</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" />
|
||||
{@render SwitchThemeButton()}
|
||||
<div class="px-1"></div>
|
||||
<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 href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
{@render children?.()}
|
||||
|
||||
<!-- About footer -->
|
||||
<div class="{hideOnPrint ? 'hide-on-print' : ''} flex flex-col justify-center pt-8 bg-base-300 mt-8">
|
||||
<div class="flex justify-center">
|
||||
<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>Snorre Ettrup Altschul</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://git.spoodythe.one/sveske-juice/deprived-main-website" 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>
|
||||
</div>
|
||||
<div class="flex w-full justify-center border-t border-base-100 border-dashed">
|
||||
Last build: {buildTime} (+2 UTC)
|
||||
{:else}
|
||||
<div class="collapsed shadow-xl">
|
||||
<a onclick={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" />
|
||||
{@render SwitchThemeButton()}
|
||||
<div class="px-1"></div>
|
||||
<button
|
||||
id="toggle-nav"
|
||||
onclick={() => {
|
||||
navbarHidden = !navbarHidden;
|
||||
console.log(navbarHidden);
|
||||
}}
|
||||
>
|
||||
<HamburgerMenuIcon Class="fill-base-content" />
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a onclick={resetNavBar} href="/">Home</a> -->
|
||||
<a
|
||||
onclick={resetNavBar}
|
||||
href="https://botalex.itch.io/"
|
||||
target="_blank">Games</a
|
||||
>
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
|
||||
<!-- <a onclick={resetNavBar} href="/posts">Blog</a>
|
||||
<a onclick={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
{@render children?.()}
|
||||
|
||||
<Zooter bind:hideOnPrint />
|
||||
</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>
|
||||
<style>
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
justify-content: center !important;
|
||||
gap: 25px;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
{#if isMobile}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style>
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
<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%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@
|
|||
|
||||
<title id="TabTittle">We are the DEPRIVED DEVS</title>
|
||||
<meta content="We are the deprived devs" property="og:title" />
|
||||
<meta content="We collaborate to create game, and hopefully more in the future! Wanna join? Hit us up." property="og:description" />
|
||||
<meta content="We make everything frontend, backend, games, websites, machine learning, whatever. We're just abunch of nerds, and we love it!" property="og:description" />
|
||||
<meta content={PreviewDeprivedLogo} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<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 cozette" 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;">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9);">
|
||||
{#if !mobile}
|
||||
Deprived Devs
|
||||
{:else}
|
||||
|
|
@ -109,10 +109,10 @@
|
|||
</span>
|
||||
</Profile>
|
||||
|
||||
<Profile name="Zylvester" tags={["Sound/Story", "Story designer"]} isMobile={mobile}>
|
||||
<Profile name="Zylvester" tags={["Sound/Story", "2D/3D artist"]} isMobile={mobile}>
|
||||
<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>
|
||||
<p>Closeted omega weeb</p>
|
||||
<p><a href="https://www.linkedin.com/in/sylvester-junge-0b2a73196/" target="_blank" style="color:lightblue;">Linked-in</a>, <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" style="color:lightblue;">Funny link</a></p>
|
||||
</span>
|
||||
</Profile>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
<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-neutral">View on itch.io</a>
|
||||
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
<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-neutral">View on itch.io</a>
|
||||
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
<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-neutral">View on itch.io</a>
|
||||
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary text-primary-content">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
<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-neutral text-primary-content">RECURSION!</a>
|
||||
<a href="/" target="_blank" class="btn btn-primary text-primary-content text-primary-content">RECURSION!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,53 @@
|
|||
<script>
|
||||
export let Style = "";
|
||||
export let Style = "";
|
||||
</script>
|
||||
|
||||
<div class="container" style="{Style}">
|
||||
<div>
|
||||
<div>
|
||||
Thank you! ❤
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" style={Style}>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(40.2mm, 5mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(20.3mm, -5mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
z-index: 0;
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
> div:nth-child(1) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
|
||||
background-position: top;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
background-color: #2f5496;
|
||||
width: 100mm;
|
||||
height: 25mm;
|
||||
|
||||
// Text
|
||||
display: grid;
|
||||
place-content: center;
|
||||
align-content: flex-start;
|
||||
> div {
|
||||
padding-top: 3.5mm;
|
||||
color: #4a7bcf;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#4472c4 70%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
background-position: top;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
</style>
|
||||
|
||||
> div:nth-child(2) {
|
||||
background-color: #2f5496;
|
||||
width: 100mm;
|
||||
height: 25mm;
|
||||
|
||||
// Text
|
||||
display: grid;
|
||||
place-content: center;
|
||||
align-content: flex-start;
|
||||
> div {
|
||||
padding-top: 3.5mm;
|
||||
color: #4a7bcf;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,243 +1,257 @@
|
|||
<script lang="ts">
|
||||
// Left side
|
||||
import NameAndImage from "../CompsRev2/NameAndImage.svelte";
|
||||
import ShortProfile from "../CompsRev2/ShortProfile.svelte"
|
||||
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../CompsRev2/Profile.svelte";
|
||||
import Education from "../CompsRev2/Education.svelte";
|
||||
import Experience from "../CompsRev2/Experience.svelte";
|
||||
import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
|
||||
import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
|
||||
// Left side
|
||||
import NameAndImage from "../CompsRev2/NameAndImage.svelte";
|
||||
import ShortProfile from "../CompsRev2/ShortProfile.svelte";
|
||||
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte";
|
||||
import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
|
||||
// Right side
|
||||
import Profile from "../CompsRev2/Profile.svelte";
|
||||
import Education from "../CompsRev2/Education.svelte";
|
||||
import Experience from "../CompsRev2/Experience.svelte";
|
||||
import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
|
||||
import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
|
||||
|
||||
// Cedit
|
||||
import LinkToSource from "../CompsRev2/LinkToSource.svelte";
|
||||
// Decorations
|
||||
import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
|
||||
import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
|
||||
|
||||
// Discord embed
|
||||
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
|
||||
// Cedit
|
||||
import LinkToSource from "../CompsRev2/LinkToSource.svelte";
|
||||
|
||||
// Print detection setup
|
||||
import { onMount } from "svelte";
|
||||
onMount(() => {
|
||||
// Check if the query parameter exists in the URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hideOnPrintParam = urlParams.get('hideOnPrint');
|
||||
// Discord embed
|
||||
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
|
||||
|
||||
// If the query parameter is not detected, reload the page with the parameter added
|
||||
if (!hideOnPrintParam) {
|
||||
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||
}
|
||||
});
|
||||
// Print detection setup
|
||||
import { onMount } from "svelte";
|
||||
onMount(() => {
|
||||
// Check if the query parameter exists in the URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hideOnPrintParam = urlParams.get("hideOnPrint");
|
||||
|
||||
function getFormattedDate(): string {
|
||||
const date = new Date();
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}-${month}-${year}`;
|
||||
// If the query parameter is not detected, reload the page with the parameter added
|
||||
if (!hideOnPrintParam) {
|
||||
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||
}
|
||||
})
|
||||
|
||||
function getFormattedDate(): string {
|
||||
const date = new Date();
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}-${month}-${year}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<title>Zhentao Wei's CV {getFormattedDate()}</title>
|
||||
<meta content="Zhentao Wei's CV" property="og:title" />
|
||||
<meta content="This CV is made completely with svelte + html + css + js" property="og:description" />
|
||||
<meta
|
||||
content="This CV is made completely with svelte + html + css + js"
|
||||
property="og:description"
|
||||
/>
|
||||
<meta content={preveiwImage} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<div class="cv-info-container hide-on-print">
|
||||
<div>
|
||||
Under here is my CV rev1 for an application made entirely in HTML and CSS. The page is designed to be saved as PDF.
|
||||
This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br/>
|
||||
<br/>
|
||||
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
|
||||
<div>
|
||||
Under here is my CV rev1 for an application made entirely in HTML and CSS.
|
||||
The page is designed to be saved as PDF. This can be done by pressing <div
|
||||
class="keyboard-key"
|
||||
>
|
||||
P
|
||||
</div>
|
||||
+
|
||||
<div class="keyboard-key">CTRL</div>
|
||||
, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br />
|
||||
<br />
|
||||
I have to sadly recommend chrome for this process. Firefox somehow messes with
|
||||
the quality of the PDF :(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cv-container-container include-in-print">
|
||||
<div class="cv-container sections decorations">
|
||||
<div id="left-section">
|
||||
<LeftTopDecor Style="pointer-events: none;"/>
|
||||
<BottomRightDecor Style="pointer-events: none;"/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark Style="pointer-events: none;"/>
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource/>
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<BiggestFlex/>
|
||||
<TableOfProjects/>
|
||||
<Experience/>
|
||||
<Education/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="NotoSans cv-container-container include-in-print">
|
||||
<div class="cv-container sections decorations">
|
||||
<div id="left-section">
|
||||
<LeftTopDecor Style="pointer-events: none;" />
|
||||
<BottomRightDecor Style="pointer-events: none;" />
|
||||
<div>
|
||||
<NameAndImage />
|
||||
<ShortProfile />
|
||||
<CombinedContacts />
|
||||
<LinkedInQR />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftSectionSeperator"></div>
|
||||
<div id="right-section">
|
||||
<AlexWatermark Style="pointer-events: none;" />
|
||||
<div id="TopRightSkillsText">
|
||||
<RepeatedSkills
|
||||
class="Cozette"
|
||||
targetTextHeight={30}
|
||||
targetTextWidth={75}
|
||||
/>
|
||||
</div>
|
||||
<div id="Credit">
|
||||
<LinkToSource />
|
||||
</div>
|
||||
<div>
|
||||
<Profile/>
|
||||
<BiggestFlex />
|
||||
<TableOfProjects />
|
||||
<Experience />
|
||||
<Education />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.cv-info-container {
|
||||
height: 40mm;
|
||||
background-color: #2b2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.cv-info-container {
|
||||
height: 40mm;
|
||||
background-color: #2b2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.keyboard-key {
|
||||
display: inline;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
.keyboard-key {
|
||||
display: inline;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
|
||||
border-radius: 2mm;
|
||||
border-radius: 2mm;
|
||||
|
||||
background-color: #3e3d3d;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
background-color: #3e3d3d;
|
||||
}
|
||||
|
||||
.cv-container-container{
|
||||
> div {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.cv-container-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.cv-container-container * {
|
||||
color: black; // Set all text black
|
||||
}
|
||||
|
||||
.cv-container {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
|
||||
background-color: #eeeeee;
|
||||
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.sections {
|
||||
// Shared between sections
|
||||
> div {
|
||||
display: grid;
|
||||
z-index: 0;
|
||||
|
||||
// Needed to cuttoff the extra decoration
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left-section {
|
||||
background-color: #bdd6ee;
|
||||
width: calc(100% / 3 * 1);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.cv-container-container * {
|
||||
color: black; // Set all text black
|
||||
}
|
||||
|
||||
.cv-container {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
|
||||
background-color: #eeeeee;
|
||||
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.sections {
|
||||
// Shared between sections
|
||||
> div {
|
||||
display: grid;
|
||||
z-index: 0;
|
||||
|
||||
// Needed to cuttoff the extra decoration
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left-section{
|
||||
background-color: #bdd6ee;
|
||||
width: calc(100% / 3 * 1);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 30mm;
|
||||
}
|
||||
}
|
||||
|
||||
#right-section{
|
||||
width: calc(100% / 3 * 2);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
row-gap: 6mm;
|
||||
|
||||
padding-top: 45mm;
|
||||
padding-bottom: 30mm;
|
||||
|
||||
// Disable interactivity for padding
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decorations {
|
||||
#leftSectionSeperator{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
> div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 5mm;
|
||||
z-index: 1;
|
||||
background: linear-gradient(90deg, #3636364f, #00000000);
|
||||
}
|
||||
}
|
||||
> div {
|
||||
#TopRightSkillsText {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
place-content: center;
|
||||
|
||||
padding: 0;
|
||||
height: 50mm;
|
||||
|
||||
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
|
||||
|
||||
color: rgb(190, 190, 190);
|
||||
font-family: 'CozetteVector';
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
#Credit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 30mm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
#right-section {
|
||||
width: calc(100% / 3 * 2);
|
||||
|
||||
> div:last-child {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
row-gap: 6mm;
|
||||
|
||||
padding-top: 45mm;
|
||||
padding-bottom: 30mm;
|
||||
|
||||
// Disable interactivity for padding
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decorations {
|
||||
#leftSectionSeperator {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
> div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 5mm;
|
||||
z-index: 1;
|
||||
background: linear-gradient(90deg, #3636364f, #00000000);
|
||||
}
|
||||
}
|
||||
> div {
|
||||
#TopRightSkillsText {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
place-content: center;
|
||||
|
||||
padding: 0;
|
||||
height: 50mm;
|
||||
|
||||
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
|
||||
|
||||
color: rgb(190, 190, 190);
|
||||
font-family: "CozetteVector";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
#Credit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,58 +14,66 @@
|
|||
}
|
||||
|
||||
.cozette * {
|
||||
font-family: "CozetteVector";
|
||||
font-family: "CozetteVector";
|
||||
}
|
||||
|
||||
.NotoSans * {
|
||||
font-family: "NotoSans";
|
||||
}
|
||||
|
||||
/* fuck it */
|
||||
body * {
|
||||
font-family: "CozetteVector";
|
||||
font-family: "CozetteVector";
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.include-in-print { &, & * {
|
||||
-webkit-print-color-adjust:exact !important;
|
||||
print-color-adjust:exact !important;
|
||||
}}
|
||||
.include-in-print {
|
||||
&,
|
||||
& * {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background1);
|
||||
background: var(--background1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NotoSans, var(--main-font);
|
||||
color: var(--text1); /* Default to primary text color. */
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
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;
|
||||
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;
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.32px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
/* Print-specific styles */
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue