adjusted sizing and spacing of body and header text, images, video
This commit is contained in:
@@ -15,42 +15,6 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* #region Old Fonts */
|
||||
/* Roboto Flex */
|
||||
@font-face {
|
||||
font-family: "Roboto Flex";
|
||||
src: url("/fonts/roboto-flex/flex.ttf");
|
||||
}
|
||||
|
||||
/* Space Mono */
|
||||
@font-face {
|
||||
font-family: "Space Mono";
|
||||
src: url("/fonts/space-mono/regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Space Mono";
|
||||
src: url("/fonts/space-mono/italic.ttf");
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Space Mono";
|
||||
src: url("/fonts/space-mono/bold.ttf");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Space Mono";
|
||||
src: url("/fonts/space-mono/bolditalic.ttf");
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* IBM Plex Mono */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("/fonts/ibm-plex-mono/medium.ttf");
|
||||
font-weight: 500;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region New Fonts */
|
||||
/* Bai Jamjuree. wght: 200-700 */
|
||||
|
||||
@@ -136,6 +100,7 @@
|
||||
--color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
|
||||
--color-text-dark: #1e1e1e;
|
||||
--color-highlight: #51B86B;
|
||||
--color-highlight-alt: #d03b4a;
|
||||
--color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
|
||||
--color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
|
||||
|
||||
@@ -153,7 +118,7 @@
|
||||
--color-link-hovered: #ffdad5;
|
||||
|
||||
/* fonts */
|
||||
--font-line-height: 1.5rem;
|
||||
--font-line-height: 1.6rem;
|
||||
|
||||
--font-sans-serif: 'Bai Jamjuree', sans-serif;
|
||||
--font-size-sans-serif: 1.1rem;
|
||||
@@ -161,11 +126,13 @@
|
||||
--font-mono: 'Kode Mono', monospace;
|
||||
--font-size-mono: 0.9em;
|
||||
|
||||
--font-stylised: 'Space Mono', monospace;
|
||||
--font-size-h1: 2.0rem;
|
||||
--font-size-h2: 1.5rem;
|
||||
--font-size-h3: 1.3rem;
|
||||
--font-size-h4: 1.2rem;
|
||||
|
||||
/* page sizing */
|
||||
--page-width: 1200px;
|
||||
--content-width: 1000px;
|
||||
--page-width: 1000px;
|
||||
--screen-width-mobile: 800px;
|
||||
|
||||
--margin-content-side: 24px;
|
||||
@@ -211,6 +178,7 @@
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-sans-serif);
|
||||
line-height: var(--font-line-height);
|
||||
margin: 12px 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
ul {
|
||||
@@ -235,58 +203,62 @@
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.0rem;
|
||||
line-height: 4.0rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
h2::before {
|
||||
letter-spacing: -0.5rem;
|
||||
content: '› ';
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.0rem;
|
||||
line-height: 2.0rem;
|
||||
}
|
||||
h3::before {
|
||||
letter-spacing: -0.3rem;
|
||||
content: '›› ';
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
h4::before {
|
||||
letter-spacing: -0.26rem;
|
||||
content: '››› ';
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* #region Headers */
|
||||
/* All headers */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 870;
|
||||
font-family: var(--font-sans-serif);
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-highlight);
|
||||
margin-top: 12px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
width: fit-content;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .wide-font {
|
||||
font-variation-settings:
|
||||
"wdth" 151, /* width */
|
||||
"XTRA" 560, /* counter width */
|
||||
"YTUC" 662, /* uppercase height */
|
||||
"YTAS" 700, /* ascender height */
|
||||
"YOPQ" 69, /* thin stroke */
|
||||
"YTFI" 788 /* figure height */
|
||||
;
|
||||
|
||||
h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
|
||||
/* Remove top margin when a header immediately preceds another header */
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Individual header settings */
|
||||
h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
line-height: var(--font-size-h1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
line-height: var(--font-size-h2);
|
||||
}
|
||||
h2::before {
|
||||
content: '> ';
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
line-height: var(--font-size-h3);
|
||||
}
|
||||
h3::before {
|
||||
content: '>> ';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: var(--font-size-h4);
|
||||
line-height: var(--font-size-h4);
|
||||
}
|
||||
h4::before {
|
||||
letter-spacing: -0.26rem;
|
||||
content: '>>> ';
|
||||
margin-right: 14px;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
border-top: 2px dashed var(--color-highlight);
|
||||
}
|
||||
|
||||
code, .code-block {
|
||||
@@ -306,6 +278,8 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.horizontally-centre-aligned {
|
||||
|
||||
@@ -72,46 +72,39 @@
|
||||
<Content>
|
||||
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
||||
|
||||
<div class="container">
|
||||
<div class="subcontainer">
|
||||
<Gallery entries={galleryEntries}/>
|
||||
</div>
|
||||
<div class="subcontainer">
|
||||
<div class="quote-marquee-container">
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
||||
</div>
|
||||
|
||||
<h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
|
||||
|
||||
<p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage!</p>
|
||||
|
||||
<p>I share my projects on this website. Check them out – the devlog of the game I'm working on especially!</p>
|
||||
|
||||
<h3>where to find me</h3>
|
||||
|
||||
<LinkList entries={[
|
||||
{
|
||||
icon: "icons/bluesky.svg",
|
||||
text: "Bluesky",
|
||||
link: "https://bsky.app/profile/denizk0461.dev",
|
||||
},
|
||||
{
|
||||
icon: "icons/codeberg.svg",
|
||||
text: "Codeberg",
|
||||
link: "https://codeberg.org/denizk0461",
|
||||
},
|
||||
{
|
||||
icon: "icons/github.svg",
|
||||
text: "GitHub",
|
||||
link: "https://github.com/denizk0461",
|
||||
},
|
||||
]}/>
|
||||
|
||||
<GamedevWebring />
|
||||
</div>
|
||||
<div class="quote-marquee-container">
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
||||
</div>
|
||||
|
||||
<h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
|
||||
|
||||
<p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage! I share my projects on this website. Check them out – the devlog of the game I'm working on especially!</p>
|
||||
|
||||
<h3>where to find me</h3>
|
||||
|
||||
<LinkList entries={[
|
||||
{
|
||||
icon: "icons/bluesky.svg",
|
||||
text: "Bluesky",
|
||||
link: "https://bsky.app/profile/denizk0461.dev",
|
||||
},
|
||||
{
|
||||
icon: "icons/codeberg.svg",
|
||||
text: "Codeberg",
|
||||
link: "https://codeberg.org/denizk0461",
|
||||
},
|
||||
{
|
||||
icon: "icons/github.svg",
|
||||
text: "GitHub",
|
||||
link: "https://github.com/denizk0461",
|
||||
},
|
||||
]}/>
|
||||
|
||||
<GamedevWebring />
|
||||
|
||||
<Gallery entries={galleryEntries} />
|
||||
</Content>
|
||||
|
||||
{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
|
||||
@@ -119,24 +112,17 @@
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.subcontainer {
|
||||
max-width: 50%;
|
||||
}
|
||||
.subcontainer:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.me-img {
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.gradient-title {
|
||||
background: -webkit-linear-gradient(0deg, #96C9DC, #9CE391, #E03E59);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-highlight) 30%,
|
||||
var(--color-highlight-alt) 90%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -173,18 +159,4 @@
|
||||
transform: translateX( -100% );
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.container {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.subcontainer {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.subcontainer:last-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||
|
||||
@@ -11,15 +11,15 @@
|
||||
<meta name="description" content="{data.description}">
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="{data.title}"
|
||||
subtitle="Project N5 Devlog"
|
||||
date="{data.date}"
|
||||
banner="preview.webp"
|
||||
bannerAlt="{data.bannerAlt}"
|
||||
/>
|
||||
<Content>
|
||||
|
||||
<Content useContentWidth>
|
||||
<Banner2
|
||||
title="{data.title}"
|
||||
subtitle="Project N5 Devlog"
|
||||
date="{data.date}"
|
||||
banner="preview.webp"
|
||||
bannerAlt="{data.bannerAlt}"
|
||||
/>
|
||||
|
||||
<TableOfContents disableStickyScrolling />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user