konstantin/iamkonstantin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

minor layout fixes

Browse source
This commit is contained in:
Konstantin 2024-03-19 21:39:18 +01:00
parent 30e8f29d1f
commit 44969cf4dd
8 changed files with 115 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Makefile
View file

@ -4,7 +4,7 @@ help:
@perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' @perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
build: build:
@docker build -t code.headbright.be/konstantin/iamkonstantin:1.0.10 . @docker build -t code.headbright.be/konstantin/iamkonstantin:1.0.11 .
publish: publish:
@docker push code.headbright.be/konstantin/iamkonstantin:1.0.10 @docker push code.headbright.be/konstantin/iamkonstantin:1.0.11

6
blog/templates/blog/blog_index_page.html
View file

@ -7,7 +7,7 @@
{% block content %} {% block content %}
<section class="py-24 sm:py-32 mx-4"> <section class="py-24 sm:py-32 mx-4">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl"> <div class="mx-auto max-w-2xl lg:max-w-4xl">
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h2> <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h2>
<div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div> <div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>
@ -16,7 +16,7 @@
{% for post in blogpages %} {% for post in blogpages %}
{% with post=post.specific %} {% with post=post.specific %}
<article class="relative isolate flex flex-col gap-8 lg:flex-row"> <article class="relative isolate flex flex-col gap-8 lg:flex-row">
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"> <div class="relative aspect-[16/9] lg:w-64 lg:shrink-0">
{% with post.main_image as main_image %} {% with post.main_image as main_image %}
{% if main_image %} {% if main_image %}
{% image main_image width-400 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %} {% image main_image width-400 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %}
@ -43,7 +43,7 @@
{% endwith %} {% endwith %}
</div> </div>
<div class="group relative max-w-xl"> <div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600"> <h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-klavender">
<a href="{% pageurl post %}"> <a href="{% pageurl post %}">
<span class="absolute inset-0"></span> <span class="absolute inset-0"></span>
{{ post.title }} {{ post.title }}

12
blog/templates/blog/blog_page.html
View file

@ -5,14 +5,14 @@
{% block body_class %}template-blogpage{% endblock %} {% block body_class %}template-blogpage{% endblock %}
{% block content %} {% block content %}
<section class="flex flex-col items-center justify-center h-full mx-4"> <section class="flex flex-col items-center justify-center h-full max-w-7xl px-0 md:px-4 lg:px-8">
<article class="mb-16"> <article class="mb-16 px-2 lg:px-4">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p> <p class="meta">{{ page.date }}</p>
{% with authors=page.authors.all %} {% with authors=page.authors.all %}
{% if authors %} {% if authors %}
<h3>Posted by:</h3> <h3 class="sr-only">Posted by:</h3>
<ul> <ul>
{% for author in authors %} {% for author in authors %}
<li style="display: inline"> <li style="display: inline">
@ -22,7 +22,7 @@
{% image author.author_image fill-64x64 class="inline-block h-14 w-14 rounded-full" %} {% image author.author_image fill-64x64 class="inline-block h-14 w-14 rounded-full" %}
</div> </div>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900"> {{ author.name }}</p> <p class="text-sm font-medium"> {{ author.name }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@
{% endif %} {% endif %}
{% endwith %} {% endwith %}
<div class="intro">{{ page.intro }}</div> <div class="intro mt-6">{{ page.intro }}</div>
<div class="blog-content"> <div class="blog-content">
{{ page.body }} {{ page.body }}
@ -62,7 +62,7 @@
</article> </article>
<nav class="w-full"> <nav class="w-full px-2 lg:px-4">
<a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a> <a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
</nav> </nav>

26
blog/templates/blog/blog_tag_index_page.html
View file

@ -3,19 +3,23 @@
{% block content %} {% block content %}
{% if request.GET.tag %} <section class="py-24 sm:py-32 mx-4">
<h4>Showing pages tagged "{{ request.GET.tag }}"</h4> <div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
{% endif %} {% if request.GET.tag %}
<h1>Showing pages tagged "{{ request.GET.tag }}"</h1>
{% endif %}
{% for blogpage in blogpages %} {% for blogpage in blogpages %}
<p> <p>
<strong><a href="{% pageurl blogpage %}">{{ blogpage.title }}</a></strong><br /> <strong><a href="{% pageurl blogpage %}">{{ blogpage.title }}</a></strong><br/>
<small>Revised: {{ blogpage.latest_revision_created_at }}</small><br /> <small>Revised: {{ blogpage.latest_revision_created_at }}</small><br/>
</p> </p>
{% empty %} {% empty %}
No pages found with that tag. No pages found with that tag.
{% endfor %} {% endfor %}
</div>
</section>
{% endblock %} {% endblock %}

13
home/templates/home/home_page.html
View file

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

3
iamkonstantin_web/static/css/iamkonstantin_web.css
View file

@ -2,7 +2,8 @@
.skip-link { .skip-link {
position: absolute; position: absolute;
top: -30px; top: -60px;
left: -200px;
} }
.skip-link:focus-visible { .skip-link:focus-visible {

99
search/templates/search/search.html
View file

@ -6,59 +6,72 @@
{% block title %}Search{% endblock %} {% block title %}Search{% endblock %}
{% block content %} {% block content %}
<h1>Search</h1> <section class="h-full max-w-7xl px-0 md:px-4 lg:px-8">
<div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
<h1>Search</h1>
<form action="{% url 'search' %}" method="get" class="container mx-auto sm:px-6 lg:px-8"> <form action="{% url 'search' %}" method="get" class="container">
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<label for="query" class="sr-only block text-sm font-medium leading-6 text-gray-900">Search</label> <label for="query" class="sr-only block text-sm font-medium leading-6">Search</label>
<div class="mt-2"> <div class="mt-2">
<input type="text" placeholder="Type search keywords..." <input type="text" placeholder="Type search keywords..."
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6"
id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}> id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
</div> </div>
<div>
<input type="submit" class="primary-button" value="Search">
</div>
</div>
</form>
<div>
<input type="submit" class="primary-button" value="Search">
</div>
</div> </div>
</section>
<section class="h-full max-w-7xl px-0 md:px-4 lg:px-8">
<div class="mx-auto max-w-7xl px-0 md:px-4 lg:px-8">
<h2 class="sr-only">Search results</h2>
</form> {% if search_results %}
{% if search_results %} {# Add this paragraph to display the details of results found: #}
<p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}
, {{ search_results.paginator.count }}
result{{ search_results.paginator.count|pluralize }} found.</p>
{# Add this paragraph to display the details of results found: #} {# Replace the <ul> HTML element with the <ol> html element: #}
<p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}, {{ search_results.paginator.count }} <ol>
result{{ search_results.paginator.count|pluralize }} found.</p> {% for result in search_results %}
<li>
<h4><a href="{% pageurl result %}">{{ result }}</a></h4>
{% if result.search_description %}
{{ result.search_description }}
{% endif %}
</li>
{% endfor %}
</ol>
{# Replace the <ul> HTML element with the <ol> html element: #} {# Improve pagination by adding: #}
<ol> {% if search_results.paginator.num_pages > 1 %}
{% for result in search_results %} <p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }},
<li> showing {{ search_results|length }} result{{ search_results|pluralize }} out
<h4><a href="{% pageurl result %}">{{ result }}</a></h4> of {{ search_results.paginator.count }}</p>
{% if result.search_description %} {% endif %}
{{ result.search_description }}
{% endif %}
</li>
{% endfor %}
</ol>
{# Improve pagination by adding: #} {% if search_results.has_previous %}
{% if search_results.paginator.num_pages > 1 %} <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a>
<p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }}, {% endif %}
showing {{ search_results|length }} result{{ search_results|pluralize }} out
of {{ search_results.paginator.count }}</p>
{% endif %}
{% if search_results.has_previous %} {% if search_results.has_next %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a> <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a>
{% endif %} {% endif %}
{% if search_results.has_next %} {% elif search_query %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a> No results found
{% endif %} {% endif %}
</div>
</section>
{% elif search_query %}
No results found
{% endif %}
{% endblock %} {% endblock %}

43
theme/static_src/src/styles.css
View file

@ -4,16 +4,20 @@
@layer base { @layer base {
@font-face { @font-face {
font-family: NotoEmoji; font-family: NotoEmoji;
font-weight: 400; font-weight: 400;
src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype"); src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
} }
} }
@layer components { @layer components {
section {
@apply my-8;
}
.emoji { .emoji {
font-family: NotoEmoji; font-family: NotoEmoji;
} }
a { a {
@ -21,19 +25,19 @@
} }
h1 { h1 {
@apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white; @apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-black dark:text-white;
} }
h2 { h2 {
@apply mt-6 mb-4 text-xl sm:text-3xl lg:text-3xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white; @apply mt-6 mb-4 text-xl sm:text-3xl lg:text-3xl leading-none font-extrabold tracking-tight text-black dark:text-white;
} }
h3 { h3 {
@apply mt-4 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white; @apply mt-4 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
} }
h4 { h4 {
@apply mt-2 mb-1 text-lg sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-gray-900 dark:text-white; @apply mt-2 mb-1 text-lg sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
} }
p { p {
@ -49,7 +53,6 @@
} }
@media print { @media print {
h1 { h1 {
@apply mt-6 mb-4 text-xl; @apply mt-6 mb-4 text-xl;
@ -73,7 +76,7 @@
} }
.primary-button { .primary-button {
@apply rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600; @apply rounded-full bg-klavender cursor-pointer px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
} }
} }
@ -81,14 +84,14 @@
@apply flex space-x-4 text-center text-sm; @apply flex space-x-4 text-center text-sm;
} }
.tags li { .tags li {
@apply flex-1 p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20; @apply flex-1 p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
} }
.tags a { .tags a {
@apply border-b-0 w-full; @apply border-b-0 w-full;
} }
.blog-pages a { .blog-pages a {
@apply border-b-0; @apply border-b-0;
} }