Update style for newsletter

This commit is contained in:
2024-11-05 22:45:33 +11:00
parent 06e7bbf6e6
commit ff262f1f02
5 changed files with 105 additions and 86 deletions
BIN
View File
Binary file not shown.
+1 -1
View File
@@ -26,7 +26,7 @@ case "$1" in
docker-compose build
;;
"shell")
docker-compose exec web uv run manage.py shell
docker-compose exec web bash
;;
"migrate")
docker-compose exec web uv run manage.py makemigrations
+3 -70
View File
@@ -1,3 +1,4 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
@@ -6,79 +7,11 @@
<title>{{ link.alias }}</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-typography/0.4.0/typography.min.css" rel="stylesheet">
<style>
.prose {
color: #374151;
max-width: 65ch;
}
.prose p {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose a {
color: #2563eb;
text-decoration: underline;
}
.prose strong {
font-weight: 600;
}
.prose ul {
margin-top: 1.25em;
margin-bottom: 1.25em;
list-style-type: disc;
padding-left: 1.625em;
}
.prose ol {
margin-top: 1.25em;
margin-bottom: 1.25em;
list-style-type: decimal;
padding-left: 1.625em;
}
.prose h1 {
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.prose h2 {
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
.prose h3 {
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.prose img {
margin-top: 2em;
margin-bottom: 2em;
}
.prose code {
color: #111827;
font-weight: 600;
}
.prose pre {
color: #e5e7eb;
background-color: #1f2937;
overflow-x: auto;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-right: 1.1428571em;
padding-bottom: 0.8571429em;
padding-left: 1.1428571em;
}
</style>
<link rel="stylesheet" href="{% static 'css/markdown.css' %}">
</head>
<body class="bg-gray-100">
<div class="max-w-6xl mx-auto mt-10 p-4 sm:px-6 bg-white shadow-md rounded-lg">
<div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none">
<div class="prose">
{{ rendered_text|safe }}
</div>
</div>
+3 -15
View File
@@ -1,22 +1,10 @@
{% extends 'base.html' %}
{% load i18n %}
{% load markdown_extras %}
{% load static %}
{% block extra_css %}
<style>
/* Additional custom styles if needed */
.prose pre {
background-color: #1a202c;
color: #e5e7eb;
}
.prose :not(pre) > code {
background-color: #f3f4f6;
padding: 0.2em 0.4em;
border-radius: 0.375rem;
font-size: 0.875em;
}
</style>
<link rel="stylesheet" href="{% static 'css/markdown.css' %}">
{% endblock %}
{% block content %}
@@ -61,7 +49,7 @@
</div>
<!-- Content with improved markdown styling -->
<article class="prose prose-slate lg:prose-lg xl:prose-xl max-w-none">
<article class="prose">
{{ newsletter.content|markdown|safe }}
</article>
</div>
+98
View File
@@ -0,0 +1,98 @@
.prose {
color: #374151;
max-width: none;
}
.prose p {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose a {
color: #2563eb;
text-decoration: underline;
}
.prose strong {
font-weight: 600;
}
.prose ul {
margin-top: 1.25em;
margin-bottom: 1.25em;
list-style-type: disc;
padding-left: 1.625em;
}
.prose ol {
margin-top: 1.25em;
margin-bottom: 1.25em;
list-style-type: decimal;
padding-left: 1.625em;
}
.prose h1 {
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
font-weight: 600;
}
.prose h2 {
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
font-weight: 600;
}
.prose h3 {
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
font-weight: 600;
}
.prose img {
margin-top: 2em;
margin-bottom: 2em;
}
.prose code {
color: #111827;
font-weight: 600;
background-color: #f3f4f6;
padding: 0.2em 0.4em;
border-radius: 0.375rem;
font-size: 0.875em;
}
.prose pre {
color: #e5e7eb;
background-color: #1f2937;
overflow-x: auto;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding: 1em;
}
.prose pre code {
background-color: transparent;
color: inherit;
padding: 0;
}
.prose blockquote {
font-style: italic;
border-left: 4px solid #e5e7eb;
padding-left: 1em;
margin: 1.25em 0;
}
.prose table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
}
.prose table th {
background-color: #f3f4f6;
font-weight: 600;
text-align: left;
padding: 0.5em;
border: 1px solid #e5e7eb;
}
.prose table td {
padding: 0.5em;
border: 1px solid #e5e7eb;
}