thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +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>
<meta charset="UTF-8" />
<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>
<link rel="stylesheet" href="../styles.css" />
</head>
@@ -22,23 +38,27 @@
<nav>
<div class="container">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
<a href="../">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</a>
</div>
</nav>
<header>
<div class="container">
<hgroup>
<p>{publicationDate}</p>
<h1>{title}</h1>
</hgroup>
{#if coverImage}
<img src={coverImage} alt="" />
{/if}
<h1>{title}</h1>
<p>{publicationDate}</p>
</div>
</header>

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

@@ -13,6 +13,22 @@
<head>
<meta charset="UTF-8" />
<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>
<link rel="stylesheet" href="./styles.css" />
</head>
@@ -20,13 +36,15 @@
<nav>
<div class="container">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
<a href="../">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</a>
</div>
</nav>
@@ -40,22 +58,23 @@
<div class="container">
{@html mainContent}
{#if articles.length > 0}
<section>
<section class="articles">
<h2>Articles</h2>
{#each articles as article}
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<article>
<p>{article.publication_date}</p>
<h3>
<a href="./articles/{articleFileName}.html">{article.title}</a>
</h3>
{#if article.meta_description}
<p>{article.meta_description}</p>
{/if}
</article>
{/each}
<ul>
{#each articles as article}
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<li>
<p>{article.publication_date}</p>
<h3>
<a href="./articles/{articleFileName}.html">{article.title}</a>
</h3>
{#if article.meta_description}
<p>{article.meta_description}</p>
{/if}
</li>
{/each}
</ul>
</section>
{/if}
</div>

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

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