add resources section

assets/css/src/collapsable-section.css

@@ -1,11 +1,24 @@
 .collapsable-sections {
   background-color: var(--color-yellow);
+  --row-padding: var(--padding-vertical) var(--space-m);
+  padding: 0 !important;
+}
+
+.collapsable > * {
+  padding: var(--row-padding);
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: var(--border);
 }
 
 .collapsable button.toggle {
-  width: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
+}
+
+.collapsable button.toggle.open svg {
+  transform: rotate(180deg);
 }
 
 .collapsable__content {
@@ -17,3 +30,22 @@
   max-height: 100%;
   overflow: hidden;
 }
+
+.collapsable__content {
+  font-size: var(--font-size-s);
+}
+.collapsable__content .production p:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.collapsable .resource > * {
+  display: inline-block;
+}
+
+.collapsable .resource > p {
+  margin-right: 2rem;
+}
+
+.collapsable .resource > a {
+  font-weight: bold;
+}

assets/css/src/generic.css

@@ -60,3 +60,35 @@ body.progress * {
 .social-icons a:hover svg {
   transform: scale(1.15);
 }
+
+.close-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+}
+
+.close-btn__line,
+.close-btn__line::before {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.close-btn__line {
+  transform: rotate(-45deg);
+}
+.close-btn__line::before {
+  transform: rotate(90deg);
+}
+
+.arrow-down {
+  font-size: 2rem;
+  height: 1.5rem;
+  transform: translateY(-0.2rem);
+}

assets/css/src/nav.css

@@ -35,32 +35,6 @@
   row-gap: 6rem;
 }
 
-.expanded-nav .close-btn {
-  position: relative;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  justify-self: end;
-}
-
-.expanded-nav .close-btn__line,
-.expanded-nav .close-btn__line::before {
-  content: "";
-  width: 100%;
-  height: 3px;
-  background-color: #000;
-  position: absolute;
-}
-
-.expanded-nav .close-btn__line {
-  transform: rotate(-45deg);
-}
-.expanded-nav .close-btn__line::before {
-  transform: rotate(90deg);
-}
-
 .expanded-nav__category {
   margin-bottom: 1rem;
 }

assets/css/src/vanilla.css

@@ -3,7 +3,7 @@ footer {
   box-sizing: border-box;
   padding: var(--padding-vertical) var(--space-m);
 }
-section:not(:last-child) {
+section:not(:last-child, .collapsable) {
   border-bottom: var(--border);
 }