feat: better text flow, adapted from fds

okfde · krmax44 · Mar 24, 2021 · Mar 18, 2021 · Mar 19, 2021 · Mar 19, 2021
commit 45db94598d042ce993945073c562c50bbb8142ee
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="text-base">
+<html lang="de" class="text-base">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
@@ -9,12 +9,14 @@
 }
 
 .prose {
-  @apply max-w-none;
+  @apply max-w-none white break-auto text-justify;
+  hyphens: auto;
 
   a {
     @apply text-lightblue no-underline;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       @apply underline;
     }
   }
@@ -24,11 +26,17 @@
   }
 
   &.prose-dark {
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       @apply text-light;
     }
 
-    p, a {
+    p,
+    a {
       @apply text-gray-400;
     }
 
@@ -46,4 +54,4 @@
 .fade-leave-to,
 .fade-enter-from {
   opacity: 0;
-}
+}
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -2,7 +2,7 @@
   <div class="container flex flex-col items-center">
     <h1 class="headline">Transparenzranking</h1>
 
-    <div class="prose prose-lg">
+    <div class="prose prose-lg text-center">
       <p class="max-w-screen-lg w-full text-center">
         Jede Person hat das Recht auf staatliche Informationen - doch die
         Umsetzung dieses Rechts unterscheidet sich innerhalb Deutschlands. Wir

diff --git a/src/pages/state.vue b/src/pages/state.vue
@@ -7,7 +7,7 @@
           {{ law }} seit {{ state.year }}.
           <a
             :href="`https://fragdenstaat.de/zustaendigkeit/${state.fds.slug}/`"
-            class="link"
+            class="link whitespace-nowrap"
           >
             Anfrage stellen
           </a>