Add tailwindcss
This commit is contained in:
parent
24123c99cf
commit
9a5489c170
17 changed files with 1833 additions and 102 deletions
|
|
@ -9,3 +9,7 @@ iamkonstantin.eu
|
|||
|
||||
reverse_proxy :8000
|
||||
```
|
||||
|
||||
|
||||
Tailwind: https://django-tailwind.readthedocs.io/en/latest/index.html
|
||||
|
||||
|
|
|
|||
|
|
@ -26,25 +26,29 @@
|
|||
|
||||
{{ page.body }}
|
||||
|
||||
{% for item in page.gallery_images.all %}
|
||||
<div style="float: inline-start; margin: 10px">
|
||||
{% image item.image fill-320x240 %}
|
||||
<p>{{ item.caption }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<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>
|
||||
{% for tag in tags %}
|
||||
<a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if tags %}
|
||||
<div class="tags">
|
||||
<h3>Tags</h3>
|
||||
<ul>
|
||||
{% for tag in tags %}
|
||||
<li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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",
|
||||
]
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -6,44 +6,59 @@
|
|||
{% block title %}Search{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Search</h1>
|
||||
<h1>Search</h1>
|
||||
|
||||
<form action="{% url 'search' %}" method="get">
|
||||
<input type="text" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
|
||||
<input type="submit" value="Search" class="button">
|
||||
</form>
|
||||
<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>
|
||||
|
||||
{% 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: #}
|
||||
<ol>
|
||||
{% for result in search_results %}
|
||||
<li>
|
||||
<h4><a href="{% pageurl result %}">{{ result }}</a></h4>
|
||||
{% if result.search_description %}
|
||||
{{ result.search_description }}
|
||||
</form>
|
||||
|
||||
{% 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>
|
||||
|
||||
{# 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.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 }}&page={{ search_results.previous_page_number }}">Previous</a>
|
||||
{% endif %}
|
||||
|
||||
{% if search_results.has_previous %}
|
||||
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&page={{ search_results.previous_page_number }}">Previous</a>
|
||||
{% endif %}
|
||||
{% if search_results.has_next %}
|
||||
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&page={{ search_results.next_page_number }}">Next</a>
|
||||
{% endif %}
|
||||
|
||||
{% if search_results.has_next %}
|
||||
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&page={{ search_results.next_page_number }}">Next</a>
|
||||
{% endif %}
|
||||
|
||||
{% elif search_query %}
|
||||
No results found
|
||||
{% endif %}
|
||||
{% elif search_query %}
|
||||
No results found
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
0
theme/__init__.py
Normal file
0
theme/__init__.py
Normal file
5
theme/apps.py
Normal file
5
theme/apps.py
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class ThemeConfig(AppConfig):
|
||||
name = 'theme'
|
||||
1
theme/static_src/.gitignore
vendored
Normal file
1
theme/static_src/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
1533
theme/static_src/package-lock.json
generated
Normal file
1533
theme/static_src/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
28
theme/static_src/package.json
Normal file
28
theme/static_src/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
7
theme/static_src/postcss.config.js
Normal file
7
theme/static_src/postcss.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-import": {},
|
||||
"postcss-simple-vars": {},
|
||||
"postcss-nested": {}
|
||||
},
|
||||
}
|
||||
69
theme/static_src/src/styles.css
Normal file
69
theme/static_src/src/styles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
95
theme/static_src/tailwind.config.js
Normal file
95
theme/static_src/tailwind.config.js
Normal file
|
|
@ -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'),
|
||||
],
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue