Section and Collapsible styling

src/lib/components/AttributionInformation.svelte

@@ -171,4 +171,7 @@
         strong {
             color: #444;
         }
+        h5 {
+            margin: 1.2rem 1rem 0 1rem;
+        }
     </style>

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 {

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';

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>

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;