thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add basic styles to blog template

Browse Source
This commit is contained in:
thiloho
2024-08-18 20:12:27 +02:00
parent b32727aa8c
commit ec23a6188a
4 changed files with 133 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web-app/src/lib/templates/blog/BlogArticle.svelte
View File

@@ -15,6 +15,22 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme: light)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css"
integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme: dark)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"
integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>{title}</title> <title>{title}</title>
<link rel="stylesheet" href="../styles.css" /> <link rel="stylesheet" href="../styles.css" />
</head> </head>
@@ -22,23 +38,27 @@
<nav> <nav>
<div class="container"> <div class="container">
{#if logoType === "text"} <a href="../">
<p> {#if logoType === "text"}
<strong>{logo}</strong> <p>
</p> <strong>{logo}</strong>
{:else} </p>
<img src={logo} alt="" /> {:else}
{/if} <img src={logo} alt="" />
{/if}
</a>
</div> </div>
</nav> </nav>
<header> <header>
<div class="container"> <div class="container">
<hgroup>
<p>{publicationDate}</p>
<h1>{title}</h1>
</hgroup>
{#if coverImage} {#if coverImage}
<img src={coverImage} alt="" /> <img src={coverImage} alt="" />
{/if} {/if}
<h1>{title}</h1>
<p>{publicationDate}</p>
</div> </div>
</header> </header>

61
web-app/src/lib/templates/blog/BlogIndex.svelte
View File

@@ -13,6 +13,22 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme: light)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css"
integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme: dark)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"
integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>{title}</title> <title>{title}</title>
<link rel="stylesheet" href="./styles.css" /> <link rel="stylesheet" href="./styles.css" />
</head> </head>
@@ -20,13 +36,15 @@
<nav> <nav>
<div class="container"> <div class="container">
{#if logoType === "text"} <a href="../">
<p> {#if logoType === "text"}
<strong>{logo}</strong> <p>
</p> <strong>{logo}</strong>
{:else} </p>
<img src={logo} alt="" /> {:else}
{/if} <img src={logo} alt="" />
{/if}
</a>
</div> </div>
</nav> </nav>
@@ -40,22 +58,23 @@
<div class="container"> <div class="container">
{@html mainContent} {@html mainContent}
{#if articles.length > 0} {#if articles.length > 0}
<section> <section class="articles">
<h2>Articles</h2> <h2>Articles</h2>
{#each articles as article} <ul>
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")} {#each articles as article}
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<article> <li>
<p>{article.publication_date}</p> <p>{article.publication_date}</p>
<h3> <h3>
<a href="./articles/{articleFileName}.html">{article.title}</a> <a href="./articles/{articleFileName}.html">{article.title}</a>
</h3> </h3>
{#if article.meta_description} {#if article.meta_description}
<p>{article.meta_description}</p> <p>{article.meta_description}</p>
{/if} {/if}
</article> </li>
{/each} {/each}
</ul>
</section> </section>
{/if} {/if}
</div> </div>

2
web-app/src/routes/+layout.svelte
View File

@@ -98,7 +98,7 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.editor { .editor {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 1fr;
} }
} }
</style> </style>

68
web-app/template-styles/blog-styles.css
View File

@@ -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 { :root {
color-scheme: light dark; color-scheme: light dark;
} }
@@ -15,11 +30,6 @@ body {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
.container {
margin-inline: auto;
inline-size: min(100% - 2rem, 75ch);
}
img, img,
picture, picture,
svg, svg,
@@ -28,6 +38,22 @@ video {
block-size: auto; 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, nav,
header, header,
main, main,
@@ -44,3 +70,35 @@ section {
flex-direction: column; flex-direction: column;
gap: 1rem; 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;
}