1 files changed, 77 insertions, 0 deletions
diff --git a/code/frontpage/assets/scss/components/_details.scss b/code/frontpage/assets/scss/components/_details.scss
new file mode 100644
index 0000000..fb719d3
--- /dev/null
+++ b/code/frontpage/assets/scss/components/_details.scss
@@ -0,0 +1,77 @@
+details {
+  display: block;
+  border: 1px solid $gray-200;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem 0;
+  margin: 0.5rem 0;
+}
+
+/*
+details summary {
+  &::marker {
+    content: "";
+  }
+}
+*/
+
+summary {
+  list-style: none;
+  display: inline-block;
+  width: calc(100% + 2rem);
+  margin: -0.5rem -1rem 0;
+  padding: 0.5rem 0.75rem;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:hover {
+  background: $gray-100;
+}
+
+details summary::before {
+  display: inline-block;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform 0.35s ease;
+  transform-origin: center center;
+  margin-right: 0.375rem;
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+/*
+details summary > * {
+  display: inline-block;
+}
+*/
+
+details[open] {
+  padding: 0.5rem 1rem;
+}
+
+details[open] > summary {
+  border-bottom: 1px solid $gray-300;
+  margin-bottom: 0.5rem;
+}
+
+details h2,
+details h3,
+details h4 {
+  margin: 1rem 0 0.5rem;
+}
+
+details p:last-child {
+  margin-bottom: 0;
+}
+
+details ul,
+details ol {
+  margin-bottom: 0;
+}
+
+details pre {
+  margin: 0 0 1rem;
+}