From 42c276384a123ceb5ad3bab374f4ecda2ebe5e4c Mon Sep 17 00:00:00 2001 From: moris Date: Mon, 10 Mar 2025 09:07:12 +0900 Subject: [PATCH] =?UTF-8?q?css=E3=81=AE=E6=9C=80=E9=81=A9=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/(DefaultStyle)/+layout.svelte | 22 +++-- src/routes/(DefaultStyle)/[slug]/+page.svelte | 2 +- src/routes/(DefaultStyle)/[slug]/grid.svelte | 82 ++++++++---------- src/routes/(DefaultStyle)/footer.svelte | 86 ++++++++++--------- src/routes/(DefaultStyle)/header.svelte | 18 ++-- 5 files changed, 101 insertions(+), 109 deletions(-) diff --git a/src/routes/(DefaultStyle)/+layout.svelte b/src/routes/(DefaultStyle)/+layout.svelte index 3c18ce2..ffd97d6 100644 --- a/src/routes/(DefaultStyle)/+layout.svelte +++ b/src/routes/(DefaultStyle)/+layout.svelte @@ -65,17 +65,16 @@ @media(width<1000px) { height: 40px; } - - & header { - pointer-events: auto; - background-color: var(--theme-color); - height: 100%; - transition: height .4s, transform .4s, background-color 1s; - &.hide { - height: 40px; - @media(width<1000px) { - transform: translate(0px,-50px); - } + } + header { + pointer-events: auto; + background-color: var(--theme-color); + height: 100%; + transition: height .4s, transform .4s, background-color 1s; + &.hide { + height: 40px; + @media(width<1000px) { + transform: translate(0px,-50px); } } } @@ -85,7 +84,6 @@ flex-direction: column; flex-grow: 1; } - main { flex-grow: 1; } diff --git a/src/routes/(DefaultStyle)/[slug]/+page.svelte b/src/routes/(DefaultStyle)/[slug]/+page.svelte index d32a861..2008180 100644 --- a/src/routes/(DefaultStyle)/[slug]/+page.svelte +++ b/src/routes/(DefaultStyle)/[slug]/+page.svelte @@ -16,7 +16,7 @@
{#each data.posts as post} diff --git a/src/routes/(DefaultStyle)/[slug]/grid.svelte b/src/routes/(DefaultStyle)/[slug]/grid.svelte index c33c984..8ac7850 100644 --- a/src/routes/(DefaultStyle)/[slug]/grid.svelte +++ b/src/routes/(DefaultStyle)/[slug]/grid.svelte @@ -5,17 +5,16 @@ export let emoji: string; export let date: Date; export let category: string; - export let id: string;
{#if thumbnail } - thumbnail + thumbnail {:else if emoji} -
thumbnail
+ thumbnail {:else} - ')}' alt="fallback"/> + ')}' alt="fallback"/> {/if}
{date.toLocaleDateString('sv-SE')}
@@ -50,54 +49,47 @@ align-items: center; justify-content: center; aspect-ratio: 1/0.6; - width: 100%; max-height: 200px; + } + img { + display: block; + max-width: 100%; + max-height: 100%; + object-fit: contain; + margin-inline: auto; + transition: transform .3s ease-out; + } + .emoji { + height: 70%; + } - & img { - display: block; - max-width: 100%; - max-height: 100%; - object-fit: contain; - margin-inline: auto; - transition: transform .3s ease-out; - } - & div.emoji { - height: 70%; - aspect-ratio: 1/1; - } - - & .tag{ - position: absolute; - top: 5px; - padding:2px; - color: var(--font-color); - background-color: var(--back-color); - border-radius: 3px; - font-size: 0.85em; - } - & .date { - right:5px; - } - & .category { - left: 5px; - } + .tag{ + position: absolute; + top: 5px; + padding: 2px; + background-color: var(--back-color); + border-radius: 3px; + font-size: 0.85em; + } + .date { + right:5px; + } + .category { + left: 5px; } .label { flex-grow: 1; height: 100%; width: 100%; - color: var(--font-color); - - & .title { - font-size: 1.17em; - font-weight: bold; - margin: 4px 8px; - } - - & .description { - margin:8px; - font-size: .9em; - } + } + .title { + font-size: 1.17em; + font-weight: bold; + margin: 4px 8px; + } + .description { + margin:8px; + font-size: .9em; } \ No newline at end of file diff --git a/src/routes/(DefaultStyle)/footer.svelte b/src/routes/(DefaultStyle)/footer.svelte index 298f7d1..c44faff 100644 --- a/src/routes/(DefaultStyle)/footer.svelte +++ b/src/routes/(DefaultStyle)/footer.svelte @@ -3,11 +3,13 @@
-
-
- +
+ +
+
- +
Copyright 2024-2025 moris. CC-BY-4.0 / MIT
\ No newline at end of file diff --git a/src/routes/(DefaultStyle)/header.svelte b/src/routes/(DefaultStyle)/header.svelte index d7d0728..2f20745 100644 --- a/src/routes/(DefaultStyle)/header.svelte +++ b/src/routes/(DefaultStyle)/header.svelte @@ -3,8 +3,8 @@ @@ -15,13 +15,13 @@ height: 100%; align-items: center; justify-content: center; + } - a { - display: block; - height: 75%; - } - svg { - height: 100% - } + a { + display: block; + height: 75%; + } + svg { + height: 100% } \ No newline at end of file