fixed header not hiding when wanting to print
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 20s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 20s
This commit is contained in:
parent
0c2ab8d93f
commit
d3e11c32e6
4 changed files with 512 additions and 482 deletions
21
src/app.css
21
src/app.css
|
|
@ -1,7 +1,6 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@plugin "daisyui";
|
@plugin "daisyui";
|
||||||
|
|
||||||
|
|
||||||
@plugin "daisyui/theme" {
|
@plugin "daisyui/theme" {
|
||||||
name: "Deprived";
|
name: "Deprived";
|
||||||
default: true;
|
default: true;
|
||||||
|
|
@ -36,7 +35,6 @@
|
||||||
--noise: 0;
|
--noise: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@plugin "daisyui/theme" {
|
@plugin "daisyui/theme" {
|
||||||
name: "dark";
|
name: "dark";
|
||||||
color-scheme: "dark";
|
color-scheme: "dark";
|
||||||
|
|
@ -70,7 +68,6 @@
|
||||||
--noise: 1;
|
--noise: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@plugin "daisyui/theme" {
|
@plugin "daisyui/theme" {
|
||||||
name: "pink";
|
name: "pink";
|
||||||
color-scheme: "light";
|
color-scheme: "light";
|
||||||
|
|
@ -104,7 +101,6 @@
|
||||||
--noise: 0;
|
--noise: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@plugin "daisyui/theme" {
|
@plugin "daisyui/theme" {
|
||||||
name: "netherrack";
|
name: "netherrack";
|
||||||
color-scheme: "dark";
|
color-scheme: "dark";
|
||||||
|
|
@ -174,8 +170,7 @@
|
||||||
.bg-grid-100 {
|
.bg-grid-100 {
|
||||||
background:
|
background:
|
||||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||||
#f2f2f2;
|
|
||||||
background-size:
|
background-size:
|
||||||
4px 4px,
|
4px 4px,
|
||||||
4px 4px,
|
4px 4px,
|
||||||
|
|
@ -191,8 +186,7 @@
|
||||||
.bg-grid-200 {
|
.bg-grid-200 {
|
||||||
background:
|
background:
|
||||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||||
#f2f2f2;
|
|
||||||
background-size:
|
background-size:
|
||||||
4px 4px,
|
4px 4px,
|
||||||
4px 4px,
|
4px 4px,
|
||||||
|
|
@ -208,8 +202,7 @@
|
||||||
.bg-grid-300 {
|
.bg-grid-300 {
|
||||||
background:
|
background:
|
||||||
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
||||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
|
||||||
#f2f2f2;
|
|
||||||
background-size:
|
background-size:
|
||||||
4px 4px,
|
4px 4px,
|
||||||
4px 4px,
|
4px 4px,
|
||||||
|
|
@ -220,4 +213,10 @@
|
||||||
80px 80px,
|
80px 80px,
|
||||||
80px 80px;
|
80px 80px;
|
||||||
background-color: var(--color-base-300);
|
background-color: var(--color-base-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hide-on-print {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,291 +1,313 @@
|
||||||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import "../app.css";
|
import "../app.css";
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from "svelte/transition";
|
||||||
import MediaQuery from 'svelte-media-queries';
|
import MediaQuery from "svelte-media-queries";
|
||||||
import { Dices } from "@lucide/svelte";
|
import { Dices } from "@lucide/svelte";
|
||||||
let hideOnPrint: boolean;
|
let hideOnPrint: boolean = $state(false);
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||||
|
|
||||||
const footerCollapseThreshold : string = '1000px';
|
const footerCollapseThreshold: string = "1000px";
|
||||||
const headerCollapseThreshold : string = '1000px';
|
const headerCollapseThreshold: string = "1000px";
|
||||||
let footerCollapse : boolean;
|
let footerCollapse: boolean;
|
||||||
let isMobile : boolean = $state(false);
|
let isMobile: boolean = $state(false);
|
||||||
|
|
||||||
let navbarHidden : boolean = $state(true);
|
let navbarHidden: boolean = $state(true);
|
||||||
|
|
||||||
function resetNavBar() {
|
function resetNavBar() {
|
||||||
navbarHidden = true;
|
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 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';
|
const themesArr = (window as any).AvailableThemes;
|
||||||
afterNavigate(() => {
|
let nextTheme = "dark";
|
||||||
const params = new URLSearchParams(window.location.search);
|
if (
|
||||||
hideOnPrint = params.get('hideOnPrint') === '1';
|
theme == "null" ||
|
||||||
//console.log(hideOnPrint);
|
theme == "undefined" ||
|
||||||
});
|
theme == undefined ||
|
||||||
|
theme == null
|
||||||
import { onMount } from 'svelte';
|
) {
|
||||||
import Zooter from "./comps/Zooter.svelte";
|
} else {
|
||||||
|
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log("Slecting: " + nextTheme);
|
||||||
|
document.documentElement.setAttribute("data-theme", nextTheme);
|
||||||
|
localStorage.setItem("theme", nextTheme);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#snippet SwitchThemeButton()}
|
{#snippet SwitchThemeButton()}
|
||||||
<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
|
<div
|
||||||
<button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
|
class="tooltip tooltip-bottom grid place-content-center"
|
||||||
</div>
|
data-tip="Switch theme"
|
||||||
|
>
|
||||||
|
<button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
|
||||||
|
</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<!-- Detect mobile -->
|
<!-- Detect mobile -->
|
||||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
<MediaQuery
|
||||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
query="(max-width: {footerCollapseThreshold})"
|
||||||
|
bind:matches={footerCollapse}
|
||||||
|
/>
|
||||||
|
<MediaQuery
|
||||||
|
query="(max-width: {headerCollapseThreshold})"
|
||||||
|
bind:matches={isMobile}
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Nav bar -->
|
<!-- Nav bar -->
|
||||||
<div class="bg-base-200 p-0">
|
<div class=" bg-base-200 p-0">
|
||||||
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
|
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
|
||||||
<div class="nav-bar pr-4">
|
<div class="nav-bar pr-4">
|
||||||
{#if !isMobile}
|
{#if !isMobile}
|
||||||
<div class="desktop">
|
<div class="desktop">
|
||||||
<a href="/" class="nav-head">
|
<a href="/" class="nav-head">
|
||||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
<DeprivedLogo
|
||||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
Class="fill-base-content p-2"
|
||||||
</a>
|
Style="width: 3.5rem; height: auto;"
|
||||||
<div class="nav-spacer" />
|
/>
|
||||||
|
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||||
|
</a>
|
||||||
|
<div class="nav-spacer" />
|
||||||
|
|
||||||
<!-- <a href="/">Home</a> -->
|
<!-- <a href="/">Home</a> -->
|
||||||
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
||||||
|
|
||||||
{@render SwitchThemeButton()}
|
{@render SwitchThemeButton()}
|
||||||
|
|
||||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
|
<a
|
||||||
<a href="/tools" style="width: 7.5rem;">Tools</a>
|
href="/zhen/cv/rev2?hideOnPrint=1"
|
||||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
target="_blank"
|
||||||
<!-- <a href="/posts">Blog</a>
|
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> -->
|
<a href="/about">About</a> -->
|
||||||
</div>
|
|
||||||
{: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>
|
</div>
|
||||||
</header>
|
{:else}
|
||||||
|
<div class="collapsed shadow-xl">
|
||||||
<!-- Page content -->
|
<a onclick={resetNavBar} href="/" class="nav-head">
|
||||||
{@render children?.()}
|
<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>
|
||||||
|
|
||||||
<Zooter bind:hideOnPrint/>
|
<!-- Page content -->
|
||||||
|
{@render children?.()}
|
||||||
|
|
||||||
|
<Zooter bind:hideOnPrint />
|
||||||
</div>
|
</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}
|
{#if footerCollapse}
|
||||||
<style>
|
<style>
|
||||||
.about-container {
|
.about-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if isMobile}
|
{#if isMobile}
|
||||||
<style>
|
<style>
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
{/if}
|
{/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>
|
||||||
|
|
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
on:resize={onResize}
|
on:resize={onResize}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
|
||||||
<!-- Keep scrolling thing -->
|
<!-- Keep scrolling thing -->
|
||||||
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
|
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
|
||||||
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
|
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
|
||||||
|
|
@ -180,9 +180,7 @@
|
||||||
|
|
||||||
<!-- About footer -->
|
<!-- About footer -->
|
||||||
<div
|
<div
|
||||||
class="{hideOnPrint
|
class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
|
||||||
? 'hide-on-print'
|
|
||||||
: ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
|
|
||||||
>
|
>
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
|
<div class="grid gap-8 sm:grid-cols-3 items-center w-full">
|
||||||
|
|
|
||||||
|
|
@ -1,243 +1,254 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// Left side
|
// Left side
|
||||||
import NameAndImage from "../CompsRev2/NameAndImage.svelte";
|
import NameAndImage from "../CompsRev2/NameAndImage.svelte";
|
||||||
import ShortProfile from "../CompsRev2/ShortProfile.svelte"
|
import ShortProfile from "../CompsRev2/ShortProfile.svelte";
|
||||||
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
|
import CombinedContacts from "../CompsRev2/CombinedContacts.svelte";
|
||||||
import LinkedInQR from "../CompsRev2/LinkedInQR.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";
|
|
||||||
|
|
||||||
// Decorations
|
// Right side
|
||||||
import LeftTopDecor from "../CompsRev2/LeftTopDecor.svelte";
|
import Profile from "../CompsRev2/Profile.svelte";
|
||||||
import BottomRightDecor from "../CompsRev2/BottomRightDecor.svelte";
|
import Education from "../CompsRev2/Education.svelte";
|
||||||
import AlexWatermark from "../CompsRev2/AlexWatermark.svelte";
|
import Experience from "../CompsRev2/Experience.svelte";
|
||||||
import RepeatedSkills from "../CompsRev2/RepeatedSkills.svelte";
|
import BiggestFlex from "../CompsRev2/BiggestFlex.svelte";
|
||||||
|
import TableOfProjects from "../CompsRev2/TableOfProjects.svelte";
|
||||||
|
|
||||||
// Cedit
|
// Decorations
|
||||||
import LinkToSource from "../CompsRev2/LinkToSource.svelte";
|
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
|
// Cedit
|
||||||
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
|
import LinkToSource from "../CompsRev2/LinkToSource.svelte";
|
||||||
|
|
||||||
// Print detection setup
|
// Discord embed
|
||||||
import { onMount } from "svelte";
|
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
|
||||||
onMount(() => {
|
|
||||||
// Check if the query parameter exists in the URL
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const hideOnPrintParam = urlParams.get('hideOnPrint');
|
|
||||||
|
|
||||||
// If the query parameter is not detected, reload the page with the parameter added
|
// Print detection setup
|
||||||
if (!hideOnPrintParam) {
|
import { onMount } from "svelte";
|
||||||
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
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 {
|
// If the query parameter is not detected, reload the page with the parameter added
|
||||||
const date = new Date();
|
if (!hideOnPrintParam) {
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
||||||
const year = date.getFullYear();
|
|
||||||
|
|
||||||
return `${day}-${month}-${year}`;
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<title>Zhentao Wei's CV {getFormattedDate()}</title>
|
<title>Zhentao Wei's CV {getFormattedDate()}</title>
|
||||||
<meta content="Zhentao Wei's CV" property="og: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={preveiwImage} property="og:image" />
|
||||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||||
|
|
||||||
<div class="cv-info-container hide-on-print">
|
<div class="cv-info-container hide-on-print">
|
||||||
<div>
|
<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.
|
Under here is my CV rev1 for an application made entirely in HTML and CSS.
|
||||||
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.
|
The page is designed to be saved as PDF. This can be done by pressing <div
|
||||||
<br/>
|
class="keyboard-key"
|
||||||
<br/>
|
>
|
||||||
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
|
P
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="cv-container-container include-in-print">
|
<div class="cv-container-container include-in-print">
|
||||||
<div class="cv-container sections decorations">
|
<div class="cv-container sections decorations">
|
||||||
<div id="left-section">
|
<div id="left-section">
|
||||||
<LeftTopDecor Style="pointer-events: none;"/>
|
<LeftTopDecor Style="pointer-events: none;" />
|
||||||
<BottomRightDecor Style="pointer-events: none;"/>
|
<BottomRightDecor Style="pointer-events: none;" />
|
||||||
<div>
|
<div>
|
||||||
<NameAndImage/>
|
<NameAndImage />
|
||||||
<ShortProfile/>
|
<ShortProfile />
|
||||||
<CombinedContacts/>
|
<CombinedContacts />
|
||||||
<LinkedInQR/>
|
<LinkedInQR />
|
||||||
</div>
|
</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>
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.cv-info-container {
|
.cv-info-container {
|
||||||
height: 40mm;
|
height: 40mm;
|
||||||
background-color: #2b2a2a;
|
background-color: #2b2a2a;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.keyboard-key {
|
.keyboard-key {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding-left: 1mm;
|
padding-left: 1mm;
|
||||||
padding-right: 1mm;
|
padding-right: 1mm;
|
||||||
|
|
||||||
border-radius: 2mm;
|
border-radius: 2mm;
|
||||||
|
|
||||||
background-color: #3e3d3d;
|
background-color: #3e3d3d;
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 80%;
|
|
||||||
height: 60%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
|
left: 0;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.cv-container-container * {
|
padding-top: 30mm;
|
||||||
color: black; // Set all text black
|
padding-bottom: 30mm;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue