From 625f7e3a6c48a00d1a8a8546e7e24f809a77be76 Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Tue, 29 Oct 2024 11:51:57 +0100
Subject: [PATCH] Section and Collapsible styling

---
 src/lib/components/AttributionInformation.svelte |  3 +++
 src/lib/components/Collapsible.svelte            |  5 +++--
 src/lib/components/Timeline.svelte               |  2 +-
 src/routes/+page.svelte                          | 10 +---------
 src/style.css                                    |  1 +
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/AttributionInformation.svelte b/src/lib/components/AttributionInformation.svelte
index 117b697..39c6f1d 100644
--- a/src/lib/components/AttributionInformation.svelte
+++ b/src/lib/components/AttributionInformation.svelte
@@ -171,4 +171,7 @@
         strong {
             color: #444;
         }
+        h5 {
+            margin: 1.2rem 1rem 0 1rem;
+        }
     </style>
\ No newline at end of file
diff --git a/src/lib/components/Collapsible.svelte b/src/lib/components/Collapsible.svelte
index 38d3289..63182a3 100644
--- a/src/lib/components/Collapsible.svelte
+++ b/src/lib/components/Collapsible.svelte
@@ -24,7 +24,7 @@
 
 <style>
 	.collapsible-container {
-		margin: 0 2rem;
+		margin: 0 0rem;
 	}
 	input.toggle[type='checkbox'] {
 		display: none;
@@ -61,7 +61,8 @@
 	.collapsible-content {
 		max-height: 0px;
 		overflow: hidden;
-		transition: max-height 500ms ease-in-out;
+		transition: max-height 500ms ease-in-out, border-width 500ms;
+		border-width: 0px;
 	}
 
 	.collapsible-content p {
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index de7def9..c362c7a 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { scaleUtc, scalePoint, scaleOrdinal, scaleLinear, scaleTime } from 'd3-scale';
+	import { scalePoint, scaleOrdinal, scaleLinear, scaleTime } from 'd3-scale';
 	import { utcFormat } from 'd3-time-format';
 	import { format } from 'd3-format';
 	import { area, stack, curveNatural } from 'd3-shape';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2da9026..db6724d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -249,7 +249,7 @@
 </section>
 
 <section class="section">
-	<div class="container has-text-centered">
+	<div class="container">
 		<div class="intro">
 			{#each copy.intro as block}
 				{#if block.type == 'text'}
@@ -336,11 +336,6 @@
 	section {
 		font-family: var(--font-02);
 	}
-	.intro,
-	.about {
-		max-width: 800px;
-		margin: auto;
-	}
 	.about {
 		margin-top: 2rem;
 	}
@@ -372,7 +367,4 @@
 		padding: 1rem;
 		z-index: 750;
 	}
-	.cases-controls {
-		margin-bottom: -2rem;
-	}
 </style>
diff --git a/src/style.css b/src/style.css
index d20cda1..ec3318a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,6 +6,7 @@
     --usa-red: #b22234;
     --usa-lightred: #c5888f;
     --text-darkgray: #5e4a4a;
+    --dfrlab-lightgray: #cacaca;
 
     --font-01: Volkhov, serif;
     --font-02: Quicksand, sans-serif;