adjusted page width media query for devlog post buttons, and possibly some other things too
This commit is contained in:
@@ -1,20 +1,17 @@
|
|||||||
<!-- <div class="header-content transparent-header">
|
|
||||||
{@render headerContent()}
|
|
||||||
</div> -->
|
|
||||||
<div class="header-content coloured-header">
|
|
||||||
{@render headerContent()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#snippet headerContent()}
|
{#snippet headerContent()}
|
||||||
<a class="favicon" href="/">
|
<a class="favicon" href="/">
|
||||||
<img class="favicon-image" src="/favicon.webp" alt="Favicon">
|
<img class="favicon-image" src="/favicon.webp" alt="Favicon">
|
||||||
</a>
|
</a>
|
||||||
<a href="/projects">Projects</a>
|
<a href="/projects">Projects</a>
|
||||||
<a href="/projects/projectn5/devlog">Devlog</a>
|
<a href="/projects/projectn5/devlog">Project N5</a>
|
||||||
<a href="/">Blog</a>
|
<a href="/">Blog</a>
|
||||||
<a href="/about">About</a>
|
<a href="/about">About</a>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
|
<div class="header-content coloured-header">
|
||||||
|
{@render headerContent()}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header-content {
|
.header-content {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -23,7 +20,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 16px;
|
gap: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
@@ -33,9 +30,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.transparent-header {
|
/* .transparent-header {
|
||||||
background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
|
background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.favicon {
|
.favicon {
|
||||||
background: url("/favicon.webp");
|
background: url("/favicon.webp");
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
/* #region Fonts */
|
/* #region Fonts */
|
||||||
/* Roboto Flex */
|
/* Roboto Flex */
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
import { quotes, type Quote } from "./quotes";
|
import { quotes, type Quote } from "./quotes";
|
||||||
|
|
||||||
import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts";
|
import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts";
|
||||||
|
import { type GalleryEntry } from "$lib/lists/gallery-entry.svelte";
|
||||||
|
|
||||||
let meImg: string = $state("common/me/a.webp");
|
let meImg: string = $state("common/me/a.webp");
|
||||||
let marqueeQuote: Quote = $state({
|
let marqueeQuote: Quote = $state({
|
||||||
@@ -14,43 +15,12 @@
|
|||||||
content: "",
|
content: "",
|
||||||
source: "",
|
source: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
setPicture();
|
|
||||||
setMarqueeText();
|
|
||||||
});
|
|
||||||
|
|
||||||
function getRandom(max: number): number {
|
|
||||||
return Math.floor(Math.random() * max);
|
|
||||||
}
|
|
||||||
|
|
||||||
let setPicture = function() {
|
|
||||||
var pictures = ["a", "b", "c", "e"];
|
|
||||||
var selectedPicture = pictures[getRandom(pictures.length)];
|
|
||||||
meImg = "common/me/" + selectedPicture + ".webp";
|
|
||||||
};
|
|
||||||
|
|
||||||
let setMarqueeText = function() {
|
|
||||||
marqueeQuote = quotes[getRandom(quotes.length)];
|
|
||||||
};
|
|
||||||
|
|
||||||
let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";
|
let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
const galleryEntries: GalleryEntry[] = [
|
||||||
<title>denizk0461's website</title>
|
|
||||||
<meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="subcontainer">
|
|
||||||
<Gallery entries={[
|
|
||||||
{
|
{
|
||||||
title: "Project N5 – devlog",
|
title: "Project N5 – devlog",
|
||||||
subtitle: "my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: " + latestDevlogDate + "</i>",
|
subtitle: `my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: ${latestDevlogDate}</i>`,
|
||||||
fullWidth: true,
|
fullWidth: true,
|
||||||
img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
|
img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
|
||||||
imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
|
imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
|
||||||
@@ -72,7 +42,39 @@
|
|||||||
imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
|
imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
|
||||||
link: "//files.denizk0461.dev/",
|
link: "//files.denizk0461.dev/",
|
||||||
},
|
},
|
||||||
]}/>
|
];
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
setPicture();
|
||||||
|
setMarqueeText();
|
||||||
|
});
|
||||||
|
|
||||||
|
function getRandom(max: number): number {
|
||||||
|
return Math.floor(Math.random() * max);
|
||||||
|
}
|
||||||
|
|
||||||
|
let setPicture = function() {
|
||||||
|
var pictures = ["a", "b", "c", "e"];
|
||||||
|
var selectedPicture = pictures[getRandom(pictures.length)];
|
||||||
|
meImg = "common/me/" + selectedPicture + ".webp";
|
||||||
|
};
|
||||||
|
|
||||||
|
let setMarqueeText = function() {
|
||||||
|
marqueeQuote = quotes[getRandom(quotes.length)];
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>denizk0461's website</title>
|
||||||
|
<meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<Content>
|
||||||
|
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="subcontainer">
|
||||||
|
<Gallery entries={galleryEntries}/>
|
||||||
</div>
|
</div>
|
||||||
<div class="subcontainer">
|
<div class="subcontainer">
|
||||||
<div class="quote-marquee-container">
|
<div class="quote-marquee-container">
|
||||||
|
|||||||
@@ -175,7 +175,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
@media screen and (max-width: 700px) {
|
||||||
.post-supercontainer {
|
.post-supercontainer {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user