diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index e2e2ff1..eeea66d 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -2,6 +2,7 @@ namespace App\Http\Controllers; +use App\Models\Category; use App\Models\Recipe; use Illuminate\Http\Request; use Inertia\Inertia; @@ -16,6 +17,8 @@ public function __invoke(Request $request): Response ->orderBy('id', 'desc') ->limit(3) ->get()), + + 'categories' => fn () => Category::withCount('recipes')->get(), ]); } } diff --git a/bun.lockb b/bun.lockb index 88a9231..6f7d4d0 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/public/assets/blog-img1.jpg b/public/assets/blog-img1.jpg new file mode 100644 index 0000000..16d000a Binary files /dev/null and b/public/assets/blog-img1.jpg differ diff --git a/public/assets/blog-img2.jpg b/public/assets/blog-img2.jpg new file mode 100644 index 0000000..54f6117 Binary files /dev/null and b/public/assets/blog-img2.jpg differ diff --git a/public/assets/category-hero-img.svg b/public/assets/category-hero-img.svg new file mode 100644 index 0000000..d35c5b0 --- /dev/null +++ b/public/assets/category-hero-img.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/hero-left-img.jpg b/public/assets/hero-left-img.jpg new file mode 100644 index 0000000..52004fc Binary files /dev/null and b/public/assets/hero-left-img.jpg differ diff --git a/public/assets/hero-middle-img.jpg b/public/assets/hero-middle-img.jpg new file mode 100644 index 0000000..9e9e2c6 Binary files /dev/null and b/public/assets/hero-middle-img.jpg differ diff --git a/public/assets/hero-middle-img.png b/public/assets/hero-middle-img.png new file mode 100644 index 0000000..6a3549e Binary files /dev/null and b/public/assets/hero-middle-img.png differ diff --git a/public/assets/hero-right-img.jpg b/public/assets/hero-right-img.jpg new file mode 100644 index 0000000..16ff0ff Binary files /dev/null and b/public/assets/hero-right-img.jpg differ diff --git a/public/assets/home-hero-bg.png b/public/assets/home-hero-bg.png new file mode 100644 index 0000000..1a74365 Binary files /dev/null and b/public/assets/home-hero-bg.png differ diff --git a/public/assets/no-category-img.png b/public/assets/no-category-img.png new file mode 100644 index 0000000..98e2028 Binary files /dev/null and b/public/assets/no-category-img.png differ diff --git a/public/assets/no-label-img.png b/public/assets/no-label-img.png new file mode 100644 index 0000000..6f7affa Binary files /dev/null and b/public/assets/no-label-img.png differ diff --git a/public/assets/no-recipe-img.png b/public/assets/no-recipe-img.png new file mode 100644 index 0000000..7ac7bc9 Binary files /dev/null and b/public/assets/no-recipe-img.png differ diff --git a/public/assets/pattern.jpg b/public/assets/pattern.jpg new file mode 100644 index 0000000..30f04ae Binary files /dev/null and b/public/assets/pattern.jpg differ diff --git a/public/assets/recipe-hero-no-img.png b/public/assets/recipe-hero-no-img.png new file mode 100644 index 0000000..743e642 Binary files /dev/null and b/public/assets/recipe-hero-no-img.png differ diff --git a/public/assets/recipebox-logo.svg b/public/assets/recipebox-logo.svg new file mode 100644 index 0000000..1955345 --- /dev/null +++ b/public/assets/recipebox-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/sub-footer-bg.png b/public/assets/sub-footer-bg.png new file mode 100644 index 0000000..785afb7 Binary files /dev/null and b/public/assets/sub-footer-bg.png differ diff --git a/public/favicon.ico b/public/favicon.ico index e69de29..ae18c2e 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/resources/css/app.css b/resources/css/app.css index f1d8e5e..900efac 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,53 +1,11 @@ +@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; @layer base { - body { - @apply text-surface-700 dark:text-white/70 - } - - h1 { - @apply text-4xl text-primary-200; - .primary { - @apply text-primary-400; - } - } - h2 { - @apply text-3xl text-primary-200; - .primary { - @apply text-primary-400; - } - } - h3 { - @apply text-2xl text-primary-200; - .primary { - @apply text-primary-400; - } - } - h4 { - @apply text-xl text-primary-200; - .primary { - @apply text-primary-400; - } - } - h5 { - @apply text-lg text-primary-200; - .primary { - @apply text-primary-400; - } - } - ul { - list-style: inside; - } - - ol { - list-style: decimal; - @apply ml-4; - } -} - -:root { + :root { --primary-50: 255 247 237; --primary-100: 255 237 213; --primary-200: 254 215 170; @@ -70,10 +28,100 @@ --surface-600: 75 85 99; --surface-700: 55 65 81; --surface-800: 31 41 55; - --surface-900: 17 24 39; + --surface-900: 45 53 71; --surface-950: 8 8 8; + + --main-dark: 45 53 71; + --main-orange: 228 109 37; + } + + .dark { + --main-dark: 255 255 255; + } +} + +body { + /* @apply text-surface-700 dark:text-white/70; */ + @apply bg-white dark:bg-[#1F1D2B] text-main-dark dark:text-white; +} + +h1, +h2, +h3, +h4, +h5, +p, +a { + @apply text-main-dark dark:text-white; +} + +h1, +h2, +h3 { + font-family: "Merienda", cursive; +} + +h1 { + @apply text-4xl; + font-weight: 900; +} +h2 { + @apply text-2xl sm:text-3xl; + font-weight: 900; +} +h3 { + @apply text-2xl; +} +h4 { + @apply text-xl; +} +h5 { + @apply text-lg; +} +ul { + list-style: inside; +} + +ol { + list-style: decimal; + @apply ml-4; } [x-cloak] { - display: none; + display: none; +} + +.recipe-card { + @apply text-main-dark; + border-radius: 0.25rem; + overflow: hidden; + position: relative; + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.angled-recipe-header { + overflow: hidden; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); + clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); + @apply 2xl:max-h-[600px]; +} + +.angled-recipe-header img { + -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); + clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); +} + +.autocomplete-search { + input { + @apply bg-white border border-surface-300; + } +} + +#recipe-card-view { + @apply dark:!bg-black/[0.2]; +} + +button { + @apply !text-main-dark dark:!text-white; } diff --git a/resources/css/presets/recipebox/index.js b/resources/css/presets/recipebox/index.js index e60e2a4..eb5c73e 100644 --- a/resources/css/presets/recipebox/index.js +++ b/resources/css/presets/recipebox/index.js @@ -1,179 +1,179 @@ -import global from './global.js'; -import autocomplete from './autocomplete/index.js'; -import calendar from './calendar/index.js'; -import cascadeselect from './cascadeselect/index.js'; -import checkbox from './checkbox/index.js'; -import chips from './chips/index.js'; -import colorpicker from './colorpicker/index.js'; -import dropdown from './dropdown/index.js'; -import floatlabel from './floatlabel/index.js'; -import iconfield from './iconfield/index.js'; -import inputgroup from './inputgroup/index.js'; -import inputotp from './inputotp/index.js'; -import inputgroupaddon from './inputgroupaddon/index.js'; -import inputmask from './inputmask/index.js'; -import inputnumber from './inputnumber/index.js'; -import inputswitch from './inputswitch/index.js'; -import inputtext from './inputtext/index.js'; -import knob from './knob/index.js'; -import listbox from './listbox/index.js'; -import multiselect from './multiselect/index.js'; -import password from './password/index.js'; -import radiobutton from './radiobutton/index.js'; -import rating from './rating/index.js'; -import selectbutton from './selectbutton/index.js'; -import slider from './slider/index.js'; -import textarea from './textarea/index.js'; -import togglebutton from './togglebutton/index.js'; -import treeselect from './treeselect/index.js'; -import tristatecheckbox from './tristatecheckbox/index.js'; -import button from './button/index.js'; -import speeddial from './speeddial/index.js'; -import splitbutton from './splitbutton/index.js'; -import datatable from './datatable/index.js'; -import dataview from './dataview/index.js'; -import orderlist from './orderlist/index.js'; -import organizationchart from './organizationchart/index.js'; -import paginator from './paginator/index.js'; -import picklist from './picklist/index.js'; -import tree from './tree/index.js'; -import treetable from './treetable/index.js'; -import timeline from './timeline/index.js'; -import accordion from './accordion/index.js'; -import card from './card/index.js'; -import divider from './divider/index.js'; -import fieldset from './fieldset/index.js'; -import panel from './panel/index.js'; -import scrollpanel from './scrollpanel/index.js'; -import splitter from './splitter/index.js'; -import stepper from './stepper/index.js'; -import tabview from './tabview/index.js'; -import toolbar from './toolbar/index.js'; -import confirmpopup from './confirmpopup/index.js'; -import dialog from './dialog/index.js'; -import overlaypanel from './overlaypanel/index.js'; -import sidebar from './sidebar/index.js'; -import tooltip from './tooltip/index.js'; -import fileupload from './fileupload/index.js'; -import breadcrumb from './breadcrumb/index.js'; -import contextmenu from './contextmenu/index.js'; -import dock from './dock/index.js'; -import menu from './menu/index.js'; -import menubar from './menubar/index.js'; -import megamenu from './megamenu/index.js'; -import panelmenu from './panelmenu/index.js'; -import steps from './steps/index.js'; -import tabmenu from './tabmenu/index.js'; -import tieredmenu from './tieredmenu/index.js'; -import message from './message/index.js'; -import inlinemessage from './inlinemessage/index.js'; -import toast from './toast/index.js'; -import carousel from './carousel/index.js'; -import galleria from './galleria/index.js'; -import image from './image/index.js'; -import avatar from './avatar/index.js'; -import badge from './badge/index.js'; -import badgedirective from './badgedirective/index.js'; -import blockui from './blockui/index.js'; -import chip from './chip/index.js'; -import inplace from './inplace/index.js'; -import metergroup from './metergroup/index.js'; -import scrolltop from './scrolltop/index.js'; -import skeleton from './skeleton/index.js'; -import progressbar from './progressbar/index.js'; -import progressspinner from './progressspinner/index.js'; -import ripple from './ripple/index.js'; -import tag from './tag/index.js'; -import terminal from './terminal/index.js'; +import accordion from "./accordion/index.js"; +import autocomplete from "./autocomplete/index.js"; +import avatar from "./avatar/index.js"; +import badge from "./badge/index.js"; +import badgedirective from "./badgedirective/index.js"; +import blockui from "./blockui/index.js"; +import breadcrumb from "./breadcrumb/index.js"; +import button from "./button/index.js"; +import calendar from "./calendar/index.js"; +import card from "./card/index.js"; +import carousel from "./carousel/index.js"; +import cascadeselect from "./cascadeselect/index.js"; +import checkbox from "./checkbox/index.js"; +import chip from "./chip/index.js"; +import chips from "./chips/index.js"; +import colorpicker from "./colorpicker/index.js"; +import confirmpopup from "./confirmpopup/index.js"; +import contextmenu from "./contextmenu/index.js"; +import datatable from "./datatable/index.js"; +import dataview from "./dataview/index.js"; +import dialog from "./dialog/index.js"; +import divider from "./divider/index.js"; +import dock from "./dock/index.js"; +import dropdown from "./dropdown/index.js"; +import fieldset from "./fieldset/index.js"; +import fileupload from "./fileupload/index.js"; +import floatlabel from "./floatlabel/index.js"; +import galleria from "./galleria/index.js"; +import global from "./global.js"; +import iconfield from "./iconfield/index.js"; +import image from "./image/index.js"; +import inlinemessage from "./inlinemessage/index.js"; +import inplace from "./inplace/index.js"; +import inputgroup from "./inputgroup/index.js"; +import inputgroupaddon from "./inputgroupaddon/index.js"; +import inputmask from "./inputmask/index.js"; +import inputnumber from "./inputnumber/index.js"; +import inputotp from "./inputotp/index.js"; +import inputswitch from "./inputswitch/index.js"; +import inputtext from "./inputtext/index.js"; +import knob from "./knob/index.js"; +import listbox from "./listbox/index.js"; +import megamenu from "./megamenu/index.js"; +import menu from "./menu/index.js"; +import menubar from "./menubar/index.js"; +import message from "./message/index.js"; +import metergroup from "./metergroup/index.js"; +import multiselect from "./multiselect/index.js"; +import orderlist from "./orderlist/index.js"; +import organizationchart from "./organizationchart/index.js"; +import overlaypanel from "./overlaypanel/index.js"; +import paginator from "./paginator/index.js"; +import panel from "./panel/index.js"; +import panelmenu from "./panelmenu/index.js"; +import password from "./password/index.js"; +import picklist from "./picklist/index.js"; +import progressbar from "./progressbar/index.js"; +import progressspinner from "./progressspinner/index.js"; +import radiobutton from "./radiobutton/index.js"; +import rating from "./rating/index.js"; +import ripple from "./ripple/index.js"; +import scrollpanel from "./scrollpanel/index.js"; +import scrolltop from "./scrolltop/index.js"; +import selectbutton from "./selectbutton/index.js"; +import sidebar from "./sidebar/index.js"; +import skeleton from "./skeleton/index.js"; +import slider from "./slider/index.js"; +import speeddial from "./speeddial/index.js"; +import splitbutton from "./splitbutton/index.js"; +import splitter from "./splitter/index.js"; +import stepper from "./stepper/index.js"; +import steps from "./steps/index.js"; +import tabmenu from "./tabmenu/index.js"; +import tabview from "./tabview/index.js"; +import tag from "./tag/index.js"; +import terminal from "./terminal/index.js"; +import textarea from "./textarea/index.js"; +import tieredmenu from "./tieredmenu/index.js"; +import timeline from "./timeline/index.js"; +import toast from "./toast/index.js"; +import togglebutton from "./togglebutton/index.js"; +import toolbar from "./toolbar/index.js"; +import tooltip from "./tooltip/index.js"; +import tree from "./tree/index.js"; +import treeselect from "./treeselect/index.js"; +import treetable from "./treetable/index.js"; +import tristatecheckbox from "./tristatecheckbox/index.js"; export default { - global, - directives: { - tooltip, - badgedirective, - ripple - }, - autocomplete, - calendar, - cascadeselect, - checkbox, - chips, - colorpicker, - dropdown, - floatlabel, - iconfield, - inputgroup, - inputotp, - inputgroupaddon, - inputmask, - inputnumber, - inputswitch, - inputtext, - knob, - listbox, - multiselect, - password, - radiobutton, - rating, - selectbutton, - slider, - textarea, - togglebutton, - treeselect, - tristatecheckbox, - button, - speeddial, - splitbutton, - datatable, - dataview, - orderlist, - organizationchart, - paginator, - picklist, - tree, - treetable, - timeline, - accordion, - card, - divider, - fieldset, - panel, - scrollpanel, - splitter, - stepper, - tabview, - toolbar, - confirmpopup, - dialog, - overlaypanel, - sidebar, - fileupload, - breadcrumb, - contextmenu, - dock, - menu, - menubar, - megamenu, - panelmenu, - steps, - tabmenu, - tieredmenu, - message, - inlinemessage, - toast, - carousel, - galleria, - image, - avatar, - badge, - blockui, - chip, - inplace, - metergroup, - scrolltop, - skeleton, - progressbar, - progressspinner, - tag, - terminal -} + global, + directives: { + tooltip, + badgedirective, + ripple, + }, + autocomplete, + calendar, + cascadeselect, + checkbox, + chips, + colorpicker, + dropdown, + floatlabel, + iconfield, + inputgroup, + inputotp, + inputgroupaddon, + inputmask, + inputnumber, + inputswitch, + inputtext, + knob, + listbox, + multiselect, + password, + radiobutton, + rating, + selectbutton, + slider, + textarea, + togglebutton, + treeselect, + tristatecheckbox, + button, + speeddial, + splitbutton, + datatable, + dataview, + orderlist, + organizationchart, + paginator, + picklist, + tree, + treetable, + timeline, + accordion, + card, + divider, + fieldset, + panel, + scrollpanel, + splitter, + stepper, + tabview, + toolbar, + confirmpopup, + dialog, + overlaypanel, + sidebar, + fileupload, + breadcrumb, + contextmenu, + dock, + menu, + menubar, + megamenu, + panelmenu, + steps, + tabmenu, + tieredmenu, + message, + inlinemessage, + toast, + carousel, + galleria, + image, + avatar, + badge, + blockui, + chip, + inplace, + metergroup, + scrolltop, + skeleton, + progressbar, + progressspinner, + tag, + terminal, +}; diff --git a/resources/css/presets/recipebox/menu/index.js b/resources/css/presets/recipebox/menu/index.js index fc971da..1459dc5 100644 --- a/resources/css/presets/recipebox/menu/index.js +++ b/resources/css/presets/recipebox/menu/index.js @@ -1,96 +1,98 @@ export default { - root: { - class: [ - // Sizing and Shape - 'min-w-[12rem]', - 'rounded-md', - // Spacing - 'py-2', - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-700 dark:text-white/80', - 'border border-surface-200 dark:border-surface-700' - ] - }, - menu: { - class: [ - // Spacings and Shape - 'list-none', - 'm-0', - 'p-0', - 'outline-none' - ] - }, - content: ({ context }) => ({ - class: [ - //Shape - 'rounded-none', - // Colors - 'text-surface-700 dark:text-white/80', - { - 'bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white': context.focused - }, - // Transitions - 'transition-shadow', - 'duration-200', - // States - 'hover:text-surface-700 dark:hover:text-white/80', - 'hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10' - ] - }), - action: { - class: [ - 'relative', - // Flexbox + root: { + class: [ + // Sizing and Shape + "min-w-[12rem]", + "rounded-md", + // Spacing + "py-2", + // Colors + "bg-surface-0 dark:bg-surface-700", + "text-surface-700 dark:text-white/80", + "border border-surface-200 dark:border-surface-700", + ], + }, + menu: { + class: [ + // Spacings and Shape + "list-none", + "m-0", + "p-0", + "outline-none", + ], + }, + content: ({ context }) => ({ + class: [ + //Shape + "rounded-none", + // Colors + "text-surface-700 dark:text-white/80", + { + "bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white": + context.focused, + }, + // Transitions + "transition-shadow", + "duration-200", + // States + "hover:text-surface-700 dark:hover:text-white/80", + "hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10", + ], + }), + action: { + class: [ + "relative", + // Flexbox - 'flex', - 'items-center', + "flex", + "items-center", - // Spacing - 'py-3', - 'px-5', + // Spacing + "py-3", + "px-5", - // Color - 'text-surface-700 dark:text-white/80', + // Color + "text-surface-700 dark:text-white/80", - // Misc - 'no-underline', - 'overflow-hidden', - 'cursor-pointer', - 'select-none' - ] - }, - icon: { - class: [ - // Spacing - 'mr-2', + // Misc + "no-underline", + "overflow-hidden", + "cursor-pointer", + "select-none", + ], + }, + icon: { + class: [ + // Spacing + "mr-2", - // Color - 'text-surface-600 dark:text-white/70' - ] - }, - label: { - class: ['leading-none'] - }, - submenuheader: { - class: [ - // Font - 'font-bold', - // Spacing - 'm-0', - 'py-3 px-5', - // Shape - 'rounded-tl-none', - 'rounded-tr-none', - // Colors - 'bg-surface-0 dark:bg-surface-700', - 'text-surface-700 dark:text-white' - ] - }, - transition: { - enterFromClass: 'opacity-0 scale-y-[0.8]', - enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]', - leaveActiveClass: 'transition-opacity duration-100 ease-linear', - leaveToClass: 'opacity-0' - } + // Color + "text-surface-600 dark:text-white/70", + ], + }, + label: { + class: ["leading-none"], + }, + submenuheader: { + class: [ + // Font + "font-bold", + // Spacing + "m-0", + "py-3 px-5", + // Shape + "rounded-tl-none", + "rounded-tr-none", + // Colors + "bg-surface-0 dark:bg-surface-700", + "text-surface-700 dark:text-white", + ], + }, + transition: { + enterFromClass: "opacity-0 scale-y-[0.8]", + enterActiveClass: + "transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]", + leaveActiveClass: "transition-opacity duration-100 ease-linear", + leaveToClass: "opacity-0", + }, }; diff --git a/resources/css/presets/recipebox/menubar/index.js b/resources/css/presets/recipebox/menubar/index.js index 8c3fec0..f41166d 100644 --- a/resources/css/presets/recipebox/menubar/index.js +++ b/resources/css/presets/recipebox/menubar/index.js @@ -1,176 +1,181 @@ export default { - root: { - class: [ - 'relative', - - // Flexbox - 'flex', - 'items-center', - - // Spacing - 'p-2', - - // Shape - 'rounded-md', - - // Color - 'bg-surface-50 dark:bg-surface-700', - 'border border-surface-200 dark:border-surface-700' - ] - }, - menu: ({ props }) => ({ - class: [ - // Flexbox - 'sm:flex', - 'items-center', - 'flex-wrap', - 'flex-col sm:flex-row', - { hidden: !props?.mobileActive, flex: props?.mobileActive }, - - // Position - 'absolute sm:relative', - 'top-full left-0', - 'sm:top-auto sm:left-auto', - - // Size - 'w-full sm:w-auto', - - // Spacing - 'm-0', - 'py-1 sm:py-0 sm:p-0', - 'list-none', - - // Shape - 'shadow-md sm:shadow-none', - 'border-0', - - // Color - 'bg-surface-0 dark:bg-surface-700 sm:bg-transparent', - - // Misc - 'outline-none' - ] - }), - menuitem: { - class: 'sm:relative sm:w-auto w-full static' - }, - content: ({ props, context }) => ({ - class: [ - // Shape - { 'rounded-md': props.root }, - - // Colors - { - 'text-surface-500 dark:text-white/70': !context.focused && !context.active, - 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active, - 'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active - }, - - // Hover States - { - 'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active, - 'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active - }, - - // Transitions - 'transition-all', - 'duration-200' - ] - }), - action: ({ context }) => ({ - class: [ - 'relative', - - // Flexbox - 'flex', - 'items-center', - - // Spacing - 'py-3', - 'px-5', - - // Size - { - 'pl-9 sm:pl-5': context.level === 1, - 'pl-14 sm:pl-5': context.level === 2 - }, - 'leading-none', - - // Misc - 'select-none', - 'cursor-pointer', - 'no-underline ', - 'overflow-hidden' - ] - }), - icon: { - class: 'mr-2' - }, - submenuicon: ({ props }) => ({ - class: [ - { - 'ml-auto sm:ml-2': props.root, - 'ml-auto': !props.root - } - ] - }), - submenu: ({ props }) => ({ - class: [ - // Size - 'w-full sm:w-48', - - // Spacing - 'py-1', - 'm-0', - 'list-none', - - // Shape - 'shadow-none sm:shadow-md', - 'border-0', - - // Position - 'static sm:absolute', - 'z-10', - { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }, - - // Color - 'bg-surface-0 dark:bg-surface-700' - ] - }), - separator: { - class: 'border-t border-surface-200 dark:border-surface-600 my-1' - }, - button: { - class: [ - // Flexbox - 'flex sm:hidden', - 'items-center justify-center', - - // Size - 'w-8', - 'h-8', - - // Shape - 'rounded-full', - // Color - 'text-surface-500 dark:text-white/80', - - // States - 'hover:text-surface-600 dark:hover:text-white/60', - 'hover:bg-surface-100 dark:hover:bg-surface-600/80', - 'focus:outline-none focus:outline-offset-0', - 'focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50', - - // Transitions - 'transition duration-200 ease-in-out', - - // Misc - 'cursor-pointer', - 'no-underline' - ] - }, - end: { - class: 'ml-auto self-center' - } + root: { + class: [ + "relative", + + // Flexbox + "flex", + "items-center", + + // Spacing + "px-2 py-6", + + // Shape + "rounded-md", + + // Color + "bg-surface-50 dark:bg-surface-700", + // "border border-surface-200 dark:border-surface-700", + ], + }, + menu: ({ props }) => ({ + class: [ + // Flexbox + "sm:flex", + "items-center", + "flex-wrap", + "flex-col sm:flex-row", + { hidden: !props?.mobileActive, flex: props?.mobileActive }, + + // Position + "absolute sm:relative", + "top-full left-0", + "sm:top-auto sm:right-auto ml-6", + + // Size + "w-full sm:w-auto", + + // Spacing + "m-0", + "py-1 sm:py-0 sm:p-0", + "list-none", + + // Shape + "shadow-md sm:shadow-none", + "border-0", + + // Color + "bg-surface-0 dark:bg-surface-700", + + // Misc + "outline-none", + ], + }), + menuitem: { + class: "sm:relative sm:w-auto w-full static", + }, + content: ({ props, context }) => ({ + class: [ + // Shape + { "rounded-md": props.root }, + + // Colors + { + "text-surface-500 dark:text-white/70": + !context.focused && !context.active, + "text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90": + context.focused && !context.active, + "text-primary-700 dark:text-surface-0/80 ": + context.focused && context.active, + // "text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30": + // !context.focused && context.active, + }, + + // Hover States + { + "hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-600/80": !context.active, + "hover:bg-surface-100 dark:bg-surface-800 dark:hover:bg-surface-600/80 text-primary-700 dark:text-surface-0/80": + context.active, + }, + + // Transitions + "transition-all", + "duration-200", + ], + }), + action: ({ context }) => ({ + class: [ + "relative", + + // Flexbox + "flex", + "items-center", + + // Spacing + "py-3", + "px-5", + + // Size + { + "pl-9 sm:pl-5": context.level === 1, + "pl-14 sm:pl-5": context.level === 2, + }, + "leading-none", + + // Misc + "select-none", + "cursor-pointer", + "no-underline ", + "overflow-hidden", + ], + }), + icon: { + class: "mr-2", + }, + submenuicon: ({ props }) => ({ + class: [ + { + "ml-auto sm:ml-2": props.root, + "ml-auto": !props.root, + }, + ], + }), + submenu: ({ props }) => ({ + class: [ + // Size + "w-full sm:w-48", + + // Spacing + "py-1", + "m-0", + "list-none", + + // Shape + "shadow-none sm:shadow-md", + "border-0", + + // Position + "static sm:absolute", + "z-10", + { "sm:absolute sm:left-full sm:top-0": props.level > 1 }, + + // Color + "bg-surface-0 dark:bg-main-dark", + ], + }), + separator: { + class: "border-t border-surface-200 dark:border-surface-600 my-1", + }, + button: { + class: [ + // Flexbox + "flex sm:hidden", + "items-center justify-center", + + // Size + "w-8", + "h-8", + + // Shape + "rounded-full", + // Color + "text-surface-500 dark:text-white/80", + + // States + "hover:text-surface-600 dark:hover:text-white/60", + "hover:bg-surface-100 dark:hover:bg-surface-600/80", + "focus:outline-none focus:outline-offset-0", + "focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50", + + // Transitions + "transition duration-200 ease-in-out", + + // Misc + "cursor-pointer", + "no-underline", + ], + }, + end: { + class: "ml-auto self-center", + }, }; diff --git a/resources/js/Components/ApplicationMark.vue b/resources/js/Components/ApplicationMark.vue index f1f2008..b4556a5 100644 --- a/resources/js/Components/ApplicationMark.vue +++ b/resources/js/Components/ApplicationMark.vue @@ -1,12 +1,48 @@ diff --git a/resources/js/Components/BlogCard.vue b/resources/js/Components/BlogCard.vue new file mode 100644 index 0000000..df0c5f5 --- /dev/null +++ b/resources/js/Components/BlogCard.vue @@ -0,0 +1,52 @@ + + + diff --git a/resources/js/Components/CategoryCard.vue b/resources/js/Components/CategoryCard.vue new file mode 100644 index 0000000..cf34b13 --- /dev/null +++ b/resources/js/Components/CategoryCard.vue @@ -0,0 +1,70 @@ + + + + diff --git a/resources/js/Components/LabelCard.vue b/resources/js/Components/LabelCard.vue new file mode 100644 index 0000000..a019b6b --- /dev/null +++ b/resources/js/Components/LabelCard.vue @@ -0,0 +1,70 @@ + + + + diff --git a/resources/js/Components/RecipeCard.vue b/resources/js/Components/RecipeCard.vue index 79e3d4e..50bafde 100644 --- a/resources/js/Components/RecipeCard.vue +++ b/resources/js/Components/RecipeCard.vue @@ -44,37 +44,103 @@ const humanReadableDuration = (durationInMinutes) => { :src=" recipe.hero_preview ? recipe.hero_preview - : 'https://placehold.co/350x200?text=No+Image+yet' + : '/assets/no-recipe-img.png' " :alt="recipe.name" class="w-full h-32 sm:h-48 object-cover" /> -
+
{{ recipe.name }} - - Servings: - {{ recipe.serving }} - -
-
- - - - {{ - humanReadableDuration(recipe.total_time) - }} +
+
+ + + + {{ + humanReadableDuration(recipe.total_time) + }} +
+
+ + + + + + + + + + + {{ recipe.serving }} + +
+
+ {
diff --git a/resources/js/Pages/Category/CategoryIndex.vue b/resources/js/Pages/Category/CategoryIndex.vue index ebe2bc0..cb0730f 100644 --- a/resources/js/Pages/Category/CategoryIndex.vue +++ b/resources/js/Pages/Category/CategoryIndex.vue @@ -1,8 +1,9 @@