-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from happydesigns/feat/content-3
feat: update to Nuxt UI 3 and Content 3
- Loading branch information
Showing
36 changed files
with
3,258 additions
and
2,781 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| @import "tailwindcss"; | ||
| @import "@nuxt/ui-pro"; | ||
|
|
||
| @theme { | ||
| /* Fonts */ | ||
| --font-serif: 'Lora'; | ||
| --font-sans: 'Lato'; | ||
|
|
||
| /* Colors */ | ||
| --color-red-50: #fef1f4; | ||
| --color-red-100: #fcdee5; | ||
| --color-red-200: #fac2cd; | ||
| --color-red-300: #f693a7; | ||
| --color-red-400: #f05678; | ||
| --color-red-500: #ec224e; | ||
| --color-red-600: #eb1443; | ||
| --color-red-700: #d3123c; | ||
| --color-red-800: #ae0f31; | ||
| --color-red-900: #750019; | ||
| --color-red-950: #570013; | ||
|
|
||
| --color-primary-50: var(--ui-color-primary-50); | ||
| --color-primary-100: var(--ui-color-primary-100); | ||
| --color-primary-200: var(--ui-color-primary-200); | ||
| --color-primary-300: var(--ui-color-primary-300); | ||
| --color-primary-400: var(--ui-color-primary-400); | ||
| --color-primary-500: var(--ui-color-primary-500); | ||
| --color-primary-600: var(--ui-color-primary-600); | ||
| --color-primary-700: var(--ui-color-primary-700); | ||
| --color-primary-800: var(--ui-color-primary-800); | ||
| --color-primary-900: var(--ui-color-primary-900); | ||
| --color-primary-950: var(--ui-color-primary-950); | ||
|
|
||
| --color-neutral-50: var(--ui-color-neutral-50); | ||
| --color-neutral-100: var(--ui-color-neutral-100); | ||
| --color-neutral-200: var(--ui-color-neutral-200); | ||
| --color-neutral-300: var(--ui-color-neutral-300); | ||
| --color-neutral-400: var(--ui-color-neutral-400); | ||
| --color-neutral-500: var(--ui-color-neutral-500); | ||
| --color-neutral-600: var(--ui-color-neutral-600); | ||
| --color-neutral-700: var(--ui-color-neutral-700); | ||
| --color-neutral-800: var(--ui-color-neutral-800); | ||
| --color-neutral-900: var(--ui-color-neutral-900); | ||
| --color-neutral-950: var(--ui-color-neutral-950); | ||
|
|
||
| --color-raisin: #1d1f25; | ||
| --color-raisin-cool: #242A32; | ||
|
|
||
| --ui-primary: var(--color-primary-900); | ||
|
|
||
| /* Sizing */ | ||
| --radius: var(--radius-sm); | ||
| --ui-radius: var(--radius); | ||
| } | ||
|
|
||
| @layer theme { | ||
| .dark { | ||
| --ui-primary: var(--color-primary-400); | ||
| color: var(--ui-text); | ||
| } | ||
|
|
||
| :root { | ||
| figcaption { | ||
| color: var(--ui-text-muted); | ||
| font-size: var(--text-sm); | ||
| margin-top: calc(var(--spacing) * 3); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,79 @@ | ||
| <script setup lang="ts"> | ||
| import type { FooterProps } from '@nuxt/ui-pro' | ||
| import { tv } from 'tailwind-variants' | ||
| type FooterUiProps = Partial<FooterProps['ui'] & { | ||
| wave: string | ||
| columns: any | ||
| }> | ||
| const props = withDefaults(defineProps<{ | ||
| ui?: Partial<typeof config> | ||
| class?: any | ||
| ui?: FooterUiProps | ||
| class?: string | ||
| }>(), { | ||
| ui: () => ({}), | ||
| class: undefined, | ||
| }) | ||
| const appConfig = useAppConfig() | ||
| const config = { | ||
| wrapper: '', | ||
| menu: {}, | ||
| wave: '', | ||
| } | ||
| const footer = tv({ | ||
| slots: appConfig.uiPro?.footer?.slots || {}, | ||
| extend: props.ui, | ||
| }) | ||
| const footerColumns = tv({ | ||
| slots: appConfig.uiPro?.footerColumns?.slots || {}, | ||
| extend: props.ui?.columns, | ||
| }) | ||
| const { ui, attrs } = useUI('footer', toRef(props, 'ui'), config, toRef(props, 'class'), true) | ||
| const ui = footer({ class: props.class }) | ||
| const columnsUi = footerColumns() | ||
| </script> | ||
|
|
||
| <!-- eslint-disable vue/no-extra-parens --> | ||
| <template> | ||
| <div v-bind="attrs" :class="props.class"> | ||
| <Wave class="rotate-180" :class="ui.wave" /> | ||
| <UFooter | ||
| :ui="{ | ||
| wrapper: 'dark dark:bg-raisinCool', | ||
| bottom: { wrapper: 'border-t border-gray-200 dark:border-cool-700', container: '!py-6', left: '~', center: '~', right: '~' }, | ||
| top: { wrapper: '', container: 'py-8 lg:py-12' }, | ||
| }" | ||
| > | ||
| <div> | ||
| <Wave :class="ui.wave?.({ class: props.ui?.wave })" /> | ||
| <UFooter> | ||
| <template #top> | ||
| <UFooterColumns :links="appConfig.links?.footer"> | ||
| <template #right> | ||
| <div class="flex flex-col lg:grid grid-flow-col auto cols-fr gap-8 xl:col-span-2 grid-cols-3 xl:grid-cols-none text-gray-600 dark:text-gray-300 text-sm"> | ||
| <div class="space-y-4"> | ||
| <h3 class="font-semibold text-gray-900 dark:text-white mb-6"> | ||
| Anschrift | ||
| </h3> | ||
| <p>Bernd Siegel<br>Steingestaltung</p> | ||
| <p>Bahnhofstraße 13<br>74861 Neudenau</p> | ||
| </div> | ||
| <div class="space-y-4"> | ||
| <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-6"> | ||
| Kontakt | ||
| </h3> | ||
| <p> | ||
| <UIcon name="i-ph-phone-fill" /> 06264 / 92 64 44<br> | ||
| <UIcon name="i-ph-printer-fill" /> 06264 / 92 64 45<br> | ||
| </p> | ||
| <p> | ||
| <UIcon name="i-ph-envelope-fill" /> [email protected] | ||
| </p> | ||
| <UContainer> | ||
| <UFooterColumns :columns="appConfig.links?.footer"> | ||
| <template #right> | ||
| <div class="flex flex-col lg:grid grid-flow-col auto cols-fr gap-8 xl:col-span-2 grid-cols-3 xl:grid-cols-none text-gray-600 dark:text-gray-300 text-sm prose"> | ||
| <div :class="columnsUi.center?.()"> | ||
| <h3 class="font-semibold text-neutral-900 dark:text-white mb-6"> | ||
| Anschrift | ||
| </h3> | ||
| <ProseP>Bernd Siegel<br>Steingestaltung</ProseP> | ||
| <ProseP>Bahnhofstraße 13<br>74861 Neudenau</ProseP> | ||
| </div> | ||
| <div :class="columnsUi.right?.()"> | ||
| <h3 class="text-sm font-semibold text-neutral-900 dark:text-white mb-6"> | ||
| Kontakt | ||
| </h3> | ||
| <ProseP> | ||
| <UIcon name="i-ph-phone-fill" /> 06264 / 92 64 44<br> | ||
| <UIcon name="i-ph-printer-fill" /> 06264 / 92 64 45<br> | ||
| </ProseP> | ||
| <ProseP> | ||
| <UIcon name="i-ph-envelope-fill" /> [email protected] | ||
| </ProseP> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </UFooterColumns> | ||
| </template> | ||
| </UFooterColumns> | ||
| </UContainer> | ||
| </template> | ||
| <template #left> | ||
| <p class="text-gray-500 dark:text-gray-400 text-sm"> | ||
| <p class="text-neutral-500 dark:text-neutral-400 text-sm"> | ||
| Copyright © {{ new Date().getFullYear() }} | ||
| <NuxtLink to="https://www.happydesigns.de/" target="_blank"> | ||
| <ULink to="https://www.happydesigns.de/" target="_blank"> | ||
| happydesigns | ||
| </NuxtLink> | ||
| </ULink> | ||
| </p> | ||
| </template> | ||
| <template #right> | ||
| <UColorModeSelect class="w-32" select-class="dark:bg-inherit" :ui-menu="ui.menu" /> | ||
| <UColorModeSelect :ui="{ base: 'w-32 dark:bg-raisin-cool', content: 'dark:bg-raisin-cool' }" /> | ||
| </template> | ||
| </UFooter> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.