assignment a4

2024-11-11 23:03:20 -05:00
parent f455c13731
commit b3bc3f558e
24 changed files with 3647 additions and 1 deletions
--- a/assignments/a4/css/index.css
+++ b/assignments/a4/css/index.css
@@ -0,0 +1,190 @@
+@import './shared.css';
+
+:root {
+  --header-height: 4rem;
+}
+
+a4-header {
+  display: block;
+  padding-bottom: var(--header-height);
+}
+
+body > section {
+  display: grid;
+  grid-template: repeat(3, auto) / 1fr;
+  max-width: var(--w-5xl);
+  margin: 0 auto;
+
+  padding: 1rem 0.5rem;
+  gap: 1rem;
+
+  @media (min-width: 768px) {
+    grid-template: repeat(2, auto) / 1fr 2fr;
+  }
+
+  & > div {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --tw-ring-color: rgb(17 24 39 / 0.1);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow, 0 0 #0000);
+
+    padding: 1rem;
+    border-radius: 0.5rem;
+
+    &:nth-of-type(1) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+
+      text-align: center;
+
+      & > h1 {
+        font-size: 1.5rem;
+        line-height: 1.75rem;
+      }
+
+      & > button {
+        background-color: var(--color-cyan-600);
+        border-radius: var(--rounded-md);
+        padding: 0.375rem 0.625rem;
+        font-weight: 600;
+        color: white;
+        box-shadow: var(--shadow-sm);
+        transition: 250ms;
+
+        &:hover {
+          background-color: var(--color-cyan-500);
+        }
+      }
+    }
+
+    &:nth-of-type(2) {
+      & > h3 {
+        font-weight: 500;
+        font-size: 0.8rem;
+      }
+
+      & > form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1rem;
+
+        & > div {
+          & > label {
+            display: block;
+            font-size: 0.875rem;
+            line-height: 1.5rem;
+            font-weight: 500;
+            color: var(--color-gray-900);
+          }
+
+          & > div {
+            margin-top: 0.25rem;
+
+            & > input {
+              display: block;
+              width: 100%;
+              border-radius: var(--rounded-md);
+              border: 0;
+              padding: 0.375rem 0.5rem;
+              color: var(--color-gray-900);
+              box-shadow:
+                inset 0 0 0 1px var(--color-gray-300),
+                var(--shadow-sm);
+
+              &:focus {
+                box-shadow: inset 0 0 0 2px var(--color-cyan-500);
+                outline: none;
+              }
+
+              &::placeholder {
+                color: var(--color-gray-400);
+              }
+
+              @media (min-width: 640px) {
+                font-size: 0.875rem;
+                line-height: 1.5rem;
+              }
+            }
+          }
+        }
+
+        & > button {
+          background-image: linear-gradient(
+            to right,
+            var(--color-cyan-500) 0%,
+            var(--color-indigo-500) 51%,
+            var(--color-cyan-500) 100%
+          );
+          border-radius: var(--rounded-md);
+          background-size: 200% auto;
+          padding: 0.375rem 0.625rem;
+          font-weight: 600;
+          color: white;
+          box-shadow: var(--shadow-sm);
+          transition: 500ms;
+
+          &:hover {
+            background-position: right center;
+          }
+        }
+      }
+    }
+
+    &:nth-of-type(3) {
+      display: grid;
+      gap: 0.5rem;
+
+      @media (min-width: 768px) {
+        grid-column: 1/3;
+        grid-template: 1fr / repeat(5, 1fr);
+      }
+
+      & > div {
+        display: none;
+        @media (min-width: 768px) {
+          display: block;
+        }
+      }
+
+      & > img {
+        border-radius: 0.25rem;
+        object-fit: cover;
+        transition: transform 250ms ease-in-out;
+
+        /*
+         * hi TA! i wrote keyframes for this animation but they looked way worse than
+         * just doing it with a transform (firefox bug?) so i did it with a transform
+         * sorry!!
+         */
+        &:hover {
+          transform: scale(1.05);
+        }
+
+        @media (min-width: 768px) {
+          height: 100%;
+          width: 100%;
+          aspect-ratio: 1/1;
+        }
+      }
+    }
+  }
+}
+
+footer {
+  margin-top: auto;
+  padding: 1rem 2rem;
+  background-color: var(--color-gray-800);
+  color: white;
+  text-align: center;
+}