feat: Setup Nuxt UI
This commit is contained in:
@@ -1,8 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { fr } from "@nuxt/ui/locale";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UApp :locale="fr">
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@import "./containers.css";
|
||||
@import "./theme.css";
|
||||
@import "./typography.css";
|
||||
|
||||
67
wp-content/themes/headless/app/assets/css/containers.css
Normal file
67
wp-content/themes/headless/app/assets/css/containers.css
Normal file
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--ui-container: var(--breakpoint-2xl);
|
||||
}
|
||||
|
||||
/* Container padding */
|
||||
@utility px-container {
|
||||
@apply px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Container sizes */
|
||||
@utility container {
|
||||
@apply mx-auto max-w-(--breakpoint-2xl) px-container;
|
||||
}
|
||||
@utility container-xl {
|
||||
@apply container max-w-(--breakpoint-xl);
|
||||
}
|
||||
@utility container-lg {
|
||||
@apply container max-w-(--breakpoint-lg);
|
||||
}
|
||||
@utility container-md {
|
||||
@apply container max-w-(--breakpoint-md);
|
||||
}
|
||||
@utility container-sm {
|
||||
@apply container max-w-(--breakpoint-sm);
|
||||
}
|
||||
@utility container-fluid {
|
||||
@apply container max-w-screen;
|
||||
}
|
||||
@utility container-none {
|
||||
@apply w-full max-w-screen;
|
||||
}
|
||||
|
||||
/* Split containers */
|
||||
:root {
|
||||
--container-outside-margin: 0;
|
||||
--container-width: 100vw;
|
||||
@variant sm {
|
||||
--container-outside-margin: calc(50vw - theme("screens.sm") / 2);
|
||||
--container-width: theme("screens.sm");
|
||||
}
|
||||
@variant md {
|
||||
--container-outside-margin: calc(50vw - theme("screens.md") / 2);
|
||||
--container-width: theme("screens.md");
|
||||
}
|
||||
@variant lg {
|
||||
--container-outside-margin: calc(50vw - theme("screens.lg") / 2);
|
||||
--container-width: theme("screens.lg");
|
||||
}
|
||||
@variant xl {
|
||||
--container-outside-margin: calc(50vw - theme("screens.xl") / 2);
|
||||
--container-width: theme("screens.xl");
|
||||
}
|
||||
@variant 2xl {
|
||||
--container-outside-margin: calc(50vw - theme("screens.2xl") / 2);
|
||||
--container-width: theme("screens.2xl");
|
||||
}
|
||||
}
|
||||
|
||||
@utility container-left {
|
||||
@apply ml-(--container-outside-margin) px-container;
|
||||
}
|
||||
@utility container-right {
|
||||
@apply mr-(--container-outside-margin) px-container;
|
||||
}
|
||||
@utility container-half {
|
||||
width: calc(var(--container-width) / 2);
|
||||
}
|
||||
0
wp-content/themes/headless/app/assets/css/theme.css
Normal file
0
wp-content/themes/headless/app/assets/css/theme.css
Normal file
21
wp-content/themes/headless/app/assets/css/typography.css
Normal file
21
wp-content/themes/headless/app/assets/css/typography.css
Normal file
@@ -0,0 +1,21 @@
|
||||
/* Heading styles */
|
||||
@utility heading-base {
|
||||
@apply font-bold tracking-tight;
|
||||
}
|
||||
@utility heading-1 {
|
||||
@apply heading-base text-4xl;
|
||||
}
|
||||
@utility heading-2 {
|
||||
@apply heading-base text-3xl;
|
||||
}
|
||||
@utility heading-3 {
|
||||
@apply heading-base text-2xl;
|
||||
}
|
||||
@utility heading-4 {
|
||||
@apply heading-base text-xl;
|
||||
}
|
||||
|
||||
/* Paragraph styles */
|
||||
@utility paragraph-lead {
|
||||
@apply text-2xl;
|
||||
}
|
||||
4
wp-content/themes/headless/app/assets/svg/site-logo.svg
Normal file
4
wp-content/themes/headless/app/assets/svg/site-logo.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg version="1.1" viewBox="0 0 490.3 86.763" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m10.344 1.5312a10.208 10.208 0 0 0-9.0195 15.207l36.1 64.801a10.2 10.2 0 0 0 13.9 3.9004 10.415 10.415 0 0 0 4-14l-36.201-64.701a10.208 10.208 0 0 0-8.7793-5.207zm221.33 12.51v51.84h11.52v-2.8789a16.277 16.277 0 0 0 11.232 3.959c9.576 0 17.641-7.7004 17.641-19.152 0-11.376-8.0656-19.152-17.641-19.152a16.277 16.277 0 0 0-11.232 3.9609v-18.576h-11.52zm206 0v51.84h11.52v-51.84h-11.52zm-127.3 0.070312v11.145h11.521v-11.145h-11.521zm-21.229 14.535c-8.6942-0.004836-14.866 4.5403-15.109 11.721-0.193 5.685 3.5014 9.4123 10.15 10.863l7.291 1.6875c2.645 0.594 3.5488 1.5612 3.5078 2.7852-0.054 1.583-1.7534 2.8227-4.7754 2.7207-3.094-0.105-5.8618-1.3519-6.2598-4.4629l-11.305 1.9199c0.972 7.453 8.133 10.795 16.625 11.084 9.5 0.322 16.549-3.6186 16.82-11.602 0.181-5.325-2.8478-9.5341-9.6348-11.205l-8.4316-2.0137c-2.286-0.582-2.6824-1.6003-2.6484-2.6113 0.044-1.295 1.0992-2.773 4.1992-2.668 3.526 0.12 5.6164 2.2082 5.9004 4.4512l10.574-1.7363c-1.227-6.309-7.0597-10.613-16.055-10.918-0.28559-0.009687-0.56915-0.015469-0.84961-0.015625zm-79.43 0.009766c-10.512 0-19.152 7.7764-19.152 19.152 0 11.448 8.6401 19.152 19.08 19.152 8.28 0 14.832-3.6728 17.928-11.301l-10.225-2.0879c-1.944 3.528-5.0392 4.1758-7.6992 4.1758-3.888 0-6.8414-2.6624-7.7774-6.9824h26.5v-2.957h-0.00781c-0.216-11.808-8.4225-19.152-18.646-19.152zm140.62 0a13.682 13.682 0 0 0-10.656 4.3926v-3.3125h-11.52v36.145h11.52v-17.711c0-6.048 2.7361-9.1445 6.9121-9.1445 3.456 0 6.1191 2.5912 6.1191 6.6992v20.156h11.521v-17.711c0-6.048 2.8067-9.1445 7.0547-9.1445 3.384 0 6.0488 2.5912 6.0488 6.6992v20.156h11.447v-22.607c0-8.784-6.1202-14.617-13.824-14.617a15.58 15.58 0 0 0-12.814 6.1211c-2.448-3.96-6.7686-6.1211-11.809-6.1211zm66.391 0a16.277 16.277 0 0 0-11.232 3.9609v-2.8809h-11.52v48.385h11.52v-15.119a16.277 16.277 0 0 0 11.232 3.959c9.576 0 17.639-7.7004 17.639-19.152 0-11.376-8.0627-19.152-17.639-19.152zm54.936 0c-10.512 0-19.15 7.7764-19.15 19.152 0 11.448 8.6381 19.152 19.078 19.152 8.28 0 14.834-3.6728 17.93-11.301l-10.225-2.0879c-1.944 3.528-5.0392 4.1758-7.6992 4.1758-3.888 0-6.8414-2.6624-7.7774-6.9824h26.5v-2.957h-0.00781c-0.216-11.808-8.4244-19.152-18.648-19.152zm-336.16 1.0801 11.592 36.217h10.008l6.5527-19.584 6.4805 19.584h10.008l11.576-36.217h-11.301l-5.9004 19.512-6.8398-19.512h-8.1367l-6.8398 19.441-5.8984-19.441h-11.301zm174.88 0v36.145h11.521v-36.145h-11.521zm-100.66 8.2812a7.221 7.221 0 0 1 7.2715 5.6875h-14.9a7.918 7.918 0 0 1 7.6289-5.6875zm261.94 0a7.221 7.221 0 0 1 7.2715 5.6875h-14.9a7.918 7.918 0 0 1 7.6289-5.6875zm-219.6 0.43164c5.04 0 8.7109 3.8154 8.7109 9.3594 0 5.616-3.6709 9.3613-8.7109 9.3613a8.972 8.972 0 0 1-8.8574-9.3613 9.016 9.016 0 0 1 8.8574-9.3594zm162.29 0c5.04 0 8.7129 3.8154 8.7129 9.3594 0 5.616-3.6729 9.3613-8.7129 9.3613a8.972 8.972 0 0 1-8.8555-9.3613 9.016 9.016 0 0 1 8.8555-9.3594z" fill="#212121"/>
|
||||
<path d="m123.02 1.939-.7-.5a9.735 9.735 0 0 0-13.4 3.2l-29.1 47.3a2.253 2.253 0 0 1-3.9-.1l-11.3-20.3a9.82 9.82 0 0 0-13.3-3.8l-.8.4a9.82 9.82 0 0 0-3.8 13.3l21.8 39a9.983 9.983 0 0 0 8.3 5 9.83 9.83 0 0 0 9.1-4.6l40.4-65.6a9.668 9.668 0 0 0-3.3-13.3" fill="#0ad2b7" data-name="Tracé 22516"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<UHeader mode="slideover">
|
||||
<template #left>
|
||||
<NuxtLink to="/">
|
||||
<SvgSiteLogo class="h-10 w-auto" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</UHeader>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ title?: string }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header v-if="title" class="py-3">
|
||||
<div class="container">
|
||||
<h1 class="heading-1">{{ title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div id="layout-default">
|
||||
<SiteHeader />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<template>
|
||||
<div id="page-node-from-uri">TODO: [...uri].vue</div>
|
||||
<div id="page-node-from-uri">
|
||||
<PageHeader title="TODO" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user