From 732554fac14af2c6d81a980e40ce029ab69058af Mon Sep 17 00:00:00 2001
From: Ludovic Mermod <ludovic.mermod@epfl.ch>
Date: Wed, 10 Jan 2024 18:07:58 +0100
Subject: [PATCH] feat: improve text section style

---
 app/src/pages/index.tsx     |  4 +--
 app/src/styles/globals.scss | 53 +++++++++++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index f83fb56..7c4faa8 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -20,9 +20,7 @@ export default function Home(
           <NewsCard news={n} />
         ))}
       </div>
-      <Markdown className="markdown">
-        {props.association.attributes.about}
-      </Markdown>
+      <Markdown className="text">{props.association.attributes.about}</Markdown>
     </>
   );
 }
diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
index 389ae36..d19ad09 100644
--- a/app/src/styles/globals.scss
+++ b/app/src/styles/globals.scss
@@ -40,20 +40,57 @@ a {
   }
 }
 
-.markdown {
+.text {
   min-width: 20ch;
-  max-width: 80ch;
-  padding: 0 1rem;
+  max-width: 60ch;
+  padding: 0 2rem;
 
   border-radius: 1rem;
   background-color: lightcyan;
 
-  a {
-    color: blue;
-    text-decoration: underline;
+  h1 {
+    text-align: center;
+    padding: 0 2rem;
+
+    &::after {
+      position: relative;
+      min-width: 4rem;
+      min-height: 0.3rem;
+      top: -0.45rem;
+      left: 0.5rem;
 
-    &:visited {
-      color: purple;
+      background-color: darkcyan;
+      content: "";
+      display: inline-block;
     }
+    &::before {
+      @extend ::after;
+      left: -0.5rem;
+    }
+
+    // h4 (subtitle) must be centered and slightly enlarged
+    + h4 {
+      text-align: center;
+      font-size: large;
+    }
+  }
+
+  // h4 is to be used as subtitle, thus we strip its top margin,
+  // and the bottom margin of the element just before (i.e. the
+  // element it is the subtitle of).
+  :has(+ h4) {
+    margin-bottom: 0;
+  }
+  h4 {
+    font-weight: lighter;
+    margin-top: 0.2rem;
+  }
+
+  a {
+    color: rgb(58, 127, 255);
+  }
+
+  p {
+    text-align: justify;
   }
 }