diff --git a/assignments/a3/css/clean.css b/assignments/a3/css/clean.css new file mode 100644 index 0000000..f5410b7 --- /dev/null +++ b/assignments/a3/css/clean.css @@ -0,0 +1,37 @@ +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +:root { + font-family: 'Inter', sans-serif; +} + +@supports (font-variation-settings: normal) { + :root { + font-family: 'Inter var', sans-serif; + } +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-weight: normal; + font-size: 1em; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/assignments/a3/css/index.css b/assignments/a3/css/index.css new file mode 100644 index 0000000..d642b06 --- /dev/null +++ b/assignments/a3/css/index.css @@ -0,0 +1,242 @@ +@import 'clean.css'; + +header { + border-bottom: 2px solid purple; + position: relative; + + display: grid; + grid-template-columns: auto auto 1fr; + justify-content: center; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + + & > p { + font-size: 2rem; + font-weight: 700; + } + + & > div { + display: grid; + justify-content: end; + + & > a { + padding: 1rem 2rem; + background-color: lightblue; + border-radius: 1rem; + + &:hover, + &:focus { + background-color: blue; + } + } + } + + & > #mobile-nav-menu { + padding: 1rem; + display: grid; + grid-template: repeat(4, 1fr) / 1fr; + gap: 0.5rem; + + position: absolute; + left: 0; + right: 0; + top: 5rem; + margin: 0 auto; + + min-width: 80%; + + text-align: center; + + border: 2px solid purple; + border-radius: 1rem; + + & > p { + font-size: 2rem; + font-weight: 700; + border-bottom: 2px solid purple; + } + + & > a { + font-size: 1.5rem; + color: blue; + + &:hover, + &:focus { + color: lightblue; + text-decoration: underline; + } + } + + &:not(:popover-open) { + display: none; + } + } + + & > button { + height: 3rem; + width: 3.5rem; + + background-color: lightblue; + border-radius: 1rem; + border-block: unset; + border-inline: unset; + + display: grid; + justify-content: center; + align-items: center; + + &:hover, + &:focus { + background-color: blue; + cursor: pointer; + } + + & > svg { + height: 2rem; + width: 2rem; + } + + & > svg:last-of-type { + display: none; + } + + &:has(~ #mobile-nav-menu:popover-open) { + & > svg:first-of-type { + display: none; + } + + & > svg:last-of-type { + display: block; + } + } + } + + & > nav:not(#mobile-nav-menu) { + width: 100%; + display: grid; + grid-template-columns: repeat(3, auto) 1fr; + align-items: center; + gap: 0.5rem; + + & > a > svg { + height: 3rem; + width: 3rem; + } + + & > a { + font-size: 1.5rem; + color: black; + + &:hover, + &:focus { + color: lightblue; + } + } + + & > div { + display: grid; + justify-content: end; + + & > a { + padding: 1rem 2rem; + background-color: lightblue; + border-radius: 1rem; + + &:hover, + &:focus { + background-color: blue; + } + } + } + } + + & > *:not(.mobile) { + display: none !important; + } + + @media (min-width: 768px) { + grid-template-columns: 1fr; + + & > .mobile { + display: none; + } + + & > *:not(.mobile) { + display: inherit !important; + } + } +} + +main { + padding: 1rem; + + & > img { + height: 100%; + width: 100%; + border-radius: 1rem; + + @media (min-width: 768px) { + max-height: 60%; + aspect-ratio: 6/4; + overflow: hidden; + object-fit: cover; + } + } + + & > h1 { + color: purple; + font-size: 2rem; + } +} + +aside { + padding: 1rem; + margin: 1rem; + background-color: lightgray; + border-top: 2px solid purple; + + display: grid; + gap: 2rem; + + & > h3 { + color: purple; + font-size: 1.5rem; + } + + & > article { + & > h4 { + font-weight: 700; + } + } + + @media (min-width: 768px) { + order: -1; + } +} + +footer { + padding: 2rem 1rem; + background-color: darkgray; + color: white; + + display: grid; + justify-content: center; + align-items: center; + + & > p { + font-weight: 600; + } +} + +@media (min-width: 768px) { + body > section { + display: grid; + grid-template: 1fr / 1fr 3fr; + + padding: 1rem 4rem; + max-width: 1280px; + margin: 0 auto; + gap: 2rem; + } +} diff --git a/assignments/a3/img/clt.webp b/assignments/a3/img/clt.webp new file mode 100644 index 0000000..80302e2 Binary files /dev/null and b/assignments/a3/img/clt.webp differ diff --git a/assignments/a3/index.html b/assignments/a3/index.html new file mode 100644 index 0000000..a71a1f3 --- /dev/null +++ b/assignments/a3/index.html @@ -0,0 +1,122 @@ + + + + + + Assignment A3 + + + + + + +
+ +

Menu

+
+ Login +
+ + + + +
+ +
+
+ +

something important

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel error eaque ducimus explicabo + consequuntur ipsum voluptatem nobis laboriosam obcaecati illum officiis natus sed ea modi + architecto distinctio, iste id quos! Lorem ipsum dolor sit amet consectetur adipisicing + elit. Reiciendis porro asperiores praesentium blanditiis possimus commodi maiores earum + repellendus recusandae aut expedita accusamus, nemo consequuntur iste impedit. Facilis + odit consequatur dolor. +

+
+ + +
+ + + + diff --git a/assignments/a4/README.md b/assignments/a4/README.md new file mode 100644 index 0000000..b8e8bae --- /dev/null +++ b/assignments/a4/README.md @@ -0,0 +1,5 @@ +# assignment A4 + +hello there! + +due to some browser politicking, this assignment will not load in firefox without using vscode live server. firefox doesn't allow CORS requests from file paths for security reasons, so it must be loaded in chrome or with vscode live server. sorry for the inconvenience! diff --git a/assignments/a4/components/header.js b/assignments/a4/components/header.js new file mode 100644 index 0000000..b629564 --- /dev/null +++ b/assignments/a4/components/header.js @@ -0,0 +1,336 @@ +import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js'; + +export class A4Header extends LitElement { + static properties = { open: false }; + static styles = css` + :host { + display: block; + height: var(--header-height); + } + + button { + cursor: pointer; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-family: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; + text-transform: none; + -webkit-appearance: button; + background-color: #0000; + background-image: none; + border: none; + } + + a { + color: inherit; + text-decoration: inherit; + } + + header { + position: absolute; + left: 0; + right: 0; + display: flex; + height: var(--header-height); + border-bottom: 1px solid rgb(17 24 39 / 0.1); + z-index: 50; + } + + div.desktop { + width: 100%; + max-width: 80rem; + + display: flex; + align-items: center; + justify-content: space-between; + + margin: 0 auto; + padding: 0 1rem; + + @media (min-width: 640px) { + padding: 0 1.5rem; + } + + @media (min-width: 1024px) { + padding: 0 2rem; + } + + & > div { + display: flex; + flex: 1; + align-items: center; + + &:first-of-type { + column-gap: 1.5rem; + + & > button { + margin: -0.75rem; + padding: 0.75rem; + color: var(--color-gray-700); + + @media (min-width: 768px) { + display: none; + } + + & > svg { + height: 1.5rem; + width: 1.5rem; + } + } + + & > img { + height: 2rem; + width: auto; + } + } + + &:last-of-type { + column-gap: 2rem; + justify-content: flex-end; + + & > button { + margin: -0.75rem; + padding: 0.75rem; + color: var(--color-gray-400); + + &:hover { + color: var(--color-gray-500); + } + + & > svg { + height: 1.5rem; + width: 1.5rem; + } + } + } + } + + & > nav { + display: none; + column-gap: 2.75rem; + font-size: 0.875rem; + line-height: 1.5rem; + font-weight: 600; + + & > a:hover { + color: var(--color-gray-400); + } + + @media (min-width: 768px) { + display: flex; + } + } + } + + div.mobile { + & > div.backdrop { + display: fixed; + top: 0; + left: 0; + right: 0; + z-index: 50; + + &.closed { + display: none; + } + } + + & > div.foredrop { + &.closed { + height: 0vh; + + @media (min-width: 640px) { + width: 0rem; + height: 100vw; + } + } + + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 50; + width: 100%; + overflow-y: hidden; + background-color: white; + transition: + height 500ms linear, + width 250ms ease-in-out; + height: 100vh; + + scrollbar-width: none; + overflow: -moz-scrollbars-none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + + @media (min-width: 640px) { + max-width: 20rem; + width: 20rem; + + --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: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + } + + & > div { + padding: 0 1rem 1.5rem 1rem; + @media (min-width: 640px) { + padding: 0 1.5rem; + } + + & > div { + &:first-of-type { + /* margin-left: -0.5rem; */ + display: flex; + height: 4rem; + align-items: center; + column-gap: 1.5rem; + + & > button { + margin: -0.75rem; + padding: 0.75rem; + color: var(--color-gray-700); + + & > svg { + height: 1.5rem; + width: 1.5rem; + } + } + + & > div { + & > a { + display: block; + margin: -1.25rem; + padding: 1.25rem; + + & > img { + height: 2rem; + width: auto; + margin-top: 6px; + } + } + } + } + + &:last-of-type { + margin-top: 0.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + + & > a { + display: block; + margin: -0.75rem; + padding: 0.75rem; + font-size: 1rem; + line-height: 1.75rem; + font-weight: 600; + text-align: left; + color: var(--color-gray-900); + + &:hover { + background-color: var(--color-gray-50); + } + } + } + } + } + } + + @media (min-width: 1024px) { + display: none; + } + } + `; + + constructor() { + super(); + this.open = false; + } + + mobileTemplate() { + return html``; + } + + render() { + return html`
+
+
+ + Company Logo +
+ +
+ +
+
+ + ${this.mobileTemplate()} +
`; + } +} + +customElements.define('a4-header', A4Header); diff --git a/assignments/a4/css/common.css b/assignments/a4/css/common.css new file mode 100644 index 0000000..4dd1e35 --- /dev/null +++ b/assignments/a4/css/common.css @@ -0,0 +1,673 @@ +*, +:before, +:after { + box-sizing: border-box; + border: 0 solid #e5e7eb; +} + +:before, +:after { + --tw-content: ''; +} + +html, +:host { + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + font-family: + ui-sans-serif, + system-ui, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + line-height: 1.5; +} + +body { + line-height: inherit; + margin: 0; +} + +hr { + color: inherit; + border-top-width: 1px; + height: 0; +} + +abbr:where([title]) { + text-decoration: underline dotted; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +a { + color: inherit; + text-decoration: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp, +pre { + font-feature-settings: normal; + font-variation-settings: normal; + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} + +button, +input, +optgroup, +select, +textarea { + font-feature-settings: inherit; + font-variation-settings: inherit; + font-family: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} + +button, +select { + text-transform: none; +} + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + background-color: #0000; + background-image: none; +} + +:-moz-focusring { + outline: auto; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +progress { + vertical-align: baseline; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +summary { + display: list-item; +} + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + margin: 0; + padding: 0; + list-style: none; +} + +dialog { + padding: 0; +} + +textarea { + resize: vertical; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #9ca3af; +} + +button, +[role='button'] { + cursor: pointer; +} + +:disabled { + cursor: default; +} + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + vertical-align: middle; + display: block; +} + +img, +video { + max-width: 100%; + height: auto; +} + +[hidden] { + display: none; +} + +*, +:before, +:after, +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +:root { + --color-inherit: inherit; + --color-current: currentColor; + --color-transparent: transparent; + --color-black: #000; + --color-white: #fff; + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + --color-slate-950: #020617; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-gray-950: #030712; + --color-zinc-50: #fafafa; + --color-zinc-100: #f4f4f5; + --color-zinc-200: #e4e4e7; + --color-zinc-300: #d4d4d8; + --color-zinc-400: #a1a1aa; + --color-zinc-500: #71717a; + --color-zinc-600: #52525b; + --color-zinc-700: #3f3f46; + --color-zinc-800: #27272a; + --color-zinc-900: #18181b; + --color-zinc-950: #09090b; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + --color-neutral-950: #0a0a0a; + --color-stone-50: #fafaf9; + --color-stone-100: #f5f5f4; + --color-stone-200: #e7e5e4; + --color-stone-300: #d6d3d1; + --color-stone-400: #a8a29e; + --color-stone-500: #78716c; + --color-stone-600: #57534e; + --color-stone-700: #44403c; + --color-stone-800: #292524; + --color-stone-900: #1c1917; + --color-stone-950: #0c0a09; + --color-red-50: #fef2f2; + --color-red-100: #fee2e2; + --color-red-200: #fecaca; + --color-red-300: #fca5a5; + --color-red-400: #f87171; + --color-red-500: #ef4444; + --color-red-600: #dc2626; + --color-red-700: #b91c1c; + --color-red-800: #991b1b; + --color-red-900: #7f1d1d; + --color-red-950: #450a0a; + --color-orange-50: #fff7ed; + --color-orange-100: #ffedd5; + --color-orange-200: #fed7aa; + --color-orange-300: #fdba74; + --color-orange-400: #fb923c; + --color-orange-500: #f97316; + --color-orange-600: #ea580c; + --color-orange-700: #c2410c; + --color-orange-800: #9a3412; + --color-orange-900: #7c2d12; + --color-orange-950: #431407; + --color-amber-50: #fffbeb; + --color-amber-100: #fef3c7; + --color-amber-200: #fde68a; + --color-amber-300: #fcd34d; + --color-amber-400: #fbbf24; + --color-amber-500: #f59e0b; + --color-amber-600: #d97706; + --color-amber-700: #b45309; + --color-amber-800: #92400e; + --color-amber-900: #78350f; + --color-amber-950: #451a03; + --color-yellow-50: #fefce8; + --color-yellow-100: #fef9c3; + --color-yellow-200: #fef08a; + --color-yellow-300: #fde047; + --color-yellow-400: #facc15; + --color-yellow-500: #eab308; + --color-yellow-600: #ca8a04; + --color-yellow-700: #a16207; + --color-yellow-800: #854d0e; + --color-yellow-900: #713f12; + --color-yellow-950: #422006; + --color-lime-50: #f7fee7; + --color-lime-100: #ecfccb; + --color-lime-200: #d9f99d; + --color-lime-300: #bef264; + --color-lime-400: #a3e635; + --color-lime-500: #84cc16; + --color-lime-600: #65a30d; + --color-lime-700: #4d7c0f; + --color-lime-800: #3f6212; + --color-lime-900: #365314; + --color-lime-950: #1a2e05; + --color-green-50: #f0fdf4; + --color-green-100: #dcfce7; + --color-green-200: #bbf7d0; + --color-green-300: #86efac; + --color-green-400: #4ade80; + --color-green-500: #22c55e; + --color-green-600: #16a34a; + --color-green-700: #15803d; + --color-green-800: #166534; + --color-green-900: #14532d; + --color-green-950: #052e16; + --color-emerald-50: #ecfdf5; + --color-emerald-100: #d1fae5; + --color-emerald-200: #a7f3d0; + --color-emerald-300: #6ee7b7; + --color-emerald-400: #34d399; + --color-emerald-500: #10b981; + --color-emerald-600: #059669; + --color-emerald-700: #047857; + --color-emerald-800: #065f46; + --color-emerald-900: #064e3b; + --color-emerald-950: #022c22; + --color-teal-50: #f0fdfa; + --color-teal-100: #ccfbf1; + --color-teal-200: #99f6e4; + --color-teal-300: #5eead4; + --color-teal-400: #2dd4bf; + --color-teal-500: #14b8a6; + --color-teal-600: #0d9488; + --color-teal-700: #0f766e; + --color-teal-800: #115e59; + --color-teal-900: #134e4a; + --color-teal-950: #042f2e; + --color-cyan-50: #ecfeff; + --color-cyan-100: #cffafe; + --color-cyan-200: #a5f3fc; + --color-cyan-300: #67e8f9; + --color-cyan-400: #22d3ee; + --color-cyan-500: #06b6d4; + --color-cyan-600: #0891b2; + --color-cyan-700: #0e7490; + --color-cyan-800: #155e75; + --color-cyan-900: #164e63; + --color-cyan-950: #083344; + --color-sky-50: #f0f9ff; + --color-sky-100: #e0f2fe; + --color-sky-200: #bae6fd; + --color-sky-300: #7dd3fc; + --color-sky-400: #38bdf8; + --color-sky-500: #0ea5e9; + --color-sky-600: #0284c7; + --color-sky-700: #0369a1; + --color-sky-800: #075985; + --color-sky-900: #0c4a6e; + --color-sky-950: #082f49; + --color-blue-50: #eff6ff; + --color-blue-100: #dbeafe; + --color-blue-200: #bfdbfe; + --color-blue-300: #93c5fd; + --color-blue-400: #60a5fa; + --color-blue-500: #3b82f6; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + --color-blue-800: #1e40af; + --color-blue-900: #1e3a8a; + --color-blue-950: #172554; + --color-indigo-50: #eef2ff; + --color-indigo-100: #e0e7ff; + --color-indigo-200: #c7d2fe; + --color-indigo-300: #a5b4fc; + --color-indigo-400: #818cf8; + --color-indigo-500: #6366f1; + --color-indigo-600: #4f46e5; + --color-indigo-700: #4338ca; + --color-indigo-800: #3730a3; + --color-indigo-900: #312e81; + --color-indigo-950: #1e1b4b; + --color-violet-50: #f5f3ff; + --color-violet-100: #ede9fe; + --color-violet-200: #ddd6fe; + --color-violet-300: #c4b5fd; + --color-violet-400: #a78bfa; + --color-violet-500: #8b5cf6; + --color-violet-600: #7c3aed; + --color-violet-700: #6d28d9; + --color-violet-800: #5b21b6; + --color-violet-900: #4c1d95; + --color-violet-950: #2e1065; + --color-purple-50: #faf5ff; + --color-purple-100: #f3e8ff; + --color-purple-200: #e9d5ff; + --color-purple-300: #d8b4fe; + --color-purple-400: #c084fc; + --color-purple-500: #a855f7; + --color-purple-600: #9333ea; + --color-purple-700: #7e22ce; + --color-purple-800: #6b21a8; + --color-purple-900: #581c87; + --color-purple-950: #3b0764; + --color-fuchsia-50: #fdf4ff; + --color-fuchsia-100: #fae8ff; + --color-fuchsia-200: #f5d0fe; + --color-fuchsia-300: #f0abfc; + --color-fuchsia-400: #e879f9; + --color-fuchsia-500: #d946ef; + --color-fuchsia-600: #c026d3; + --color-fuchsia-700: #a21caf; + --color-fuchsia-800: #86198f; + --color-fuchsia-900: #701a75; + --color-fuchsia-950: #4a044e; + --color-pink-50: #fdf2f8; + --color-pink-100: #fce7f3; + --color-pink-200: #fbcfe8; + --color-pink-300: #f9a8d4; + --color-pink-400: #f472b6; + --color-pink-500: #ec4899; + --color-pink-600: #db2777; + --color-pink-700: #be185d; + --color-pink-800: #9d174d; + --color-pink-900: #831843; + --color-pink-950: #500724; + --color-rose-50: #fff1f2; + --color-rose-100: #ffe4e6; + --color-rose-200: #fecdd3; + --color-rose-300: #fda4af; + --color-rose-400: #fb7185; + --color-rose-500: #f43f5e; + --color-rose-600: #e11d48; + --color-rose-700: #be123c; + --color-rose-800: #9f1239; + --color-rose-900: #881337; + --color-rose-950: #4c0519; + --shadow-sm: 0 1px 2px 0 #0000000d; + --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --shadow-inner: inset 0 2px 4px 0 #0000000d; + --shadow-none: none; + --space-0: 0px; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-7: 1.75rem; + --space-8: 2rem; + --space-9: 2.25rem; + --space-10: 2.5rem; + --space-11: 2.75rem; + --space-12: 3rem; + --space-14: 3.5rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-28: 7rem; + --space-32: 8rem; + --space-36: 9rem; + --space-40: 10rem; + --space-44: 11rem; + --space-48: 12rem; + --space-52: 13rem; + --space-56: 14rem; + --space-60: 15rem; + --space-64: 16rem; + --space-72: 18rem; + --space-80: 20rem; + --space-96: 24rem; + --space-px: 1px; + --screen-sm: 640px; + --screen-md: 768px; + --screen-lg: 1024px; + --screen-xl: 1280px; + --screen-2xl: 1536px; + --w-0: 0px; + --w-1: 0.25rem; + --w-2: 0.5rem; + --w-3: 0.75rem; + --w-4: 1rem; + --w-5: 1.25rem; + --w-6: 1.5rem; + --w-7: 1.75rem; + --w-8: 2rem; + --w-9: 2.25rem; + --w-10: 2.5rem; + --w-11: 2.75rem; + --w-12: 3rem; + --w-14: 3.5rem; + --w-16: 4rem; + --w-20: 5rem; + --w-24: 6rem; + --w-28: 7rem; + --w-32: 8rem; + --w-36: 9rem; + --w-40: 10rem; + --w-44: 11rem; + --w-48: 12rem; + --w-52: 13rem; + --w-56: 14rem; + --w-60: 15rem; + --w-64: 16rem; + --w-72: 18rem; + --w-80: 20rem; + --w-96: 24rem; + --w-px: 1px; + --w-none: none; + --w-xs: 20rem; + --w-sm: 24rem; + --w-md: 28rem; + --w-lg: 32rem; + --w-xl: 36rem; + --w-2xl: 42rem; + --w-3xl: 48rem; + --w-4xl: 56rem; + --w-5xl: 64rem; + --w-6xl: 72rem; + --w-7xl: 80rem; + --w-full: 100%; + --w-min: min-content; + --w-max: max-content; + --w-fit: fit-content; + --w-prose: 65ch; + --w-screen-sm: 640px; + --w-screen-md: 768px; + --w-screen-lg: 1024px; + --w-screen-xl: 1280px; + --w-screen-2xl: 1536px; + --rounded-none: 0px; + --rounded-sm: 0.125rem; + --rounded: 0.25rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-full: 9999px; +} diff --git a/assignments/a4/css/index.css b/assignments/a4/css/index.css new file mode 100644 index 0000000..053a3d8 --- /dev/null +++ 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; +} diff --git a/assignments/a4/css/shared.css b/assignments/a4/css/shared.css new file mode 100644 index 0000000..eee1f4a --- /dev/null +++ b/assignments/a4/css/shared.css @@ -0,0 +1,16 @@ +@import 'common.css'; + +html, +body { + height: 100%; + font-family: InterVariable, Arial, Helvetica, sans-serif; + display: flex; + flex-direction: column; +} + +button { + border: none; + background-color: none; + padding: none; + margin: none; +} diff --git a/assignments/a4/img/clt0.jpg b/assignments/a4/img/clt0.jpg new file mode 100644 index 0000000..7bc35e6 Binary files /dev/null and b/assignments/a4/img/clt0.jpg differ diff --git a/assignments/a4/img/clt1.jpg b/assignments/a4/img/clt1.jpg new file mode 100644 index 0000000..9770ebd Binary files /dev/null and b/assignments/a4/img/clt1.jpg differ diff --git a/assignments/a4/img/clt2.jpg b/assignments/a4/img/clt2.jpg new file mode 100644 index 0000000..fbc2e9e Binary files /dev/null and b/assignments/a4/img/clt2.jpg differ diff --git a/assignments/a4/img/favicon.png b/assignments/a4/img/favicon.png new file mode 100644 index 0000000..b5aa13a Binary files /dev/null and b/assignments/a4/img/favicon.png differ diff --git a/assignments/a4/index.html b/assignments/a4/index.html new file mode 100644 index 0000000..c4bd588 --- /dev/null +++ b/assignments/a4/index.html @@ -0,0 +1,57 @@ + + + + + + Assignment A4 + + + + + + + + + + +
+
+

Welcome.

+

We're glad you're here.

+ +
+ +
+

Join our mailing list for updates!

+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ + +
+
+ +
+
+ photo of charlotte + photo of charlotte + photo of charlotte +
+
+ + + + diff --git a/practices/24-10-24/css/common.css b/practices/24-10-24/css/common.css new file mode 100644 index 0000000..4dd1e35 --- /dev/null +++ b/practices/24-10-24/css/common.css @@ -0,0 +1,673 @@ +*, +:before, +:after { + box-sizing: border-box; + border: 0 solid #e5e7eb; +} + +:before, +:after { + --tw-content: ''; +} + +html, +:host { + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + font-family: + ui-sans-serif, + system-ui, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + line-height: 1.5; +} + +body { + line-height: inherit; + margin: 0; +} + +hr { + color: inherit; + border-top-width: 1px; + height: 0; +} + +abbr:where([title]) { + text-decoration: underline dotted; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +a { + color: inherit; + text-decoration: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp, +pre { + font-feature-settings: normal; + font-variation-settings: normal; + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} + +button, +input, +optgroup, +select, +textarea { + font-feature-settings: inherit; + font-variation-settings: inherit; + font-family: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} + +button, +select { + text-transform: none; +} + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + background-color: #0000; + background-image: none; +} + +:-moz-focusring { + outline: auto; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +progress { + vertical-align: baseline; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +summary { + display: list-item; +} + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + margin: 0; + padding: 0; + list-style: none; +} + +dialog { + padding: 0; +} + +textarea { + resize: vertical; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #9ca3af; +} + +button, +[role='button'] { + cursor: pointer; +} + +:disabled { + cursor: default; +} + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + vertical-align: middle; + display: block; +} + +img, +video { + max-width: 100%; + height: auto; +} + +[hidden] { + display: none; +} + +*, +:before, +:after, +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +:root { + --color-inherit: inherit; + --color-current: currentColor; + --color-transparent: transparent; + --color-black: #000; + --color-white: #fff; + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + --color-slate-950: #020617; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-gray-950: #030712; + --color-zinc-50: #fafafa; + --color-zinc-100: #f4f4f5; + --color-zinc-200: #e4e4e7; + --color-zinc-300: #d4d4d8; + --color-zinc-400: #a1a1aa; + --color-zinc-500: #71717a; + --color-zinc-600: #52525b; + --color-zinc-700: #3f3f46; + --color-zinc-800: #27272a; + --color-zinc-900: #18181b; + --color-zinc-950: #09090b; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + --color-neutral-950: #0a0a0a; + --color-stone-50: #fafaf9; + --color-stone-100: #f5f5f4; + --color-stone-200: #e7e5e4; + --color-stone-300: #d6d3d1; + --color-stone-400: #a8a29e; + --color-stone-500: #78716c; + --color-stone-600: #57534e; + --color-stone-700: #44403c; + --color-stone-800: #292524; + --color-stone-900: #1c1917; + --color-stone-950: #0c0a09; + --color-red-50: #fef2f2; + --color-red-100: #fee2e2; + --color-red-200: #fecaca; + --color-red-300: #fca5a5; + --color-red-400: #f87171; + --color-red-500: #ef4444; + --color-red-600: #dc2626; + --color-red-700: #b91c1c; + --color-red-800: #991b1b; + --color-red-900: #7f1d1d; + --color-red-950: #450a0a; + --color-orange-50: #fff7ed; + --color-orange-100: #ffedd5; + --color-orange-200: #fed7aa; + --color-orange-300: #fdba74; + --color-orange-400: #fb923c; + --color-orange-500: #f97316; + --color-orange-600: #ea580c; + --color-orange-700: #c2410c; + --color-orange-800: #9a3412; + --color-orange-900: #7c2d12; + --color-orange-950: #431407; + --color-amber-50: #fffbeb; + --color-amber-100: #fef3c7; + --color-amber-200: #fde68a; + --color-amber-300: #fcd34d; + --color-amber-400: #fbbf24; + --color-amber-500: #f59e0b; + --color-amber-600: #d97706; + --color-amber-700: #b45309; + --color-amber-800: #92400e; + --color-amber-900: #78350f; + --color-amber-950: #451a03; + --color-yellow-50: #fefce8; + --color-yellow-100: #fef9c3; + --color-yellow-200: #fef08a; + --color-yellow-300: #fde047; + --color-yellow-400: #facc15; + --color-yellow-500: #eab308; + --color-yellow-600: #ca8a04; + --color-yellow-700: #a16207; + --color-yellow-800: #854d0e; + --color-yellow-900: #713f12; + --color-yellow-950: #422006; + --color-lime-50: #f7fee7; + --color-lime-100: #ecfccb; + --color-lime-200: #d9f99d; + --color-lime-300: #bef264; + --color-lime-400: #a3e635; + --color-lime-500: #84cc16; + --color-lime-600: #65a30d; + --color-lime-700: #4d7c0f; + --color-lime-800: #3f6212; + --color-lime-900: #365314; + --color-lime-950: #1a2e05; + --color-green-50: #f0fdf4; + --color-green-100: #dcfce7; + --color-green-200: #bbf7d0; + --color-green-300: #86efac; + --color-green-400: #4ade80; + --color-green-500: #22c55e; + --color-green-600: #16a34a; + --color-green-700: #15803d; + --color-green-800: #166534; + --color-green-900: #14532d; + --color-green-950: #052e16; + --color-emerald-50: #ecfdf5; + --color-emerald-100: #d1fae5; + --color-emerald-200: #a7f3d0; + --color-emerald-300: #6ee7b7; + --color-emerald-400: #34d399; + --color-emerald-500: #10b981; + --color-emerald-600: #059669; + --color-emerald-700: #047857; + --color-emerald-800: #065f46; + --color-emerald-900: #064e3b; + --color-emerald-950: #022c22; + --color-teal-50: #f0fdfa; + --color-teal-100: #ccfbf1; + --color-teal-200: #99f6e4; + --color-teal-300: #5eead4; + --color-teal-400: #2dd4bf; + --color-teal-500: #14b8a6; + --color-teal-600: #0d9488; + --color-teal-700: #0f766e; + --color-teal-800: #115e59; + --color-teal-900: #134e4a; + --color-teal-950: #042f2e; + --color-cyan-50: #ecfeff; + --color-cyan-100: #cffafe; + --color-cyan-200: #a5f3fc; + --color-cyan-300: #67e8f9; + --color-cyan-400: #22d3ee; + --color-cyan-500: #06b6d4; + --color-cyan-600: #0891b2; + --color-cyan-700: #0e7490; + --color-cyan-800: #155e75; + --color-cyan-900: #164e63; + --color-cyan-950: #083344; + --color-sky-50: #f0f9ff; + --color-sky-100: #e0f2fe; + --color-sky-200: #bae6fd; + --color-sky-300: #7dd3fc; + --color-sky-400: #38bdf8; + --color-sky-500: #0ea5e9; + --color-sky-600: #0284c7; + --color-sky-700: #0369a1; + --color-sky-800: #075985; + --color-sky-900: #0c4a6e; + --color-sky-950: #082f49; + --color-blue-50: #eff6ff; + --color-blue-100: #dbeafe; + --color-blue-200: #bfdbfe; + --color-blue-300: #93c5fd; + --color-blue-400: #60a5fa; + --color-blue-500: #3b82f6; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + --color-blue-800: #1e40af; + --color-blue-900: #1e3a8a; + --color-blue-950: #172554; + --color-indigo-50: #eef2ff; + --color-indigo-100: #e0e7ff; + --color-indigo-200: #c7d2fe; + --color-indigo-300: #a5b4fc; + --color-indigo-400: #818cf8; + --color-indigo-500: #6366f1; + --color-indigo-600: #4f46e5; + --color-indigo-700: #4338ca; + --color-indigo-800: #3730a3; + --color-indigo-900: #312e81; + --color-indigo-950: #1e1b4b; + --color-violet-50: #f5f3ff; + --color-violet-100: #ede9fe; + --color-violet-200: #ddd6fe; + --color-violet-300: #c4b5fd; + --color-violet-400: #a78bfa; + --color-violet-500: #8b5cf6; + --color-violet-600: #7c3aed; + --color-violet-700: #6d28d9; + --color-violet-800: #5b21b6; + --color-violet-900: #4c1d95; + --color-violet-950: #2e1065; + --color-purple-50: #faf5ff; + --color-purple-100: #f3e8ff; + --color-purple-200: #e9d5ff; + --color-purple-300: #d8b4fe; + --color-purple-400: #c084fc; + --color-purple-500: #a855f7; + --color-purple-600: #9333ea; + --color-purple-700: #7e22ce; + --color-purple-800: #6b21a8; + --color-purple-900: #581c87; + --color-purple-950: #3b0764; + --color-fuchsia-50: #fdf4ff; + --color-fuchsia-100: #fae8ff; + --color-fuchsia-200: #f5d0fe; + --color-fuchsia-300: #f0abfc; + --color-fuchsia-400: #e879f9; + --color-fuchsia-500: #d946ef; + --color-fuchsia-600: #c026d3; + --color-fuchsia-700: #a21caf; + --color-fuchsia-800: #86198f; + --color-fuchsia-900: #701a75; + --color-fuchsia-950: #4a044e; + --color-pink-50: #fdf2f8; + --color-pink-100: #fce7f3; + --color-pink-200: #fbcfe8; + --color-pink-300: #f9a8d4; + --color-pink-400: #f472b6; + --color-pink-500: #ec4899; + --color-pink-600: #db2777; + --color-pink-700: #be185d; + --color-pink-800: #9d174d; + --color-pink-900: #831843; + --color-pink-950: #500724; + --color-rose-50: #fff1f2; + --color-rose-100: #ffe4e6; + --color-rose-200: #fecdd3; + --color-rose-300: #fda4af; + --color-rose-400: #fb7185; + --color-rose-500: #f43f5e; + --color-rose-600: #e11d48; + --color-rose-700: #be123c; + --color-rose-800: #9f1239; + --color-rose-900: #881337; + --color-rose-950: #4c0519; + --shadow-sm: 0 1px 2px 0 #0000000d; + --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --shadow-inner: inset 0 2px 4px 0 #0000000d; + --shadow-none: none; + --space-0: 0px; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-7: 1.75rem; + --space-8: 2rem; + --space-9: 2.25rem; + --space-10: 2.5rem; + --space-11: 2.75rem; + --space-12: 3rem; + --space-14: 3.5rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-28: 7rem; + --space-32: 8rem; + --space-36: 9rem; + --space-40: 10rem; + --space-44: 11rem; + --space-48: 12rem; + --space-52: 13rem; + --space-56: 14rem; + --space-60: 15rem; + --space-64: 16rem; + --space-72: 18rem; + --space-80: 20rem; + --space-96: 24rem; + --space-px: 1px; + --screen-sm: 640px; + --screen-md: 768px; + --screen-lg: 1024px; + --screen-xl: 1280px; + --screen-2xl: 1536px; + --w-0: 0px; + --w-1: 0.25rem; + --w-2: 0.5rem; + --w-3: 0.75rem; + --w-4: 1rem; + --w-5: 1.25rem; + --w-6: 1.5rem; + --w-7: 1.75rem; + --w-8: 2rem; + --w-9: 2.25rem; + --w-10: 2.5rem; + --w-11: 2.75rem; + --w-12: 3rem; + --w-14: 3.5rem; + --w-16: 4rem; + --w-20: 5rem; + --w-24: 6rem; + --w-28: 7rem; + --w-32: 8rem; + --w-36: 9rem; + --w-40: 10rem; + --w-44: 11rem; + --w-48: 12rem; + --w-52: 13rem; + --w-56: 14rem; + --w-60: 15rem; + --w-64: 16rem; + --w-72: 18rem; + --w-80: 20rem; + --w-96: 24rem; + --w-px: 1px; + --w-none: none; + --w-xs: 20rem; + --w-sm: 24rem; + --w-md: 28rem; + --w-lg: 32rem; + --w-xl: 36rem; + --w-2xl: 42rem; + --w-3xl: 48rem; + --w-4xl: 56rem; + --w-5xl: 64rem; + --w-6xl: 72rem; + --w-7xl: 80rem; + --w-full: 100%; + --w-min: min-content; + --w-max: max-content; + --w-fit: fit-content; + --w-prose: 65ch; + --w-screen-sm: 640px; + --w-screen-md: 768px; + --w-screen-lg: 1024px; + --w-screen-xl: 1280px; + --w-screen-2xl: 1536px; + --rounded-none: 0px; + --rounded-sm: 0.125rem; + --rounded: 0.25rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-full: 9999px; +} diff --git a/practices/24-10-24/css/index.css b/practices/24-10-24/css/index.css new file mode 100644 index 0000000..c65d8c2 --- /dev/null +++ b/practices/24-10-24/css/index.css @@ -0,0 +1 @@ +/* @import 'shared.css'; */ diff --git a/practices/24-10-24/css/shared.css b/practices/24-10-24/css/shared.css new file mode 100644 index 0000000..6b6c07a --- /dev/null +++ b/practices/24-10-24/css/shared.css @@ -0,0 +1 @@ +@import 'common.css'; diff --git a/practices/24-10-24/index.html b/practices/24-10-24/index.html new file mode 100644 index 0000000..15eb29a --- /dev/null +++ b/practices/24-10-24/index.html @@ -0,0 +1,61 @@ + + + + + + In-Class 24-10-24 + + + + +
+
+ + +
+
+ + +
+
+
+ + + + + +
+
+
+
+ + +
+ +
+ + +
+
+
+ + +
+ + +
+ + + diff --git a/practices/24-10-29/css/common.css b/practices/24-10-29/css/common.css new file mode 100644 index 0000000..7a1ca91 --- /dev/null +++ b/practices/24-10-29/css/common.css @@ -0,0 +1,926 @@ +*, +:before, +:after { + box-sizing: border-box; + border: 0 solid #e5e7eb; +} + +:before, +:after { + --tw-content: ''; +} + +html, +:host { + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + font-family: + ui-sans-serif, + system-ui, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + line-height: 1.5; +} + +body { + line-height: inherit; + margin: 0; +} + +hr { + height: 0; + color: inherit; + border-top-width: 1px; +} + +abbr:where([title]) { + text-decoration: underline dotted; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +a { + color: inherit; + text-decoration: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp, +pre { + font-feature-settings: normal; + font-variation-settings: normal; + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} + +button, +input, +optgroup, +select, +textarea { + font-feature-settings: inherit; + font-variation-settings: inherit; + font-family: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} + +button, +select { + text-transform: none; +} + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + background-color: #0000; + background-image: none; +} + +:-moz-focusring { + outline: auto; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +progress { + vertical-align: baseline; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +summary { + display: list-item; +} + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + margin: 0; + padding: 0; + list-style: none; +} + +dialog { + padding: 0; +} + +textarea { + resize: vertical; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #9ca3af; +} + +button, +[role='button'] { + cursor: pointer; +} + +:disabled { + cursor: default; +} + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + vertical-align: middle; + display: block; +} + +img, +video { + max-width: 100%; + height: auto; +} + +[hidden] { + display: none; +} + +*, +:before, +:after, +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +:root { + --color-inherit: inherit; + --color-current: currentColor; + --color-transparent: transparent; + --color-black: #000; + --color-white: #fff; + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + --color-slate-950: #020617; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-gray-950: #030712; + --color-zinc-50: #fafafa; + --color-zinc-100: #f4f4f5; + --color-zinc-200: #e4e4e7; + --color-zinc-300: #d4d4d8; + --color-zinc-400: #a1a1aa; + --color-zinc-500: #71717a; + --color-zinc-600: #52525b; + --color-zinc-700: #3f3f46; + --color-zinc-800: #27272a; + --color-zinc-900: #18181b; + --color-zinc-950: #09090b; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + --color-neutral-950: #0a0a0a; + --color-stone-50: #fafaf9; + --color-stone-100: #f5f5f4; + --color-stone-200: #e7e5e4; + --color-stone-300: #d6d3d1; + --color-stone-400: #a8a29e; + --color-stone-500: #78716c; + --color-stone-600: #57534e; + --color-stone-700: #44403c; + --color-stone-800: #292524; + --color-stone-900: #1c1917; + --color-stone-950: #0c0a09; + --color-red-50: #fef2f2; + --color-red-100: #fee2e2; + --color-red-200: #fecaca; + --color-red-300: #fca5a5; + --color-red-400: #f87171; + --color-red-500: #ef4444; + --color-red-600: #dc2626; + --color-red-700: #b91c1c; + --color-red-800: #991b1b; + --color-red-900: #7f1d1d; + --color-red-950: #450a0a; + --color-orange-50: #fff7ed; + --color-orange-100: #ffedd5; + --color-orange-200: #fed7aa; + --color-orange-300: #fdba74; + --color-orange-400: #fb923c; + --color-orange-500: #f97316; + --color-orange-600: #ea580c; + --color-orange-700: #c2410c; + --color-orange-800: #9a3412; + --color-orange-900: #7c2d12; + --color-orange-950: #431407; + --color-amber-50: #fffbeb; + --color-amber-100: #fef3c7; + --color-amber-200: #fde68a; + --color-amber-300: #fcd34d; + --color-amber-400: #fbbf24; + --color-amber-500: #f59e0b; + --color-amber-600: #d97706; + --color-amber-700: #b45309; + --color-amber-800: #92400e; + --color-amber-900: #78350f; + --color-amber-950: #451a03; + --color-yellow-50: #fefce8; + --color-yellow-100: #fef9c3; + --color-yellow-200: #fef08a; + --color-yellow-300: #fde047; + --color-yellow-400: #facc15; + --color-yellow-500: #eab308; + --color-yellow-600: #ca8a04; + --color-yellow-700: #a16207; + --color-yellow-800: #854d0e; + --color-yellow-900: #713f12; + --color-yellow-950: #422006; + --color-lime-50: #f7fee7; + --color-lime-100: #ecfccb; + --color-lime-200: #d9f99d; + --color-lime-300: #bef264; + --color-lime-400: #a3e635; + --color-lime-500: #84cc16; + --color-lime-600: #65a30d; + --color-lime-700: #4d7c0f; + --color-lime-800: #3f6212; + --color-lime-900: #365314; + --color-lime-950: #1a2e05; + --color-green-50: #f0fdf4; + --color-green-100: #dcfce7; + --color-green-200: #bbf7d0; + --color-green-300: #86efac; + --color-green-400: #4ade80; + --color-green-500: #22c55e; + --color-green-600: #16a34a; + --color-green-700: #15803d; + --color-green-800: #166534; + --color-green-900: #14532d; + --color-green-950: #052e16; + --color-emerald-50: #ecfdf5; + --color-emerald-100: #d1fae5; + --color-emerald-200: #a7f3d0; + --color-emerald-300: #6ee7b7; + --color-emerald-400: #34d399; + --color-emerald-500: #10b981; + --color-emerald-600: #059669; + --color-emerald-700: #047857; + --color-emerald-800: #065f46; + --color-emerald-900: #064e3b; + --color-emerald-950: #022c22; + --color-teal-50: #f0fdfa; + --color-teal-100: #ccfbf1; + --color-teal-200: #99f6e4; + --color-teal-300: #5eead4; + --color-teal-400: #2dd4bf; + --color-teal-500: #14b8a6; + --color-teal-600: #0d9488; + --color-teal-700: #0f766e; + --color-teal-800: #115e59; + --color-teal-900: #134e4a; + --color-teal-950: #042f2e; + --color-cyan-50: #ecfeff; + --color-cyan-100: #cffafe; + --color-cyan-200: #a5f3fc; + --color-cyan-300: #67e8f9; + --color-cyan-400: #22d3ee; + --color-cyan-500: #06b6d4; + --color-cyan-600: #0891b2; + --color-cyan-700: #0e7490; + --color-cyan-800: #155e75; + --color-cyan-900: #164e63; + --color-cyan-950: #083344; + --color-sky-50: #f0f9ff; + --color-sky-100: #e0f2fe; + --color-sky-200: #bae6fd; + --color-sky-300: #7dd3fc; + --color-sky-400: #38bdf8; + --color-sky-500: #0ea5e9; + --color-sky-600: #0284c7; + --color-sky-700: #0369a1; + --color-sky-800: #075985; + --color-sky-900: #0c4a6e; + --color-sky-950: #082f49; + --color-blue-50: #eff6ff; + --color-blue-100: #dbeafe; + --color-blue-200: #bfdbfe; + --color-blue-300: #93c5fd; + --color-blue-400: #60a5fa; + --color-blue-500: #3b82f6; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + --color-blue-800: #1e40af; + --color-blue-900: #1e3a8a; + --color-blue-950: #172554; + --color-indigo-50: #eef2ff; + --color-indigo-100: #e0e7ff; + --color-indigo-200: #c7d2fe; + --color-indigo-300: #a5b4fc; + --color-indigo-400: #818cf8; + --color-indigo-500: #6366f1; + --color-indigo-600: #4f46e5; + --color-indigo-700: #4338ca; + --color-indigo-800: #3730a3; + --color-indigo-900: #312e81; + --color-indigo-950: #1e1b4b; + --color-violet-50: #f5f3ff; + --color-violet-100: #ede9fe; + --color-violet-200: #ddd6fe; + --color-violet-300: #c4b5fd; + --color-violet-400: #a78bfa; + --color-violet-500: #8b5cf6; + --color-violet-600: #7c3aed; + --color-violet-700: #6d28d9; + --color-violet-800: #5b21b6; + --color-violet-900: #4c1d95; + --color-violet-950: #2e1065; + --color-purple-50: #faf5ff; + --color-purple-100: #f3e8ff; + --color-purple-200: #e9d5ff; + --color-purple-300: #d8b4fe; + --color-purple-400: #c084fc; + --color-purple-500: #a855f7; + --color-purple-600: #9333ea; + --color-purple-700: #7e22ce; + --color-purple-800: #6b21a8; + --color-purple-900: #581c87; + --color-purple-950: #3b0764; + --color-fuchsia-50: #fdf4ff; + --color-fuchsia-100: #fae8ff; + --color-fuchsia-200: #f5d0fe; + --color-fuchsia-300: #f0abfc; + --color-fuchsia-400: #e879f9; + --color-fuchsia-500: #d946ef; + --color-fuchsia-600: #c026d3; + --color-fuchsia-700: #a21caf; + --color-fuchsia-800: #86198f; + --color-fuchsia-900: #701a75; + --color-fuchsia-950: #4a044e; + --color-pink-50: #fdf2f8; + --color-pink-100: #fce7f3; + --color-pink-200: #fbcfe8; + --color-pink-300: #f9a8d4; + --color-pink-400: #f472b6; + --color-pink-500: #ec4899; + --color-pink-600: #db2777; + --color-pink-700: #be185d; + --color-pink-800: #9d174d; + --color-pink-900: #831843; + --color-pink-950: #500724; + --color-rose-50: #fff1f2; + --color-rose-100: #ffe4e6; + --color-rose-200: #fecdd3; + --color-rose-300: #fda4af; + --color-rose-400: #fb7185; + --color-rose-500: #f43f5e; + --color-rose-600: #e11d48; + --color-rose-700: #be123c; + --color-rose-800: #9f1239; + --color-rose-900: #881337; + --color-rose-950: #4c0519; + --shadow-sm: 0 1px 2px 0 #0000000d; + --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --shadow-inner: inset 0 2px 4px 0 #0000000d; + --shadow-none: none; + --ring-0: 0px; + --ring-1: 1px; + --ring-2: 2px; + --ring-4: 4px; + --ring-8: 8px; + --ring: #3b82f6; + --ring-inherit: inherit; + --ring-current: currentColor; + --ring-transparent: transparent; + --ring-black: #000; + --ring-white: #fff; + --ring-slate-50: #f8fafc; + --ring-slate-100: #f1f5f9; + --ring-slate-200: #e2e8f0; + --ring-slate-300: #cbd5e1; + --ring-slate-400: #94a3b8; + --ring-slate-500: #64748b; + --ring-slate-600: #475569; + --ring-slate-700: #334155; + --ring-slate-800: #1e293b; + --ring-slate-900: #0f172a; + --ring-slate-950: #020617; + --ring-gray-50: #f9fafb; + --ring-gray-100: #f3f4f6; + --ring-gray-200: #e5e7eb; + --ring-gray-300: #d1d5db; + --ring-gray-400: #9ca3af; + --ring-gray-500: #6b7280; + --ring-gray-600: #4b5563; + --ring-gray-700: #374151; + --ring-gray-800: #1f2937; + --ring-gray-900: #111827; + --ring-gray-950: #030712; + --ring-zinc-50: #fafafa; + --ring-zinc-100: #f4f4f5; + --ring-zinc-200: #e4e4e7; + --ring-zinc-300: #d4d4d8; + --ring-zinc-400: #a1a1aa; + --ring-zinc-500: #71717a; + --ring-zinc-600: #52525b; + --ring-zinc-700: #3f3f46; + --ring-zinc-800: #27272a; + --ring-zinc-900: #18181b; + --ring-zinc-950: #09090b; + --ring-neutral-50: #fafafa; + --ring-neutral-100: #f5f5f5; + --ring-neutral-200: #e5e5e5; + --ring-neutral-300: #d4d4d4; + --ring-neutral-400: #a3a3a3; + --ring-neutral-500: #737373; + --ring-neutral-600: #525252; + --ring-neutral-700: #404040; + --ring-neutral-800: #262626; + --ring-neutral-900: #171717; + --ring-neutral-950: #0a0a0a; + --ring-stone-50: #fafaf9; + --ring-stone-100: #f5f5f4; + --ring-stone-200: #e7e5e4; + --ring-stone-300: #d6d3d1; + --ring-stone-400: #a8a29e; + --ring-stone-500: #78716c; + --ring-stone-600: #57534e; + --ring-stone-700: #44403c; + --ring-stone-800: #292524; + --ring-stone-900: #1c1917; + --ring-stone-950: #0c0a09; + --ring-red-50: #fef2f2; + --ring-red-100: #fee2e2; + --ring-red-200: #fecaca; + --ring-red-300: #fca5a5; + --ring-red-400: #f87171; + --ring-red-500: #ef4444; + --ring-red-600: #dc2626; + --ring-red-700: #b91c1c; + --ring-red-800: #991b1b; + --ring-red-900: #7f1d1d; + --ring-red-950: #450a0a; + --ring-orange-50: #fff7ed; + --ring-orange-100: #ffedd5; + --ring-orange-200: #fed7aa; + --ring-orange-300: #fdba74; + --ring-orange-400: #fb923c; + --ring-orange-500: #f97316; + --ring-orange-600: #ea580c; + --ring-orange-700: #c2410c; + --ring-orange-800: #9a3412; + --ring-orange-900: #7c2d12; + --ring-orange-950: #431407; + --ring-amber-50: #fffbeb; + --ring-amber-100: #fef3c7; + --ring-amber-200: #fde68a; + --ring-amber-300: #fcd34d; + --ring-amber-400: #fbbf24; + --ring-amber-500: #f59e0b; + --ring-amber-600: #d97706; + --ring-amber-700: #b45309; + --ring-amber-800: #92400e; + --ring-amber-900: #78350f; + --ring-amber-950: #451a03; + --ring-yellow-50: #fefce8; + --ring-yellow-100: #fef9c3; + --ring-yellow-200: #fef08a; + --ring-yellow-300: #fde047; + --ring-yellow-400: #facc15; + --ring-yellow-500: #eab308; + --ring-yellow-600: #ca8a04; + --ring-yellow-700: #a16207; + --ring-yellow-800: #854d0e; + --ring-yellow-900: #713f12; + --ring-yellow-950: #422006; + --ring-lime-50: #f7fee7; + --ring-lime-100: #ecfccb; + --ring-lime-200: #d9f99d; + --ring-lime-300: #bef264; + --ring-lime-400: #a3e635; + --ring-lime-500: #84cc16; + --ring-lime-600: #65a30d; + --ring-lime-700: #4d7c0f; + --ring-lime-800: #3f6212; + --ring-lime-900: #365314; + --ring-lime-950: #1a2e05; + --ring-green-50: #f0fdf4; + --ring-green-100: #dcfce7; + --ring-green-200: #bbf7d0; + --ring-green-300: #86efac; + --ring-green-400: #4ade80; + --ring-green-500: #22c55e; + --ring-green-600: #16a34a; + --ring-green-700: #15803d; + --ring-green-800: #166534; + --ring-green-900: #14532d; + --ring-green-950: #052e16; + --ring-emerald-50: #ecfdf5; + --ring-emerald-100: #d1fae5; + --ring-emerald-200: #a7f3d0; + --ring-emerald-300: #6ee7b7; + --ring-emerald-400: #34d399; + --ring-emerald-500: #10b981; + --ring-emerald-600: #059669; + --ring-emerald-700: #047857; + --ring-emerald-800: #065f46; + --ring-emerald-900: #064e3b; + --ring-emerald-950: #022c22; + --ring-teal-50: #f0fdfa; + --ring-teal-100: #ccfbf1; + --ring-teal-200: #99f6e4; + --ring-teal-300: #5eead4; + --ring-teal-400: #2dd4bf; + --ring-teal-500: #14b8a6; + --ring-teal-600: #0d9488; + --ring-teal-700: #0f766e; + --ring-teal-800: #115e59; + --ring-teal-900: #134e4a; + --ring-teal-950: #042f2e; + --ring-cyan-50: #ecfeff; + --ring-cyan-100: #cffafe; + --ring-cyan-200: #a5f3fc; + --ring-cyan-300: #67e8f9; + --ring-cyan-400: #22d3ee; + --ring-cyan-500: #06b6d4; + --ring-cyan-600: #0891b2; + --ring-cyan-700: #0e7490; + --ring-cyan-800: #155e75; + --ring-cyan-900: #164e63; + --ring-cyan-950: #083344; + --ring-sky-50: #f0f9ff; + --ring-sky-100: #e0f2fe; + --ring-sky-200: #bae6fd; + --ring-sky-300: #7dd3fc; + --ring-sky-400: #38bdf8; + --ring-sky-500: #0ea5e9; + --ring-sky-600: #0284c7; + --ring-sky-700: #0369a1; + --ring-sky-800: #075985; + --ring-sky-900: #0c4a6e; + --ring-sky-950: #082f49; + --ring-blue-50: #eff6ff; + --ring-blue-100: #dbeafe; + --ring-blue-200: #bfdbfe; + --ring-blue-300: #93c5fd; + --ring-blue-400: #60a5fa; + --ring-blue-500: #3b82f6; + --ring-blue-600: #2563eb; + --ring-blue-700: #1d4ed8; + --ring-blue-800: #1e40af; + --ring-blue-900: #1e3a8a; + --ring-blue-950: #172554; + --ring-indigo-50: #eef2ff; + --ring-indigo-100: #e0e7ff; + --ring-indigo-200: #c7d2fe; + --ring-indigo-300: #a5b4fc; + --ring-indigo-400: #818cf8; + --ring-indigo-500: #6366f1; + --ring-indigo-600: #4f46e5; + --ring-indigo-700: #4338ca; + --ring-indigo-800: #3730a3; + --ring-indigo-900: #312e81; + --ring-indigo-950: #1e1b4b; + --ring-violet-50: #f5f3ff; + --ring-violet-100: #ede9fe; + --ring-violet-200: #ddd6fe; + --ring-violet-300: #c4b5fd; + --ring-violet-400: #a78bfa; + --ring-violet-500: #8b5cf6; + --ring-violet-600: #7c3aed; + --ring-violet-700: #6d28d9; + --ring-violet-800: #5b21b6; + --ring-violet-900: #4c1d95; + --ring-violet-950: #2e1065; + --ring-purple-50: #faf5ff; + --ring-purple-100: #f3e8ff; + --ring-purple-200: #e9d5ff; + --ring-purple-300: #d8b4fe; + --ring-purple-400: #c084fc; + --ring-purple-500: #a855f7; + --ring-purple-600: #9333ea; + --ring-purple-700: #7e22ce; + --ring-purple-800: #6b21a8; + --ring-purple-900: #581c87; + --ring-purple-950: #3b0764; + --ring-fuchsia-50: #fdf4ff; + --ring-fuchsia-100: #fae8ff; + --ring-fuchsia-200: #f5d0fe; + --ring-fuchsia-300: #f0abfc; + --ring-fuchsia-400: #e879f9; + --ring-fuchsia-500: #d946ef; + --ring-fuchsia-600: #c026d3; + --ring-fuchsia-700: #a21caf; + --ring-fuchsia-800: #86198f; + --ring-fuchsia-900: #701a75; + --ring-fuchsia-950: #4a044e; + --ring-pink-50: #fdf2f8; + --ring-pink-100: #fce7f3; + --ring-pink-200: #fbcfe8; + --ring-pink-300: #f9a8d4; + --ring-pink-400: #f472b6; + --ring-pink-500: #ec4899; + --ring-pink-600: #db2777; + --ring-pink-700: #be185d; + --ring-pink-800: #9d174d; + --ring-pink-900: #831843; + --ring-pink-950: #500724; + --ring-rose-50: #fff1f2; + --ring-rose-100: #ffe4e6; + --ring-rose-200: #fecdd3; + --ring-rose-300: #fda4af; + --ring-rose-400: #fb7185; + --ring-rose-500: #f43f5e; + --ring-rose-600: #e11d48; + --ring-rose-700: #be123c; + --ring-rose-800: #9f1239; + --ring-rose-900: #881337; + --ring-rose-950: #4c0519; + --space-0: 0px; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-7: 1.75rem; + --space-8: 2rem; + --space-9: 2.25rem; + --space-10: 2.5rem; + --space-11: 2.75rem; + --space-12: 3rem; + --space-14: 3.5rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-28: 7rem; + --space-32: 8rem; + --space-36: 9rem; + --space-40: 10rem; + --space-44: 11rem; + --space-48: 12rem; + --space-52: 13rem; + --space-56: 14rem; + --space-60: 15rem; + --space-64: 16rem; + --space-72: 18rem; + --space-80: 20rem; + --space-96: 24rem; + --space-px: 1px; + --screen-sm: 640px; + --screen-md: 768px; + --screen-lg: 1024px; + --screen-xl: 1280px; + --screen-2xl: 1536px; + --w-0: 0px; + --w-1: 0.25rem; + --w-2: 0.5rem; + --w-3: 0.75rem; + --w-4: 1rem; + --w-5: 1.25rem; + --w-6: 1.5rem; + --w-7: 1.75rem; + --w-8: 2rem; + --w-9: 2.25rem; + --w-10: 2.5rem; + --w-11: 2.75rem; + --w-12: 3rem; + --w-14: 3.5rem; + --w-16: 4rem; + --w-20: 5rem; + --w-24: 6rem; + --w-28: 7rem; + --w-32: 8rem; + --w-36: 9rem; + --w-40: 10rem; + --w-44: 11rem; + --w-48: 12rem; + --w-52: 13rem; + --w-56: 14rem; + --w-60: 15rem; + --w-64: 16rem; + --w-72: 18rem; + --w-80: 20rem; + --w-96: 24rem; + --w-px: 1px; + --w-none: none; + --w-xs: 20rem; + --w-sm: 24rem; + --w-md: 28rem; + --w-lg: 32rem; + --w-xl: 36rem; + --w-2xl: 42rem; + --w-3xl: 48rem; + --w-4xl: 56rem; + --w-5xl: 64rem; + --w-6xl: 72rem; + --w-7xl: 80rem; + --w-full: 100%; + --w-min: min-content; + --w-max: max-content; + --w-fit: fit-content; + --w-prose: 65ch; + --w-screen-sm: 640px; + --w-screen-md: 768px; + --w-screen-lg: 1024px; + --w-screen-xl: 1280px; + --w-screen-2xl: 1536px; + --rounded-none: 0px; + --rounded-sm: 0.125rem; + --rounded: 0.25rem; + --rounded-md: 0.375rem; + --rounded-lg: 0.5rem; + --rounded-xl: 0.75rem; + --rounded-2xl: 1rem; + --rounded-3xl: 1.5rem; + --rounded-full: 9999px; +} diff --git a/practices/24-10-29/css/index.css b/practices/24-10-29/css/index.css new file mode 100644 index 0000000..56c4620 --- /dev/null +++ b/practices/24-10-29/css/index.css @@ -0,0 +1,35 @@ +@import 'shared.css'; + +html, +body { + height: 100%; + width: 100%; +} + +body { + position: relative; +} + +div { + height: 128px; + width: 128px; + background-color: red; + + position: absolute; + top: calc(50% - 64px); + left: calc(50% - 64px); + + &:hover, + &:focus { + animation: move 10s ease-in-out both; + } +} + +@keyframes move { + 0% { + } + 100% { + top: 0; + left: 0; + } +} diff --git a/practices/24-10-29/css/shared.css b/practices/24-10-29/css/shared.css new file mode 100644 index 0000000..6b6c07a --- /dev/null +++ b/practices/24-10-29/css/shared.css @@ -0,0 +1 @@ +@import 'common.css'; diff --git a/practices/24-10-29/index.html b/practices/24-10-29/index.html new file mode 100644 index 0000000..a367156 --- /dev/null +++ b/practices/24-10-29/index.html @@ -0,0 +1,13 @@ + + + + + + In-Class 24-10-29 + + + + +
+ + diff --git a/shared/common.css b/shared/common.css index 4dd1e35..7a1ca91 100644 --- a/shared/common.css +++ b/shared/common.css @@ -36,9 +36,9 @@ body { } hr { + height: 0; color: inherit; border-top-width: 1px; - height: 0; } abbr:where([title]) { @@ -572,6 +572,259 @@ video { --shadow-2xl: 0 25px 50px -12px #00000040; --shadow-inner: inset 0 2px 4px 0 #0000000d; --shadow-none: none; + --ring-0: 0px; + --ring-1: 1px; + --ring-2: 2px; + --ring-4: 4px; + --ring-8: 8px; + --ring: #3b82f6; + --ring-inherit: inherit; + --ring-current: currentColor; + --ring-transparent: transparent; + --ring-black: #000; + --ring-white: #fff; + --ring-slate-50: #f8fafc; + --ring-slate-100: #f1f5f9; + --ring-slate-200: #e2e8f0; + --ring-slate-300: #cbd5e1; + --ring-slate-400: #94a3b8; + --ring-slate-500: #64748b; + --ring-slate-600: #475569; + --ring-slate-700: #334155; + --ring-slate-800: #1e293b; + --ring-slate-900: #0f172a; + --ring-slate-950: #020617; + --ring-gray-50: #f9fafb; + --ring-gray-100: #f3f4f6; + --ring-gray-200: #e5e7eb; + --ring-gray-300: #d1d5db; + --ring-gray-400: #9ca3af; + --ring-gray-500: #6b7280; + --ring-gray-600: #4b5563; + --ring-gray-700: #374151; + --ring-gray-800: #1f2937; + --ring-gray-900: #111827; + --ring-gray-950: #030712; + --ring-zinc-50: #fafafa; + --ring-zinc-100: #f4f4f5; + --ring-zinc-200: #e4e4e7; + --ring-zinc-300: #d4d4d8; + --ring-zinc-400: #a1a1aa; + --ring-zinc-500: #71717a; + --ring-zinc-600: #52525b; + --ring-zinc-700: #3f3f46; + --ring-zinc-800: #27272a; + --ring-zinc-900: #18181b; + --ring-zinc-950: #09090b; + --ring-neutral-50: #fafafa; + --ring-neutral-100: #f5f5f5; + --ring-neutral-200: #e5e5e5; + --ring-neutral-300: #d4d4d4; + --ring-neutral-400: #a3a3a3; + --ring-neutral-500: #737373; + --ring-neutral-600: #525252; + --ring-neutral-700: #404040; + --ring-neutral-800: #262626; + --ring-neutral-900: #171717; + --ring-neutral-950: #0a0a0a; + --ring-stone-50: #fafaf9; + --ring-stone-100: #f5f5f4; + --ring-stone-200: #e7e5e4; + --ring-stone-300: #d6d3d1; + --ring-stone-400: #a8a29e; + --ring-stone-500: #78716c; + --ring-stone-600: #57534e; + --ring-stone-700: #44403c; + --ring-stone-800: #292524; + --ring-stone-900: #1c1917; + --ring-stone-950: #0c0a09; + --ring-red-50: #fef2f2; + --ring-red-100: #fee2e2; + --ring-red-200: #fecaca; + --ring-red-300: #fca5a5; + --ring-red-400: #f87171; + --ring-red-500: #ef4444; + --ring-red-600: #dc2626; + --ring-red-700: #b91c1c; + --ring-red-800: #991b1b; + --ring-red-900: #7f1d1d; + --ring-red-950: #450a0a; + --ring-orange-50: #fff7ed; + --ring-orange-100: #ffedd5; + --ring-orange-200: #fed7aa; + --ring-orange-300: #fdba74; + --ring-orange-400: #fb923c; + --ring-orange-500: #f97316; + --ring-orange-600: #ea580c; + --ring-orange-700: #c2410c; + --ring-orange-800: #9a3412; + --ring-orange-900: #7c2d12; + --ring-orange-950: #431407; + --ring-amber-50: #fffbeb; + --ring-amber-100: #fef3c7; + --ring-amber-200: #fde68a; + --ring-amber-300: #fcd34d; + --ring-amber-400: #fbbf24; + --ring-amber-500: #f59e0b; + --ring-amber-600: #d97706; + --ring-amber-700: #b45309; + --ring-amber-800: #92400e; + --ring-amber-900: #78350f; + --ring-amber-950: #451a03; + --ring-yellow-50: #fefce8; + --ring-yellow-100: #fef9c3; + --ring-yellow-200: #fef08a; + --ring-yellow-300: #fde047; + --ring-yellow-400: #facc15; + --ring-yellow-500: #eab308; + --ring-yellow-600: #ca8a04; + --ring-yellow-700: #a16207; + --ring-yellow-800: #854d0e; + --ring-yellow-900: #713f12; + --ring-yellow-950: #422006; + --ring-lime-50: #f7fee7; + --ring-lime-100: #ecfccb; + --ring-lime-200: #d9f99d; + --ring-lime-300: #bef264; + --ring-lime-400: #a3e635; + --ring-lime-500: #84cc16; + --ring-lime-600: #65a30d; + --ring-lime-700: #4d7c0f; + --ring-lime-800: #3f6212; + --ring-lime-900: #365314; + --ring-lime-950: #1a2e05; + --ring-green-50: #f0fdf4; + --ring-green-100: #dcfce7; + --ring-green-200: #bbf7d0; + --ring-green-300: #86efac; + --ring-green-400: #4ade80; + --ring-green-500: #22c55e; + --ring-green-600: #16a34a; + --ring-green-700: #15803d; + --ring-green-800: #166534; + --ring-green-900: #14532d; + --ring-green-950: #052e16; + --ring-emerald-50: #ecfdf5; + --ring-emerald-100: #d1fae5; + --ring-emerald-200: #a7f3d0; + --ring-emerald-300: #6ee7b7; + --ring-emerald-400: #34d399; + --ring-emerald-500: #10b981; + --ring-emerald-600: #059669; + --ring-emerald-700: #047857; + --ring-emerald-800: #065f46; + --ring-emerald-900: #064e3b; + --ring-emerald-950: #022c22; + --ring-teal-50: #f0fdfa; + --ring-teal-100: #ccfbf1; + --ring-teal-200: #99f6e4; + --ring-teal-300: #5eead4; + --ring-teal-400: #2dd4bf; + --ring-teal-500: #14b8a6; + --ring-teal-600: #0d9488; + --ring-teal-700: #0f766e; + --ring-teal-800: #115e59; + --ring-teal-900: #134e4a; + --ring-teal-950: #042f2e; + --ring-cyan-50: #ecfeff; + --ring-cyan-100: #cffafe; + --ring-cyan-200: #a5f3fc; + --ring-cyan-300: #67e8f9; + --ring-cyan-400: #22d3ee; + --ring-cyan-500: #06b6d4; + --ring-cyan-600: #0891b2; + --ring-cyan-700: #0e7490; + --ring-cyan-800: #155e75; + --ring-cyan-900: #164e63; + --ring-cyan-950: #083344; + --ring-sky-50: #f0f9ff; + --ring-sky-100: #e0f2fe; + --ring-sky-200: #bae6fd; + --ring-sky-300: #7dd3fc; + --ring-sky-400: #38bdf8; + --ring-sky-500: #0ea5e9; + --ring-sky-600: #0284c7; + --ring-sky-700: #0369a1; + --ring-sky-800: #075985; + --ring-sky-900: #0c4a6e; + --ring-sky-950: #082f49; + --ring-blue-50: #eff6ff; + --ring-blue-100: #dbeafe; + --ring-blue-200: #bfdbfe; + --ring-blue-300: #93c5fd; + --ring-blue-400: #60a5fa; + --ring-blue-500: #3b82f6; + --ring-blue-600: #2563eb; + --ring-blue-700: #1d4ed8; + --ring-blue-800: #1e40af; + --ring-blue-900: #1e3a8a; + --ring-blue-950: #172554; + --ring-indigo-50: #eef2ff; + --ring-indigo-100: #e0e7ff; + --ring-indigo-200: #c7d2fe; + --ring-indigo-300: #a5b4fc; + --ring-indigo-400: #818cf8; + --ring-indigo-500: #6366f1; + --ring-indigo-600: #4f46e5; + --ring-indigo-700: #4338ca; + --ring-indigo-800: #3730a3; + --ring-indigo-900: #312e81; + --ring-indigo-950: #1e1b4b; + --ring-violet-50: #f5f3ff; + --ring-violet-100: #ede9fe; + --ring-violet-200: #ddd6fe; + --ring-violet-300: #c4b5fd; + --ring-violet-400: #a78bfa; + --ring-violet-500: #8b5cf6; + --ring-violet-600: #7c3aed; + --ring-violet-700: #6d28d9; + --ring-violet-800: #5b21b6; + --ring-violet-900: #4c1d95; + --ring-violet-950: #2e1065; + --ring-purple-50: #faf5ff; + --ring-purple-100: #f3e8ff; + --ring-purple-200: #e9d5ff; + --ring-purple-300: #d8b4fe; + --ring-purple-400: #c084fc; + --ring-purple-500: #a855f7; + --ring-purple-600: #9333ea; + --ring-purple-700: #7e22ce; + --ring-purple-800: #6b21a8; + --ring-purple-900: #581c87; + --ring-purple-950: #3b0764; + --ring-fuchsia-50: #fdf4ff; + --ring-fuchsia-100: #fae8ff; + --ring-fuchsia-200: #f5d0fe; + --ring-fuchsia-300: #f0abfc; + --ring-fuchsia-400: #e879f9; + --ring-fuchsia-500: #d946ef; + --ring-fuchsia-600: #c026d3; + --ring-fuchsia-700: #a21caf; + --ring-fuchsia-800: #86198f; + --ring-fuchsia-900: #701a75; + --ring-fuchsia-950: #4a044e; + --ring-pink-50: #fdf2f8; + --ring-pink-100: #fce7f3; + --ring-pink-200: #fbcfe8; + --ring-pink-300: #f9a8d4; + --ring-pink-400: #f472b6; + --ring-pink-500: #ec4899; + --ring-pink-600: #db2777; + --ring-pink-700: #be185d; + --ring-pink-800: #9d174d; + --ring-pink-900: #831843; + --ring-pink-950: #500724; + --ring-rose-50: #fff1f2; + --ring-rose-100: #ffe4e6; + --ring-rose-200: #fecdd3; + --ring-rose-300: #fda4af; + --ring-rose-400: #fb7185; + --ring-rose-500: #f43f5e; + --ring-rose-600: #e11d48; + --ring-rose-700: #be123c; + --ring-rose-800: #9f1239; + --ring-rose-900: #881337; + --ring-rose-950: #4c0519; --space-0: 0px; --space-1: 0.25rem; --space-2: 0.5rem; diff --git a/tailwind.config.js b/tailwind.config.js index f1d349d..6650ab0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,6 +30,10 @@ export default { ':root': { ...extractVars(theme('colors'), '', 'color'), ...extractVars(theme('boxShadow'), '', 'shadow'), + ...extractVars(theme('ringWidth'), '', 'ring'), + ...extractVars(theme('ringColor'), '', 'ring'), + ...extractVars(theme('ringOffsetWidth'), '', 'ring'), + ...extractVars(theme('ringOffsetColor'), '', 'ring'), ...extractVars(theme('spacing'), '', 'space'), ...extractVars(theme('screens'), '', 'screen'), ...extractVars(theme('maxWidth'), '', 'w'),