Moved article body styling to tailwind

DIVD-NL · Dec 24, 2024 · 07ba870 · 07ba870
1 parent ac740df
commit 07ba870
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 93 deletions.
diff --git a/assets/scss/pages/newsroom.scss b/assets/scss/pages/newsroom.scss
@@ -102,71 +102,6 @@
   }
 }
 
-.article-body {
-  display: flex;
-  padding: 16px 42px 50px 50px;
-  article {
-    flex: 1 1 auto;
-    padding-right: 32px;
-
-    h1 {
-      font-weight: 900;
-      font-size: 2.6em;
-      font-family: var(--font-header);
-      line-height: 1.2em;
-      margin-bottom: 0.4em;
-    }
-
-    h2 {
-      margin-top: 1.4em;
-      &:first-of-type {
-        margin-top: 0;
-      }
-    }
-
-    ul {
-      list-style: inside;
-      li {
-        margin-bottom: 8px;
-        line-height: 1.4em;
-      }
-    }
-  }
-
-  aside {
-    flex: 0 0 330px;
-
-    section {
-      background-color: #f2f2f2;
-      border-radius: 20px;
-      padding: 20px;
-
-      h4 {
-        font-weight: bold;
-        margin-bottom: 4px;
-      }
-
-      ul {
-        margin-bottom: 16px;
-        li {
-          margin-bottom: 2px;
-        }
-      }
-    }
-  }
-
-  &.people {
-    aside {
-      flex: 0 0 40%;
-    }
-  }
-
-  @media (max-width: 700px) {
-    display: block;
-    padding: 16px;
-  }
-}
-
 .article-faq {
   padding: 16px 42px 50px 50px;
 

diff --git a/layouts/newsroom/single.html b/layouts/newsroom/single.html
@@ -9,24 +9,26 @@
     {{ partial "breadcrumbs" . }}
 
 
-    <main class="container mt-10">
+    <main class="container desktop:mt-10">
       {{ if .Params.image }}
         <figure
-          class="[&_img]:h-[520px] [&_img]:w-full [&_img]:object-cover [&_img]:rounded-tl-divd-sm [&_img]:rounded-tr-divd-lg">
+          class="[&_img]:h-[520px] [&_img]:w-full [&_img]:object-cover desktop:[&_img]:rounded-tl-divd-sm desktop:[&_img]:rounded-tr-divd-lg">
           {{ with resources.Get .Params.image }}
             {{ partial "tools/rimg/img" (dict "img" .) }}
           {{ end }}
         </figure>
       {{ end }}
 
 
-      <section class="article-body bg-white">
-        <article class="bg-white">
-          <h1 class="text-heading-2 font-heading">{{ .Title }}</h1>
+      <section
+        class="flex flex-col desktop:flex-row py-12 break-words px-[30px] desktop:px-[50px] bg-white">
+        <article
+          class="bg-white [&_ul]:pl-5 [&_li]:list-disc [&_li]:leading-8 [&_h2]:font-body [&_h2]:text-[32px] [&_h2]:uppercase [&_h2]:leading-[3rem] [&_h2]:mt-8 [&_p]:text-body">
+          <h1 class="text-heading-2">{{ .Title }}</h1>
           {{ .Content }}
         </article>
 
-        {{ partial "components/case-researchers-widget/case-researchers-widget.html" . }}
+        {{ partial "components/case-researchers-widget/case-researchers-widget" . }}
       </section>
     </main>
   </section>

diff --git a/layouts/partials/components/case-researchers-widget/case-researchers-widget.html b/layouts/partials/components/case-researchers-widget/case-researchers-widget.html
@@ -1,7 +1,9 @@
-<aside>
+<aside class="flex-none w-[330px] h-fit bg-light-gray rounded-divd-sm">
+  <section
+    class="flex flex-col p-5 [&_h4]:font-semibold [&_h4]:text-[20px] [&_h4]:mb-1">
     {{ with .Params.case }}
-      <section>
-        {{ if .lead }}
+      {{ if .lead }}
+        <article>
           <h4>Case lead</h4>
           <ul>
             {{ if .leadlink }}
@@ -10,9 +12,11 @@ <h4>Case lead</h4>
               <li>{{ .lead }}</li>
             {{ end }}
           </ul>
-        {{ end }}
+        </article>
+      {{ end }}
 
-        {{ if or (isset . "researchers") (isset . "researchers_people") }}
+      {{ if or (isset . "researchers") (isset . "researchers_people") }}
+        <article>
           <h4>Researchers</h4>
           <ul>
             {{ if .researchers_people }}
@@ -33,23 +37,13 @@ <h4>Researchers</h4>
               {{ end }}
             {{ end }}
           </ul>
-        {{ end }}
+        </article>
+      {{ end }}
 
-        {{ if .link }}
-          {{ partial "components/button/button.html" .link }}
-        {{ end}}
+      {{ if .link }}
+        {{ partial "components/button/button.html" .link }}
+      {{ end }}
 
-        <!-- <a
-          class="cta"
-          target="_blank"
-          href="{{ if .link }}
-            {{ .link }}
-          {{ else }}
-            https://csirt.divd.nl/
-          {{ end }}">
-          {{ .caseid }}
-          {{ partial "svg/icon" "external" }}
-        </a> -->
-      </section>
     {{ end }}
-</aside>
+  </section>
+</aside>