added css classes for img, video, code styling

This commit is contained in:
2025-04-04 18:05:05 +02:00
parent 8c0ee4b3af
commit 060b66a1be
7 changed files with 53 additions and 5 deletions

View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

View File

@@ -1,7 +1,7 @@
<div class="center-stuff"> <div class="center-stuff">
<p class="banner-text" style="margin-right: 8px;">denizk0461's</p> <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
<a class="banner-image" href="/"> <a class="banner-image" href="/">
<img src="/favicon.png"/> <img src="/favicon.webp"/>
</a> </a>
<p class="banner-text" style="margin-left: 8px;">website</p> <p class="banner-text" style="margin-left: 8px;">website</p>
</div> </div>
@@ -21,7 +21,9 @@
margin-right: auto; margin-right: auto;
} }
.banner-image { .banner-image {
width: fit-content; width: 64px;
margin-top: 16px;
margin-bottom: 16px;
} }
.banner-text { .banner-text {
width: fit-content; width: fit-content;

View File

@@ -62,5 +62,9 @@
filter: var(--color-text-img); filter: var(--color-text-img);
margin-top: 4px; margin-top: 4px;
margin-bottom: -4px; margin-bottom: -4px;
width: fit-content !important;
margin-left: 0;
margin-right: 0;
display: inline;
} }
</style> </style>

View File

@@ -33,6 +33,10 @@
--notch-size: 32px; --notch-size: 32px;
--notch-size-small: 16px; --notch-size-small: 16px;
--notch-size-link: 10px; --notch-size-link: 10px;
--color-link-unvisited: #c2e8ff;
--color-link-visited: #ffd7f0;
--color-link-hovered: #ffdad5;
} }
html { html {
@@ -96,6 +100,44 @@
width: fit-content; 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 { .notched {
clip-path: polygon( clip-path: polygon(
0% var(--notch-size), 0% var(--notch-size),

View File

@@ -8,7 +8,7 @@
<title>Project N5 Devlog | denizk0461</title> <title>Project N5 Devlog | denizk0461</title>
</svelte:head> </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> <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})} {#snippet devlogPost({post}: {post: DevlogPost})}
<a href="{post.date}/" class="post"> <a href="devlog/{post.date}/" class="post">
{#if post.banner} {#if post.banner}
<img class="post-img notched" src="/projects/projectn5/devlog/{post.date}/{post.banner}"> <img class="post-img notched" src="/projects/projectn5/devlog/{post.date}/{post.banner}">
{:else} {:else}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/favicon.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB