content update

This commit is contained in:
Konstantin 2024-03-18 17:36:00 +01:00
parent cbd748459c
commit dee2d33a36
12 changed files with 144 additions and 94 deletions

View file

@ -5,22 +5,27 @@
{% block body_class %}template-blogindexpage{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<section class="flex flex-col items-center justify-center h-full mx-4">
<h1>{{ page.title }}</h1>
<div class="intro">{{ page.intro|richtext }}</div>
<div class="intro">{{ page.intro|richtext }}</div>
</section>
{% for post in blogpages %}
{% with post=post.specific %}
<h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
<section class="flex flex-col h-full mx-4">
{% for post in blogpages %}
{% with post=post.specific %}
<article class="w-full flex flex-col items-center">
<h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
<!-- Add this: -->
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image fill-160x100 %}{% endif %}
{% endwith %}
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image width-400 class="blog" %}{% endif %}
{% endwith %}
<p>{{ post.intro }}</p>
{{ post.body }}
{% endwith %}
{% endfor %}
<p>{{ post.intro }}</p>
</article>
{% endwith %}
{% endfor %}
</section>
{% endblock %}

View file

@ -5,50 +5,67 @@
{% block body_class %}template-blogpage{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p>
<section class="flex flex-col items-center justify-center h-full mx-4">
<article class="mb-16">
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p>
{% with authors=page.authors.all %}
{% if authors %}
<h3>Posted by:</h3>
<ul>
{% for author in authors %}
<li style="display: inline">
{% image author.author_image fill-40x60 style="vertical-align: middle" %}
{{ author.name }}
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% with authors=page.authors.all %}
{% if authors %}
<h3>Posted by:</h3>
<ul>
{% for author in authors %}
<li style="display: inline">
<div class="group block flex-shrink-0">
<div class="flex items-center">
<div>
{% image author.author_image fill-64x64 class="inline-block h-14 w-14 rounded-full" %}
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900"> {{ author.name }}</p>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<div class="intro">{{ page.intro }}</div>
<div class="intro">{{ page.intro }}</div>
{{ page.body }}
<div class="blog-content">
{{ page.body }}
<div class="flex">
{% for item in page.gallery_images.all %}
<div class="m-4">
{% image item.image fill-320x240 %}
<p>{{ item.caption }}</p>
</div>
{% endfor %}
</div>
<p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
{% with tags=page.tags.all %}
{% if tags %}
<div class="tags">
<h3>Tags</h3>
<ul>
{% for tag in tags %}
<li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
<div class="flex">
{% for item in page.gallery_images.all %}
<div class="m-4">
{% image item.image fill-320x240 %}
<p>{{ item.caption }}</p>
</div>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endwith %}
{% with tags=page.tags.all %}
{% if tags %}
<div class="tags">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
</article>
<nav class="w-full">
<a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
</nav>
</section>
{% endblock %}

View file

@ -4,16 +4,20 @@
{% block body_class %}{% endblock %}
{% block content %}
<section class="flex flex-col items-center justify-center h-full">
<h1>{{ page.title }}</h1>
{% image page.image fill-480x320 %}
<p>{{ page.hero_text }}</p>
{% if page.hero_cta_link %}
<a href="{% pageurl page.hero_cta_link %}">
{% firstof page.hero_cta page.hero_cta_link.title %}
</a>
{% endif %}
<section class="flex flex-col items-center justify-center h-full mx-4">
<div class="mx-auto max-w-3xl text-base leading-7">
<h1>{{ page.title }}</h1>
{% image page.image fill-480x320 %}
<p>{{ page.hero_text }}</p>
{% if page.hero_cta_link %}
<a href="{% pageurl page.hero_cta_link %}">
{% firstof page.hero_cta page.hero_cta_link.title %}
</a>
{% endif %}
</div>
</section>
{{ page.body|richtext }}
<div class="w-full px-2 lg:px-4">
{{ page.body|richtext }}
</div>
{% endblock content %}

View file

@ -41,15 +41,15 @@
<body class="flex h-full bg-zinc-50 dark:bg-black {% block body_class %}{% endblock %}">
<div class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl lg:px-8">
<div class="flex w-full max-w-7xl px-0 md:px-4 lg:px-8">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
</div>
</div>
<div class="relative flex w-full">
<div class="relative w-full sm:px-8">
{% include "includes/header.html" %}
<main id="main" class="flex w-full">
<main id="main" class="max-w-7xl px-0 md:px-4 lg:px-8">
{% block content %}{% endblock %}
</main>

View file

@ -1,24 +1,25 @@
{% load navigation_tags %}
<footer>
<p>Hello 👋</p>
<footer class="flex flex-col items-center w-full max-w-7xl px-0 md:px-4 lg:px-8">
<p>Created in <span class="emoji">🇪🇺</span> by <a href="https://social.headbright.eu/@konstantin">Konstantin</a></p>
{% with linkedin_url=settings.base.NavigationSettings.linkedin_url github_url=settings.base.NavigationSettings.github_url mastodon_url=settings.base.NavigationSettings.mastodon_url %}
{% if linkedin_url or github_url or mastodon_url %}
<p>
Follow me on:
{% if github_url %}
<a href="{{ github_url }}">GitHub</a>
{% endif %}
{% if linkedin_url %}
<a href="{{ linkedin_url }}">Twitter</a>
{% endif %}
{% if mastodon_url %}
<a href="{{ mastodon_url }}">Mastodon</a>
{% endif %}
</p>
{% endif %}
{% endwith %}
<nav>
{% with linkedin_url=settings.base.NavigationSettings.linkedin_url github_url=settings.base.NavigationSettings.github_url mastodon_url=settings.base.NavigationSettings.mastodon_url %}
{% if linkedin_url or github_url or mastodon_url %}
<ul class="flex space-x-8">
{% if mastodon_url %}
<li><a href="{{ mastodon_url }}"><span class="emoji">🐘</span> Mastodon</a></li>
{% endif %}
{% if github_url %}
<li><a href="{{ github_url }}"><span class="emoji">🔬</span> GitHub</a></li>
{% endif %}
{% if linkedin_url %}
<li><a href="{{ linkedin_url }}"><span class="emoji">💼</span> LinkedIn</a></li>
{% endif %}
</ul>
{% endif %}
{% endwith %}
</nav>
{% get_footer_text %}
</footer>

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 942 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 942 B

Binary file not shown.

View file

@ -2,10 +2,21 @@
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: NotoEmoji;
font-weight: 400;
src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
}
@layer components {
p > a,
nav > a,
li > a {
.emoji {
font-family: NotoEmoji;
}
a {
@apply border-klavender border-b-2;
}
@ -29,6 +40,16 @@
@apply my-2 mb-3 text-lg leading-relaxed;
}
img.blog {
@apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
}
.blog-content img {
@apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
}
@media print {
h1 {
@apply mt-6 mb-4 text-xl;
@ -56,14 +77,14 @@
}
}
.tags {
@apply flex flex-col;
}
.tags ul {
@apply flex space-x-4;
@apply flex space-x-4 text-center text-lg;
}
.tags a {
@apply border-b-0 inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
}
.tags li {
@apply flex-1 p-4 inline-flex items-center rounded-md bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
}
.tags a {
@apply border-b-0 w-full;
}

View file

@ -78,7 +78,9 @@ module.exports = {
light: "#FBDAE4",
DEFAULT: "#EF7799",
dark: "#EF7799",
}
},
kbglight: "#FFFFF8",
kbgdark: "#333332"
},
},
plugins: [