feat: implement barebone zola templates

_src/components/Button/Button.astro

@@ -0,0 +1,52 @@
+---
+interface Props {
+  className?: string;
+  href?: string;
+}
+
+const { className = '', href } = Astro.props;
+---
+
+{
+  href !== undefined ? (
+    <a href={href} class:list={['clean', 'btn', className]}>
+      <slot />
+    </a>
+  ) : (
+    <button class:list={className}>
+      <slot />
+    </button>
+  )
+}
+
+<style lang="scss">
+  button,
+  .btn {
+    display: inline-block;
+    text-decoration: none;
+    font-size: 1rem;
+    padding: var(--prj-spacing-1) var(--prj-spacing-3);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+
+    border-radius: 6px;
+    border: 1px solid var(--prj-accent-bg);
+
+    cursor: pointer;
+
+    margin-bottom: 0;
+    box-shadow: 0 0 0px 0px var(--prj-accent-bg);
+
+    transition: color 0.2s, background-color 0.2s, translate 0.2s,
+      box-shadow 0.2s;
+
+    &:hover {
+      --anim-translation-value: -5px;
+      background-color: transparent;
+      color: var(--prj-text);
+      translate: var(--anim-translation-value) var(--anim-translation-value);
+      box-shadow: calc(var(--anim-translation-value) * -2)
+        calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
+    }
+  }
+</style>