added css classes for img, video, code styling

2025-04-04 18:05:05 +02:00
parent 8c0ee4b3af
commit 060b66a1be
7 changed files with 53 additions and 5 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.webp" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
--- a/src/lib/header.svelte
+++ b/src/lib/header.svelte
@@ -1,7 +1,7 @@
 <div class="center-stuff">
    <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
    <a class="banner-image" href="/">
-        <img src="/favicon.png"/>
+        <img src="/favicon.webp"/>
    </a>
    <p class="banner-text" style="margin-left: 8px;">website</p>
 </div>
@@ -21,7 +21,9 @@
        margin-right: auto;
    }
    .banner-image {
-        width: fit-content;
+        width: 64px;
+        margin-top: 16px;
+        margin-bottom: 16px;
    }
    .banner-text {
        width: fit-content;
--- a/src/lib/link-list.svelte
+++ b/src/lib/link-list.svelte
@@ -62,5 +62,9 @@
        filter: var(--color-text-img);
        margin-top: 4px;
        margin-bottom: -4px;
+        width: fit-content !important;
+        margin-left: 0;
+        margin-right: 0;
+        display: inline;
    }
 </style>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,6 +33,10 @@
            --notch-size: 32px;
            --notch-size-small: 16px;
            --notch-size-link: 10px;
+
+            --color-link-unvisited: #c2e8ff;
+            --color-link-visited: #ffd7f0;
+            --color-link-hovered: #ffdad5;
        }

        html {
@@ -96,6 +100,44 @@
            width: fit-content;
        }

+        code, .code-block {
+            font-family: 'Reddit Mono', monospace;
+            font-size: 0.9em;
+            background-color: var(--color-background-highlight);
+            /* color: var(--color-background); */
+            border-radius: 8px;
+            padding-left: 6px;
+            padding-right: 6px;
+        }
+
+        img, video {
+            width: 80%;
+            margin-left: auto;
+            margin-right: auto;
+            display: flex;
+        }
+
+        .horizontally-centre-aligned {
+            width: 80%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        a:link {
+            color: var(--color-link-unvisited);
+        }
+        /* visited link */
+        a:visited {
+            color: var(--color-link-visited);
+        }
+        /* mouse over link */
+        a:hover {
+            color: var(--color-link-hovered);
+        }
+
        .notched {
            clip-path: polygon(
                0% var(--notch-size), 
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+page.svelte
@@ -8,7 +8,7 @@
    <title>Project N5 Devlog | denizk0461</title> 
 </svelte:head>

-<BannerTitle title="Project N5; Development Log" />
+<BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/20240323/unity_overview.webp" />

 <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game heavily inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b>.</p>

@@ -22,7 +22,7 @@


 {#snippet devlogPost({post}: {post: DevlogPost})}
-<a href="{post.date}/" class="post">
+<a href="devlog/{post.date}/" class="post">
    {#if post.banner}
    <img class="post-img notched" src="/projects/projectn5/devlog/{post.date}/{post.banner}">
    {:else}
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/favicon.webp
+++ b/static/favicon.webp