Compare commits
1 Commits
WeGoingBas
...
main
| Author | SHA1 | Date |
|---|---|---|
 Sveske_Juice
|
a4a24f4b0c |
|
|
@ -1,10 +1,10 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML Carousel Example</title>
|
||||
<!-- Include Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
|
||||
<!-- Indicators -->
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"
|
||||
aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
|
||||
<!-- Carousel Items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First Slide</h5>
|
||||
<p>Description for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second Slide</h5>
|
||||
<p>Description for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third Slide</h5>
|
||||
<p>Description for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
34
build.sh
34
build.sh
|
|
@ -1,34 +0,0 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
# motherfucking hate npm. Spent 3 hours debugging that when
|
||||
# NODE_ENV is set to production, npm won't install anything
|
||||
unset NODE_ENV
|
||||
|
||||
echo "Rebuilding deprived main site"
|
||||
echo "cwd: ${pwd}"
|
||||
|
||||
#rm -rf deprived-main-website
|
||||
#git clone https://gitea.deprived.dev/Sveskejuice/deprived-main-website.git
|
||||
|
||||
git restore .
|
||||
git clean -fd
|
||||
git pull
|
||||
git checkout WeGoingBasic
|
||||
|
||||
echo "Project files up to date. Proceeding to install deps"
|
||||
|
||||
echo "npm config list:"
|
||||
npm config list
|
||||
|
||||
npm cache clean --force
|
||||
npm i
|
||||
npm i @sveltejs/adapter-static
|
||||
npm i @sveltejs/kit
|
||||
npm i @zerodevx/svelte-img
|
||||
npm tailwind init
|
||||
|
||||
echo "Ready to build, building..."
|
||||
|
||||
npm run build
|
||||
|
||||
echo "Done rebuilding!"
|
||||
|
|
@ -1,19 +1,18 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
|
|
@ -14,23 +14,10 @@
|
|||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"daisyui": "^4.12.12",
|
||||
"postcss": "^8.4.47",
|
||||
"sass": "^1.77.4",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte-highlight": "^7.6.0",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
"vite": "^5.0.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"svelte-media-queries": "^1.6.2",
|
||||
"svelte-parallax": "^0.6.0",
|
||||
"theme-change": "^2.5.0"
|
||||
}
|
||||
"type": "module"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
|
|
|||
34
src/app.html
34
src/app.html
|
|
@ -1,16 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-theme="Synthwave" style="overflow-x: hidden;">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Change theme for site here -->
|
||||
<link rel="stylesheet" href="/stylesheets/main-theme.css" />
|
||||
<link rel="stylesheet" href="/stylesheets/global.css" />
|
||||
%sveltekit.head%
|
||||
|
||||
</head>
|
||||
|
||||
<body style="display: contents">%sveltekit.body%</div>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Change theme for site here -->
|
||||
<link rel="stylesheet" href="/stylesheets/main-theme.css" />
|
||||
<link rel="stylesheet" href="/stylesheets/global.css" />
|
||||
|
||||
%sveltekit.head%
|
||||
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<div {...$$restProps}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.centralize{
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!-- Just used for ease of read -->
|
||||
<div style="padding: 0;">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<div class="grow" />
|
||||
|
||||
<style>
|
||||
.grow{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script lang="ts">
|
||||
import HorizonalStack from "../Utils/HorizonalStack.svelte";
|
||||
import TimelineItem from "./timelineItem.svelte";
|
||||
</script>
|
||||
|
||||
<HorizonalStack {...$$restProps}>
|
||||
<slot/>
|
||||
</HorizonalStack>
|
||||
|
||||
<style>
|
||||
:global(.JustifyStart){
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<script lang="ts">
|
||||
import HorizonalStack from "../Utils/HorizonalStack.svelte";
|
||||
import VerticalStack from "../Utils/VerticalStack.svelte";
|
||||
import ZSpacer from "../Utils/ZSpacer.svelte";
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
|
||||
// Set these when using the component
|
||||
export let date: string = "null";
|
||||
export let imagePath: string = "null";
|
||||
export let title: string = "null";
|
||||
export let desc: string = "null";
|
||||
|
||||
const timelineCollapseThreshhold : string = '1000px';
|
||||
let timelineCollaped: boolean = false;
|
||||
</script>
|
||||
|
||||
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
|
||||
|
||||
<div class="flexStart timelineItemContainer" style="overflow: auto;">
|
||||
<div style="padding-top: 10px;">
|
||||
{#if imagePath !== "null"}
|
||||
<div class="imageContainer">
|
||||
<img src={imagePath} class="image" alt="nothing"/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="ItemStrip"/>
|
||||
<div class="noPadding">
|
||||
<div class="title">{@html title}</div>
|
||||
<div class="DateText">{@html date}</div>
|
||||
<div class="bodyText">{@html desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imageContainer img{
|
||||
position: absolute;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.timelineItemContainer{
|
||||
column-gap: 3vw;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.noPadding{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flexStart{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 200%;
|
||||
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.bodyText{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.DateText{
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
color: darkgray;
|
||||
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ItemStrip{
|
||||
min-width: 0.5%;
|
||||
display: inline-flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
background-color: rgb(178, 178, 178);
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 711 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 756 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 708 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
|
|
@ -1,66 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { ButtonType } from "$lib/IO/ButtonType.ts";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let href : string = "#";
|
||||
export let type : ButtonType = ButtonType.Primary;
|
||||
let cssName : string;
|
||||
|
||||
const buttonTypeColors = {
|
||||
[ButtonType.Primary]: '--primary',
|
||||
[ButtonType.Secondary]: '--secondary',
|
||||
[ButtonType.Accent]: '--accent',
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
cssName = buttonTypeColors[type];
|
||||
});
|
||||
</script>
|
||||
|
||||
<a href={href} class="button" style="--button-color: var({cssName});">
|
||||
<div class="content">
|
||||
<slot name="content">
|
||||
Click Me!
|
||||
</slot>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background-color: var(--button-color);
|
||||
text-decoration: none;
|
||||
|
||||
transition: transform 100ms ease-in-out;
|
||||
transform: translate(0, 0);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
|
||||
padding: 0.8em 4em;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transition: transform 100ms ease-in-out;
|
||||
transform: translate(0, -5px);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
color: var(--text1);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export enum ButtonType {
|
||||
Primary,
|
||||
Secondary,
|
||||
Accent
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 27 KiB |
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
export let Class = '';
|
||||
export let Style = '';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={Class}
|
||||
style={Style}
|
||||
height="20"
|
||||
id="Layer_1"
|
||||
version="1.1"
|
||||
viewBox="0 0 28 20"
|
||||
width="28"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><path
|
||||
d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
|
||||
id="path1"
|
||||
style="fill-opacity:1" /></svg>
|
||||
|
|
@ -0,0 +1 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let post_url : string = '404';
|
||||
export let thumbnail_url : string = '/favicon.png';
|
||||
export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
|
||||
export let title : string = '<title>';
|
||||
export let summary : string = '<summary>';
|
||||
export let creation_date : string = '<date>';
|
||||
|
||||
const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
$: human_creation_date = new Date(+creation_date * 1000);
|
||||
</script>
|
||||
|
||||
<div class="news-card">
|
||||
<a href=/post/{post_url}>
|
||||
<div class="thumbnail">
|
||||
<img src={thumbnail_url} alt={thumbnail_alt}/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 id="title">{title}</h3>
|
||||
<p id="summary-text">{summary}</p>
|
||||
<p id="date">
|
||||
{human_creation_date.getDate()}
|
||||
{monthNames[human_creation_date.getMonth()]}
|
||||
{human_creation_date.getFullYear()}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.thumbnail > img {
|
||||
object-fit: cover;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
#summary-text {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
#date {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text4);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let post_url : string = '404';
|
||||
export let thumbnail_url : string = '/favicon.png';
|
||||
export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
|
||||
export let title : string = '<title>';
|
||||
export let summary : string = '<summary>';
|
||||
export let creation_date : string = '<date>';
|
||||
|
||||
const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
$: human_creation_date = new Date(+creation_date * 1000);
|
||||
</script>
|
||||
|
||||
<div class="news-card">
|
||||
<a href={post_url}>
|
||||
<div class="thumbnail">
|
||||
<img src={thumbnail_url} alt={thumbnail_alt}/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p id="date">
|
||||
{human_creation_date.getDate()}
|
||||
{monthNames[human_creation_date.getMonth()]}
|
||||
{human_creation_date.getFullYear()}
|
||||
</p>
|
||||
<h3 id="title">{title}</h3>
|
||||
<p id="summary-text">{summary}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.news-card {
|
||||
flex: 0 0 300px;
|
||||
}
|
||||
|
||||
a {
|
||||
min-width: 100%;
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.thumbnail > img {
|
||||
object-fit: cover;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
|
||||
min-width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
#summary-text {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
#date {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text4);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<script>
|
||||
export let post_url = '404';
|
||||
export let thumbnail_url = '/favicon.png';
|
||||
export let thumbnail_alt = 'Picture describting the deprived devs logo';
|
||||
export let title = '<title>';
|
||||
export let summary = '<summary>';
|
||||
export let creation_date = 1710006969;
|
||||
|
||||
const monthNames = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
$: human_creation_date = new Date(+creation_date * 1000);
|
||||
</script>
|
||||
|
||||
<div class="news-card">
|
||||
<a href=/post/{post_url} >
|
||||
<div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 id="title">{title}</h3>
|
||||
<p id="summary-text">{summary}</p>
|
||||
<p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.news-card h3 {
|
||||
color: var(--text1);
|
||||
margin: 0px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
#summary-text {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
#date {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text4);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
# Svelte Branding Guidelines
|
||||
|
||||
## Conditions of usage
|
||||
|
||||
1. The term "Svelte logo" refers to the Svelte logo and other official artwork/mark. It also includes the official color scheme used by the project.
|
||||
|
||||
2. The term "Svelte library" refers to the Svelte tooling, associated libraries and official projects in the Svelte ecosystem.
|
||||
|
||||
3. Usage of the Svelte logo must not give the impression or implication that the Svelte project (or any contributor to the project) is sponsoring or endorsing any other project, service, product or organization.
|
||||
|
||||
4. Usage of the Svelte logo, to indicate, imply or assert compatibility or operability with the Svelte library, must be accurate and done in good faith.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="519" height="139" viewBox="0 0 519 139"><title>svelte-horizontal</title><path d="M172.4428,100.3382a24.0793,24.0793,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1375,12.1375,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.325,10.325,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.46,38.46,0,0,1-4.4737-2.2588,16.5385,16.5385,0,0,1-4.1757-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6579,15.6579,0,0,1,6.3487,8.6075l-8.1807,2.7265a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.69,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.885,12.885,0,0,0,3.92,2.6416q2.0464.8524,6.2217,2.3007,2.5547.939,3.791,1.4063t3.6221,1.5762a24.997,24.997,0,0,1,3.6641,2.0029,32.1346,32.1346,0,0,1,2.9824,2.4287,12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q181.3892,100.3388,172.4428,100.3382Zm54.6221-1.0224L206.6128,39.6644h9.5449L229.7065,81.25a64.4659,64.4659,0,0,1,1.875,6.8173,64.0335,64.0335,0,0,1,1.875-6.8173l13.3789-41.586h9.459L235.9272,99.3158Zm47.294,0V39.6644h36.9843V48.016H283.2221V64.3773h18.15v8.3516h-18.15V90.9642h29.9952v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8632v-51.13H381.4741V39.6644h42.6074v8.5215Zm35.1934,51.13V39.6644h36.9844V48.016H451.2661V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/><path d="M110.2859,28.3189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L38.4118,35.1078A29.9232,29.9232,0,0,0,24.8931,55.1506a31.5143,31.5143,0,0,0,3.1076,20.2318,30.0059,30.0059,0,0,0-4.4761,11.1829,31.8885,31.8885,0,0,0,5.4472,24.1157c10.4022,14.8865,30.9424,19.2966,45.7915,9.8348l26.0826-16.6237a29.9182,29.9182,0,0,0,13.5187-20.0428,31.5276,31.5276,0,0,0-3.1057-20.2323,30.0012,30.0012,0,0,0,4.4742-11.1824,31.88,31.88,0,0,0-5.4472-24.1157" style="fill:#ff3e00"/><path d="M61.9463,112.0815A20.718,20.718,0,0,1,39.71,103.8389a19.173,19.173,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3362.9815a33.6466,33.6466,0,0,0,10.203,5.0978l.9694.2941-.0892.9675a5.8469,5.8469,0,0,0,1.052,3.8781,6.2388,6.2388,0,0,0,6.6952,2.485,5.7456,5.7456,0,0,0,1.602-.7041L85.3993,81.781A5.431,5.431,0,0,0,87.85,78.15a5.7944,5.7944,0,0,0-.9876-4.3712,6.2435,6.2435,0,0,0-6.6977-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9533,6.3449a19.0336,19.0336,0,0,1-5.2964,2.3259A20.7182,20.7182,0,0,1,41.078,72.4241a19.173,19.173,0,0,1-3.2766-14.5024,17.9892,17.9892,0,0,1,8.13-12.0513L72.0125,29.2472a19.0031,19.0031,0,0,1,5.3-2.3287A20.718,20.718,0,0,1,99.549,35.1611a19.1734,19.1734,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9693-.2942.0892-.9675a5.8576,5.8576,0,0,0-1.052-3.878,6.2388,6.2388,0,0,0-6.6952-2.485,5.7456,5.7456,0,0,0-1.602.7041L53.8592,57.219A5.422,5.422,0,0,0,51.41,60.85a5.7858,5.7858,0,0,0,.9857,4.3717,6.2435,6.2435,0,0,0,6.6977,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.952-6.3425a18.9787,18.9787,0,0,1,5.2958-2.3278,20.7183,20.7183,0,0,1,22.2369,8.2427,19.173,19.173,0,0,1,3.2766,14.5024,17.9982,17.9982,0,0,1-8.13,12.0532L67.246,109.7528a19.0031,19.0031,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 688.774 139"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="horizontal"><path id="kit" class="cls-1" d="M547.528,99.316,530.741,68.127,520.173,80.91V99.316h-8.862V39.664h8.862V68.553l23.009-28.889h10.226l-16.7,20.964,21.218,38.688Zm29.569,0V39.664h8.862V99.316Zm55.049-51.13v51.13h-8.863V48.186H606.411V39.664h42.607v8.522Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M172.442,100.338a24.076,24.076,0,0,1-13.719-3.877,19.876,19.876,0,0,1-8.011-10.609l8.351-3.068a15.41,15.41,0,0,0,5.455,6.6,14.366,14.366,0,0,0,8.266,2.429,12.137,12.137,0,0,0,7.882-2.386,8.277,8.277,0,0,0,2.94-6.817,7.461,7.461,0,0,0-.81-3.452,10.314,10.314,0,0,0-1.832-2.6,12.342,12.342,0,0,0-3.153-2.088q-2.132-1.063-3.537-1.619t-4.133-1.491q-3.408-1.193-5.112-1.874a38.492,38.492,0,0,1-4.474-2.259,16.522,16.522,0,0,1-4.176-3.153,15.277,15.277,0,0,1-2.513-4.133,14.766,14.766,0,0,1,4-16.787q5.113-4.516,13.889-4.517,7.329,0,12.059,3.238a15.658,15.658,0,0,1,6.348,8.608l-8.18,2.726a9.521,9.521,0,0,0-3.963-4.388,13.306,13.306,0,0,0-6.945-1.663,10.706,10.706,0,0,0-6.69,1.875,6.29,6.29,0,0,0-2.428,5.284,5.511,5.511,0,0,0,1.874,4.09,12.869,12.869,0,0,0,3.92,2.642q2.048.852,6.222,2.3,2.554.939,3.791,1.406t3.622,1.576a25.1,25.1,0,0,1,3.664,2,32.066,32.066,0,0,1,2.983,2.429,12.706,12.706,0,0,1,2.6,3.11,17.342,17.342,0,0,1,1.533,3.834,17.58,17.58,0,0,1,.64,4.816q0,8.352-5.71,13.08T172.442,100.338Zm54.623-1.022L206.613,39.664h9.545L229.707,81.25a64.791,64.791,0,0,1,1.875,6.818,63.829,63.829,0,0,1,1.875-6.818l13.378-41.586h9.459L235.927,99.316Zm47.294,0V39.664h36.984v8.352H283.222V64.377h18.151v8.352H283.222V90.964h30v8.352Zm61.44,0V39.664h8.864v51.13h29.143v8.522Zm71.41-51.13v51.13h-8.863V48.186H381.474V39.664h42.608v8.522ZM442.4,99.316V39.664h36.984v8.352H451.266V64.377h18.15v8.352h-18.15V90.964h30v8.352Z"/><g id="logo"><path id="orange" class="cls-3" d="M110.286,28.319c-10.4-14.885-30.941-19.3-45.792-9.835L38.412,35.108A29.921,29.921,0,0,0,24.893,55.151,31.514,31.514,0,0,0,28,75.382a29.987,29.987,0,0,0-4.476,11.183,31.888,31.888,0,0,0,5.447,24.116c10.4,14.887,30.942,19.3,45.791,9.835l26.083-16.624a29.92,29.92,0,0,0,13.519-20.043,31.529,31.529,0,0,0-3.106-20.232,30,30,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/><path id="white" class="cls-4" d="M61.946,112.082a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968a5.844,5.844,0,0,0,1.052,3.878,6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L85.4,81.781A5.43,5.43,0,0,0,87.85,78.15a5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.737,5.737,0,0,0-1.6.7l-9.954,6.345a19.047,19.047,0,0,1-5.3,2.326,20.72,20.72,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,45.932,45.87L72.013,29.247a19.011,19.011,0,0,1,5.3-2.329,20.719,20.719,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5A18.453,18.453,0,0,1,102.2,52.1l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.24,6.24,0,0,0-6.695-2.485,5.742,5.742,0,0,0-1.6.7L53.859,57.219a5.425,5.425,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328A20.718,20.718,0,0,1,98.18,66.576a19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L67.246,109.753a19,19,0,0,1-5.3,2.329"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg viewBox="30 31 400 50" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M348.645 80.0599L335.205 55.1536L326.745 65.3616V80.0599H319.648V32.4241H326.745V55.4938L345.169 32.4241H353.356L339.986 49.1652L356.974 80.0599H348.645ZM372.319 80.0599V32.4241H379.416V80.0599H372.319ZM416.394 39.2295V80.0599H409.3V39.2295H395.789V32.4241H429.902V39.2295H416.394Z" fill="#8D8D93"/>
|
||||
<path d="M48.3359 80.876C44.4451 80.9736 40.6159 79.8942 37.3519 77.78C34.3023 75.7742 32.0378 72.7827 30.9387 69.3081L37.6241 66.8581C38.5518 68.991 40.066 70.8183 41.9916 72.1286C43.9468 73.4367 46.2574 74.1149 48.6113 74.0715C50.8732 74.1893 53.1053 73.5154 54.9219 72.1661C55.7123 71.5043 56.3367 70.6675 56.7454 69.7223C57.1541 68.7772 57.3357 67.7499 57.2758 66.7223C57.2852 65.7649 57.063 64.8193 56.6281 63.9657C56.2495 63.2023 55.7547 62.5019 55.1613 61.8894C54.4103 61.2078 53.5586 60.6454 52.6361 60.222C51.4981 59.6561 50.5542 59.2252 49.8042 58.9292C49.0543 58.6332 47.9513 58.2363 46.4952 57.7385C44.6761 57.1034 43.3118 56.6046 42.4023 56.242C41.1703 55.719 39.9737 55.1164 38.8202 54.4381C37.579 53.7813 36.4506 52.9313 35.4776 51.9202C34.6349 50.9339 33.9554 49.8197 33.4647 48.6198C32.5217 46.3326 32.3235 43.8075 32.8983 41.4018C33.473 38.9961 34.7915 36.8316 36.6673 35.2143C39.3991 32.8106 43.1066 31.6085 47.7898 31.608C51.7018 31.608 54.9201 32.4699 57.4448 34.1937C59.8955 35.819 61.695 38.2524 62.528 41.0678L55.9772 43.2446C55.3192 41.7704 54.2079 40.5431 52.8042 39.7406C51.1067 38.8008 49.184 38.3416 47.2438 38.4125C45.3411 38.3039 43.4564 38.8307 41.8875 39.9098C41.247 40.4053 40.7359 41.0476 40.3976 41.7822C40.0593 42.5168 39.9038 43.322 39.9443 44.1294C39.95 44.7485 40.0866 45.3594 40.3452 45.9222C40.6037 46.485 40.9784 46.987 41.4447 47.3956C42.3512 48.2863 43.4153 49.0016 44.5833 49.5054C45.6753 49.9589 47.3356 50.5712 49.5641 51.342C50.9278 51.8419 51.9396 52.2162 52.5993 52.4648C53.259 52.7134 54.2249 53.1332 55.4968 53.7242C56.5174 54.1744 57.4987 54.7086 58.4304 55.3213C59.2647 55.9196 60.0622 56.5673 60.8187 57.261C61.6416 57.9722 62.3444 58.8107 62.9003 59.7445C63.4302 60.7128 63.8425 61.7406 64.1285 62.8062C64.4763 64.0584 64.6485 65.3527 64.6401 66.6521C64.6401 71.0984 63.1162 74.5802 60.0685 77.0972C57.0207 79.6143 53.1098 80.8739 48.3359 80.876ZM92.0693 80.0599L75.6946 32.4241H83.3367L94.1846 65.6331C94.784 67.4193 95.2852 69.2369 95.6858 71.0777C96.085 69.2366 96.5861 67.4189 97.187 65.6331L107.899 32.4241H115.472L99.1646 80.0599H92.0693ZM129.935 80.0599V32.4241H159.546V39.0937H137.031V52.159H151.563V58.8286H137.031V73.3903H161.05V80.0599H129.935ZM179.126 80.0599V32.4241H186.223V73.2546H209.556V80.0599H179.126ZM236.301 39.2295V80.0599H229.204V39.2295H215.696V32.4241H249.813V39.2295H236.301ZM264.478 80.0599V32.4241H294.088V39.0937H271.574V52.159H286.106V58.8286H271.574V73.3903H295.593V80.0599H264.478Z" fill="#4A4A55"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg id="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.69 300"><defs><style>.cls-1{fill:#8d8d93;}.cls-2{fill:#4a4a55;}.cls-3{fill:#ff3e00;}.cls-4{fill:#fff;}</style></defs><g id="vertical"><path id="kit" class="cls-1" d="M262.738,265.277l-9.776-18.162-6.154,7.443v10.719h-5.161V230.539h5.161v16.824l13.4-16.824h5.955l-9.727,12.209,12.357,22.529Zm17.22,0V230.539h5.161v34.738ZM312.016,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Z"/><path id="svelte-2" data-name="svelte" class="cls-2" d="M44.3,265.873a14.021,14.021,0,0,1-7.989-2.258,11.575,11.575,0,0,1-4.665-6.178l4.863-1.787A8.979,8.979,0,0,0,39.69,259.5,8.364,8.364,0,0,0,44.5,260.91a7.068,7.068,0,0,0,4.59-1.389,4.818,4.818,0,0,0,1.713-3.97,4.342,4.342,0,0,0-.472-2.01,6.011,6.011,0,0,0-1.067-1.514,7.214,7.214,0,0,0-1.836-1.216q-1.24-.62-2.06-.943T42.964,249q-1.984-.695-2.977-1.091a22.434,22.434,0,0,1-2.605-1.316,9.6,9.6,0,0,1-2.432-1.836,8.917,8.917,0,0,1-1.464-2.407,8.6,8.6,0,0,1,2.333-9.776,11.785,11.785,0,0,1,8.088-2.63,12.178,12.178,0,0,1,7.023,1.885,9.122,9.122,0,0,1,3.7,5.013l-4.764,1.588a5.548,5.548,0,0,0-2.308-2.556,7.751,7.751,0,0,0-4.045-.968A6.235,6.235,0,0,0,39.615,236a3.662,3.662,0,0,0-1.414,3.077,3.21,3.21,0,0,0,1.091,2.382A7.489,7.489,0,0,0,41.575,243q1.192.5,3.623,1.34,1.488.547,2.208.819t2.109.918a14.553,14.553,0,0,1,2.134,1.167,18.647,18.647,0,0,1,1.737,1.414,7.419,7.419,0,0,1,1.514,1.811,10.557,10.557,0,0,1,1.265,5.037,9.356,9.356,0,0,1-3.325,7.618A12.935,12.935,0,0,1,44.3,265.873Zm31.81-.6L64.2,230.539h5.558l7.891,24.218a37.7,37.7,0,0,1,1.092,3.97,37.217,37.217,0,0,1,1.092-3.97l7.791-24.218h5.508L81.275,265.277Zm27.542,0V230.539h21.538V235.4H108.818v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Zm35.78,0V230.539H144.6v29.776H161.57v4.962ZM181.023,235.5v29.775h-5.162V235.5h-9.826v-4.963h24.813V235.5Zm20.5,29.775V230.539h21.538V235.4H206.679v9.528h10.57v4.863h-10.57v10.62h17.468v4.863Z"/><g id="logo"><path id="orange" class="cls-3" d="M240.635,52.089C224.292,28.7,192.014,21.765,168.677,36.634L127.69,62.757a47.02,47.02,0,0,0-21.244,31.5,49.527,49.527,0,0,0,4.883,31.793,47.178,47.178,0,0,0-7.034,17.573,50.113,50.113,0,0,0,8.56,37.9c16.347,23.393,48.624,30.323,71.958,15.455L225.8,170.847a47.015,47.015,0,0,0,21.244-31.5,49.549,49.549,0,0,0-4.88-31.794A47.162,47.162,0,0,0,249.2,89.985a50.1,50.1,0,0,0-8.56-37.9"/><path id="white" class="cls-4" d="M164.672,183.716a32.556,32.556,0,0,1-34.943-12.953,30.13,30.13,0,0,1-5.149-22.789,28.58,28.58,0,0,1,.979-3.828l.772-2.354,2.1,1.543a52.89,52.89,0,0,0,16.033,8.011l1.524.462-.141,1.52a9.188,9.188,0,0,0,1.654,6.094,9.8,9.8,0,0,0,10.521,3.905,9.018,9.018,0,0,0,2.517-1.106l40.988-26.12a8.534,8.534,0,0,0,3.851-5.706,9.1,9.1,0,0,0-1.552-6.869,9.81,9.81,0,0,0-10.525-3.907,9.006,9.006,0,0,0-2.514,1.105L175.146,130.7a29.912,29.912,0,0,1-8.323,3.655A32.557,32.557,0,0,1,131.879,121.4a30.129,30.129,0,0,1-5.149-22.789A28.268,28.268,0,0,1,139.507,79.67l40.984-26.122a29.851,29.851,0,0,1,8.328-3.66,32.556,32.556,0,0,1,34.943,12.953,30.126,30.126,0,0,1,5.149,22.789,28.92,28.92,0,0,1-.979,3.828l-.772,2.354-2.1-1.54a52.846,52.846,0,0,0-16.034-8.014L207.5,81.8l.14-1.52a9.21,9.21,0,0,0-1.653-6.094,9.8,9.8,0,0,0-10.521-3.905,9.011,9.011,0,0,0-2.518,1.106L151.964,97.5a8.52,8.52,0,0,0-3.848,5.7,9.1,9.1,0,0,0,1.549,6.87,9.81,9.81,0,0,0,10.525,3.907,9.036,9.036,0,0,0,2.517-1.106l15.639-9.967a29.823,29.823,0,0,1,8.322-3.658,32.557,32.557,0,0,1,34.944,12.953A30.13,30.13,0,0,1,226.761,135a28.28,28.28,0,0,1-12.776,18.94L173,180.056a29.838,29.838,0,0,1-8.328,3.66"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
|
|
@ -1,19 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 93.2 112" style="enable-background:new 0 0 93.2 112;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FF3E00;}
|
||||
</style>
|
||||
<path class="st0" d="M87.3,14.8L87.3,14.8C76.9-0.1,56.3-4.5,41.5,5L15.4,21.6c-7.1,4.5-12,11.8-13.5,20c-1.2,6.9-0.2,14,3.1,20.2
|
||||
c-2.2,3.4-3.8,7.2-4.5,11.2C-1,81.5,1,90.2,5.9,97.2c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6c7.1-4.5,12-11.8,13.5-20
|
||||
c1.2-6.9,0.2-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C94.2,30.5,92.2,21.8,87.3,14.8z M79.8,36.2c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5
|
||||
l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1c0.1-1.4-0.3-2.7-1.1-3.9c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7
|
||||
L30.8,43.7c-1.3,0.8-2.2,2.1-2.4,3.6c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3
|
||||
c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1L44.2,96.3
|
||||
c-1.6,1-3.4,1.8-5.3,2.3h0c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.2-0.8,0.4-1.6,0.6-2.4l0.5-1.5l1.3,1
|
||||
c3.1,2.3,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.8,1.1,3.9c1.5,2.2,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26.1-16.6
|
||||
c1.3-0.8,2.2-2.1,2.5-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.2-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3
|
||||
C31.9,69.4,23,66.1,18,58.9c-3-4.2-4.2-9.4-3.3-14.5c0.9-5,3.8-9.4,8.1-12.1L49,15.7c1.6-1,3.4-1.8,5.3-2.3
|
||||
c8.4-2.2,17.3,1.1,22.2,8.2C79.5,25.9,80.7,31.1,79.8,36.2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"/><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="406" height="139" viewBox="0 0 406 139"><title>svelte-logotype</title><path d="M59.4561,100.3382a24.08,24.08,0,0,1-13.72-3.8769,19.8715,19.8715,0,0,1-8.0107-10.6094l8.3515-3.0683a15.4054,15.4054,0,0,0,5.4541,6.6044,14.3656,14.3656,0,0,0,8.2657,2.4288,12.1373,12.1373,0,0,0,7.8818-2.3858,8.2746,8.2746,0,0,0,2.94-6.8174,7.4559,7.4559,0,0,0-.8095-3.4511,10.3225,10.3225,0,0,0-1.8321-2.6,12.3611,12.3611,0,0,0-3.1533-2.0879q-2.1314-1.0635-3.5361-1.6192-1.4062-.5521-4.1328-1.4912-3.41-1.1924-5.1133-1.874a38.4516,38.4516,0,0,1-4.4736-2.2588,16.5374,16.5374,0,0,1-4.1758-3.1523,15.2908,15.2908,0,0,1-2.5137-4.1338,14.77,14.77,0,0,1,4.0049-16.7871q5.1138-4.5162,13.8906-4.5166,7.3272,0,12.0576,3.2382a15.6575,15.6575,0,0,1,6.3487,8.6075L69,53.2142a9.5238,9.5238,0,0,0-3.9629-4.3887,13.31,13.31,0,0,0-6.9443-1.6621,10.703,10.703,0,0,0-6.6895,1.875,6.2891,6.2891,0,0,0-2.4287,5.2832,5.5132,5.5132,0,0,0,1.874,4.0909,12.8853,12.8853,0,0,0,3.92,2.6416q2.0463.8524,6.2216,2.3007,2.5548.939,3.791,1.4063t3.6221,1.5762A24.997,24.997,0,0,1,72.0674,68.34,32.1346,32.1346,0,0,1,75.05,70.7689a12.7235,12.7235,0,0,1,2.6,3.11,17.39,17.39,0,0,1,1.5332,3.8339,17.5828,17.5828,0,0,1,.64,4.8155q0,8.3524-5.71,13.08Q68.4024,100.3388,59.4561,100.3382Zm54.622-1.0224L93.626,39.6644h9.5449L116.72,81.25a64.4659,64.4659,0,0,1,1.875,6.8173A64.0335,64.0335,0,0,1,120.47,81.25l13.3789-41.586h9.459L122.94,99.3158Zm47.294,0V39.6644h36.9843V48.016h-28.121V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Zm61.44,0V39.6644h8.8633v51.13h29.1435v8.5215Zm71.41-51.13v51.13h-8.8633v-51.13H268.4873V39.6644h42.6074v8.5215Zm35.1933,51.13V39.6644H366.4V48.016H338.2793V64.3773h18.15v8.3516h-18.15V90.9642h29.9951v8.3516Z" style="fill:#4a4a55"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="300" viewBox="0 0 256 300"><title>svelte-vertical</title><path d="M44.4129,265.87a14.0218,14.0218,0,0,1-7.9891-2.2576,11.5714,11.5714,0,0,1-4.6647-6.178l4.8632-1.7867a8.97,8.97,0,0,0,3.1759,3.8459,8.3658,8.3658,0,0,0,4.8132,1.4142,7.068,7.068,0,0,0,4.59-1.3892,4.8185,4.8185,0,0,0,1.7122-3.97,4.3412,4.3412,0,0,0-.4714-2.01,6.0115,6.0115,0,0,0-1.0668-1.5138,7.2027,7.2027,0,0,0-1.8362-1.2158q-1.2411-.6192-2.0591-.9428-.819-.3216-2.4066-.8684-1.9858-.6943-2.9775-1.0912a22.4089,22.4089,0,0,1-2.6051-1.3153,9.6307,9.6307,0,0,1-2.4316-1.8357,8.9022,8.9022,0,0,1-1.4637-2.4071,8.6,8.6,0,0,1,2.3321-9.7753,11.7841,11.7841,0,0,1,8.0886-2.63,12.1677,12.1677,0,0,1,7.0213,1.8857,9.1177,9.1177,0,0,1,3.6969,5.0122l-4.7637,1.5877a5.546,5.546,0,0,0-2.3077-2.5556,7.7507,7.7507,0,0,0-4.0437-.9678,6.2321,6.2321,0,0,0-3.8953,1.0918,3.6619,3.6619,0,0,0-1.4143,3.0764,3.21,3.21,0,0,0,1.0913,2.3822,7.5015,7.5015,0,0,0,2.2826,1.5382q1.1916.4965,3.6229,1.34,1.4877.5468,2.2076.8188t2.1091.9179a14.5435,14.5435,0,0,1,2.1336,1.1663,18.7071,18.7071,0,0,1,1.7367,1.4142,7.4076,7.4076,0,0,1,1.5138,1.8112,10.1257,10.1257,0,0,1,.8928,2.2326,10.24,10.24,0,0,1,.3725,2.8041,9.3524,9.3524,0,0,1-3.325,7.6166A12.9325,12.9325,0,0,1,44.4129,265.87Zm31.807-.5954L64.31,230.5391h5.5581l7.89,24.2159a37.5389,37.5389,0,0,1,1.0919,3.97,37.2955,37.2955,0,0,1,1.0918-3.97l7.7907-24.2159h5.508l-11.86,34.7356Zm27.54,0V230.5391H125.296v4.8632H108.9208V244.93H119.49v4.8632H108.9208v10.6186h17.4665v4.8632Zm35.7774,0V230.5391h5.1612v29.7734h16.9706v4.9622ZM181.12,235.5012v29.7735h-5.1612V235.5012h-9.8248v-4.9621h24.8107v4.9621Zm20.4934,29.7735V230.5391H223.15v4.8632H206.7745V244.93h10.5691v4.8632H206.7745v10.6186h17.4664v4.8632Z" style="fill:#4a4a55"/><path d="M191.8716,52.1065c-16.3379-23.3845-48.6074-30.3158-71.9383-15.45L78.9574,62.7719A47.0092,47.0092,0,0,0,57.72,94.2591a49.5083,49.5083,0,0,0,4.882,31.7842,47.14,47.14,0,0,0-7.032,17.5683,50.097,50.097,0,0,0,8.5576,37.8858c16.3419,23.3867,48.61,30.3149,71.9383,15.45l40.9759-26.1158a47.001,47.001,0,0,0,21.2378-31.4872A49.5286,49.5286,0,0,0,193.4,107.56a47.13,47.13,0,0,0,7.0291-17.5676,50.0832,50.0832,0,0,0-8.5576-37.8857" style="fill:#ff3e00"/><path d="M115.93,183.6976A32.5485,32.5485,0,0,1,80.996,170.7485a30.1218,30.1218,0,0,1-5.1475-22.7834,28.582,28.582,0,0,1,.9792-3.8266l.7717-2.3529,2.0992,1.5418a52.8582,52.8582,0,0,0,16.029,8.0087l1.5229.4621-.14,1.52a9.1869,9.1869,0,0,0,1.6528,6.0925,9.8011,9.8011,0,0,0,10.5181,3.9039,9.0254,9.0254,0,0,0,2.5168-1.1062l40.9769-26.1128a8.5317,8.5317,0,0,0,3.85-5.7043,9.1034,9.1034,0,0,0-1.5515-6.8672,9.8084,9.8084,0,0,0-10.5221-3.9061,9.02,9.02,0,0,0-2.5138,1.1054l-15.6366,9.9678a29.8952,29.8952,0,0,1-8.3206,3.6539A32.5485,32.5485,0,0,1,83.146,121.3959a30.1208,30.1208,0,0,1-5.1475-22.7834A28.261,28.261,0,0,1,90.7712,79.68l40.9729-26.115a29.8528,29.8528,0,0,1,8.3258-3.6584A32.5482,32.5482,0,0,1,175.004,62.8556a30.1218,30.1218,0,0,1,5.1475,22.7834,28.9008,28.9008,0,0,1-.9792,3.8265l-.7717,2.353L176.3024,90.28a52.8164,52.8164,0,0,0-16.03-8.0117l-1.5229-.462.14-1.52a9.2036,9.2036,0,0,0-1.6528-6.0924A9.8011,9.8011,0,0,0,146.7189,70.29a9.0252,9.0252,0,0,0-2.5168,1.1061L103.2252,97.5085a8.5183,8.5183,0,0,0-3.847,5.7035,9.09,9.09,0,0,0,1.5485,6.8681,9.8085,9.8085,0,0,0,10.5221,3.9061,9.0586,9.0586,0,0,0,2.5168-1.1062L129.6,102.9159a29.8159,29.8159,0,0,1,8.32-3.6569,32.5484,32.5484,0,0,1,34.9341,12.9492,30.1207,30.1207,0,0,1,5.1475,22.7834A28.275,28.275,0,0,1,165.23,153.9271l-40.9738,26.112a29.8538,29.8538,0,0,1-8.3257,3.6585" style="fill:#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 391 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 587 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
|
|
@ -1 +1 @@
|
|||
export const prerender = true;
|
||||
export const prerender = true;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/*
|
||||
* Provides post summaries to all pages. That means every page can access summaries
|
||||
* for all posts on the website.
|
||||
*/
|
||||
|
||||
import { type Post, posts } from './posts/posts_data';
|
||||
|
||||
export function load() {
|
||||
let summaries : Post[] = [];
|
||||
|
||||
// Sort by newest news first
|
||||
posts.sort((a, b) => b.creation_date - a.creation_date);
|
||||
|
||||
posts.forEach((post) => {
|
||||
summaries.push(post);
|
||||
});
|
||||
|
||||
return { summaries };
|
||||
}
|
||||
|
|
@ -1,294 +0,0 @@
|
|||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||
<script lang="ts">
|
||||
import "$lib/app.css";
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
export let hideOnPrint: boolean;
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
|
||||
import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
|
||||
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let isMobile : boolean;
|
||||
|
||||
let navbarHidden : boolean = true;
|
||||
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
}
|
||||
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
afterNavigate(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
hideOnPrint = params.get('hideOnPrint') === '1';
|
||||
//console.log(hideOnPrint);
|
||||
});
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { themeChange } from 'theme-change'
|
||||
onMount(() => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
|
||||
themeChange(false) // false parameter is required for svelte
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="nav-bar pr-4 bg-base-200">
|
||||
{#if !isMobile}
|
||||
<div class="desktop">
|
||||
<a href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen's CV</a>
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed">
|
||||
<a on:click={resetNavBar} href="/" class="nav-head">
|
||||
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
||||
<!-- <h3 id="logo-text">The Deprived Devs</h3> -->
|
||||
</a>
|
||||
<div class="nav-spacer" />
|
||||
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a on:click={resetNavBar} href="/">Home</a> -->
|
||||
<a on:click={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
|
||||
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
||||
<a on:click={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
<slot />
|
||||
|
||||
<!-- About footer -->
|
||||
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||
<div class="about-container">
|
||||
<div class="credits">
|
||||
<span>© 2023-2024</span>
|
||||
<br>
|
||||
<span>Benjamin Dreyer</span>
|
||||
<br>
|
||||
<span>Oliver Schwenger</span>
|
||||
<br>
|
||||
<span>Sylvester Junge</span>
|
||||
<br>
|
||||
<span>Snorre Ettrup Altschul</span>
|
||||
<br>
|
||||
<span>Zhentao Wei</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3><b>About this website</b></h3>
|
||||
<!-- <a href="/" target="_blank">Recursion</a> -->
|
||||
<div class="flex justify-center">
|
||||
This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
|
||||
<img class="pl-2" src={svelteLogo} style="height: 2rem;" alt="SvelteKit logo"/></a>
|
||||
</div>
|
||||
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
||||
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3><b>Contact</b></h3>
|
||||
<a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
|
||||
<div class="mt-2"></div>
|
||||
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
||||
<!-- <span>Discord</span> -->
|
||||
<img src="/images/icons/discord.svg" alt="Discord"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
/* Nav bar. */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#toggle-nav {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
width: 64px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
#logo-text {
|
||||
font-size: 24px;
|
||||
color: oklch(var(--bc));
|
||||
font-family: var(--title-font);
|
||||
margin: 0;
|
||||
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 22px;
|
||||
font-family: var(--title-font);
|
||||
// Text color
|
||||
color: oklch(var(--bc));
|
||||
}
|
||||
|
||||
/* Footer. */
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
padding: 25px 0;
|
||||
background-color: oklch(var(--b3));
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-container {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
color: oklch(var(--bc));
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.about-container > div {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.social > img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
footer h3 {
|
||||
margin-top: 0px;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text2);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if footerCollapse}
|
||||
<style>
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
justify-content: center !important;
|
||||
gap: 25px;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
{#if isMobile}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{/if}
|
||||
|
|
@ -1,257 +1,17 @@
|
|||
<script lang="ts">
|
||||
import ProfileSpacer from './comps/ProfileSpacer.svelte';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
import NewsCard from '$lib/posts/NewsCard.svelte';
|
||||
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
|
||||
import Button from '$lib/IO/Button.svelte';
|
||||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import { tick } from 'svelte'
|
||||
|
||||
import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
|
||||
|
||||
import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
|
||||
import Carousel from './comps/Carousel.svelte';
|
||||
|
||||
import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
|
||||
import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
|
||||
import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"
|
||||
|
||||
import Blood1 from "$lib/GamePreviews/Blood-title.png"
|
||||
import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
|
||||
import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
|
||||
import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
|
||||
import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
|
||||
|
||||
import Time1 from "$lib/GamePreviews/Time-1.png"
|
||||
import Time2 from "$lib/GamePreviews/time-2.png"
|
||||
import Time3 from "$lib/GamePreviews/time-3.png"
|
||||
import Time4 from "$lib/GamePreviews/time-4.png"
|
||||
import Time5 from "$lib/GamePreviews/time-5.gif"
|
||||
import Tags from './comps/Tags.svelte';
|
||||
import NameAndTag from './comps/NameAndTag.svelte';
|
||||
import Profile from './comps/Profile.svelte';
|
||||
|
||||
const mobileThreshold : string = '600px'; // was 1000px. zhen testing
|
||||
let mobile : boolean;
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
|
||||
|
||||
<title>Deprived devs</title>
|
||||
<meta content="We are the deprived devs" property="og:title" />
|
||||
<meta content="We collaborate to create game, and hopefully more in the future! Wanna join? Hit us up." property="og:description" />
|
||||
<meta content={PreviewDeprivedLogo} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
|
||||
<img id="backgroundGif" src="{BackgroundVideo}" alt="Background video"/>
|
||||
<div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
|
||||
<h1 style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">
|
||||
{#if !mobile}
|
||||
Deprived Devs
|
||||
{:else}
|
||||
Deprived
|
||||
<br/>
|
||||
<h1 class="-mt-6 prose" style="font-size: 2rem;">
|
||||
Devs
|
||||
</h1>
|
||||
{/if}
|
||||
</h1>
|
||||
{#if mobile}
|
||||
<div style="width: 100px; height: 100px;"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center w-full px-8 py-4">
|
||||
<div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
|
||||
<h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
|
||||
Developers
|
||||
</h1>
|
||||
|
||||
<Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
|
||||
<p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
|
||||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Hi, I use Arch, btw.</p>
|
||||
<p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
|
||||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Snorre does not get paid.</p>
|
||||
<p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
|
||||
</span>
|
||||
</Profile>
|
||||
|
||||
<ProfileSpacer/>
|
||||
<Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
|
||||
<span>
|
||||
<p>Hi, I am [insert text here]</p>
|
||||
<p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
|
||||
</span>
|
||||
</Profile>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space -->
|
||||
<div class="py-8 flex justify-center">
|
||||
<div style="width: 50%;">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
|
||||
<article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h1>
|
||||
<p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
|
||||
<ProfileSpacer/>
|
||||
</div>
|
||||
|
||||
<article class="pt-16 prose {mobile ? "px-8" : ""}">
|
||||
<h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
|
||||
<p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
|
||||
</article>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<!-- Corro rebounce -->
|
||||
<div class="games card bg-base-100 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Corrobot1,
|
||||
Corrobot2,
|
||||
Corrobot3,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Corrobot-rebounce</h2>
|
||||
<p>A 3D sequel to Corrobot-Takeover</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blood -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Blood1,
|
||||
Blood2,
|
||||
Blood3,
|
||||
Blood4,
|
||||
Blood5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Unnamed blood game</h2>
|
||||
<p>A game based on an unique kind of combat</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time -->
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure style="height: 15em;">
|
||||
<Carousel images={[
|
||||
Time1,
|
||||
Time2,
|
||||
Time3,
|
||||
Time4,
|
||||
Time5,
|
||||
]}/>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">One More Time</h2>
|
||||
<p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
|
||||
<br/>
|
||||
<p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="games card bg-base-100 w-96 shadow-xl">
|
||||
<figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">What's next?</h2>
|
||||
<div class="skeleton mt-1 h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="skeleton h-4 w-28"></div>
|
||||
<div class="skeleton h-4 w-full"></div>
|
||||
<div class="flex grow"/>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-title">
|
||||
<h1>The Deprived Devs</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.main-title {
|
||||
font-family: "CozetteVector";
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
font-family: var(--title-font);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#backgroundGif{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 40vh;
|
||||
object-fit: cover;
|
||||
filter: blur(5px) brightness(0.6);
|
||||
.main-title > h1 {
|
||||
font-size: 4.5vw; /* Change if title changes */
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if !mobile}
|
||||
<style>
|
||||
.games {
|
||||
width: 24rem /* 384px */;
|
||||
}
|
||||
</style>
|
||||
|
||||
{:else}
|
||||
<style>
|
||||
.games {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<p>This is an informative about page :) </p>
|
||||
<p>This is an informative about page :) </p>
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let images: string[] = []; // Expose images as a parameter
|
||||
let currentIndex: number = 0;
|
||||
|
||||
let startX: number | null = null; // Track touch start X position
|
||||
let deltaX: number = 0; // Track touch delta X
|
||||
|
||||
const nextSlide = (): void => {
|
||||
currentIndex = (currentIndex + 1) % images.length;
|
||||
};
|
||||
|
||||
const prevSlide = (): void => {
|
||||
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
||||
};
|
||||
|
||||
const handleTouchStart = (event: TouchEvent): void => {
|
||||
startX = event.touches[0].clientX;
|
||||
};
|
||||
|
||||
const handleTouchMove = (event: TouchEvent): void => {
|
||||
if (startX !== null) {
|
||||
deltaX = event.touches[0].clientX - startX;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = (): void => {
|
||||
if (startX !== null) {
|
||||
if (deltaX > 50) {
|
||||
prevSlide(); // Swipe right
|
||||
} else if (deltaX < -50) {
|
||||
nextSlide(); // Swipe left
|
||||
}
|
||||
}
|
||||
// Reset touch variables
|
||||
startX = null;
|
||||
deltaX = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 0 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.control {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 5px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="carousel"
|
||||
on:touchstart|preventDefault={handleTouchStart}
|
||||
on:touchmove|preventDefault={handleTouchMove}
|
||||
on:touchend|preventDefault={handleTouchEnd}
|
||||
>
|
||||
<div
|
||||
class="slides"
|
||||
style="transform: translateX(-{currentIndex * 100}%);"
|
||||
>
|
||||
{#each images as image (image)}
|
||||
<img class="slide" src={image} alt="Carousel Slide" />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control" on:click={prevSlide}><</button>
|
||||
<button class="control" on:click={nextSlide}>></button>
|
||||
</div>
|
||||
|
||||
<div class="indicators">
|
||||
{#each images as _, index}
|
||||
<div
|
||||
class="indicator {index === currentIndex ? 'active' : ''}"
|
||||
on:click={() => (currentIndex = index)}
|
||||
></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<script>
|
||||
export let Title = "";
|
||||
export let Checked = false;
|
||||
</script>
|
||||
|
||||
<div class="collapse collapse-arrow bg-base-100 text-start shadow-sm" {...$$restProps}>
|
||||
{#if Checked}
|
||||
<input type="radio" name="{Title}" checked/>
|
||||
{:else}
|
||||
<input type="radio" name="{Title}"/>
|
||||
{/if}
|
||||
<div class="collapse-title text-xl font-medium "><b>{Title}</b></div>
|
||||
<div class="collapse-content" style="border-top: dotted 0.15rem oklch(var(--b3));">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<script>
|
||||
import Tags from "./Tags.svelte";
|
||||
|
||||
export let isMobile = false;
|
||||
export let tags = ["null"];
|
||||
</script>
|
||||
|
||||
{#if isMobile}
|
||||
<Tags Tags={tags} isMobile={isMobile}/>
|
||||
{/if}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script>
|
||||
import Tags from "./Tags.svelte"; // Should've used better names lol
|
||||
|
||||
export let isMobile = false;
|
||||
export let name = "";
|
||||
export let tags = ["null"];
|
||||
</script>
|
||||
|
||||
<div class="flex items-center">
|
||||
<h2 style="font-size: {!isMobile ? 1.5 : 1.5}rem;">{name}</h2>
|
||||
<div class="flex flex-grow"/>
|
||||
{#if !isMobile}
|
||||
<Tags Tags={tags} isMobile={isMobile}/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<script>
|
||||
import MobileTags from "./MobileTags.svelte";
|
||||
import NameAndTag from "./NameAndTag.svelte";
|
||||
|
||||
export let isMobile = false;
|
||||
export let name = "";
|
||||
export let tags = ["null"];
|
||||
export let isSnorre = false;
|
||||
|
||||
// Shit code but who cares, if it works /shrug
|
||||
</script>
|
||||
|
||||
|
||||
{#if !isSnorre}
|
||||
<div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-4 font-mono">
|
||||
<NameAndTag name={name} tags={tags} isMobile={isMobile}/>
|
||||
<slot/>
|
||||
<MobileTags tags={tags} isMobile={isMobile}/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full">
|
||||
<div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
|
||||
<pre style="font-size: {!isMobile ? 1.5 : 1.5}rem;"> </pre>
|
||||
<span>
|
||||
<pre> </pre>
|
||||
<pre> </pre>
|
||||
</span>
|
||||
{#if isMobile}
|
||||
<pre> </pre>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="developersProfile snorre-overlay relative pl-4 font-mono">
|
||||
<NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
|
||||
<span>
|
||||
<p>I'm the diversity hire. (Gay)</p>
|
||||
<p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">Linked-in</a></p>
|
||||
</span>
|
||||
<MobileTags tags={tags} isMobile={isMobile}/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.developersProfile:not(.snorre):not(.snorre-overlay){
|
||||
background-image: linear-gradient(oklch(var(--p)) 33%, rgba(255,255,255,0) 0%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.snorre {
|
||||
border-left: dashed transparent 0.1rem;
|
||||
border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
||||
.snorre-overlay {
|
||||
background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, oklch(var(--b1)) 40%);
|
||||
background-position: left;
|
||||
background-size: 0.1rem 0.5rem;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<div class="profileSpacer"></div>
|
||||
|
||||
<style>
|
||||
.profileSpacer{
|
||||
height: 1px;
|
||||
border-bottom: solid oklch(var(--b3));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { Vector2 } from "./../zhen/Utils/Vector2";
|
||||
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
|
||||
// Params
|
||||
let mouseMoveScale: number = 0.25;
|
||||
let targetTextLenght: number = 100;
|
||||
|
||||
// Site variables
|
||||
let mousePos: Vector2;
|
||||
|
||||
// Element binded variables
|
||||
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
||||
|
||||
let windowWidth = 0;
|
||||
let windowHeight = 0;
|
||||
|
||||
let screenCenter: Vector2;
|
||||
|
||||
let StartPageAnimated: Element | null;
|
||||
let windowRef: Window;
|
||||
|
||||
function onMouseMoved(event: MouseEvent) {
|
||||
mousePos = new Vector2(event.clientX, event.clientY);
|
||||
|
||||
updateAnimation(mousePos);
|
||||
}
|
||||
|
||||
function updateAnimation(mousePos: Vector2) {
|
||||
let mouseRelativePos = mousePos.Sub(screenCenter);
|
||||
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
||||
|
||||
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
windowRef = window;
|
||||
|
||||
const updateDimensions = () => {
|
||||
windowWidth = windowRef.innerWidth;
|
||||
windowHeight = windowRef.innerHeight;
|
||||
|
||||
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
||||
|
||||
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
||||
};
|
||||
|
||||
updateDimensions(); // On first pass
|
||||
|
||||
windowRef.addEventListener("resize", updateDimensions);
|
||||
|
||||
const RevertToOrigin = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.add("FirefoxSmoothTranition");
|
||||
}
|
||||
updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
|
||||
};
|
||||
document.documentElement.addEventListener("mouseleave", RevertToOrigin);
|
||||
|
||||
const RemoveFirefoxSmoothTranition = () => {
|
||||
if (
|
||||
navigator.userAgent.search(/gecko/i) > 0 &&
|
||||
StartPageAnimated !== null
|
||||
) {
|
||||
StartPageAnimated.classList.remove("FirefoxSmoothTranition");
|
||||
}
|
||||
};
|
||||
document.documentElement.addEventListener(
|
||||
"mouseenter",
|
||||
RemoveFirefoxSmoothTranition,
|
||||
);
|
||||
|
||||
return () => {
|
||||
windowRef.removeEventListener("resize", updateDimensions);
|
||||
};
|
||||
});
|
||||
|
||||
const programmingLanguages: string[] = [
|
||||
"C++",
|
||||
"C#",
|
||||
"ARDUINO",
|
||||
"PYTHON",
|
||||
"JAVA",
|
||||
"JAVASCRIPT",
|
||||
"TYPESCRIPT",
|
||||
"HTML",
|
||||
"CSS",
|
||||
];
|
||||
|
||||
function getRandomInt(max: number) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function GrabRandomString() {
|
||||
let outString: string = "";
|
||||
while (outString.length < targetTextLenght) {
|
||||
outString +=
|
||||
programmingLanguages[
|
||||
getRandomInt(programmingLanguages.length)
|
||||
] + " ";
|
||||
}
|
||||
|
||||
return outString; // At about target size
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousemove={onMouseMoved} />
|
||||
|
||||
<div
|
||||
class="StartPageAnimated top-0 left-0 w-full h-full"
|
||||
id="StartPageAnimated"
|
||||
bind:this={StartPageAnimated}
|
||||
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
|
||||
>
|
||||
{#each {length: 100} as _, i}
|
||||
|
||||
<span
|
||||
class="rotate45 SkillsText"
|
||||
>
|
||||
{GrabRandomString()}
|
||||
</span
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
<style>
|
||||
.StartPageContainer {
|
||||
/* height: 40vh; */
|
||||
|
||||
background-color: burlywood;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.StartPageAnimated {
|
||||
padding: 0;
|
||||
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: none;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.FirefoxSmoothTranition {
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
||||
-moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
|
||||
}
|
||||
|
||||
.SkillsText {
|
||||
font-family: "CozetteVector";
|
||||
|
||||
text-align: start;
|
||||
font-size: x-large;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
width: 2rem;
|
||||
|
||||
color: rgb(66, 66, 66);
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let Tags= ["null"];
|
||||
export let isMobile = false;
|
||||
type ColorType = string | { color1: string; color2: string; rotation: string; offset: string };
|
||||
let colors: { [String: string]: ColorType} = {
|
||||
"programmer": "#0CC27F",
|
||||
"uxdesigner": "#027893",
|
||||
"3dartist": "#F4881C",
|
||||
"2dartist": "#F1EAC0",
|
||||
"2d/3dartist": {"color1":"#F1EAC0", "color2":"#F4881C","rotation": "-65deg", "offset": "71.5%"},
|
||||
"sounddesigner": "#F3EC2A",
|
||||
"storydesigner": "#EEC12A",
|
||||
"back-endadmin": "#3236a8",
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2" style='font-size: {!isMobile ? "0.875rem" : "2vw"};'>
|
||||
{#each Tags as tag}
|
||||
{@const key = tag.replaceAll(" ", "").toLowerCase()}
|
||||
{#if key.indexOf("/") < 0}
|
||||
<div class="badge2 text-primary-content cozette" style="background-color: {colors[key] || "#ccc"};">{tag}</div>
|
||||
{:else}
|
||||
<!-- Gradient Badge -->
|
||||
{#if typeof colors[key] === 'object' && colors[key] !== null}
|
||||
<div
|
||||
class="badge2 text-primary-content cozette"
|
||||
style="background: linear-gradient({colors[key].rotation}, {colors[key].color2} {colors[key].offset}, {colors[key].color1} {colors[key].offset});">
|
||||
{tag}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="badge2 text-primary-content cozette"
|
||||
style="background-color: #ccc;">
|
||||
{tag}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.badge2 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.25rem /* 20px */;
|
||||
line-height: 1.25rem /* 20px */;
|
||||
width: fit-content;
|
||||
padding-left: 0.563rem /* 9.008px */;
|
||||
padding-right: 0.563rem /* 9.008px */;
|
||||
border-radius: var(--rounded-badge, 1.9rem /* 30.4px */);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
WIP
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!-- Layout for posts -->
|
||||
<script lang="ts">
|
||||
import { type BlogData } from './+layout';
|
||||
|
||||
export let data : BlogData
|
||||
|
||||
const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
function humanDate(date : Date) : string {
|
||||
return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<article>
|
||||
<div class="body">
|
||||
<header>
|
||||
<img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
|
||||
<h3 id="title">{data.post.title}</h3>
|
||||
<div class="dates">
|
||||
<span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
|
||||
<span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<style>
|
||||
article {
|
||||
margin-top: 25px;
|
||||
margin-inline: auto;
|
||||
max-width: 1000px;
|
||||
|
||||
/* background: var(--background1); */
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#blog-cover-img {
|
||||
aspect-ratio: 16 / 9;
|
||||
max-width: 100%;
|
||||
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: var(--title-font);
|
||||
font-size: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-inline: auto;
|
||||
max-width: 1200px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: 2;
|
||||
font-size: 18px;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* CSS for posts - child rooutes. */
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(a) {
|
||||
color: var(--text1);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { posts, type Post } from '../posts/posts_data';
|
||||
|
||||
export interface BlogData {
|
||||
summaries: Post[],
|
||||
post: Post
|
||||
}
|
||||
|
||||
export async function load({ url, parent }) : Promise<BlogData> {
|
||||
const { summaries } = await parent();
|
||||
const websiteUrl = url.pathname.split('/');
|
||||
const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing /
|
||||
|
||||
return {
|
||||
summaries: summaries,
|
||||
post: posts.filter((post) => post.url == windowUrl)[0],
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<div class="post-container">
|
||||
<div class="post-header">
|
||||
<slot name="title" />
|
||||
<slot name="creation-date" />
|
||||
<slot name="modification-date" />
|
||||
|
||||
<!-- the post content goes in this slot -->
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<script>
|
||||
import Highlight from "svelte-highlight";
|
||||
import { shell } from "svelte-highlight/languages";
|
||||
import obsidian from "svelte-highlight/styles/obsidian";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html obsidian}
|
||||
</svelte:head>
|
||||
|
||||
<p>
|
||||
Finding the specific commit that introduced a bug in your code can be frustrating,
|
||||
especially in big projects with a lot of commits. Git bisecting is a method
|
||||
used to quickly find which commit is the culprit. Git bisect works by you specifying
|
||||
a so called 'bad' commit where you know the bug occurs and a commit where you know the
|
||||
bug doesn't occur. Afterwards git will binary search it's way to find the commit
|
||||
introducing the bug.
|
||||
</p>
|
||||
<p>
|
||||
Suppose we've the following git history:
|
||||
</p>
|
||||
|
||||
<img src="/images/posts/git-bisecting/bisect_problem.png" alt="Showing a git history, where on the left there is a 'good' commit with a couple of commits between the current commit on the right"/>
|
||||
<p>
|
||||
It could potentially contain many more commits between the known 'good' commit and the
|
||||
current one. Somewhere in the commits 1, 2, 3, 4 or the current one, a bug was
|
||||
introduced. One way to find the specific commit that introduced the bug, could
|
||||
be to check each commit starting from commit 1 then 2 then 3 ... and so on.
|
||||
This is known as a linear search, and would take very long if there are a lot
|
||||
of commits between the bad and the current.
|
||||
</p>
|
||||
<p>
|
||||
Instead git bisect comes to the rescue. Git bisect performs a
|
||||
<a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
|
||||
which is much faster.
|
||||
To use git bisect, you must tell git to start bisecting:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect start" />
|
||||
<p>
|
||||
Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example
|
||||
the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
|
||||
we mark the commit bad:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect bad c26cf8a" />
|
||||
<p>
|
||||
After that we mark a previous commit that we know the bug doesn't occur in. In this
|
||||
example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect good b34ec52" />
|
||||
<p>
|
||||
Now git will automatically checkout a commit somewhere in between the good and bad commit.
|
||||
Your job is now to re-build your project and test if the bug occurs. If the bug
|
||||
<b>doesn't</b> occur you report it to git:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect good" />
|
||||
<p>
|
||||
However if it does occur you mark it bad:
|
||||
</p>
|
||||
<Highlight language={shell} code="$ git bisect bad" />
|
||||
<p>
|
||||
You continue to do this until git has tracked down the first bad commit, ie. the
|
||||
commit that introduced the bug.
|
||||
</p>
|
||||
|
||||
<h2>Resources</h2>
|
||||
Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { type Post } from './posts_data';
|
||||
import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
|
||||
|
||||
export let data; // <- contains post data
|
||||
|
||||
let search : string;
|
||||
$: regex = search ? new RegExp(search, 'i') : null;
|
||||
$: matches = (item : Post) =>
|
||||
regex ? regex.test(item.title) || regex.test(item.summary) : true;
|
||||
$: matched_posts = data.summaries.filter(matches);
|
||||
</script>
|
||||
|
||||
<div class="head">
|
||||
<header>
|
||||
<h1>Blog Posts</h1>
|
||||
<input id="search" placeholder="Search Blog Posts" bind:value={search} />
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
{#if matched_posts.length == 0}
|
||||
<span>No Matches</span>
|
||||
{/if}
|
||||
{#each matched_posts as summary}
|
||||
<NewsVerticalCard
|
||||
post_url="/post/{summary.url}"
|
||||
title={summary.title}
|
||||
summary={summary.summary}
|
||||
creation_date={summary.creation_date.toString()}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-family: var(--title-font);
|
||||
}
|
||||
.head {
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-content: center;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 0 0 20px 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#search {
|
||||
height: 40px;
|
||||
|
||||
align-self: center;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
padding: 0.5rem 0.8rem;
|
||||
margin-top: 0px;
|
||||
|
||||
background-color: var(--background);
|
||||
color: var(--text1);
|
||||
}
|
||||
|
||||
.list {
|
||||
max-width: 1500px;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 25px;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
// TODO: document members
|
||||
export type Post = {
|
||||
// Required
|
||||
url : string,
|
||||
cover_img : string,
|
||||
cover_alt : string,
|
||||
title: string,
|
||||
summary : string,
|
||||
creation_date : number
|
||||
modification_date: number,
|
||||
|
||||
// Optional
|
||||
// TODO: author?
|
||||
}
|
||||
|
||||
export const posts : Post[] = [
|
||||
{
|
||||
url: 'git-bisecting',
|
||||
cover_img: '/images/posts/git-bisecting/thumbnail.png',
|
||||
cover_alt: 'Photo of a bug',
|
||||
title: 'Tracking down bugs in your code — using git bisect',
|
||||
summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
|
||||
creation_date: 1709907213,
|
||||
modification_date: 1709907213,
|
||||
},
|
||||
{
|
||||
url: 'folder-icons',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Image of folder icons being used in the editor',
|
||||
title: 'Amazing Icons for Folders in Unity!',
|
||||
summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
{
|
||||
url: 'lorem',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
title: 'Lorem Ipsum !!',
|
||||
summary: 'This is a nice exploanation on lorem ipsum latin',
|
||||
creation_date: 1708382491,
|
||||
modification_date: 1708382491,
|
||||
},
|
||||
{
|
||||
url: 'lorem1',
|
||||
cover_img: '/images/posts/folder-icons/cover.png',
|
||||
cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
title: 'Idk some arcticle bruh!',
|
||||
summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
|
||||
creation_date: 1708558377,
|
||||
modification_date: 1708558377,
|
||||
},
|
||||
];
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<script lang="ts">
|
||||
import ProjectEntry from "./lib/ProjectEntry.svelte";
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<h1>Benjamin's portfolie for Informatik</h1>
|
||||
<p>
|
||||
Forneden kan ses en række projekter som er blevet lavet i Informatik C og efterfølgende Informatik B.
|
||||
</p>
|
||||
<div class="projects">
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/appLab/thumb.png"}
|
||||
thumbnail_alt={"App Lab"}
|
||||
download={"/portfolios/sveske/appLab/applab_rapport.pdf"}
|
||||
title={"1.G - App Lab: Idle spil i browseren"}
|
||||
summary={"Vi udviklede et idle spil i App Lab. Brugte JavaScript til at programmere spillet."}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/teachable_machine/thumb.png"}
|
||||
thumbnail_alt={"Teachable Machine"}
|
||||
download={"/portfolios/sveske/teachable_machine/teachable_machine_rapport.pdf"}
|
||||
title={"1.G - Teachable Machine: Håndtegns detektor"}
|
||||
summary={"I dette projekt udarbejdede vi en teachable machine model til at detektere forskellige håndtegn"}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/firebase/thumb.png"}
|
||||
thumbnail_alt={"Firebase"}
|
||||
download={"/portfolios/sveske/firebase/firebase_rapport.pdf"}
|
||||
title={"1.G - Firebase: Netværk scoreboard i Unity"}
|
||||
summary={"Med brug af Firebase udviklede vi et scoreboard som synkroniserer med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi B"}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/the_red_paper/thumb.png"}
|
||||
thumbnail_alt={"The Red Paper"}
|
||||
download={"/portfolios/sveske/the_red_paper/the_red_paper_rapport.pdf"}
|
||||
title={"2.G - HTML: Hjemmeside udviklet ud fra gestalt lovene"}
|
||||
summary={"Udviklede en klon af \"Den Blå Avis\", som forsøger at demonstrere en række af de forskellige gestaltlove"}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/makeymakey/thumb.png"}
|
||||
thumbnail_alt={"MakyeMakey"}
|
||||
download={"/portfolios/sveske/makeymakey/makeymakey_rapport.pdf"}
|
||||
title={"2.G - MakeyMakey: Installation som spiller Minecraft lyde i en af skolens gange"}
|
||||
summary={"Skulle lave en interresant installation til en lokation på skolen. Vi udviklede en sensor, som detekterede når en person gik ind på en af skolens gange med makeymakey'en og spillede grotte lyde fra Minecraft"}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/hmi/thumb.png"}
|
||||
thumbnail_alt={"HMI"}
|
||||
download={"/portfolios/sveske/hmi/hmi_rapport.pdf"}
|
||||
title={"3.G - Human Machine Interface: Enhed som kan signalere brugeren hvis en person er på vej ind på brugerens værelse"}
|
||||
summary={"Brugte M5 mikrokontrolleren til at forbinde en IR bevægelsessensor. Sensoren sender beskeder over netværket til et armbånd som er bundet om brugerens håndled"}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/prolog/thumb.png"}
|
||||
thumbnail_alt={"Prolog"}
|
||||
download={"/portfolios/sveske/prolog/prolog_rapport.pdf"}
|
||||
title={"3.G - Prolog: Rejseekspertsystem"}
|
||||
summary={"Brugte prolog programmeringsproget til at lave et ekspertsystem. Specifikt kan det give anbefalinger til rejsedestinationer ud fra en række faktorer som temperatur, økonomi, aktiviter osv."}
|
||||
/>
|
||||
<ProjectEntry
|
||||
thumbnail_url={"/portfolios/sveske/eksamen/thumb.jpg"}
|
||||
thumbnail_alt={"Informatik Eksamen"}
|
||||
download={"/portfolios/sveske/eksamen/informatik_eksamen_rapport.pdf"}
|
||||
title={"3.G - Eksamens projekt: Udvikling af opgavesystem til fysisk produkt om læringsdisplay af digital logik"}
|
||||
summary={"Udviklede et opgavesystem i form af en app i Unity. Opgavesystemet virker i samarbejde med et fysisk produkt udviklet til eksamensprojektet i teknikfag - Digital Design og Udvikling A. Appen skal undervise computer science elever på gymnasiet om digital logik og logiske porte"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.projects {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
|
||||
max-width: 1000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let download : string = '404';
|
||||
export let thumbnail_url : string = '/favicon.png';
|
||||
export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
|
||||
export let title : string = '<title>';
|
||||
export let summary : string = '<summary>';
|
||||
|
||||
</script>
|
||||
|
||||
<div class="news-card">
|
||||
<a href={download}>
|
||||
<div class="thumbnail">
|
||||
<img src={thumbnail_url} alt={thumbnail_alt}/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 id="title">{title}</h3>
|
||||
<p id="summary-text">{summary}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.thumbnail > img {
|
||||
object-fit: cover;
|
||||
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
#summary-text {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: var(--text3);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script lang="ts">
|
||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
|
||||
import AboutMe from "./Comps/AboutMe.svelte"
|
||||
</script>
|
||||
|
||||
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
||||
<TopAnimatedBackground/>
|
||||
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
||||
<AboutMe/>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
|
||||
<ZhenInformatikTimeline/>
|
||||
</ParallaxLayer>
|
||||
</Parallax>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="public-cv-container">
|
||||
<h1 class="bottom-dotted-line">Public CVs</h1>
|
||||
<div style="padding-left: 0.5vw; margin-top: -1vh;">
|
||||
<b>Rev1: </b><a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">Rev1.pdf</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.public-cv-container {
|
||||
padding-left: 10vw;
|
||||
padding-top: 5vh;
|
||||
width: 79vw;
|
||||
}
|
||||
|
||||
.bottom-dotted-line {
|
||||
border-bottom: 4px dotted rgb(178, 178, 178);
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue