Create first version
This commit is contained in:
parent
3adbdf5eac
commit
258145e0ac
GPG key ID:
1460B586646E180D
11 changed files with 1027 additions and 7 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,3 +8,4 @@ node_modules
|
|||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
/yarn-error.log
|
||||
10
package.json
10
package.json
|
|
@ -14,6 +14,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@types/howler": "^2.2.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"eslint": "^8.28.0",
|
||||
|
|
@ -27,5 +28,12 @@
|
|||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module"
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource-variable/roboto-flex": "^5.0.5",
|
||||
"howler": "^2.2.3",
|
||||
"lucide-svelte": "^0.260.0",
|
||||
"sass": "^1.63.6",
|
||||
"simple-icons": "^9.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
18
src/app.scss
Normal file
18
src/app.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import "@fontsource-variable/roboto-flex/full.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include variables;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Roboto Flex Variable", "Roboto", sans-serif;
|
||||
|
||||
@include formatting;
|
||||
}
|
||||
BIN
src/assets/grrrr-ruff-ruff.mp3
Normal file
BIN
src/assets/grrrr-ruff-ruff.mp3
Normal file
Binary file not shown.
BIN
src/assets/portrait_smol.jpg
Normal file
BIN
src/assets/portrait_smol.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
84
src/routes/+layout.svelte
Normal file
84
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script lang="ts">
|
||||
import type { LayoutData } from './$types';
|
||||
import "../app.scss";
|
||||
|
||||
|
||||
export let data: LayoutData;
|
||||
</script>
|
||||
|
||||
<div class="navigation">
|
||||
<nav>
|
||||
<a href="/" class="logo">
|
||||
<span class="pup">Puppy</span>
|
||||
<span class="raider">Raider</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="trailing-fill"/>
|
||||
</div>
|
||||
<main>
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
footer {
|
||||
max-width: var(--width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
opacity: .35;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include contentGrid;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
padding: 5px var(--padding);
|
||||
color: var(--color-primary-500);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.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>
|
||||
|
|
@ -1,2 +1,224 @@
|
|||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
import portrait from "../assets/portrait_smol.jpg";
|
||||
import {siTelegram, siInstagram} from "simple-icons";
|
||||
import {Cake, MapPin, Shirt} from "lucide-svelte";
|
||||
import {Howl} from 'howler';
|
||||
import ruffSoundFile from "../assets/grrrr-ruff-ruff.mp3";
|
||||
|
||||
const ruffSound = new Howl({
|
||||
src: [ruffSoundFile],
|
||||
volume: .75
|
||||
});
|
||||
|
||||
|
||||
const ruff = () => {
|
||||
ruffSound.play()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="home-runner">
|
||||
<div class="hero">
|
||||
<div class="portrait">
|
||||
<div class="portrait-wrapper">
|
||||
<img src={portrait} alt="Portrait of Pup Raider"/>
|
||||
</div>
|
||||
<div class="dummy-portrait"></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">
|
||||
{@html siTelegram.svg}
|
||||
<span>@pup_raider</span>
|
||||
</a>
|
||||
<a href="https://instagram.com/pup_raider_hh">
|
||||
{@html siInstagram.svg}
|
||||
<span>@pup_raider_hh</span>
|
||||
</a>
|
||||
|
||||
<div class="pattern-area" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro">
|
||||
<h2><button on:click={ruff} on:mouseover={() => {ruffSound.load()}} on:focus={() => {ruffSound.load()}}>Woof</button>, I'm Raider 🐾</h2>
|
||||
|
||||
<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, Boots, Sneakers</span>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<span class="q"><MapPin/> Location</span>
|
||||
<span class="a">Hamburg, Germany</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.home-runner {
|
||||
@include contentGrid;
|
||||
|
||||
.facts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
margin-bottom: 50px;
|
||||
|
||||
.fact {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
|
||||
.q {
|
||||
display: flex;
|
||||
gap: calc(.5 * var(--gap));
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: var(--padding) 0;
|
||||
|
||||
h2 {
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
user-select: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
gap: calc(var(--gap) * 2);
|
||||
|
||||
.portrait {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
transition: opacity .25s, width .25s;
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
||||
> img {
|
||||
border-radius: 13px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background-image: var(--fill-pattern);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: var(--gap);
|
||||
|
||||
.pattern-area {
|
||||
background-image: var(--fill-pattern);
|
||||
flex-grow: 1;
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: var(--color-secondary-500);
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
|
||||
:global(svg) {
|
||||
fill: var(--color-secondary-300);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.color {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: var(--padding);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: var(--gap);
|
||||
padding: var(--padding);
|
||||
}
|
||||
</style>
|
||||
632
src/variables.scss
Normal file
632
src/variables.scss
Normal file
|
|
@ -0,0 +1,632 @@
|
|||
@mixin variables {
|
||||
--padding: 30px;
|
||||
--gap: 20px;
|
||||
--radius: 20px;
|
||||
--width: 700px;
|
||||
--layout-slant: -30deg;
|
||||
|
||||
--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-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);
|
||||
}
|
||||
|
||||
@mixin contentGrid {
|
||||
display: grid;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
max-width: min(100vw, 100%);
|
||||
}
|
||||
|
||||
grid-template-columns:
|
||||
[full-start] minmax(max(4vmin, var(--gap)), auto)
|
||||
[wide-start] minmax(auto, 240px)
|
||||
[main-start] min(var(--width), calc(100% - max(8vmin, calc(var(--gap) * 2))))
|
||||
[main-end] minmax(auto, 240px)
|
||||
[wide-end] minmax(max(4vmin, var(--gap)), auto)
|
||||
[full-end];
|
||||
|
||||
> :global(*) {
|
||||
grid-column: main-start/main-end;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin formatting {
|
||||
color: var(--color-text);
|
||||
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
applet,
|
||||
article,
|
||||
aside,
|
||||
audio,
|
||||
big,
|
||||
blockquote,
|
||||
body,
|
||||
canvas,
|
||||
caption,
|
||||
cite,
|
||||
code,
|
||||
dd,
|
||||
del,
|
||||
details,
|
||||
dfn,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
em,
|
||||
embed,
|
||||
fieldset,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
header,
|
||||
hgroup,
|
||||
html,
|
||||
iframe,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
label,
|
||||
legend,
|
||||
li,
|
||||
mark,
|
||||
menu,
|
||||
nav,
|
||||
object,
|
||||
ol,
|
||||
output,
|
||||
p,
|
||||
pre,
|
||||
q,
|
||||
ruby,
|
||||
s,
|
||||
samp,
|
||||
section,
|
||||
small,
|
||||
span,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
summary,
|
||||
sup,
|
||||
table,
|
||||
tbody,
|
||||
td,
|
||||
tfoot,
|
||||
th,
|
||||
thead,
|
||||
time,
|
||||
tr,
|
||||
tt,
|
||||
ul,
|
||||
var,
|
||||
video {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: thin dotted var(--color-border);
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline dotted currentColor;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0 20px;
|
||||
|
||||
dt {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
|
||||
tr th {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 10px 16px;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
tr td {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-size: 1em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--color-dark-surface);
|
||||
color: var(--color-dark-surface-text);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
:not(pre) > code,
|
||||
kbd {
|
||||
padding: 0.48em 0.5em;
|
||||
line-height: 1em;
|
||||
display: inline-block;
|
||||
background-color: var(--color-surface);
|
||||
border: thin solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-weight: 200;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background-color: var(--color-surface);
|
||||
border: thin solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
blockquote:not([class]) {
|
||||
font-style: italic;
|
||||
padding: 0.5em 2em;
|
||||
position: relative;
|
||||
margin: 1em 0;
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
margin-top: 0.75em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
background: var(--color-accent);
|
||||
left: -1em;
|
||||
width: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.2em;
|
||||
left: -0.2em;
|
||||
right: -0.2em;
|
||||
bottom: -0.2em;
|
||||
background-color: var(--color-accent);
|
||||
opacity: 0.25;
|
||||
transform: skew(-6deg);
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 0.5;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25rem;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.25rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
max-width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> figcaption {
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4em;
|
||||
padding: 1.1em 1.5em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
.kg-gallery-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: var(--gap);
|
||||
margin: var(--gap) 0;
|
||||
|
||||
.kg-gallery-image {
|
||||
> img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kg-embed-card {
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.kg-card {
|
||||
&.kg-style-dark {
|
||||
background-color: var(--color-dark-surface);
|
||||
color: var(--color-dark-surface-text);
|
||||
}
|
||||
&.kg-style-light {
|
||||
background-color: var(--color-light-surface);
|
||||
color: var(--color-light-surface-text);
|
||||
}
|
||||
&.kg-style-accent {
|
||||
background-color: var(--color-accent-surface);
|
||||
color: var(--color-accent-surface-text);
|
||||
}
|
||||
&.kg-style-image {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px black;
|
||||
}
|
||||
}
|
||||
|
||||
.kg-align-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kg-align-left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.kg-align-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.kg-callout-card {
|
||||
display: flex;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: var(--bg);
|
||||
|
||||
.kg-callout-emoji {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--gap);
|
||||
font-size: 2em;
|
||||
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.kg-callout-text {
|
||||
//display: flex;
|
||||
padding: var(--gap);
|
||||
/*align-items: center;*/
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.kg-callout-card-blue {
|
||||
--bg: var(--color-highlight-blue);
|
||||
}
|
||||
|
||||
&.kg-callout-card-white {
|
||||
--bg: var(--color-highlight-white);
|
||||
}
|
||||
|
||||
&.kg-callout-card-grey {
|
||||
--bg: var(--color-highlight-grey);
|
||||
}
|
||||
|
||||
&.kg-callout-card-yellow {
|
||||
--bg: var(--color-highlight-yellow);
|
||||
}
|
||||
|
||||
&.kg-callout-card-green {
|
||||
--bg: var(--color-highlight-green);
|
||||
}
|
||||
|
||||
&.kg-callout-card-red {
|
||||
--bg: var(--color-highlight-red);
|
||||
}
|
||||
|
||||
&.kg-callout-card-pink {
|
||||
--bg: var(--color-highlight-pink);
|
||||
}
|
||||
|
||||
&.kg-callout-card-purple {
|
||||
--bg: var(--color-highlight-purple);
|
||||
}
|
||||
|
||||
&.kg-callout-card-accent {
|
||||
--bg: var(--color-accent-surface);
|
||||
color: var(--color-accent-surface-text);
|
||||
}
|
||||
}
|
||||
|
||||
.kg-btn {
|
||||
@include button;
|
||||
background-color: var(--color-accent-surface);
|
||||
color: var(--color-accent-surface-text);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.kg-header-card-button {
|
||||
@include button;
|
||||
}
|
||||
|
||||
.kg-header-card {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 7em 0;
|
||||
margin: 5em 0;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
|
||||
.kg-header-card-header {
|
||||
font-size: 4em;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kg-header-card-subheader {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kg-width-full {
|
||||
grid-column: full-start/full-end;
|
||||
|
||||
img {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kg-width-wide {
|
||||
grid-column: wide-start/wide-end;
|
||||
}
|
||||
|
||||
figure.kg-bookmark-card {
|
||||
a {
|
||||
display: flex;
|
||||
border-radius: var(--border-radius);
|
||||
border: thin solid var(--color-border);
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
.kg-bookmark-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-basis: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: var(--gap);
|
||||
overflow: hidden;
|
||||
|
||||
.kg-bookmark-title {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.4em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
display: -webkit-box;
|
||||
line-height: 1.5em;
|
||||
margin-top: 3px;
|
||||
font-weight: 400;
|
||||
max-height: 44px;
|
||||
overflow-y: hidden;
|
||||
opacity: 0.7;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.kg-bookmark-metadata {
|
||||
display: flex;
|
||||
margin-top: 2em;
|
||||
white-space: nowrap;
|
||||
|
||||
> img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
> span {
|
||||
opacity: 0.7;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kg-bookmark-publisher::before {
|
||||
content: '•';
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
min-width: 33%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-dark-surface);
|
||||
color: var(--color-dark-surface-text);
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import preprocess from 'svelte-preprocess';
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
|
|
@ -5,7 +6,15 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
|
|||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
preprocess: [
|
||||
vitePreprocess(),
|
||||
preprocess({
|
||||
scss: {
|
||||
prependData: '@use "src/variables.scss" as *;'
|
||||
},
|
||||
preserve: ['ld+json']
|
||||
})
|
||||
],
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
|
|
|
|||
|
|
@ -2,5 +2,12 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
plugins: [sveltekit()],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: '@use "src/variables.scss" as *;'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
43
yarn.lock
43
yarn.lock
|
|
@ -157,6 +157,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af"
|
||||
integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==
|
||||
|
||||
"@fontsource-variable/roboto-flex@^5.0.5":
|
||||
version "5.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.5.tgz#d7eeb2e50e16519a063045f10da429f9ed3ff929"
|
||||
integrity sha512-6wVl3KHN0RWg9MEv0UEldcDZO1m1Bw8elP32X4iEi5tPA6/I1N0nLGTs1lPJ/IBZxLNQO2b153NICMXN/r1EwA==
|
||||
|
||||
"@humanwhocodes/config-array@^0.11.10":
|
||||
version "0.11.10"
|
||||
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
|
||||
|
|
@ -294,6 +299,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
|
||||
integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
|
||||
|
||||
"@types/howler@^2.2.7":
|
||||
version "2.2.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/howler/-/howler-2.2.7.tgz#5acfbed57f9e1d99b8dabe1b824729e1c1ea1fae"
|
||||
integrity sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==
|
||||
|
||||
"@types/json-schema@^7.0.9":
|
||||
version "7.0.12"
|
||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
|
||||
|
|
@ -507,7 +517,7 @@ chalk@^4.0.0:
|
|||
ansi-styles "^4.1.0"
|
||||
supports-color "^7.1.0"
|
||||
|
||||
chokidar@^3.4.1:
|
||||
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
|
||||
version "3.5.3"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
|
||||
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
|
||||
|
|
@ -937,11 +947,21 @@ has-flag@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
|
||||
integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
|
||||
|
||||
howler@^2.2.3:
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
|
||||
integrity sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==
|
||||
|
||||
ignore@^5.2.0:
|
||||
version "5.2.4"
|
||||
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
|
||||
integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
|
||||
|
||||
immutable@^4.0.0:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.1.tgz#17988b356097ab0719e2f741d56f3ec6c317f9dc"
|
||||
integrity sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==
|
||||
|
||||
import-fresh@^3.0.0, import-fresh@^3.2.1:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
|
||||
|
|
@ -1078,6 +1098,11 @@ lru-cache@^6.0.0:
|
|||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
lucide-svelte@^0.260.0:
|
||||
version "0.260.0"
|
||||
resolved "https://registry.yarnpkg.com/lucide-svelte/-/lucide-svelte-0.260.0.tgz#eb5dd721af994e49b5ac783da3ee2c205373d520"
|
||||
integrity sha512-fvR/42lZdIaW9RCVIouIMO9LgxwBcE4M770Hpl1ITL2At5YamgQ8J/652mTBXnX7qfiTCND/mSVnnXGESypaEw==
|
||||
|
||||
magic-string@^0.27.0:
|
||||
version "0.27.0"
|
||||
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
|
||||
|
|
@ -1375,6 +1400,15 @@ sander@^0.5.0:
|
|||
mkdirp "^0.5.1"
|
||||
rimraf "^2.5.2"
|
||||
|
||||
sass@^1.63.6:
|
||||
version "1.63.6"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.63.6.tgz#481610e612902e0c31c46b46cf2dad66943283ea"
|
||||
integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
immutable "^4.0.0"
|
||||
source-map-js ">=0.6.2 <2.0.0"
|
||||
|
||||
semver@^7.3.7, semver@^7.5.3:
|
||||
version "7.5.4"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
|
||||
|
|
@ -1399,6 +1433,11 @@ shebang-regex@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
|
||||
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
|
||||
|
||||
simple-icons@^9.5.0:
|
||||
version "9.5.0"
|
||||
resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-9.5.0.tgz#1c37a5452692d70468abb0880f6200071f29e188"
|
||||
integrity sha512-FEtVYBJgsQb+Oz2f6DBbPipOl/9QVAEPvxZj1bllsoRsYL2LfufvhPDSLUdmpClUUDW5UjphBoEwBQvqJ1p3lg==
|
||||
|
||||
sirv@^2.0.2:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.3.tgz#ca5868b87205a74bef62a469ed0296abceccd446"
|
||||
|
|
@ -1423,7 +1462,7 @@ sorcery@^0.11.0:
|
|||
minimist "^1.2.0"
|
||||
sander "^0.5.0"
|
||||
|
||||
source-map-js@^1.0.1, source-map-js@^1.0.2:
|
||||
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue