feat: modal + concert notes

src/assets/styles/components/modal.css

@@ -0,0 +1,71 @@
+.modal-wrapper {
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  z-index: 1;
+
+  & .modal-body {
+    position: fixed;
+    background: var(--background-color);
+    border: 1px solid var(--gray-light);
+    max-height: 75%;
+    max-width: 75%;
+    inset: 12.5%;
+    overflow: scroll;
+    padding: var(--sizing-lg) var(--sizing-2xl);
+
+    & .modal-close {
+      position: absolute;
+      top: var(--sizing-lg);
+      right: var(--sizing-lg);
+      cursor: pointer;
+
+      & svg {
+        stroke: var(--accent-color);
+        transform: rotate(0deg);
+        transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+
+        &:hover,
+        &:focus,
+        &:active {
+          stroke: var(--accent-color-hover);
+          transform: rotate(8deg);
+        }
+      }
+    }
+  }
+}
+
+.modal-input {
+  display: none;
+
+  &:checked ~ .modal-wrapper {
+    display: block;
+  }
+
+  &:not(:checked) ~ .modal-wrapper {
+    display: none;
+  }
+}
+
+.modal-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  vertical-align: middle;
+
+  & svg {
+    cursor: pointer;
+    stroke: var(--accent-color);
+    transform: rotate(0deg);
+    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+
+    &:hover,
+    &:focus,
+    &:active {
+      stroke: var(--accent-color-hover);
+      transform: rotate(8deg);
+    }
+  }
+}

src/assets/styles/index.css

@@ -32,6 +32,7 @@
 @import url('./components/forms.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
 @import url('./components/menu.css') layer(components);
+@import url('./components/modal.css') layer(components);
 @import url('./components/music-chart.css') layer(components);
 @import url('./components/paginator.css') layer(components);
 @import url('./components/progress-bar.css') layer(components);

src/assets/styles/pages/music.css

@@ -85,6 +85,10 @@
 .concert-list {
   margin-top: 0;
   padding-left: 0;
+
+  & li .modal-toggle {
+    height: calc(var(--sizing-lg) * 1.6);
+  }
 }
 
 @media screen and (min-width: 768px) {