feat: adopt main website styles

assets/styles/_components.css

@@ -1,3 +1,4 @@
+@import "components/typography.css";
 @import "components/forms.css";
 @import "components/button.css";
 @import "components/menu.css";

assets/styles/components/button.css

@@ -1,16 +1,44 @@
-.btn {
-    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
-    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+.button {
+    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center;
+    @apply transition-colors outline-none focus:outline-none;
 }
 
-.btn--small {
-    @apply text-xs py-1 px-2 rounded-md;
+.button--small {
+    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
 }
 
-.btn--secondary {
-    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+.button--full {
+    @apply block w-full;
 }
 
-.btn--active {
-    @apply shadow-none;
+.bg-button {
+    @apply bg-primary-light text-white;
+    @apply hover:bg-secondary;
+}
+
+
+.bg-button--active,
+.bg-button--secondary {
+    @apply bg-secondary;
+}
+
+.bg-button--muted {
+    @apply bg-zinc-300 hover:bg-zinc-300;
+}
+
+.bg-button--dark {
+    @apply bg-primary-dark;
+}
+
+.bg-button--light {
+    @apply bg-white border-2;
+    @apply font-bold;
+    @apply border-primary-light text-primary;
+}
+
+.bg-button--light:hover,
+.bg-button--light.button--active {
+    @apply bg-white;
+    @apply border-secondary text-secondary;
 }

assets/styles/components/forms.css

@@ -2,3 +2,25 @@ label.required:after {
     @apply inline-block text-sm;
     content: '*';
 }
+
+.form-field {
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
+}
+
+.form-field--has-error {
+    @apply border-red-500;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-secondary h-4 w-4;
+}
+
+.form-checkbox--has-error,
+.form-radio--has-error {
+    @apply border-red-500;
+}
+
+input[disabled] {
+    @apply cursor-not-allowed;
+}

assets/styles/components/menu.css

@@ -1,12 +1,11 @@
 .menu--main {
-    @apply flex items-center space-x-2;
+    @apply lg:flex lg:items-center m-0;
 }
 
 .menu--main a {
-    @apply uppercase text-lg font-semibold pb-1 px-2 border-b-2 border-white;
-    @apply hover:border-primary;
+    @apply block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800;
 }
 
 .menu--main .current a {
-    @apply border-primary;
+    @apply bg-zinc-400 text-zinc-800;
 }

assets/styles/components/typography.css

@@ -0,0 +1,28 @@
+h1,
+.headline--primary {
+    @apply block text-3xl md:text-4xl font-bold mb-2;
+}
+
+h2,
+.headline--secondary {
+    @apply block text-2xl md:text-3xl font-bold mb-2;
+}
+
+h3,
+.headline--3 {
+    @apply block text-xl md:text-2xl font-bold leading-6 mb-2;
+}
+
+h4,
+.headline--4 {
+    @apply block md:text-lg font-bold;
+}
+
+.headline--underlined:after {
+    @apply block border-b-4 border-primary-light pb-4 mb-4 -mt-2 w-20;
+    content: '';
+}
+
+.subline {
+    @apply block text-xs md:text-sm font-normal leading-6 opacity-60;
+}