Fix styling of page preview

digitalfabrik · Feb 6, 2025 · 843810e · 843810e
1 parent 97bdad8
commit 843810e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/integreat_cms/cms/templates/pages/_page_preview_overlay.html b/integreat_cms/cms/templates/pages/_page_preview_overlay.html
@@ -8,7 +8,7 @@
                     class="float-right m-4 p-1 rounded-full hover:bg-blue-500 hover:text-white">
                 <i icon-name="x-circle" class="h-8 w-8"></i>
             </button>
-            <div class="p-12 {% if language.slug == 'zh' %} font-content-sc {% elif right_to_left %} font-content-rtl text-right {% else %} font-content {% endif %}">
+            <div class="page-preview p-12 {% if language.slug == 'zh' %} font-content-sc {% elif right_to_left %} font-content-rtl text-right {% else %} font-content {% endif %}">
                 <h1 id="preview-content-header"
                     class="pt-4 mb-4 text-center font-bold text-[32px] font-default">
                 </h1>

diff --git a/integreat_cms/release_notes/current/unreleased/3072.yml b/integreat_cms/release_notes/current/unreleased/3072.yml
@@ -0,0 +1,2 @@
+en: Fix styling of page preview
+de: Korrigiere Styling der Seitenvorschau
diff --git a/integreat_cms/static/src/css/page_preview.css b/integreat_cms/static/src/css/page_preview.css
@@ -0,0 +1,32 @@
+.page-preview {
+    ul {
+        list-style: disc;
+        margin: 10px 0 10px 0;
+        padding-left: 50px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-weight: bold;
+        margin: 10px 0 10px 0;
+    }
+
+    strong {
+        margin: 10px 0 10px 0;
+    }
+
+    a {
+        color: #0000ff;
+        text-decoration: underline;
+    }
+
+    img {
+        display: inline;
+    }
+
+    p {
+        margin-bottom: 10px;
+    }
+}
diff --git a/integreat_cms/static/src/css/style.scss b/integreat_cms/static/src/css/style.scss
@@ -10,6 +10,7 @@ $fp-4x3-path: "flagpack-dart-sass/flags/4x3/";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "./contact_card.css";
+@import "./page_preview.css";
 
 @layer utilities {
     // Tailwind class: "font-default"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		en: Fix styling of page preview
		de: Korrigiere Styling der Seitenvorschau