Add tailwindcss

README.md

@@ -9,3 +9,7 @@ iamkonstantin.eu
 
 reverse_proxy :8000
 ```
+
+
+Tailwind: https://django-tailwind.readthedocs.io/en/latest/index.html
+

blog/templates/blog/blog_page.html

@@ -26,25 +26,29 @@
 
     {{ page.body }}
 
-    {% for item in page.gallery_images.all %}
+    <div class="flex">
-        <div style="float: inline-start; margin: 10px">
+        {% for item in page.gallery_images.all %}
-            {% image item.image fill-320x240 %}
+            <div class="m-4">
-            <p>{{ item.caption }}</p>
+                {% image item.image fill-320x240 %}
-        </div>
+                <p>{{ item.caption }}</p>
-    {% endfor %}
+            </div>
+        {% endfor %}
+    </div>
 
     <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
 
     {% with tags=page.tags.all %}
-    {% if tags %}
+        {% if tags %}
-        <div class="tags">
+            <div class="tags">
-            <h3>Tags</h3>
+                <h3>Tags</h3>
-            {% for tag in tags %}
+                <ul>
-                <a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
+                    {% for tag in tags %}
-            {% endfor %}
+                        <li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
-        </div>
+                    {% endfor %}
-    {% endif %}
+                </ul>
+            </div>
+        {% endif %}
 
-{% endwith %}
+    {% endwith %}
 
 {% endblock %}

home/templates/home/home_page.html

@@ -1,10 +1,10 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags wagtailimages_tags %}
 
-{% block body_class %}template-homepage{% endblock %}
+{% block body_class %}{% endblock %}
 
 {% block content %}
-    <div>
+    <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>
@@ -13,7 +13,7 @@
                 {% firstof page.hero_cta page.hero_cta_link.title %}
             </a>
         {% endif %}
-    </div>
+    </section>
 
   {{ page.body|richtext }}
 {% endblock content %}

iamkonstantin_web/settings/base.py

@@ -50,6 +50,9 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "tailwind",
+    "theme",
+    "django_browser_reload"
 ]
 
 MIDDLEWARE = [
@@ -61,7 +64,8 @@ MIDDLEWARE = [
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "django.middleware.security.SecurityMiddleware",
     "wagtail.contrib.redirects.middleware.RedirectMiddleware",
-    "blog.middleware.BlogRedirectMiddleware"
+    "blog.middleware.BlogRedirectMiddleware",
+    "django_browser_reload.middleware.BrowserReloadMiddleware"
 ]
 
 ROOT_URLCONF = "iamkonstantin_web.urls"
@@ -198,3 +202,9 @@ WAGTAIL_CODE_BLOCK_LANGUAGES = (
 )
 
 WAGTAIL_CODE_BLOCK_THEME = 'twilight'
+
+TAILWIND_APP_NAME = 'theme'
+
+INTERNAL_IPS = [
+    "127.0.0.1",
+]

iamkonstantin_web/static/css/iamkonstantin_web.css

@@ -1,26 +1,3 @@
-*,
-::before,
-::after {
-    box-sizing: border-box;
-}
-
-html {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-body {
-    min-height: 100vh;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 10px;
-    display: grid;
-    gap: 3vw;
-    grid-template-rows: min-content 1fr min-content;
-}
-
-a {
-    color: currentColor;
-}
 
 footer {
     border-top: 2px dotted;
@@ -31,10 +8,6 @@ header {
     border-bottom: 2px dotted;
 }
 
-.template-homepage main {
-    text-align: center;
-}
-
 .skip-link {
     position: absolute;
     top: -30px;
@@ -43,21 +16,3 @@ header {
 .skip-link:focus-visible {
     top: 5px;
 }
-
-.page-form label {
-  display: block;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.page-form :is(textarea, input, select) {
-  width: 100%;
-  max-width: 500px;
-  min-height: 40px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-.page-form .helptext {
-  font-style: italic;
-}

iamkonstantin_web/templates/base.html

@@ -1,4 +1,4 @@
-{% load static wagtailcore_tags %}
+{% load static wagtailcore_tags tailwind_tags %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -16,7 +16,9 @@
     {% if page.search_description %}
         <meta name="description" content="{{ page.search_description }}"/>
     {% endif %}
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {% tailwind_css %}
 
     {# Force all links in the live preview panel to be opened in a new tab #}
     {% if request.in_preview_panel %}
@@ -37,7 +39,7 @@
     {% endblock %}
 </head>
 
-<body class="{% block body_class %}{% endblock %}">
+<body class="bg-gray-50 font-serif leading-normal tracking-normal {% block body_class %}{% endblock %}">
 
 {% include "includes/header.html" %}
 

iamkonstantin_web/urls.py

@@ -23,6 +23,7 @@ if settings.DEBUG:
     # Serve static and media files from development server
     urlpatterns += staticfiles_urlpatterns()
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    urlpatterns += path("__reload__/", include("django_browser_reload.urls")),
 
 urlpatterns = urlpatterns + [
     # For anything not caught by a more specific rule above, hand over to

requirements.txt

@@ -2,3 +2,5 @@ Django>=4.2,<5.1
 wagtail>=6.0,<6.1
 whitenoise>=6.6,<7.0
 wagtailcodeblock>=1.29.0.2,<2.0
+django-tailwind>=3.8.0,<4.0
+django-browser-reload>=1.12

search/templates/search/search.html

@@ -6,44 +6,59 @@
 {% block title %}Search{% endblock %}
 
 {% block content %}
-<h1>Search</h1>
+    <h1>Search</h1>
 
-<form action="{% url 'search' %}" method="get">
+    <form action="{% url 'search' %}" method="get" class="container mx-auto sm:px-6 lg:px-8">
-    <input type="text" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
+        <div class="flex flex-col space-y-4">
-    <input type="submit" value="Search" class="button">
+            <label for="query" class="sr-only block text-sm font-medium leading-6 text-gray-900">Search</label>
-</form>
+            <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>
 
-{% if search_results %}
+            <div>
+                <input type="submit" class="primary-button" value="Search">
+            </div>
+        </div>
 
-{# 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: #}
+    </form>
-<ol>
+
-    {% for result in search_results %}
+    {% if search_results %}
-    <li>
+
-        <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
+        {# Add this paragraph to display the details of results found: #}
-        {% if result.search_description %}
+        <p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}, {{ search_results.paginator.count }}
-        {{ result.search_description }}
+            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>
+
+        {# 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 %}
-    </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 }}, showing {{ search_results|length }} result{{ search_results|pluralize }} out of {{ search_results.paginator.count }}</p>
+        {% endif %}
-{% 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 %}
-
-{% elif search_query %}
-No results found
-{% endif %}
 {% endblock %}

theme/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ThemeConfig(AppConfig):
+    name = 'theme'

theme/static_src/.gitignore

@@ -0,0 +1 @@
+node_modules

theme/static_src/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "theme",
+  "version": "3.8.0",
+  "description": "",
+  "scripts": {
+    "start": "npm run dev",
+    "build": "npm run build:clean && npm run build:tailwind",
+    "build:clean": "rimraf ../static/css/dist",
+    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
+    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
+    "tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.4.32",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.1",
+    "postcss-simple-vars": "^7.0.1",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.0"
+  }
+}

theme/static_src/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "postcss-simple-vars": {},
+    "postcss-nested": {}
+  },
+}

theme/static_src/src/styles.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    p > a,
+    nav > a,
+    li > a {
+        @apply border-klavender border-b-2;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    p {
+        @apply my-2 mb-3 text-lg leading-relaxed;
+    }
+
+    @media print {
+        h1 {
+            @apply mt-6 mb-4 text-xl;
+        }
+
+        h2 {
+            @apply mt-4 mb-2 text-base;
+        }
+
+        h3 {
+            @apply text-base;
+        }
+
+        p {
+            @apply text-sm my-1;
+        }
+
+        .ppb {
+            page-break-before: always;
+        }
+    }
+
+    .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;
+    }
+}
+
+.tags {
+    @apply flex flex-col;
+}
+
+.tags ul {
+    @apply flex space-x-4;
+}
+
+.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;
+}

theme/static_src/tailwind.config.js

@@ -0,0 +1,95 @@
+/**
+ * This is a minimal config.
+ *
+ * If you need the full config, get it from here:
+ * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
+ */
+
+module.exports = {
+    content: [
+        /**
+         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
+         */
+
+        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
+        '../templates/**/*.html',
+
+        /*
+         * Main templates directory of the project (BASE_DIR/templates).
+         * Adjust the following line to match your project structure.
+         */
+        '../../templates/**/*.html',
+
+        /*
+         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
+         * Adjust the following line to match your project structure.
+         */
+        '../../**/templates/**/*.html',
+
+        /**
+         * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
+         * patterns match your project structure.
+         */
+        /* JS 1: Ignore any JavaScript in node_modules folder. */
+        // '!../../**/node_modules',
+        /* JS 2: Process all JavaScript files in the project. */
+        // '../../**/*.js',
+
+        /**
+         * Python: If you use Tailwind CSS classes in Python, uncomment the following line
+         * and make sure the pattern below matches your project structure.
+         */
+        // '../../**/*.py'
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    light: "#b3e6dd",
+                    DEFAULT: "#8dd9cc",
+                    dark: "#57c7b4",
+                },
+                secondary: {
+                    light: "#083D77",
+                    DEFAULT: "#083D77",
+                    dark: "#083D77",
+                },
+                kyellow: {
+                    light: "#FFED66",
+                    DEFAULT: "#FFED66",
+                    dark: "#FFED66",
+                },
+                klavender: {
+                    light: "#8E4162",
+                    DEFAULT: "#8E4162",
+                    dark: "#8E4162",
+                },
+                kred: {
+                    light: "#FF5E5B",
+                    DEFAULT: "#FF5E5B",
+                    dark: "#FF5E5B",
+                },
+                kindigo: {
+                    light: "#083D77",
+                    DEFAULT: "#083D77",
+                    dark: "#083D77",
+                },
+                kpink: {
+                    light: "#FBDAE4",
+                    DEFAULT: "#EF7799",
+                    dark: "#EF7799",
+                }
+            },
+        },
+        plugins: [
+            /**
+             * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
+             * for forms. If you don't like it or have own styling for forms,
+             * comment the line below to disable '@tailwindcss/forms'.
+             */
+            require('@tailwindcss/forms'),
+            require('@tailwindcss/typography'),
+            require('@tailwindcss/aspect-ratio'),
+        ],
+    },
+}