Format code
This commit is contained in:
parent
2213f0e9f2
commit
979a23bae8
GPG key ID:
1460B586646E180D
13 changed files with 521 additions and 451 deletions
5
src/app.d.ts
vendored
5
src/app.d.ts
vendored
|
|
@ -8,8 +8,9 @@ declare global {
|
|||
// interface Platform {}
|
||||
}
|
||||
|
||||
interface Window { plausible?: (string, {props: any}) => void; }
|
||||
|
||||
interface Window {
|
||||
plausible?: (string, { props: any }) => void;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
|
||||
<script defer data-domain="pupraider.net" src="https://stats.1in1.net/js/script.outbound-links.js"></script>
|
||||
<script
|
||||
defer
|
||||
data-domain="pupraider.net"
|
||||
src="https://stats.1in1.net/js/script.outbound-links.js"
|
||||
></script>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
|
|
|
|||
19
src/app.scss
19
src/app.scss
|
|
@ -1,18 +1,19 @@
|
|||
@import "@fontsource-variable/roboto-flex/full.css";
|
||||
@import '@fontsource-variable/roboto-flex/full.css';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include variables;
|
||||
@include variables;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Roboto Flex Variable", "Roboto", sans-serif;
|
||||
font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
|
||||
|
||||
@include formatting;
|
||||
}
|
||||
@include formatting;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,54 @@
|
|||
import {Howl} from 'howler';
|
||||
import ruffSoundFile from "../assets/grrrr-ruff-ruff.mp3";
|
||||
import { Howl } from 'howler';
|
||||
import ruffSoundFile from '../assets/grrrr-ruff-ruff.mp3';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const { subscribe, set: setBarking } = writable(false);
|
||||
|
||||
export const barking = {
|
||||
subscribe
|
||||
}
|
||||
|
||||
subscribe
|
||||
};
|
||||
|
||||
const ruffSound = new Howl({
|
||||
src: [ruffSoundFile],
|
||||
volume: .75,
|
||||
autoplay: false,
|
||||
preload: true,
|
||||
onplay: () => {
|
||||
setBarking(true)
|
||||
},
|
||||
onend: () => {
|
||||
setBarking(false)
|
||||
}
|
||||
});
|
||||
src: [ruffSoundFile],
|
||||
volume: 0.75,
|
||||
autoplay: false,
|
||||
preload: true,
|
||||
onplay: () => {
|
||||
setBarking(true);
|
||||
},
|
||||
onend: () => {
|
||||
setBarking(false);
|
||||
}
|
||||
});
|
||||
|
||||
type BarkArgs = {
|
||||
barkCallback?: ((i: number) => void),
|
||||
}
|
||||
barkCallback?: (i: number) => void;
|
||||
};
|
||||
|
||||
const woofOffsetsMs = [643, 1206]
|
||||
const woofOffsetsMs = [643, 1206];
|
||||
|
||||
const bark = (object: string, args?: BarkArgs) => {
|
||||
if(!ruffSound.playing()) {
|
||||
ruffSound.play()
|
||||
if (!ruffSound.playing()) {
|
||||
ruffSound.play();
|
||||
|
||||
if(args?.barkCallback) {
|
||||
woofOffsetsMs.forEach((woofOffset, i) => {
|
||||
setTimeout(() => {
|
||||
if(args.barkCallback) args.barkCallback(i)
|
||||
}, woofOffset-100)
|
||||
});
|
||||
}
|
||||
if (args?.barkCallback) {
|
||||
woofOffsetsMs.forEach((woofOffset, i) => {
|
||||
setTimeout(() => {
|
||||
if (args.barkCallback) args.barkCallback(i);
|
||||
}, woofOffset - 100);
|
||||
});
|
||||
}
|
||||
|
||||
if(typeof window !== "undefined" && typeof window.plausible !== "undefined") {
|
||||
window.plausible("Woof Button Clicked",{ props: { path: document.location.pathname, object } });
|
||||
} else {
|
||||
console.log("Ah, you've blocked my stats collector - please contact me and manually admit your sins.")
|
||||
}
|
||||
}
|
||||
}
|
||||
if (typeof window !== 'undefined' && typeof window.plausible !== 'undefined') {
|
||||
window.plausible('Woof Button Clicked', {
|
||||
props: { path: document.location.pathname, object }
|
||||
});
|
||||
} else {
|
||||
console.log(
|
||||
"Ah, you've blocked my stats collector - please contact me and manually admit your sins."
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default bark
|
||||
export default bark;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
if(typeof window !== "undefined" && typeof window.plausible !== "undefined") {
|
||||
window.plausible("404",{ props: { path: document.location.pathname } });
|
||||
}
|
||||
if (typeof window !== 'undefined' && typeof window.plausible !== 'undefined') {
|
||||
window.plausible('404', { props: { path: document.location.pathname } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$page.status}: {$page.error?.message} 🐾</title>
|
||||
<title>{$page.status}: {$page.error?.message} 🐾</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<h1>{$page.status}: {$page.error?.message} 🐾</h1>
|
||||
<h1>{$page.status}: {$page.error?.message} 🐾</h1>
|
||||
|
||||
{#if $page.status == 404}
|
||||
<p>Someone ate the page, try searching for it, visiting the <a href="/">home page</a> or <a href="/woof">bark at the void</a>.</p>
|
||||
{/if}
|
||||
{#if $page.status == 404}
|
||||
<p>
|
||||
Someone ate the page, try searching for it, visiting the <a href="/">home page</a> or
|
||||
<a href="/woof">bark at the void</a>.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
@include contentGrid;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
.container {
|
||||
@include contentGrid;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,93 @@
|
|||
<script lang="ts">
|
||||
import type { LayoutData } from './$types';
|
||||
import "../app.scss";
|
||||
import type { LayoutData } from './$types';
|
||||
import '../app.scss';
|
||||
|
||||
|
||||
export let data: LayoutData;
|
||||
export let data: LayoutData;
|
||||
</script>
|
||||
|
||||
<div class="navigation">
|
||||
<nav>
|
||||
<a href="/" class="logo">
|
||||
<span class="pup">Pup</span>
|
||||
<span class="raider">Raider</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="trailing-fill"/>
|
||||
<nav>
|
||||
<a href="/" class="logo">
|
||||
<span class="pup">Pup</span>
|
||||
<span class="raider">Raider</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="trailing-fill" />
|
||||
</div>
|
||||
<main>
|
||||
<slot/>
|
||||
<slot />
|
||||
</main>
|
||||
<footer>
|
||||
© <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noreferrer">CC BY-SA 4.0</a> Puppy Raider, 2023 {(() => {const date = new Date(); return date.getFullYear() == 2023 ? "" : ` - ${date.getFullYear()}`})()} | <a href="https://kevink.dev/legal/about" rel="nofollow noindex noreferrer" target="_blank">Impressum</a>
|
||||
© <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noreferrer"
|
||||
>CC BY-SA 4.0</a
|
||||
>
|
||||
Puppy Raider, 2023 {(() => {
|
||||
const date = new Date();
|
||||
return date.getFullYear() == 2023 ? '' : ` - ${date.getFullYear()}`;
|
||||
})()} |
|
||||
<a href="https://kevink.dev/legal/about" rel="nofollow noindex noreferrer" target="_blank"
|
||||
>Impressum</a
|
||||
>
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
footer {
|
||||
max-width: var(--width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
opacity: .35;
|
||||
}
|
||||
footer {
|
||||
max-width: var(--width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 120px;
|
||||
}
|
||||
main {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include contentGrid;
|
||||
.navigation {
|
||||
@include contentGrid;
|
||||
|
||||
margin-bottom: var(--gap);
|
||||
background-color: var(--color-base);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9000;
|
||||
margin-bottom: var(--gap);
|
||||
background-color: var(--color-base);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9000;
|
||||
|
||||
.trailing-fill {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background-image: var(--fill-pattern);
|
||||
}
|
||||
.trailing-fill {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background-image: var(--fill-pattern);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
nav {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
padding: 5px var(--padding);
|
||||
color: var(--color-primary-500);
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
padding: 5px var(--padding);
|
||||
color: var(--color-primary-500);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.pup {
|
||||
font-weight: 600;
|
||||
font-variation-settings: "slnt" -10;
|
||||
font-size: 1.1em;
|
||||
color: var(--color-secondary-300);
|
||||
}
|
||||
.pup {
|
||||
font-weight: 600;
|
||||
font-variation-settings: 'slnt' -10;
|
||||
font-size: 1.1em;
|
||||
color: var(--color-secondary-300);
|
||||
}
|
||||
|
||||
.raider {
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
font-stretch: 134.1%;
|
||||
font-variation-settings: "opsz" 48, "slnt" -10, "GRAD" 0, "XTRA" 603, "YOPQ" 95, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 7122;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.raider {
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
font-stretch: 134.1%;
|
||||
font-variation-settings: 'opsz' 48, 'slnt' -10, 'GRAD' 0, 'XTRA' 603, 'YOPQ' 95,
|
||||
'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 7122;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { LayoutLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
return {};
|
||||
return {};
|
||||
}) satisfies LayoutLoad;
|
||||
|
||||
export const prerender = true;
|
||||
export const prerender = true;
|
||||
|
|
|
|||
|
|
@ -1,314 +1,353 @@
|
|||
<script lang="ts">
|
||||
import portrait from "../assets/portrait_smol.jpg";
|
||||
import {siTelegram, siInstagram} from "simple-icons";
|
||||
import {Cake, MapPin, Shirt} from "lucide-svelte";
|
||||
import bark, {barking} from "$lib/bark";
|
||||
import anime from 'animejs';
|
||||
import portrait from '../assets/portrait_smol.jpg';
|
||||
import { siTelegram, siInstagram } from 'simple-icons';
|
||||
import { Cake, MapPin, Shirt } from 'lucide-svelte';
|
||||
import bark, { barking } from '$lib/bark';
|
||||
import anime from 'animejs';
|
||||
|
||||
let portraitImg: HTMLImageElement|null = null;
|
||||
let portraitImg: HTMLImageElement | null = null;
|
||||
|
||||
const performWoof = (i: number) => {
|
||||
if(!portraitImg) return;
|
||||
const performWoof = (i: number) => {
|
||||
if (!portraitImg) return;
|
||||
|
||||
const picBoundingBox = portraitImg.getBoundingClientRect()
|
||||
const x = picBoundingBox.x + (.4 * picBoundingBox.width) // Left
|
||||
const y = picBoundingBox.y + (.3 * picBoundingBox.height) // Top
|
||||
const picBoundingBox = portraitImg.getBoundingClientRect();
|
||||
const x = picBoundingBox.x + 0.4 * picBoundingBox.width; // Left
|
||||
const y = picBoundingBox.y + 0.3 * picBoundingBox.height; // Top
|
||||
|
||||
const xTarget = x + 200
|
||||
const yTarget = y - 150
|
||||
const xTarget = x + 200;
|
||||
const yTarget = y - 150;
|
||||
|
||||
const directionRad = Math.atan2(yTarget - y, xTarget - x);
|
||||
const directionRad = Math.atan2(yTarget - y, xTarget - x);
|
||||
|
||||
const woofAnimationDuration = 400;
|
||||
|
||||
const woofAnimationDuration = 400;
|
||||
const woofTimeline = anime({
|
||||
targets: '.barkEffect',
|
||||
duration: woofAnimationDuration,
|
||||
easing: 'easeOutExpo',
|
||||
keyframes: [
|
||||
{
|
||||
rotate: [directionRad + 'rad', directionRad + 'rad'],
|
||||
top: [y, yTarget],
|
||||
left: [x, xTarget],
|
||||
scale: [0.2, 1.2]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const woofTimeline = anime({
|
||||
targets: ".barkEffect",
|
||||
duration: woofAnimationDuration,
|
||||
easing: "easeOutExpo",
|
||||
keyframes: [
|
||||
{rotate: [directionRad+"rad", directionRad+"rad"], top: [y, yTarget], left: [x, xTarget], scale: [.2, 1.2]},
|
||||
]
|
||||
})
|
||||
const woofTimelineOpacity = anime({
|
||||
targets: '.barkEffect',
|
||||
duration: woofAnimationDuration * 0.6,
|
||||
easing: 'linear',
|
||||
keyframes: [{ opacity: [0, 1] }, { opacity: [1, 0] }]
|
||||
});
|
||||
|
||||
const woofTimelineOpacity = anime({
|
||||
targets: ".barkEffect",
|
||||
duration: woofAnimationDuration*.6,
|
||||
easing: "linear",
|
||||
keyframes: [
|
||||
{opacity: [0, 1]},
|
||||
{opacity: [1, 0]},
|
||||
]
|
||||
})
|
||||
woofTimeline.play();
|
||||
woofTimelineOpacity.play();
|
||||
|
||||
woofTimeline.play()
|
||||
woofTimelineOpacity.play()
|
||||
|
||||
console.log("woof")
|
||||
}
|
||||
console.log('woof');
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Pup Raider 🐾</title>
|
||||
<meta name="description" content="A playful motorbike pup from Hamburg, Germany."/>
|
||||
<meta name="og:title" content="Pup Raider 🐾" />
|
||||
<meta name="og:description" content="A playful motorbike pup from Hamburg, Germany." />
|
||||
<meta name="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Pup Raider 🐾" />
|
||||
<meta name="twitter:description" content="A playful motorbike pup from Hamburg, Germany." />
|
||||
<meta name="keywords" content="pup, puppy, raider, hamburg, germany, pupplay" />
|
||||
<meta name="theme-color" content="#ff7e29" />
|
||||
|
||||
<title>Pup Raider 🐾</title>
|
||||
<meta name="description" content="A playful motorbike pup from Hamburg, Germany." />
|
||||
<meta name="og:title" content="Pup Raider 🐾" />
|
||||
<meta name="og:description" content="A playful motorbike pup from Hamburg, Germany." />
|
||||
<meta name="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Pup Raider 🐾" />
|
||||
<meta name="twitter:description" content="A playful motorbike pup from Hamburg, Germany." />
|
||||
<meta name="keywords" content="pup, puppy, raider, hamburg, germany, pupplay" />
|
||||
<meta name="theme-color" content="#ff7e29" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="barkEffect">
|
||||
<svg width="120" height="120" version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m17.633 40.004c11.543-8.3242 34.261-13.741 38.363-13.741 4.1025 0 15.473-6.5223 19.584-9.3594s11.017-5.2432 14.212-6.5841c3.1943-1.3409 10.27-6.4037 10.27-6.4037" stroke-width="5.9"/>
|
||||
<path d="m18.552 64.024c20.098 0.44502 40.287-5.9249 45.787-3.5374 5.548 2.4087 19.458 9.4595 24.17 4.1741 2.9581-3.3179 16.626-5.6928 16.626-5.6928" stroke-width="5.6907"/>
|
||||
<path d="m20.004 88.872c11.505 7.0546 29.332 14.971 35.733 14.971 6.4019 0 29.991 3.304 35.584 6.0926s18.987 6.5062 18.987 6.5062" stroke-width="5.9"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
version="1.1"
|
||||
viewBox="0 0 120 120"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path
|
||||
d="m17.633 40.004c11.543-8.3242 34.261-13.741 38.363-13.741 4.1025 0 15.473-6.5223 19.584-9.3594s11.017-5.2432 14.212-6.5841c3.1943-1.3409 10.27-6.4037 10.27-6.4037"
|
||||
stroke-width="5.9"
|
||||
/>
|
||||
<path
|
||||
d="m18.552 64.024c20.098 0.44502 40.287-5.9249 45.787-3.5374 5.548 2.4087 19.458 9.4595 24.17 4.1741 2.9581-3.3179 16.626-5.6928 16.626-5.6928"
|
||||
stroke-width="5.6907"
|
||||
/>
|
||||
<path
|
||||
d="m20.004 88.872c11.505 7.0546 29.332 14.971 35.733 14.971 6.4019 0 29.991 3.304 35.584 6.0926s18.987 6.5062 18.987 6.5062"
|
||||
stroke-width="5.9"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="home-runner">
|
||||
<div class="hero">
|
||||
<div class="portrait">
|
||||
<div class="portrait-wrapper" class:barking={$barking}>
|
||||
<button on:click={() => {bark("portrait", {barkCallback: performWoof})}}>
|
||||
<img src={portrait} alt="Portrait of Pup Raider" bind:this={portraitImg}/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dummy-portrait"></div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<div class="portrait">
|
||||
<div class="portrait-wrapper" class:barking={$barking}>
|
||||
<button
|
||||
on:click={() => {
|
||||
bark('portrait', { barkCallback: performWoof });
|
||||
}}
|
||||
>
|
||||
<img src={portrait} alt="Portrait of Pup Raider" bind:this={portraitImg} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="dummy-portrait" />
|
||||
</div>
|
||||
|
||||
<div class="profile">
|
||||
<div class="pattern-area" />
|
||||
<span class="pup">Puppy</span>
|
||||
<h1>Raider</h1>
|
||||
<div class="line"/>
|
||||
<a href="https://t.me/pup_raider" target="_blank" rel="noopener">
|
||||
{@html siTelegram.svg}
|
||||
<span>@pup_raider</span>
|
||||
</a>
|
||||
<a href="https://instagram.com/pup_raider_hh" target="_blank" rel="noopener">
|
||||
{@html siInstagram.svg}
|
||||
<span>@pup_raider_hh</span>
|
||||
</a>
|
||||
|
||||
<div class="pattern-area" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile">
|
||||
<div class="pattern-area" />
|
||||
<span class="pup">Puppy</span>
|
||||
<h1>Raider</h1>
|
||||
<div class="line" />
|
||||
<a href="https://t.me/pup_raider" target="_blank" rel="noopener">
|
||||
{@html siTelegram.svg}
|
||||
<span>@pup_raider</span>
|
||||
</a>
|
||||
<a href="https://instagram.com/pup_raider_hh" target="_blank" rel="noopener">
|
||||
{@html siInstagram.svg}
|
||||
<span>@pup_raider_hh</span>
|
||||
</a>
|
||||
|
||||
<div class="intro">
|
||||
<h2><button on:click={() => bark("hidden_button", {barkCallback: performWoof})}>Woof</button>, I'm Raider 🐾</h2>
|
||||
<div class="pattern-area" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>I'm a puppy from northern Germany. I love riding motorbikes and playing in the dirt.</p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h2>
|
||||
<button on:click={() => bark('hidden_button', { barkCallback: performWoof })}>Woof</button>,
|
||||
I'm Raider 🐾
|
||||
</h2>
|
||||
|
||||
<div class="facts">
|
||||
<div class="fact">
|
||||
<span class="q"><Cake/> Puppy-Birthday</span>
|
||||
<span class="a">2023-07-14</span>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<span class="q"><Shirt/> Gear</span>
|
||||
<span class="a">MX, Motorbike Leathers, Army, Football/Soccer, Boots, Sneakers</span>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<span class="q"><MapPin/> Location</span>
|
||||
<span class="a"><a href="https://www.puppieshamburg.de/" target="_blank" rel="noopener">Hamburg, Germany</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<p>I'm a puppy from northern Germany. I love riding motorbikes and playing in the dirt.</p>
|
||||
</div>
|
||||
|
||||
<div class="facts">
|
||||
<div class="fact">
|
||||
<span class="q"><Cake /> Puppy-Birthday</span>
|
||||
<span class="a">2023-07-14</span>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<span class="q"><Shirt /> Gear</span>
|
||||
<span class="a">MX, Motorbike Leathers, Army, Football/Soccer, Boots, Sneakers</span>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<span class="q"><MapPin /> Location</span>
|
||||
<span class="a"
|
||||
><a href="https://www.puppieshamburg.de/" target="_blank" rel="noopener">Hamburg, Germany</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.barkEffect {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
.barkEffect {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
@keyframes bark {
|
||||
0% {transform: translate(5px, 10px) rotate(2deg);}
|
||||
50% {transform: translate(5px, 10px) rotate(-1deg);}
|
||||
70% {transform: translate(4px, 10px) rotate(3deg);}
|
||||
75% {transform: translate(2px, 0px) rotate(1deg);}
|
||||
90% {transform: translate(5px, 10px) rotate(-3deg);}
|
||||
100% {transform: translate(5px, 10px) rotate(2deg);}
|
||||
}
|
||||
@keyframes bark {
|
||||
0% {
|
||||
transform: translate(5px, 10px) rotate(2deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(5px, 10px) rotate(-1deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(4px, 10px) rotate(3deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(2px, 0px) rotate(1deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(5px, 10px) rotate(-3deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(5px, 10px) rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.portrait-wrapper.barking {
|
||||
animation-name: bark;
|
||||
animation-duration: .7s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.home-runner {
|
||||
@include contentGrid;
|
||||
.portrait-wrapper.barking {
|
||||
animation-name: bark;
|
||||
animation-duration: 0.7s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.facts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
margin-bottom: 50px;
|
||||
.home-runner {
|
||||
@include contentGrid;
|
||||
|
||||
.fact {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
.facts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
margin-bottom: 50px;
|
||||
|
||||
.q {
|
||||
display: flex;
|
||||
gap: calc(.5 * var(--gap));
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
.fact {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
|
||||
:global(svg) {
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.q {
|
||||
display: flex;
|
||||
gap: calc(0.5 * var(--gap));
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
|
||||
.intro {
|
||||
padding: var(--padding) 0;
|
||||
:global(svg) {
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
user-select: auto;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
padding: var(--padding) 0;
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
gap: calc(var(--gap) * 2);
|
||||
|
||||
.portrait {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
transition: opacity .25s, width .25s;
|
||||
h2 {
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
user-select: auto;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(width < 500px) {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dummy-portrait {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
background-color: var(--color-secondary-300);
|
||||
border-radius: var(--radius);
|
||||
transform: translate(5px, 10px) rotate(-2deg);
|
||||
aspect-ratio: 35/45;
|
||||
}
|
||||
.hero {
|
||||
display: flex;
|
||||
gap: calc(var(--gap) * 2);
|
||||
|
||||
.portrait-wrapper {
|
||||
border: 3px solid var(--color-primary-500);
|
||||
border-radius: var(--radius);
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
background-color: var(--color-base);
|
||||
transform: translate(5px, 10px) rotate(2deg);
|
||||
aspect-ratio: 35/45;
|
||||
width: 100%;
|
||||
transition: transform .25s;
|
||||
.portrait {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
transition: opacity 0.25s, width 0.25s;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
user-select: auto;
|
||||
cursor: default;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@media (width < 500px) {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
> img {
|
||||
border-radius: 13px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background-image: var(--fill-pattern);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dummy-portrait {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
background-color: var(--color-secondary-300);
|
||||
border-radius: var(--radius);
|
||||
transform: translate(5px, 10px) rotate(-2deg);
|
||||
aspect-ratio: 35/45;
|
||||
}
|
||||
|
||||
.profile {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.portrait-wrapper {
|
||||
border: 3px solid var(--color-primary-500);
|
||||
border-radius: var(--radius);
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
background-color: var(--color-base);
|
||||
transform: translate(5px, 10px) rotate(2deg);
|
||||
aspect-ratio: 35/45;
|
||||
width: 100%;
|
||||
transition: transform 0.25s;
|
||||
|
||||
gap: var(--gap);
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
user-select: auto;
|
||||
cursor: default;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
.pattern-area {
|
||||
background-image: var(--fill-pattern);
|
||||
flex-grow: 1;
|
||||
> img {
|
||||
border-radius: 13px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background-image: var(--fill-pattern);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.pup {
|
||||
font-weight: 600;
|
||||
font-variation-settings: "slnt" -10;
|
||||
font-size: 1.7em;
|
||||
margin-bottom: -20px;
|
||||
color: var(--color-secondary-300);
|
||||
}
|
||||
gap: var(--gap);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-weight: 800;
|
||||
font-size: 3.25em;
|
||||
font-stretch: 134.1%;
|
||||
font-variation-settings: "opsz" 48, "slnt" -10, "GRAD" 0, "XTRA" 603, "YOPQ" 95, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 7122;
|
||||
font-optical-sizing: auto;
|
||||
display: flex;
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
.pattern-area {
|
||||
background-image: var(--fill-pattern);
|
||||
flex-grow: 1;
|
||||
|
||||
a, a * {
|
||||
color: var(--color-secondary-500);
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
&:last-child {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
fill: var(--color-secondary-300);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.pup {
|
||||
font-weight: 600;
|
||||
font-variation-settings: 'slnt' -10;
|
||||
font-size: 1.7em;
|
||||
margin-bottom: -20px;
|
||||
color: var(--color-secondary-300);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-weight: 800;
|
||||
font-size: 3.25em;
|
||||
font-stretch: 134.1%;
|
||||
font-variation-settings: 'opsz' 48, 'slnt' -10, 'GRAD' 0, 'XTRA' 603, 'YOPQ' 95,
|
||||
'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 7122;
|
||||
font-optical-sizing: auto;
|
||||
display: flex;
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
a,
|
||||
a * {
|
||||
color: var(--color-secondary-500);
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
:global(svg) {
|
||||
fill: var(--color-secondary-300);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,36 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import bark from "$lib/bark"
|
||||
|
||||
export let data: PageData;
|
||||
import type { PageData } from './$types';
|
||||
import bark from '$lib/bark';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Raider goes woof 🐾</title>
|
||||
<meta name="description" content="Grrr ruff ruff. 🐶"/>
|
||||
<meta name="og:title" content="Raider goes woof 🐾" />
|
||||
<meta name="og:description" content="Grrr ruff ruff. 🐶" />
|
||||
<meta name="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Raider goes woof 🐾" />
|
||||
<meta name="twitter:description" content="Grrr ruff ruff. 🐶" />
|
||||
<meta name="keywords" content="pup, puppy, raider, hamburg, germany, pupplay" />
|
||||
<meta name="theme-color" content="#ff7e29" />
|
||||
|
||||
<title>Raider goes woof 🐾</title>
|
||||
<meta name="description" content="Grrr ruff ruff. 🐶" />
|
||||
<meta name="og:title" content="Raider goes woof 🐾" />
|
||||
<meta name="og:description" content="Grrr ruff ruff. 🐶" />
|
||||
<meta name="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Raider goes woof 🐾" />
|
||||
<meta name="twitter:description" content="Grrr ruff ruff. 🐶" />
|
||||
<meta name="keywords" content="pup, puppy, raider, hamburg, germany, pupplay" />
|
||||
<meta name="theme-color" content="#ff7e29" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<button class="woof" on:click={() => bark("woof_btn")}>Woof 🐶</button>
|
||||
<button class="woof" on:click={() => bark('woof_btn')}>Woof 🐶</button>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
@include contentGrid;
|
||||
.container {
|
||||
@include contentGrid;
|
||||
|
||||
.woof {
|
||||
font: inherit;
|
||||
font-size: 3em;
|
||||
padding: var(--padding);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.woof {
|
||||
font: inherit;
|
||||
font-size: 3em;
|
||||
padding: var(--padding);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,39 @@
|
|||
@mixin variables {
|
||||
--padding: 30px;
|
||||
--gap: 20px;
|
||||
--radius: 20px;
|
||||
--padding: 30px;
|
||||
--gap: 20px;
|
||||
--radius: 20px;
|
||||
--width: 700px;
|
||||
--layout-slant: -30deg;
|
||||
--layout-slant: -30deg;
|
||||
|
||||
--color-base: #fff;
|
||||
--color-base: #fff;
|
||||
|
||||
--color-primary-100: #{hsl(24, 100%, 10%)};
|
||||
--color-primary-200: #{hsl(24, 100%, 28%)};
|
||||
--color-primary-300: #{hsl(24, 100%, 40%)};
|
||||
--color-primary-400: #{hsl(24, 100%, 50%)};
|
||||
--color-primary-500: #{hsl(24, 100%, 58%)};
|
||||
--color-primary-600: #{hsl(24, 100%, 64%)};
|
||||
--color-primary-700: #{hsl(24, 100%, 69%)};
|
||||
--color-primary-800: #{hsl(24, 100%, 75%)};
|
||||
--color-primary-900: #{hsl(24, 100%, 80%)};
|
||||
--color-primary-100: #{hsl(24, 100%, 10%)};
|
||||
--color-primary-200: #{hsl(24, 100%, 28%)};
|
||||
--color-primary-300: #{hsl(24, 100%, 40%)};
|
||||
--color-primary-400: #{hsl(24, 100%, 50%)};
|
||||
--color-primary-500: #{hsl(24, 100%, 58%)};
|
||||
--color-primary-600: #{hsl(24, 100%, 64%)};
|
||||
--color-primary-700: #{hsl(24, 100%, 69%)};
|
||||
--color-primary-800: #{hsl(24, 100%, 75%)};
|
||||
--color-primary-900: #{hsl(24, 100%, 80%)};
|
||||
|
||||
--color-secondary-0: #{hsl(244, 93%, 8%)};
|
||||
--color-secondary-100: #{hsl(244, 93%, 13%)};
|
||||
--color-secondary-200: #{hsl(244, 93%, 18%)};
|
||||
--color-secondary-300: #{hsl(244, 93%, 22%)};
|
||||
--color-secondary-400: #{hsl(244, 93%, 28%)};
|
||||
--color-secondary-500: #{hsl(244, 88%, 38%)};
|
||||
--color-secondary-600: #{hsl(244, 83%, 48%)};
|
||||
--color-secondary-700: #{hsl(244, 78%, 58%)};
|
||||
--color-secondary-800: #{hsl(244, 73%, 68%)};
|
||||
--color-secondary-900: #{hsl(244, 63%, 78%)};
|
||||
--color-secondary-0: #{hsl(244, 93%, 8%)};
|
||||
--color-secondary-100: #{hsl(244, 93%, 13%)};
|
||||
--color-secondary-200: #{hsl(244, 93%, 18%)};
|
||||
--color-secondary-300: #{hsl(244, 93%, 22%)};
|
||||
--color-secondary-400: #{hsl(244, 93%, 28%)};
|
||||
--color-secondary-500: #{hsl(244, 88%, 38%)};
|
||||
--color-secondary-600: #{hsl(244, 83%, 48%)};
|
||||
--color-secondary-700: #{hsl(244, 78%, 58%)};
|
||||
--color-secondary-800: #{hsl(244, 73%, 68%)};
|
||||
--color-secondary-900: #{hsl(244, 63%, 78%)};
|
||||
|
||||
--fill-pattern: repeating-linear-gradient(var(--layout-slant),var(--color-base) 0,var(--color-primary-500) .5px 3px,var(--color-base) 3.5px 12px);
|
||||
--fill-pattern: repeating-linear-gradient(
|
||||
var(--layout-slant),
|
||||
var(--color-base) 0,
|
||||
var(--color-primary-500) 0.5px 3px,
|
||||
var(--color-base) 3.5px 12px
|
||||
);
|
||||
}
|
||||
|
||||
@mixin contentGrid {
|
||||
|
|
@ -629,4 +634,3 @@
|
|||
padding: 10px 20px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,11 @@
|
|||
{"name":"Pup Raider 🐾","short_name":"Pup Raider 🐾","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"browser"}
|
||||
{
|
||||
"name": "Pup Raider 🐾",
|
||||
"short_name": "Pup Raider 🐾",
|
||||
"icons": [
|
||||
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
|
||||
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "browser"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const config = {
|
|||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter({
|
||||
fallback: "404.html"
|
||||
fallback: '404.html'
|
||||
})
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
sveltekit()
|
||||
],
|
||||
plugins: [sveltekit()],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue