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}'
build:
@docker build -t code.headbright.be/konstantin/iamkonstantin:1.0.10 .
@docker build -t code.headbright.be/konstantin/iamkonstantin:1.0.11 .
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 %}
<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">
<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>
@ -16,7 +16,7 @@
{% for post in blogpages %}
{% with post=post.specific %}
<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 %}
{% 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 %}
@ -43,7 +43,7 @@
{% endwith %}
</div>
<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 %}">
<span class="absolute inset-0"></span>
{{ post.title }}

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

@ -5,14 +5,14 @@
{% block body_class %}template-blogpage{% endblock %}
{% block content %}
<section class="flex flex-col items-center justify-center h-full mx-4">
<article class="mb-16">
<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 px-2 lg:px-4">
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p>
{% with authors=page.authors.all %}
{% if authors %}
<h3>Posted by:</h3>
<h3 class="sr-only">Posted by:</h3>
<ul>
{% for author in authors %}
<li style="display: inline">
@ -22,7 +22,7 @@
{% 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>
<p class="text-sm font-medium"> {{ author.name }}</p>
</div>
</div>
</div>
@ -32,7 +32,7 @@
{% endif %}
{% endwith %}
<div class="intro">{{ page.intro }}</div>
<div class="intro mt-6">{{ page.intro }}</div>
<div class="blog-content">
{{ page.body }}
@ -62,7 +62,7 @@
</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>
</nav>

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

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

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

@ -4,10 +4,10 @@
{% block body_class %}{% endblock %}
{% 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">
<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>
{% if page.hero_cta_link %}
<a href="{% pageurl page.hero_cta_link %}">
@ -17,7 +17,10 @@
</div>
</section>
<div class="w-full px-2 lg:px-4">
{{ page.body|richtext }}
</div>
<section class="max-w-7xl px-0 md:px-4 lg:px-8">
<div class="w-full px-2 lg:px-4">
{{ page.body|richtext }}
</div>
</section>
{% endblock content %}

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

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

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

@ -6,59 +6,72 @@
{% block title %}Search{% endblock %}
{% 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">
<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>
<div class="mt-2">
<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"
id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
</div>
<form action="{% url 'search' %}" method="get" class="container">
<div class="flex flex-col space-y-4">
<label for="query" class="sr-only block text-sm font-medium leading-6">Search</label>
<div class="mt-2">
<input type="text" placeholder="Type search keywords..."
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 %}>
</div>
<div>
<input type="submit" class="primary-button" value="Search">
</div>
</div>
</form>
<div>
<input type="submit" class="primary-button" value="Search">
</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: #}
<p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}, {{ search_results.paginator.count }}
result{{ search_results.paginator.count|pluralize }} found.</p>
{# Replace the <ul> HTML element with the <ol> html element: #}
<ol>
{% 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: #}
<ol>
{% 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>
{# Improve pagination by adding: #}
{% if search_results.paginator.num_pages > 1 %}
<p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }},
showing {{ search_results|length }} result{{ search_results|pluralize }} out
of {{ search_results.paginator.count }}</p>
{% endif %}
{# Improve pagination by adding: #}
{% if search_results.paginator.num_pages > 1 %}
<p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }},
showing {{ search_results|length }} result{{ search_results|pluralize }} out
of {{ search_results.paginator.count }}</p>
{% endif %}
{% if search_results.has_previous %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a>
{% endif %}
{% if search_results.has_previous %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a>
{% endif %}
{% if search_results.has_next %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a>
{% endif %}
{% if search_results.has_next %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a>
{% endif %}
{% elif search_query %}
No results found
{% endif %}
</div>
</section>
{% elif search_query %}
No results found
{% endif %}
{% endblock %}

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

@ -4,16 +4,20 @@
@layer base {
@font-face {
font-family: NotoEmoji;
font-weight: 400;
src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
font-family: NotoEmoji;
font-weight: 400;
src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
}
@layer components {
section {
@apply my-8;
}
.emoji {
font-family: NotoEmoji;
font-family: NotoEmoji;
}
a {
@ -21,19 +25,19 @@
}
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 {
@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 {
@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 {
@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 {
@ -49,7 +53,6 @@
}
@media print {
h1 {
@apply mt-6 mb-4 text-xl;
@ -73,7 +76,7 @@
}
.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;
}
.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;
}
.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;
}
.tags a {
@apply border-b-0 w-full;
}
.tags a {
@apply border-b-0 w-full;
}
.blog-pages a {
@apply border-b-0;
}
.blog-pages a {
@apply border-b-0;
}