diff --git a/.gitignore b/.gitignore index bfb5597..eb88a05 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,5 @@ phpstan.neon .claude/settings.local.json config/reference.php + +public/css/app.css diff --git a/assets/css/app.css b/assets/css/app.css index 838377d..ddb9218 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -4,8 +4,15 @@ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap'); +@layer utilities { + .max-w-screen-xl { + max-width: 1472px; + } +} + @layer base { html { + font-size: 115%; background-color: #080d19; color: #e2e8f0; font-family: 'DM Sans', sans-serif; diff --git a/public/css/app.css b/public/css/app.css deleted file mode 100644 index aa48bc3..0000000 --- a/public/css/app.css +++ /dev/null @@ -1,838 +0,0 @@ -*, ::before, ::after { - --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: rgb(59 130 246 / 0.5); - --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: ; -} - -::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: rgb(59 130 246 / 0.5); - --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: ; -}/* -! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com -*//* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - -o-tab-size: 4; - tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: JetBrains Mono, monospace; /* 1 */ - font-feature-settings: normal; /* 2 */ - font-variation-settings: normal; /* 3 */ - font-size: 1em; /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - font-size: 100%; /* 1 */ - font-weight: inherit; /* 1 */ - line-height: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -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 { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} - html { - background-color: #080d19; - color: #e2e8f0; - font-family: 'DM Sans', sans-serif; - } - - body { - min-height: 100vh; - background-color: #080d19; - background-image: radial-gradient(circle, rgba(56, 189, 248, 0.06) 1px, transparent 1px); - background-size: 28px 28px; - } - - h1, h2, h3, h4, h5 { - font-family: 'Syne', sans-serif; - font-weight: 700; - } - - a { - color: #38bdf8; - font-weight: 600; - } - - * { - scrollbar-color: #1c3050 #0d1628; - scrollbar-width: thin; - } -/* form-panel: glass-like dark card */ -.form-panel { - background: #0d1628; - border: 1px solid #1c3050; - border-radius: .5rem; - box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 4px 24px rgba(8, 13, 25, .6); - overflow: hidden; - margin-bottom: 1rem; - } -/* panel-header: dark bar + left 3px sky accent stripe */ -.panel-header { - background: #0a1220; - border-bottom: 1px solid #1c3050; - border-left: 3px solid #38bdf8; - padding: .625rem 1rem; - display: flex; - align-items: center; - gap: .5rem; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 1rem; - color: #e2e8f0; - margin: 0; - } -.panel-body { - padding: 1.25rem; - } -.panel-body.disabled { - opacity: 0.35; - pointer-events: none; - } -/* form inputs / selects */ -.form-input, - .form-select { - background: #080d19; - border: 1px solid #1c3050; - border-radius: .375rem; - color: #e2e8f0; - padding: .5rem .75rem; - width: 100%; - font-family: 'JetBrains Mono', monospace; - font-size: .875rem; - transition: border-color .15s, box-shadow .15s; - } -.form-input:focus, - .form-select:focus { - outline: none; - border-color: #38bdf8; - box-shadow: 0 0 0 3px rgba(56, 189, 248, .2); - } -.form-label { - display: block; - color: #94a3b8; - font-size: .8125rem; - font-weight: 500; - margin-bottom: .25rem; - } -.form-note { - font-style: italic; - font-size: .75rem; - color: #94a3b8; - } -.form-error { - color: #f87171; - font-size: .75rem; - margin-top: .25rem; - } -/* submit button */ -.btn-generate { - background: linear-gradient(135deg, #0ea5e9, #6366f1); - color: #fff; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 1rem; - padding: .875rem 2.5rem; - border-radius: .5rem; - border: none; - cursor: pointer; - box-shadow: 0 0 20px rgba(56, 189, 248, .25); - transition: opacity .2s, box-shadow .2s; - letter-spacing: .025em; - } -.btn-generate:hover { - opacity: .9; - box-shadow: 0 0 30px rgba(56, 189, 248, .4); - } -.relative { - position: relative; -} -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.mb-1 { - margin-bottom: 0.25rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mt-0\.5 { - margin-top: 0.125rem; -} -.mt-1 { - margin-top: 0.25rem; -} -.mt-2 { - margin-top: 0.5rem; -} -.mt-8 { - margin-top: 2rem; -} -.block { - display: block; -} -.inline-block { - display: inline-block; -} -.flex { - display: flex; -} -.grid { - display: grid; -} -.h-10 { - height: 2.5rem; -} -.w-auto { - width: auto; -} -.max-w-screen-xl { - max-width: 1280px; -} -.cursor-pointer { - cursor: pointer; -} -.list-inside { - list-style-position: inside; -} -.list-disc { - list-style-type: disc; -} -.list-none { - list-style-type: none; -} -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} -.flex-col { - flex-direction: column; -} -.items-center { - align-items: center; -} -.justify-center { - justify-content: center; -} -.justify-between { - justify-content: space-between; -} -.gap-2 { - gap: 0.5rem; -} -.gap-3 { - gap: 0.75rem; -} -.gap-4 { - gap: 1rem; -} -.gap-6 { - gap: 1.5rem; -} -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} -.border-b { - border-bottom-width: 1px; -} -.border-t { - border-top-width: 1px; -} -.border-\[\#1c3050\] { - --tw-border-opacity: 1; - border-color: rgb(28 48 80 / var(--tw-border-opacity, 1)); -} -.bg-\[\#080d19\] { - --tw-bg-opacity: 1; - background-color: rgb(8 13 25 / var(--tw-bg-opacity, 1)); -} -.p-0 { - padding: 0px; -} -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} -.font-normal { - font-weight: 400; -} -.text-\[\#94a3b8\] { - --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity, 1)); -} -.no-underline { - text-decoration-line: none; -} - -@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap'); - -/* Pure CSS toggles */ -#generator input[type=checkbox]:not(.ms-check) { - -moz-appearance: none; - appearance: none; - -webkit-appearance: none; - position: relative; - display: inline-block; - width: 44px; - min-width: 44px; - height: 24px; - background: #1c3050; - border: 1px solid #2d4a6e; - border-radius: 9999px; - cursor: pointer; - vertical-align: middle; - transition: background .2s, border-color .2s; -} - -#generator input[type=checkbox]:not(.ms-check)::after { - content: ''; - position: absolute; - width: 18px; - height: 18px; - background: #94a3b8; - border-radius: 9999px; - top: 2px; - left: 2px; - transition: left .2s, background .2s; -} - -#generator input[type=checkbox]:not(.ms-check):checked { - background: #34d399; - border-color: #34d399; -} - -#generator input[type=checkbox]:not(.ms-check):checked::after { - left: 22px; - background: #fff; -} - -.hover\:text-\[\#38bdf8\]:hover { - --tw-text-opacity: 1; - color: rgb(56 189 248 / var(--tw-text-opacity, 1)); -} - -@media (min-width: 640px) { - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:flex-row { - flex-direction: row; - } -} - -@media (min-width: 768px) { - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} - -@media (min-width: 1024px) { - - .lg\:col-span-1 { - grid-column: span 1 / span 1; - } - - .lg\:col-span-3 { - grid-column: span 3 / span 3; - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } -}