Switched to Composition API

src/assets/base.css

@@ -114,6 +114,129 @@ body {
   height: 0.75rem;
 }
 
-h2 {
-  text-align: center;
+*:focus {
+  outline: none;
+}
+
+button {
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  appearence: none;
+}
+
+/* Components and Helpers */
+
+.bi {
+  color: var(--color-text);
+  font-size: 1.25rem;
+  transition: color 0.3s ease;
+}
+.bi:hover,
+.bi.true {
+  color: var(--color-foreground);
+}
+
+.caps {
+  text-transform: capitalize;
+}
+
+.bg-img {
+  background-image: linear-gradient(45deg, #88c0d0, #5e81ac);
+  background-position: center;
+  background-size: cover;
+  border-radius: 0.25rem;
+}
+.bg-img.lazy {
+  background-image: var(--art);
+}
+
+.pop {
+  --shadow: none;
+  --translate: 0;
+}
+.pop,
+.pop-2 {
+  transition: box-shadow 0.4s ease, transform 0.4s ease;
+}
+.pop:hover {
+  --shadow: 0.5rem 0.5rem 1rem var(--color-shadow);
+  --translate: -1.25rem;
+  box-shadow: var(--shadow);
+  transform: translateX(calc(var(--translate) / 2))
+    translateY(calc(var(--translate) / 2));
+}
+.pop-2 {
+  transform: translateX(var(--translate)) translateY(var(--translate));
+  box-shadow: var(--shadow);
+}
+
+.popup-wrap {
+  --display: none;
+  position: relative;
+}
+.popup-wrap:hover,
+.popup-wrap:focus,
+.popup:focus,
+.popup:active {
+  --display: flex;
+}
+.popup {
+  position: absolute;
+  display: var(--display);
+  background-color: var(--color-background);
+  padding: 0.5rem;
+  border-radius: 0.125rem;
+  z-index: 999;
+  bottom: 1.25rem;
+  box-shadow: 0 0 0.5rem var(--color-border);
+  animation: fade 0.4s ease;
+}
+
+.bars-wrap {
+  position: absolute;
+  height: 1.5rem;
+  width: 2rem;
+  transform: rotateZ(180deg);
+}
+.bars {
+  position: relative;
+  height: 15%;
+  width: calc(calc(100% / 3) - 0.2rem);
+  margin-left: 0.1rem;
+  background: var(--color-foreground);
+  float: left;
+  animation: heightc 1s ease infinite;
+}
+.bars:first-child {
+  animation-delay: 0.25s;
+}
+.bars:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.bars:last-child {
+  margin-left: none;
+}
+
+/* Animations */
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fill {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--width);
+  }
+}
+@keyframes heightc {
+  50% {
+    height: 100%;
+  }
 }