Feedback

css/components/button.css

@@ -0,0 +1,120 @@
+.button {
+  border: none;
+  border-radius: 0.25em;
+  font-family: var(--font-primary);
+  font-size: 1rem;
+  line-height: 1.25em;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  /* text-transform: uppercase; */
+  padding: 0.5em 1em;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  transition: transform 150ms;
+}
+
+.button:active {
+  transform: translateY(0.25rem);
+}
+
+/* Button Primary */
+.button--primary {
+  background-color: var(--primary-500);
+  color: white;
+}
+
+.button--primary:hover {
+  background-color: var(--primary-400);
+}
+
+.button--primary:focus {
+  outline: 2px solid var(--primary-300);
+  outline-offset: 2px;
+}
+
+/* Button Secondary */
+.button--secondary {
+  background-color: var(--secondary-300);
+  color: white;
+}
+
+.button--secondary:hover {
+  background-color: var(--secondary-400);
+}
+
+.button--secondary:focus {
+  outline: 2px solid var(--secondary-300);
+  outline-offset: 2px;
+}
+
+/* Button Subtle */
+.button--subtle {
+  background-color: var(--gray-100);
+  color: var(--gray-400);
+}
+
+.button--subtle:hover {
+  background-color: var(--gray-200);
+}
+
+.button--subtle:focus {
+  outline: 2px solid var(--gray-100);
+  outline-offset: 2px;
+}
+
+/* Anchor as button */
+/* a.button {
+  width: fit-content;
+} */
+
+/* Button sizes */
+.button--sm {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.button--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+/* With icon */
+.button__icon {
+  height: 1em;
+}
+
+.button--only-icon {
+  padding: 0.4em;
+  border-radius: 50%;
+  font-size: 1.25rem;
+}
+
+.button--only-icon.button--sm {
+  padding: 0.375em;
+  font-size: 1rem;
+}
+
+.button--only-icon.button--lg {
+  padding: 0.5em;
+  font-size: 1.5rem;
+}
+
+/* Loading state */
+.button--loading .button__icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

css/components/footer.css

@@ -0,0 +1,5 @@
+.footer {
+  background-color: var(--gray-100);
+  padding: 1em;
+  text-align: center;
+}

css/components/header.css

@@ -0,0 +1,87 @@
+.header {
+  position: relative;
+  padding: 2rem;
+  background-color: var(--gray-200);
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.navbar__menu-icon,
+.navbar__menu-icon-close {
+  height: 1.5em;
+  display: none;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--gray-500);
+}
+
+.navbar-links {
+  display: flex;
+  /* column-gap: 0.5rem; */
+  row-gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+}
+
+.navbar-links .link {
+  border-radius: 4px;
+  padding: 0.5em 0.75em;
+  transition: background-color 0.5s;
+}
+
+.navbar-links .link:hover {
+  background-color: var(--primary-100);
+}
+
+.navbar-icons {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .navbar-icons {
+    display: block;
+  }
+
+  .header {
+    padding: 1rem;
+  }
+  .navbar-links {
+    display: none;
+  }
+
+  .navbar__menu-icon {
+    display: block;
+  }
+
+  .navbar--open .navbar__menu-icon {
+    display: none;
+  }
+
+  .navbar--open .navbar__menu-icon-close {
+    display: block;
+  }
+
+  .navbar--open .navbar-links {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100%;
+    padding: 1rem;
+    background-color: var(--gray-100);
+  }
+}