From ec23a6188ada9d34b551f007e832561efe1d8415 Mon Sep 17 00:00:00 2001 From: thiloho <123883702+thiloho@users.noreply.github.com> Date: Sun, 18 Aug 2024 20:12:27 +0200 Subject: [PATCH] Add basic styles to blog template --- .../src/lib/templates/blog/BlogArticle.svelte | 38 ++++++++--- .../src/lib/templates/blog/BlogIndex.svelte | 61 +++++++++++------ web-app/src/routes/+layout.svelte | 2 +- web-app/template-styles/blog-styles.css | 68 +++++++++++++++++-- 4 files changed, 133 insertions(+), 36 deletions(-) diff --git a/web-app/src/lib/templates/blog/BlogArticle.svelte b/web-app/src/lib/templates/blog/BlogArticle.svelte index f9cdcd9..a13820e 100644 --- a/web-app/src/lib/templates/blog/BlogArticle.svelte +++ b/web-app/src/lib/templates/blog/BlogArticle.svelte @@ -15,6 +15,22 @@ + + {title} @@ -22,23 +38,27 @@
+
+

{publicationDate}

+

{title}

+
{#if coverImage} {/if} -

{title}

-

{publicationDate}

diff --git a/web-app/src/lib/templates/blog/BlogIndex.svelte b/web-app/src/lib/templates/blog/BlogIndex.svelte index 89ae687..ae64f88 100644 --- a/web-app/src/lib/templates/blog/BlogIndex.svelte +++ b/web-app/src/lib/templates/blog/BlogIndex.svelte @@ -13,6 +13,22 @@ + + {title} @@ -20,13 +36,15 @@ @@ -40,22 +58,23 @@
{@html mainContent} {#if articles.length > 0} -
+

Articles

- {#each articles as article} - {@const articleFileName = article.title.toLowerCase().split(" ").join("-")} - -
-

{article.publication_date}

-

- {article.title} -

- {#if article.meta_description} -

{article.meta_description}

- {/if} -
- {/each} +
    + {#each articles as article} + {@const articleFileName = article.title.toLowerCase().split(" ").join("-")} +
  • +

    {article.publication_date}

    +

    + {article.title} +

    + {#if article.meta_description} +

    {article.meta_description}

    + {/if} +
    • + {/each} +
{/if}
diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte index b5a4519..5abf5c5 100644 --- a/web-app/src/routes/+layout.svelte +++ b/web-app/src/routes/+layout.svelte @@ -98,7 +98,7 @@ @media (min-width: 640px) { .editor { - grid-template-columns: 1fr 2fr; + grid-template-columns: 1fr 1fr; } } diff --git a/web-app/template-styles/blog-styles.css b/web-app/template-styles/blog-styles.css index 3496c1d..2896c7c 100644 --- a/web-app/template-styles/blog-styles.css +++ b/web-app/template-styles/blog-styles.css @@ -1,3 +1,18 @@ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2) + format("woff2"), + url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff) + format("woff"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, + U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, + U+FFFD; +} + :root { color-scheme: light dark; } @@ -15,11 +30,6 @@ body { font-family: system-ui, sans-serif; } -.container { - margin-inline: auto; - inline-size: min(100% - 2rem, 75ch); -} - img, picture, svg, @@ -28,6 +38,22 @@ video { block-size: auto; } +ul, +ol { + list-style: inside; +} + +.container { + margin-inline: auto; + inline-size: min(100% - 2rem, 75ch); +} + +header > .container { + display: flex; + flex-direction: column; + gap: 1rem; +} + nav, header, main, @@ -44,3 +70,35 @@ section { flex-direction: column; gap: 1rem; } + +.articles ul { + display: grid; + list-style: none; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr)); +} + +.articles li { + border: 1px solid hsl(0 0% 50%); + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +pre { + border: 1px solid hsl(0 0% 50%); + padding: 1rem; + overflow-x: auto; +} + +code { + font-family: "JetBrains Mono", monospace; + font-size: 0.875rem; +} + +:not(pre) > code { + background-color: hsl(0 0% 25%); + padding-inline: 0.25rem; + padding-block: 0.125rem; +}