From 8bc01d5fd9f2de600e1a8201c736773bb978e574 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Wo=C5=BAniak?= Date: Wed, 23 Oct 2024 16:02:21 +0200 Subject: [PATCH] fix links, use framework --- package.json | 3 + src/main.rs | 2 +- styles.css | 5 +- tailwind.config.js | 19 +- templates/index.html | 4 +- templates/nav.html | 12 +- templates/recipe_card.html | 2 +- templates/recipies/show.html | 19 +- templates/styles.css | 1021 +++++++++++++++++++++++++++++++--- yarn.lock | 32 +- 10 files changed, 1020 insertions(+), 99 deletions(-) diff --git a/package.json b/package.json index 85ab96c..31c89f2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,8 @@ { "dependencies": { "tailwindcss": "^3.4.14" + }, + "devDependencies": { + "daisyui": "^4.12.13" } } diff --git a/src/main.rs b/src/main.rs index 6b59fc9..89446ec 100644 --- a/src/main.rs +++ b/src/main.rs @@ -15,7 +15,7 @@ mod entities; #[derive(Debug, Template)] #[template(path = "recipe_card.html")] struct RecipeCard { - id: i64, + id: i32, author: Option, image_url: String, title: String, diff --git a/styles.css b/styles.css index 0f11dc9..ece26cf 100644 --- a/styles.css +++ b/styles.css @@ -4,17 +4,16 @@ @tailwind components; @tailwind utilities; -/* overflow-hidden is to prevent overflow within the card */ +/* .card { @apply bg-white rounded overflow-hidden shadow-md relative; } -/* object-cover is to prevent distortion */ .badge { @apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2; } -/* tracking-wider is for space between letters */ .btn { @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider; } +*/ diff --git a/tailwind.config.js b/tailwind.config.js index 116e6fa..6a94818 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,6 @@ /** @type {import('tailwindcss').Config} */ -module.exports = { + module.exports = { content: ["./templates/**/*.html"], - darkMode: true, theme: { extend: { colors: { @@ -19,5 +18,17 @@ module.exports = { variants: { extend: {}, }, - plugins: [], -}; + plugins: [ + require('daisyui'), + ], + daisyui: { + themes: ['light', 'dark'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] + darkTheme: "light", // name of one of the included themes for dark mode + base: true, // applies background color and foreground color for root element by default + styled: true, // include daisyUI colors and design decisions for all components + utils: true, // adds responsive and modifier utility classes + prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) + logs: true, // Shows info about daisyUI version and used config in the console when building your CSS + themeRoot: ":root", // The element that receives theme color CSS variables + }, + }; diff --git a/templates/index.html b/templates/index.html index 4587946..38a06a1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,8 +1,7 @@ {% extends "base.html" %} {% block content %} - -
+
Login
@@ -25,5 +24,4 @@
- {% endblock %} diff --git a/templates/nav.html b/templates/nav.html index c16f119..6cb6911 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -14,7 +14,7 @@ diff --git a/templates/recipe_card.html b/templates/recipe_card.html index 4f69d1b..8024d4a 100644 --- a/templates/recipe_card.html +++ b/templates/recipe_card.html @@ -1,4 +1,4 @@ - + noodles
{{title}} diff --git a/templates/recipies/show.html b/templates/recipies/show.html index 688083f..e10ac10 100644 --- a/templates/recipies/show.html +++ b/templates/recipies/show.html @@ -1,15 +1,14 @@ {% extends "base.html" %} {% block content %} - -
+
Login
-
-
- omelette +
+
+ {{recipe.title}}

{{ recipe.title }}

@@ -36,6 +35,16 @@ {% endfor %}
+
+

Tags

+
    + {% for tag in tags %} +
  1. +
    {{ tag.name }}
    +
    2. + {% endfor %} +
+
diff --git a/templates/styles.css b/templates/styles.css index 9aa2888..db48eb0 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -556,6 +556,941 @@ video { display: none; } +:root, +[data-theme]{ + background-color: var(--fallback-b1,oklch(var(--b1)/1)); + color: var(--fallback-bc,oklch(var(--bc)/1)); +} + +@supports not (color: oklch(0% 0 0)){ + :root{ + color-scheme: light; + --fallback-p: #491eff; + --fallback-pc: #d4dbff; + --fallback-s: #ff41c7; + --fallback-sc: #fff9fc; + --fallback-a: #00cfbd; + --fallback-ac: #00100d; + --fallback-n: #2b3440; + --fallback-nc: #d7dde4; + --fallback-b1: #ffffff; + --fallback-b2: #e5e6e6; + --fallback-b3: #e5e6e6; + --fallback-bc: #1f2937; + --fallback-in: #00b3f0; + --fallback-inc: #000000; + --fallback-su: #00ca92; + --fallback-suc: #000000; + --fallback-wa: #ffc22d; + --fallback-wac: #000000; + --fallback-er: #ff6f70; + --fallback-erc: #000000; + } + + @media (prefers-color-scheme: dark){ + :root{ + color-scheme: dark; + --fallback-p: #7582ff; + --fallback-pc: #050617; + --fallback-s: #ff71cf; + --fallback-sc: #190211; + --fallback-a: #00c7b5; + --fallback-ac: #000e0c; + --fallback-n: #2a323c; + --fallback-nc: #a6adbb; + --fallback-b1: #1d232a; + --fallback-b2: #191e24; + --fallback-b3: #15191e; + --fallback-bc: #a6adbb; + --fallback-in: #00b3f0; + --fallback-inc: #000000; + --fallback-su: #00ca92; + --fallback-suc: #000000; + --fallback-wa: #ffc22d; + --fallback-wac: #000000; + --fallback-er: #ff6f70; + --fallback-erc: #000000; + } + } +} + +html{ + -webkit-tap-highlight-color: transparent; +} + +*{ + scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; +} + +*:hover{ + scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; +} + +:root{ + color-scheme: light; + --in: 72.06% 0.191 231.6; + --su: 64.8% 0.150 160; + --wa: 84.71% 0.199 83.87; + --er: 71.76% 0.221 22.18; + --pc: 89.824% 0.06192 275.75; + --ac: 15.352% 0.0368 183.61; + --inc: 0% 0 0; + --suc: 0% 0 0; + --wac: 0% 0 0; + --erc: 0% 0 0; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: .2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; + --p: 49.12% 0.3096 275.75; + --s: 69.71% 0.329 342.55; + --sc: 98.71% 0.0106 342.55; + --a: 76.76% 0.184 183.61; + --n: 32.1785% 0.02476 255.701624; + --nc: 89.4994% 0.011585 252.096176; + --b1: 100% 0 0; + --b2: 96.1151% 0 0; + --b3: 92.4169% 0.00108 197.137559; + --bc: 27.8078% 0.029596 256.847952; +} + +[data-theme=light]{ + color-scheme: light; + --in: 72.06% 0.191 231.6; + --su: 64.8% 0.150 160; + --wa: 84.71% 0.199 83.87; + --er: 71.76% 0.221 22.18; + --pc: 89.824% 0.06192 275.75; + --ac: 15.352% 0.0368 183.61; + --inc: 0% 0 0; + --suc: 0% 0 0; + --wac: 0% 0 0; + --erc: 0% 0 0; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: .2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; + --p: 49.12% 0.3096 275.75; + --s: 69.71% 0.329 342.55; + --sc: 98.71% 0.0106 342.55; + --a: 76.76% 0.184 183.61; + --n: 32.1785% 0.02476 255.701624; + --nc: 89.4994% 0.011585 252.096176; + --b1: 100% 0 0; + --b2: 96.1151% 0 0; + --b3: 92.4169% 0.00108 197.137559; + --bc: 27.8078% 0.029596 256.847952; +} + +[data-theme=dark]{ + color-scheme: dark; + --in: 72.06% 0.191 231.6; + --su: 64.8% 0.150 160; + --wa: 84.71% 0.199 83.87; + --er: 71.76% 0.221 22.18; + --pc: 13.138% 0.0392 275.75; + --sc: 14.96% 0.052 342.55; + --ac: 14.902% 0.0334 183.61; + --inc: 0% 0 0; + --suc: 0% 0 0; + --wac: 0% 0 0; + --erc: 0% 0 0; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: .2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; + --p: 65.69% 0.196 275.75; + --s: 74.8% 0.26 342.55; + --a: 74.51% 0.167 183.61; + --n: 31.3815% 0.021108 254.139175; + --nc: 74.6477% 0.0216 264.435964; + --b1: 25.3267% 0.015896 252.417568; + --b2: 23.2607% 0.013807 253.100675; + --b3: 21.1484% 0.01165 254.087939; + --bc: 74.6477% 0.0216 264.435964; +} + +.badge{ + display: inline-flex; + align-items: center; + justify-content: center; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + height: 1.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + width: -moz-fit-content; + width: fit-content; + padding-left: 0.563rem; + padding-right: 0.563rem; + border-radius: var(--rounded-badge, 1.9rem); + border-width: 1px; + --tw-border-opacity: 1; + border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); +} + +@media (hover:hover){ + .menu li > *:not(ul, .menu-title, details, .btn):active, +.menu li > *:not(ul, .menu-title, details, .btn).active, +.menu li > details > summary:active{ + --tw-bg-opacity: 1; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); + } +} + +.btn{ + display: inline-flex; + height: 3rem; + min-height: 3rem; + flex-shrink: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + border-radius: var(--rounded-btn, 0.5rem); + border-color: transparent; + border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)); + padding-left: 1rem; + padding-right: 1rem; + text-align: center; + font-size: 0.875rem; + line-height: 1em; + gap: 0.5rem; + font-weight: 600; + text-decoration-line: none; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + border-width: var(--border-btn, 1px); + transition-property: color, background-color, border-color, opacity, box-shadow, transform; + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: var(--fallback-bc,oklch(var(--bc)/1)); + background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)); + --tw-bg-opacity: 1; + --tw-border-opacity: 1; +} + +.btn-disabled, + .btn[disabled], + .btn:disabled{ + pointer-events: none; +} + +:where(.btn:is(input[type="checkbox"])), +:where(.btn:is(input[type="radio"])){ + width: auto; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.btn:is(input[type="checkbox"]):after, +.btn:is(input[type="radio"]):after{ + --tw-content: attr(aria-label); + content: var(--tw-content); +} + +.card{ + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--rounded-box, 1rem); +} + +.card:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.card figure{ + display: flex; + align-items: center; + justify-content: center; +} + +.card.image-full{ + display: grid; +} + +.card.image-full:before{ + position: relative; + content: ""; + z-index: 10; + border-radius: var(--rounded-box, 1rem); + --tw-bg-opacity: 1; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + opacity: 0.75; +} + +.card.image-full:before, + .card.image-full > *{ + grid-column-start: 1; + grid-row-start: 1; +} + +.card.image-full > figure img{ + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +.card.image-full > .card-body{ + position: relative; + z-index: 20; + --tw-text-opacity: 1; + color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); +} + +@media (hover: hover){ + .btn:hover{ + --tw-border-opacity: 1; + border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)){ + .btn:hover{ + background-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, + black + ); + border-color: color-mix( + in oklab, + oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, + black + ); + } + } + + @supports not (color: oklch(0% 0 0)){ + .btn:hover{ + background-color: var(--btn-color, var(--fallback-b2)); + border-color: var(--btn-color, var(--fallback-b2)); + } + } + + .btn.glass:hover{ + --glass-opacity: 25%; + --glass-border-opacity: 15%; + } + + .btn-disabled:hover, + .btn[disabled]:hover, + .btn:disabled:hover{ + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.2; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; + } + + @supports (color: color-mix(in oklab, black, black)){ + .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover{ + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + + :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{ + cursor: pointer; + outline: 2px solid transparent; + outline-offset: 2px; + } + + @supports (color: oklch(0% 0 0)){ + :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{ + background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); + } + } +} + +.link{ + cursor: pointer; + text-decoration-line: underline; +} + +.menu{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + font-size: 0.875rem; + line-height: 1.25rem; + padding: 0.5rem; +} + +.menu :where(li ul){ + position: relative; + white-space: nowrap; + margin-inline-start: 1rem; + padding-inline-start: 0.5rem; +} + +.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){ + display: grid; + grid-auto-flow: column; + align-content: flex-start; + align-items: center; + gap: 0.5rem; + grid-auto-columns: minmax(auto, max-content) auto max-content; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.menu li.disabled{ + cursor: not-allowed; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + color: var(--fallback-bc,oklch(var(--bc)/0.3)); +} + +.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)){ + display: none; +} + +:where(.menu li){ + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + flex-wrap: wrap; + align-items: stretch; +} + +:where(.menu li) .badge{ + justify-self: end; +} + +.steps{ + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; +} + +.steps .step{ + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; + place-items: center; + text-align: center; + min-width: 4rem; +} + +@media (prefers-reduced-motion: no-preference){ + .btn{ + animation: button-pop var(--animation-btn, 0.25s) ease-out; + } +} + +.btn:active:hover, + .btn:active:focus{ + animation: button-pop 0s ease-out; + transform: scale(var(--btn-focus-scale, 0.97)); +} + +@supports not (color: oklch(0% 0 0)){ + .btn{ + background-color: var(--btn-color, var(--fallback-b2)); + border-color: var(--btn-color, var(--fallback-b2)); + } +} + +.btn:focus-visible{ + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +.btn.glass{ + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + outline-color: currentColor; +} + +.btn.glass.btn-active{ + --glass-opacity: 25%; + --glass-border-opacity: 15%; +} + +.btn.btn-disabled, + .btn[disabled], + .btn:disabled{ + --tw-border-opacity: 0; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-bg-opacity: 0.2; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + --tw-text-opacity: 0.2; +} + +.btn:is(input[type="checkbox"]:checked), +.btn:is(input[type="radio"]:checked){ + --tw-border-opacity: 1; + border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); +} + +.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible{ + outline-color: var(--fallback-p,oklch(var(--p)/1)); +} + +@keyframes button-pop{ + 0%{ + transform: scale(var(--btn-focus-scale, 0.98)); + } + + 40%{ + transform: scale(1.02); + } + + 100%{ + transform: scale(1); + } +} + +.card :where(figure:first-child){ + overflow: hidden; + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: unset; + border-end-end-radius: unset; +} + +.card :where(figure:last-child){ + overflow: hidden; + border-start-start-radius: unset; + border-start-end-radius: unset; + border-end-start-radius: inherit; + border-end-end-radius: inherit; +} + +.card:focus-visible{ + outline: 2px solid currentColor; + outline-offset: 2px; +} + +.card.bordered{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); +} + +.card.compact .card-body{ + padding: 1rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.card.image-full :where(figure){ + overflow: hidden; + border-radius: inherit; +} + +@keyframes checkmark{ + 0%{ + background-position-y: 5px; + } + + 50%{ + background-position-y: -2px; + } + + 100%{ + background-position-y: 0; + } +} + +.join > :where(*:not(:first-child)):is(.btn){ + margin-inline-start: calc(var(--border-btn) * -1); +} + +.link:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.link:focus-visible{ + outline: 2px solid currentColor; + outline-offset: 2px; +} + +:where(.menu li:empty){ + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + opacity: 0.1; + margin: 0.5rem 1rem; + height: 1px; +} + +.menu :where(li ul):before{ + position: absolute; + bottom: 0.75rem; + inset-inline-start: 0px; + top: 0.75rem; + width: 1px; + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + opacity: 0.1; + content: ""; +} + +.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), +.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){ + border-radius: var(--rounded-btn, 0.5rem); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + text-align: start; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 200ms; + text-wrap: balance; +} + +:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible{ + cursor: pointer; + background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + outline: 2px solid transparent; + outline-offset: 2px; +} + +.menu li > *:not(ul, .menu-title, details, .btn):active, +.menu li > *:not(ul, .menu-title, details, .btn).active, +.menu li > details > summary:active{ + --tw-bg-opacity: 1; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); +} + +.menu :where(li > details > summary)::-webkit-details-marker{ + display: none; +} + +.menu :where(li > details > summary):after, +.menu :where(li > .menu-dropdown-toggle):after{ + justify-self: end; + display: block; + margin-top: -0.5rem; + height: 0.5rem; + width: 0.5rem; + transform: rotate(45deg); + transition-property: transform, margin-top; + transition-duration: 0.3s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + content: ""; + transform-origin: 75% 75%; + box-shadow: 2px 2px; + pointer-events: none; +} + +.menu :where(li > details[open] > summary):after, +.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after{ + transform: rotate(225deg); + margin-top: 0; +} + +@keyframes modal-pop{ + 0%{ + opacity: 0; + } +} + +@keyframes progress-loading{ + 50%{ + background-position-x: -115%; + } +} + +@keyframes radiomark{ + 0%{ + box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } + + 50%{ + box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } + + 100%{ + box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } +} + +@keyframes rating-pop{ + 0%{ + transform: translateY(-0.125em); + } + + 40%{ + transform: translateY(-0.125em); + } + + 100%{ + transform: translateY(0); + } +} + +@keyframes skeleton{ + from{ + background-position: 150%; + } + + to{ + background-position: -50%; + } +} + +.steps .step:before{ + top: 0px; + grid-column-start: 1; + grid-row-start: 1; + height: 0.5rem; + width: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); + content: ""; + margin-inline-start: -100%; +} + +.steps .step:after{ + content: counter(step); + counter-increment: step; + z-index: 1; + position: relative; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: 2rem; + width: 2rem; + place-items: center; + place-self: center; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); +} + +.steps .step:first-child:before{ + content: none; +} + +.steps .step[data-content]:after{ + content: attr(data-content); +} + +.steps .step-neutral + .step-neutral:before, + .steps .step-neutral:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); +} + +.steps .step-primary + .step-primary:before, + .steps .step-primary:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); +} + +.steps .step-secondary + .step-secondary:before, + .steps .step-secondary:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); +} + +.steps .step-accent + .step-accent:before, + .steps .step-accent:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); +} + +.steps .step-info + .step-info:before{ + --tw-bg-opacity: 1; + background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity))); +} + +.steps .step-info:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); +} + +.steps .step-success + .step-success:before{ + --tw-bg-opacity: 1; + background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity))); +} + +.steps .step-success:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); +} + +.steps .step-warning + .step-warning:before{ + --tw-bg-opacity: 1; + background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity))); +} + +.steps .step-warning:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); +} + +.steps .step-error + .step-error:before{ + --tw-bg-opacity: 1; + background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity))); +} + +.steps .step-error:after{ + --tw-bg-opacity: 1; + background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); +} + +@keyframes toast-pop{ + 0%{ + transform: scale(0.9); + opacity: 0; + } + + 100%{ + transform: scale(1); + opacity: 1; + } +} + +.steps-horizontal .step{ + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-rows: repeat(2, minmax(0, 1fr)); + place-items: center; + text-align: center; +} + +.steps-vertical .step{ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(1, minmax(0, 1fr)); +} + +.join.join-vertical > :where(*:not(:first-child)):is(.btn){ + margin-top: calc(var(--border-btn) * -1); +} + +.join.join-horizontal > :where(*:not(:first-child)):is(.btn){ + margin-inline-start: calc(var(--border-btn) * -1); + margin-top: 0px; +} + +.steps-horizontal .step{ + grid-template-rows: 40px 1fr; + grid-template-columns: auto; + min-width: 4rem; +} + +.steps-horizontal .step:before{ + height: 0.5rem; + width: 100%; + --tw-translate-x: 0px; + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + content: ""; + margin-inline-start: -100%; +} + +.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before{ + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.steps-vertical .step{ + gap: 0.5rem; + grid-template-columns: 40px 1fr; + grid-template-rows: auto; + min-height: 4rem; + justify-items: start; +} + +.steps-vertical .step:before{ + height: 100%; + width: 0.5rem; + --tw-translate-x: -50%; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + margin-inline-start: 50%; +} + +.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before{ + --tw-translate-x: 50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .m-4{ margin: 1rem; } @@ -727,16 +1662,6 @@ video { border-color: rgb(255 99 99 / var(--tw-border-opacity)); } -.border-white{ - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - -.bg-gray-100{ - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - .bg-secondary-100{ --tw-bg-opacity: 1; background-color: rgb(226 226 213 / var(--tw-bg-opacity)); @@ -803,6 +1728,10 @@ video { padding-right: 15px; } +.text-center{ + text-align: center; +} + .text-right{ text-align: right; } @@ -910,53 +1839,19 @@ video { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } -/* overflow-hidden is to prevent overflow within the card */ - -.card{ - position: relative; - overflow: hidden; - border-radius: 0.25rem; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +/* +.card { + @apply bg-white rounded overflow-hidden shadow-md relative; } -/* object-cover is to prevent distortion */ - -.badge{ - position: absolute; - top: 0px; - margin-left: 0.5rem; - margin-top: 0.5rem; - border-radius: 9999px; - --tw-bg-opacity: 1; - background-color: rgb(226 226 213 / var(--tw-bg-opacity)); - padding: 0.5rem; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 700; - text-transform: uppercase; - --tw-text-opacity: 1; - color: rgb(136 136 131 / var(--tw-text-opacity)); +.badge { + @apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2; } -/* tracking-wider is for space between letters */ - -.btn{ - cursor: pointer; - border-radius: 9999px; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - font-size: 0.75rem; - line-height: 1rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; +.btn { + @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider; } +*/ .marker\:text-rose-900 *::marker{ color: rgb(136 19 55 ); @@ -1006,6 +1901,11 @@ video { } @media (min-width: 640px){ + .sm\:mx-auto{ + margin-left: auto; + margin-right: auto; + } + .sm\:ml-auto{ margin-left: auto; } @@ -1018,14 +1918,6 @@ video { margin-top: 2.25rem; } - .sm\:mt-\[10rem\]{ - margin-top: 10rem; - } - - .sm\:w-\[50\%\]{ - width: 50%; - } - .sm\:w-auto{ width: auto; } @@ -1038,19 +1930,10 @@ video { border-radius: 0.75rem; } - .sm\:bg-white{ - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - } - .sm\:p-0{ padding: 0px; } - .sm\:p-10{ - padding: 2.5rem; - } - .sm\:text-base{ font-size: 1rem; line-height: 1.5rem; diff --git a/yarn.lock b/yarn.lock index 8b0c11c..67c808e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -187,11 +187,34 @@ cross-spawn@^7.0.0: shebang-command "^2.0.0" which "^2.0.1" +css-selector-tokenizer@^0.8: + version "0.8.0" + resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd" + integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg== + dependencies: + cssesc "^3.0.0" + fastparse "^1.1.2" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== +culori@^3: + version "3.3.0" + resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739" + integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ== + +daisyui@^4.12.13: + version "4.12.13" + resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.12.13.tgz#e386c54dd7a55e77dc865f12e1556b37229dfb4e" + integrity sha512-BnXyQoOByUF/7wSdIKubyhXxbtL8gxwY3u2cNMkxGP39TSVJqMmlItqtpY903fQnLI/NokC+bc+ZV+PEPsppPw== + dependencies: + css-selector-tokenizer "^0.8" + culori "^3" + picocolors "^1" + postcss-js "^4" + didyoumean@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037" @@ -228,6 +251,11 @@ fast-glob@^3.3.0: merge2 "^1.3.0" micromatch "^4.0.4" +fastparse@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" + integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== + fastq@^1.6.0: version "1.17.1" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47" @@ -445,7 +473,7 @@ path-scurry@^1.11.1: lru-cache "^10.2.0" minipass "^5.0.0 || ^6.0.2 || ^7.0.0" -picocolors@^1.0.0, picocolors@^1.1.0: +picocolors@^1, picocolors@^1.0.0, picocolors@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -474,7 +502,7 @@ postcss-import@^15.1.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-js@^4.0.1: +postcss-js@^4, postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==