bloglayout
This commit is contained in:
parent
640d1e25b3
commit
5da0393628
7 changed files with 98 additions and 16 deletions
15
src/components/BackNav.astro
Normal file
15
src/components/BackNav.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<a class="no-link-link" href="javascript:history.back()">
|
||||
<button class="rounded">zurück</button>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
margin: 8px 0 16px 64px;
|
||||
border-style: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@ const img = findImageByPath(post.image.path);
|
|||
|
||||
<a href={url} class="no-link-link">
|
||||
<div class="wide-container">
|
||||
<div class="image-col col">
|
||||
<div class="image-col col rounded">
|
||||
<img src={img.src} alt={post.image.alt} />
|
||||
</div>
|
||||
<div class="text-col col">
|
||||
|
|
@ -22,7 +22,7 @@ const img = findImageByPath(post.image.path);
|
|||
<h7 class="subtitle">{post.subtitle}</h7>
|
||||
<p class="description">{post.description}</p>
|
||||
<div class="bottom-info">
|
||||
<span>Author: {post.author}</span>
|
||||
<span>Autor: {post.author}</span>
|
||||
<span>{post.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +65,6 @@ const img = findImageByPath(post.image.path);
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bottom-info {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ const img = findImageByPath(post.image.path)
|
|||
---
|
||||
|
||||
<a href={url} class="no-link-link">
|
||||
<div class="frame">
|
||||
<img src={img.src} alt={post.image.alt} />
|
||||
<div class="frame rounded">
|
||||
<img src={img.src} alt={post.image.alt} class="rounded" />
|
||||
<h2 class="headline">{post.title}</h2>
|
||||
<h7 class="subtitle">{post.subtitle}</h7>
|
||||
<p class="description">{post.description}</p>
|
||||
|
|
@ -33,16 +33,12 @@ const img = findImageByPath(post.image.path)
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid black;
|
||||
border-radius: 8px;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 220px;
|
||||
width: 220px;
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.bottom-info {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,56 @@
|
|||
---
|
||||
import BackNav from "../components/BackNav.astro";
|
||||
import { findImageByPath } from "../lib/findImage";
|
||||
import type { Post } from "../types/global";
|
||||
import Main from "./Main.astro";
|
||||
|
||||
interface Props {
|
||||
frontmatter: Post;
|
||||
}
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
|
||||
const titleImg = findImageByPath(frontmatter.image.path);
|
||||
---
|
||||
|
||||
<Main title={frontmatter.title}>
|
||||
<Main>
|
||||
<article>
|
||||
<img
|
||||
id="titleImg"
|
||||
src={titleImg.src}
|
||||
alt={frontmatter.image.alt}
|
||||
class="rounded"
|
||||
/>
|
||||
<h1 class="headline">{frontmatter.title}</h1>
|
||||
<span class="subtitle">{frontmatter.subtitle}</span>
|
||||
<hr />
|
||||
<div class="bottom-info">
|
||||
<span>Autor: {frontmatter.author}</span>
|
||||
<span>{frontmatter.date}</span>
|
||||
</div>
|
||||
<hr />
|
||||
<slot />
|
||||
</article>
|
||||
<BackNav />
|
||||
</Main>
|
||||
|
||||
<style>
|
||||
article {
|
||||
margin: 32px auto;
|
||||
max-width: 900px;
|
||||
padding: 0 clamp(8px, 32px, 64px);
|
||||
}
|
||||
|
||||
#titleImg {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.bottom-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ const { title } = Astro.props;
|
|||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<h1>{title}</h1>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
layout: ../../layouts/BlogPostLayout.astro
|
||||
title: 'The second post'
|
||||
subtitle: 'In the second post we re talking about some nice luxury hotels. Stay tuned!'
|
||||
image:
|
||||
|
|
@ -8,4 +9,22 @@ author: 'Tim'
|
|||
date: '12.06.2026'
|
||||
---
|
||||
|
||||
Here is my _great_ post!
|
||||
Lorem Ipsum ist im Wesentlichen der Blindtext der Satz- und Druckindustrie. Seit ein unbekannter Drucker im 15. Jahrhundert eine Reihe von Typen durcheinander brachte, um ein Musterbuch zu erstellen, ist Lorem Ipsum der branchenübliche Scheintext. Es ist praktisch intakt und hat nicht nur fünf Jahrhunderte, sondern auch den Übergang zum elektronischen Schriftsatz überstanden. Die Einführung von Letraset-Blättern mit Abschnitten aus Lorem Ipsum in den 1960er Jahren und in jüngerer Zeit die Aufnahme von Lorem Ipsum-Versionen in Desktop-Publishing-Programme wie Aldus PageMaker trugen zu seiner Popularisierung bei.
|
||||
|
||||
Seit dem 15. Jahrhundert ist Lorem Ipsum der akzeptierte Platzhaltertext in der Branche.
|
||||
|
||||
- Die Einführung von Letraset-Blättern mit Abschnitten durch Lorem Ipsum trug in den 1960er Jahren zu seiner steigenden Popularität bei.
|
||||
- Ohne das Material selbst zu betonen, wird Lorem Ipsum verwendet, um zu veranschaulichen, wie Textelemente visuell dargestellt werden
|
||||
- Es hilft Designern und Entwicklern bei der Bewertung der Schriftart, des Layouts und der allgemeinen Designästhetik.
|
||||
|
||||
1. Was ist Lorem Ipsum und wo kommt es her?
|
||||
|
||||
>Lorem Ipsum ist ein Platzhaltertext, der häufig in der Design-, Verlags- und Webentwicklungsbranche verwendet wird. Es geht auf eine lateinische Passage von Cicero in seinem Werk „De finibus bonorum et malorum“ (Über das Ende von Gut und Böse) aus dem Jahr 45 v. Chr. zurück.
|
||||
|
||||
2. Warum wird Lorem Ipsum anstelle von normalem Text verwendet?
|
||||
|
||||
>Lorem Ipsum wird als Platzhaltertext verwendet, um die visuelle Präsentation von Textelementen zu demonstrieren, ohne den Fokus auf den eigentlichen Inhalt zu legen. Es hilft Designern und Entwicklern, Layout, Typografie und allgemeine Designästhetik in den frühen Phasen eines Projekts zu beurteilen.
|
||||
|
||||
3. Wie entsteht Lorem Ipsum?
|
||||
|
||||
>Lorem Ipsum wird normalerweise aus einer verschlüsselten Version von Ciceros Originaltext generiert. Im Internet sind verschiedene Lorem-Ipsum-Generatoren verfügbar, die unterschiedliche Längen und Stile von Lorem-Ipsum-Texten erzeugen.
|
||||
|
|
|
|||
|
|
@ -7,13 +7,16 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -43,3 +46,7 @@ body {
|
|||
.description {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue