adjusted sizing and spacing of body and header text, images, video
This commit is contained in:
@@ -1,6 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SeparatorLine from "./separator-line.svelte";
|
|
||||||
|
|
||||||
let {
|
let {
|
||||||
title,
|
title,
|
||||||
date = "",
|
date = "",
|
||||||
@@ -71,7 +69,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<SeparatorLine />
|
<hr>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SeparatorLine from "./separator-line.svelte";
|
|
||||||
|
|
||||||
let {
|
let {
|
||||||
title,
|
title,
|
||||||
date = "",
|
date = "",
|
||||||
@@ -19,10 +17,19 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
|
||||||
|
<div class="title-container">
|
||||||
|
<h1 class="title">{title}</h1>
|
||||||
|
{#if subtitle}
|
||||||
|
<p class="subtitle">[ {subtitle} ]</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if date}
|
||||||
|
<p class="date">» {date}</p>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
<div class="subcontainer">
|
<div class="container">
|
||||||
<div class="img-container">
|
|
||||||
{#if banner}
|
{#if banner}
|
||||||
{#if pixelated}
|
{#if pixelated}
|
||||||
<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
|
<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
|
||||||
@@ -30,133 +37,43 @@
|
|||||||
<img class="banner" src="{banner}" alt="{bannerAlt}">
|
<img class="banner" src="{banner}" alt="{bannerAlt}">
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<div class="text-container">
|
|
||||||
{@render titles({title, subtitle, date})}
|
{@render titles({title, subtitle, date})}
|
||||||
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- {#if banner}
|
|
||||||
<div class="subcontainer">
|
|
||||||
<div class="img-container">
|
|
||||||
{#if pixelated}
|
|
||||||
<img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
|
|
||||||
{:else}
|
|
||||||
<img src="{banner}" alt="{bannerAlt}">
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="text-container">
|
|
||||||
{@render titles({title, subtitle, date})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="subcontainer">
|
|
||||||
<div class="text-container">
|
|
||||||
{@render titles({title, subtitle, date})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if} -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
|
|
||||||
<h1 class="title">{title}</h1>
|
|
||||||
{#if subtitle}
|
|
||||||
<p class="subtitle">[ {subtitle} ]</p>
|
|
||||||
{/if}
|
|
||||||
{#if date}
|
|
||||||
<p class="date">» {date}</p>
|
|
||||||
{/if}
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<SeparatorLine />
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--color-background-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subcontainer {
|
|
||||||
max-width: var(--page-width);
|
|
||||||
/* min-height: 250px;
|
|
||||||
max-height: 600px; */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
/* position: absolute;
|
max-height: 300px;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0; */
|
|
||||||
max-height: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-container {
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 50%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-container {
|
|
||||||
margin-left: var(--margin-content-side);
|
|
||||||
margin-right: var(--margin-content-side);
|
|
||||||
/* position: absolute;
|
|
||||||
bottom: 0; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.container img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0px;
|
|
||||||
/* font-style: italic; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
font-family: var(--font-title);
|
font-weight:700;
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
color: var(--color-highlight);
|
color: var(--color-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-style: italic;
|
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 800;
|
font-weight: 500;
|
||||||
font-size: 1.3rem;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
|
||||||
.subcontainer {
|
|
||||||
height: fit-content;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.text-container {
|
|
||||||
width: initial;
|
|
||||||
}
|
|
||||||
.img-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.img-container img {
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.subtitle {
|
|
||||||
font-size: 1.0rem;
|
font-size: 1.0rem;
|
||||||
line-height: 1.1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,37 +1,20 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
let {
|
let { children } = $props();
|
||||||
useContentWidth,
|
|
||||||
}: {
|
|
||||||
useContentWidth?: boolean;
|
|
||||||
} = $props();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if useContentWidth}
|
<div class="main-content">
|
||||||
<div class="main-content content-width">
|
{@render children()}
|
||||||
<slot />
|
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
|
||||||
<div class="main-content page-width">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.main-content {
|
.main-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: var(--page-width);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-width {
|
|
||||||
max-width: var(--content-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-width {
|
|
||||||
max-width: var(--page-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
.main-content {
|
.main-content {
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SeparatorLine from "./separator-line.svelte";
|
|
||||||
|
|
||||||
var ratCounter = 0;
|
var ratCounter = 0;
|
||||||
|
|
||||||
let playSound = function() {
|
let playSound = function() {
|
||||||
@@ -16,7 +14,7 @@
|
|||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<SeparatorLine noMargin />
|
<hr>
|
||||||
<div class="content-container">
|
<div class="content-container">
|
||||||
<div class="content-box center-box">
|
<div class="content-box center-box">
|
||||||
<p>〔 2023–2026 〕denizk0461</p>
|
<p>〔 2023–2026 〕denizk0461</p>
|
||||||
|
|||||||
@@ -8,9 +8,9 @@
|
|||||||
<a href="/about">About</a>
|
<a href="/about">About</a>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<div class="header-content coloured-header">
|
<!-- <div class="header-content coloured-header">
|
||||||
{@render headerContent()}
|
{@render headerContent()}
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header-content {
|
.header-content {
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
let {
|
|
||||||
noMargin,
|
|
||||||
}: {
|
|
||||||
noMargin?: boolean;
|
|
||||||
} = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if noMargin}
|
|
||||||
<hr style="margin-top: 0px; margin-bottom: 0px;">
|
|
||||||
{:else}
|
|
||||||
<hr style="margin-top: 20px; margin-bottom: 20px;">
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
hr {
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
border: none;
|
|
||||||
border-top: 2px dashed var(--color-highlight);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -98,22 +98,22 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
/* .toc-list li {
|
|
||||||
list-style: none;
|
|
||||||
} */
|
|
||||||
.toc-list a {
|
.toc-list a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
|
margin: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--color-text);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
transition-property: color background-color;
|
transition-property: color background-color;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.toc-list a, .toc-list a:link, .toc-list a:visited {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
.toc-list a:hover {
|
.toc-list a:hover {
|
||||||
color: var(--color-text-dark);
|
color: var(--color-text-dark);
|
||||||
background-color: var(--color-highlight);
|
background-color: var(--color-highlight);
|
||||||
@@ -133,7 +133,7 @@
|
|||||||
padding-left: 116px;
|
padding-left: 116px;
|
||||||
}
|
}
|
||||||
.toc-level-1::before, .toc-level-2::before, .toc-level-3::before {
|
.toc-level-1::before, .toc-level-2::before, .toc-level-3::before {
|
||||||
content: "↳ ";
|
content: "└ ";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
<span>〔</span>
|
<span>〔</span>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
|
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
|
<a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LI<i>S</i>T</a>
|
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LIST</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
|
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
|
||||||
<span>〕</span>
|
<span>〕</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -22,14 +22,23 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 16px auto;
|
margin: 16px auto;
|
||||||
}
|
}
|
||||||
.webring-row a {
|
a {
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
a:link, a:visited {
|
||||||
|
color: var(--color-highlight);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
.webring-row {
|
.webring-row {
|
||||||
font-family: 'Space Mono';
|
font-family: var(--font-mono);
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
span {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -15,42 +15,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<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 */
|
/* #region New Fonts */
|
||||||
/* Bai Jamjuree. wght: 200-700 */
|
/* 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-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
|
||||||
--color-text-dark: #1e1e1e;
|
--color-text-dark: #1e1e1e;
|
||||||
--color-highlight: #51B86B;
|
--color-highlight: #51B86B;
|
||||||
|
--color-highlight-alt: #d03b4a;
|
||||||
--color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
|
--color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
|
||||||
--color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
|
--color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
|
||||||
|
|
||||||
@@ -153,7 +118,7 @@
|
|||||||
--color-link-hovered: #ffdad5;
|
--color-link-hovered: #ffdad5;
|
||||||
|
|
||||||
/* fonts */
|
/* fonts */
|
||||||
--font-line-height: 1.5rem;
|
--font-line-height: 1.6rem;
|
||||||
|
|
||||||
--font-sans-serif: 'Bai Jamjuree', sans-serif;
|
--font-sans-serif: 'Bai Jamjuree', sans-serif;
|
||||||
--font-size-sans-serif: 1.1rem;
|
--font-size-sans-serif: 1.1rem;
|
||||||
@@ -161,11 +126,13 @@
|
|||||||
--font-mono: 'Kode Mono', monospace;
|
--font-mono: 'Kode Mono', monospace;
|
||||||
--font-size-mono: 0.9em;
|
--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 sizing */
|
||||||
--page-width: 1200px;
|
--page-width: 1000px;
|
||||||
--content-width: 1000px;
|
|
||||||
--screen-width-mobile: 800px;
|
--screen-width-mobile: 800px;
|
||||||
|
|
||||||
--margin-content-side: 24px;
|
--margin-content-side: 24px;
|
||||||
@@ -211,6 +178,7 @@
|
|||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: var(--font-size-sans-serif);
|
font-size: var(--font-size-sans-serif);
|
||||||
line-height: var(--font-line-height);
|
line-height: var(--font-line-height);
|
||||||
|
margin: 12px 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
@@ -235,58 +203,62 @@
|
|||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
/* #region Headers */
|
||||||
font-size: 4.0rem;
|
/* All headers */
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: 870;
|
font-weight: 700;
|
||||||
font-family: var(--font-sans-serif);
|
font-family: var(--font-mono);
|
||||||
color: var(--color-highlight);
|
color: var(--color-highlight);
|
||||||
margin-top: 12px;
|
margin-top: 16px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
h1, h2, h3, h4, h5, h6, .wide-font {
|
|
||||||
font-variation-settings:
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
|
||||||
"wdth" 151, /* width */
|
/* Remove top margin when a header immediately preceds another header */
|
||||||
"XTRA" 560, /* counter width */
|
margin-top: 0;
|
||||||
"YTUC" 662, /* uppercase height */
|
}
|
||||||
"YTAS" 700, /* ascender height */
|
|
||||||
"YOPQ" 69, /* thin stroke */
|
/* Individual header settings */
|
||||||
"YTFI" 788 /* figure height */
|
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 {
|
code, .code-block {
|
||||||
@@ -306,6 +278,8 @@
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
max-height: 400px;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.horizontally-centre-aligned {
|
.horizontally-centre-aligned {
|
||||||
|
|||||||
@@ -72,11 +72,6 @@
|
|||||||
<Content>
|
<Content>
|
||||||
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
<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">
|
<div class="quote-marquee-container">
|
||||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
|
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
|
||||||
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
{@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
|
||||||
@@ -85,9 +80,7 @@
|
|||||||
|
|
||||||
<h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
|
<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>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>
|
||||||
|
|
||||||
<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>
|
<h3>where to find me</h3>
|
||||||
|
|
||||||
@@ -110,8 +103,8 @@
|
|||||||
]}/>
|
]}/>
|
||||||
|
|
||||||
<GamedevWebring />
|
<GamedevWebring />
|
||||||
</div>
|
|
||||||
</div>
|
<Gallery entries={galleryEntries} />
|
||||||
</Content>
|
</Content>
|
||||||
|
|
||||||
{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
|
{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
|
||||||
@@ -119,24 +112,17 @@
|
|||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.subcontainer {
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
.subcontainer:last-child {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.me-img {
|
.me-img {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-title {
|
.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;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
@@ -173,18 +159,4 @@
|
|||||||
transform: translateX( -100% );
|
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>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import Content from "$lib/content.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||||
|
|
||||||
@@ -11,7 +11,9 @@
|
|||||||
<meta name="description" content="{data.description}">
|
<meta name="description" content="{data.description}">
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<BannerTitleAlt
|
<Content>
|
||||||
|
|
||||||
|
<Banner2
|
||||||
title="{data.title}"
|
title="{data.title}"
|
||||||
subtitle="Project N5 Devlog"
|
subtitle="Project N5 Devlog"
|
||||||
date="{data.date}"
|
date="{data.date}"
|
||||||
@@ -19,8 +21,6 @@
|
|||||||
bannerAlt="{data.bannerAlt}"
|
bannerAlt="{data.bannerAlt}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Content useContentWidth>
|
|
||||||
|
|
||||||
<TableOfContents disableStickyScrolling />
|
<TableOfContents disableStickyScrolling />
|
||||||
|
|
||||||
<!-- <div slot="main"> -->
|
<!-- <div slot="main"> -->
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user