aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json1
-rw-r--r--pnpm-lock.yaml10
-rw-r--r--sanity/schemas/description.ts24
-rw-r--r--sanity/schemas/hero.ts29
-rw-r--r--src/app.postcss627
-rw-r--r--src/components/description.svelte0
-rw-r--r--src/components/hero.svelte0
-rw-r--r--src/routes/[lang=lang]/+page.server.ts4
-rw-r--r--src/routes/[lang=lang]/+page.svelte1
-rw-r--r--tailwind.config.cjs116
10 files changed, 806 insertions, 6 deletions
diff --git a/package.json b/package.json
index 28066bd..50106d0 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.5",
"@sveltejs/package": "^1.0.2",
+ "@tailwindcss/aspect-ratio": "^0.4.2",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"autoprefixer": "^10.4.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd484d5..cf69843 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
'@sveltejs/adapter-auto': ^2.0.0
'@sveltejs/kit': ^1.5.5
'@sveltejs/package': ^1.0.2
+ '@tailwindcss/aspect-ratio': ^0.4.2
'@typescript-eslint/eslint-plugin': ^5.51.0
'@typescript-eslint/parser': ^5.51.0
autoprefixer: ^10.4.13
@@ -37,6 +38,7 @@ devDependencies:
'@sveltejs/adapter-auto': 2.0.0_@sveltejs+kit@1.5.5
'@sveltejs/kit': 1.5.5_svelte@3.55.1+vite@4.1.1
'@sveltejs/package': 1.0.2_4x7phaipmicbaooxtnresslofa
+ '@tailwindcss/aspect-ratio': 0.4.2_tailwindcss@3.2.6
'@typescript-eslint/eslint-plugin': 5.51.0_z4swst3wuuqk4hlme4ajzslgh4
'@typescript-eslint/parser': 5.51.0_7kw3g6rralp5ps6mg3uyzz6azm
autoprefixer: 10.4.13_postcss@8.4.21
@@ -441,6 +443,14 @@ packages:
- supports-color
dev: true
+ /@tailwindcss/aspect-ratio/0.4.2_tailwindcss@3.2.6:
+ resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
+ peerDependencies:
+ tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+ dependencies:
+ tailwindcss: 3.2.6_postcss@8.4.21
+ dev: true
+
/@types/chai-subset/1.3.3:
resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
dependencies:
diff --git a/sanity/schemas/description.ts b/sanity/schemas/description.ts
new file mode 100644
index 0000000..211aac3
--- /dev/null
+++ b/sanity/schemas/description.ts
@@ -0,0 +1,24 @@
+import { baseLanguage } from "./_locales";
+
+export default {
+ name: 'description',
+ type: 'document',
+ title: 'Description section',
+ preview: {
+ select: {
+ title: `title.${baseLanguage.id}`
+ }
+ },
+ fields: [
+ {
+ title: "Title",
+ name: 'title',
+ type: 'string',
+ },
+ {
+ title: "Text",
+ name: "text",
+ type: "string",
+ }
+ ]
+} \ No newline at end of file
diff --git a/sanity/schemas/hero.ts b/sanity/schemas/hero.ts
new file mode 100644
index 0000000..48e5c77
--- /dev/null
+++ b/sanity/schemas/hero.ts
@@ -0,0 +1,29 @@
+import { baseLanguage } from "./_locales";
+
+export default {
+ name: 'hero',
+ type: 'document',
+ title: 'Hero section',
+ preview: {
+ select: {
+ title: `title.${baseLanguage.id}`
+ }
+ },
+ fields: [
+ {
+ title: "Title",
+ name: 'title',
+ type: 'string',
+ },
+ {
+ title: "Subtitle",
+ name: "subtitle",
+ type: "string",
+ },
+ {
+ title: "Image",
+ name: "image",
+ type: "image"
+ }
+ ]
+} \ No newline at end of file
diff --git a/src/app.postcss b/src/app.postcss
index b5c61c9..bbc170b 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,3 +1,630 @@
@tailwind base;
@tailwind components;
+
+/* colors + base typography */
+@layer base {
+ /* --------------------------------
+
+ (START) Global editor code https://codyhouse.co/ds/globals/colors
+
+ -------------------------------- */
+ :root,
+ [data-theme="default"] {
+ /* main */
+ --color-primary-darker: 250 84% 38%;
+ --color-primary-dark: 250 84% 46%;
+ --color-primary: 250 84% 54%;
+ --color-primary-light: 250 84% 60%;
+ --color-primary-lighter: 250 84% 67%;
+
+ --color-accent-darker: 342 89% 38%;
+ --color-accent-dark: 342 89% 43%;
+ --color-accent: 342 89% 48%;
+ --color-accent-light: 342 89% 56%;
+ --color-accent-lighter: 342 89% 62%;
+
+ --color-black: 231 15% 9%;
+ --color-white: 0 0% 100%;
+
+ /* feedback */
+ --color-warning-darker: 35 79% 48%;
+ --color-warning-dark: 35 79% 56%;
+ --color-warning: 35 79% 66%;
+ --color-warning-light: 35 79% 74%;
+ --color-warning-lighter: 35 79% 82%;
+
+ --color-success-darker: 170 78% 26%;
+ --color-success-dark: 170 78% 31%;
+ --color-success: 170 78% 36%;
+ --color-success-light: 170 78% 42%;
+ --color-success-lighter: 170 78% 47%;
+
+ --color-error-darker: 342 89% 38%;
+ --color-error-dark: 342 89% 43%;
+ --color-error: 342 89% 48%;
+ --color-error-light: 342 89% 56%;
+ --color-error-lighter: 342 89% 62%;
+
+ /* background */
+ --color-floor-darker: 240 4% 90%;
+ --color-floor-dark: 240 4% 95%;
+ --color-floor: 0 0% 100%;
+ --color-floor-light: 0 0% 100%;
+ --color-floor-lighter: 0 0% 100%;
+
+ /* color contrasts */
+ --color-contrast-lower: 240 4% 85%;
+ --color-contrast-low: 240 4% 65%;
+ --color-contrast-medium: 225 4% 47%;
+ --color-contrast-high: 230 7% 23%;
+ --color-contrast-higher: 230 13% 9%;
+ }
+
+ [data-theme="dark"] {
+ /* main */
+ --color-primary-darker: 250 100% 60%;
+ --color-primary-dark: 250 100% 64%;
+ --color-primary: 250 100% 69%;
+ --color-primary-light: 250 100% 72%;
+ --color-primary-lighter: 250 100% 76%;
+
+ --color-accent-darker: 342 92% 41%;
+ --color-accent-dark: 342 92% 47%;
+ --color-accent: 342 92% 54%;
+ --color-accent-light: 342 92% 60%;
+ --color-accent-lighter: 342 92% 65%;
+
+ --color-black: 230 13% 9%;
+ --color-white: 0 0% 100%;
+
+ /* feedback */
+ --color-warning-darker: 35 79% 48%;
+ --color-warning-dark: 35 79% 56%;
+ --color-warning: 35 79% 66%;
+ --color-warning-light: 35 79% 74%;
+ --color-warning-lighter: 35 79% 82%;
+
+ --color-success-darker: 170 78% 26%;
+ --color-success-dark: 170 78% 31%;
+ --color-success: 170 78% 36%;
+ --color-success-light: 170 78% 42%;
+ --color-success-lighter: 170 78% 47%;
+
+ --color-error-darker: 342 92% 41%;
+ --color-error-dark: 342 92% 47%;
+ --color-error: 342 92% 54%;
+ --color-error-light: 342 92% 60%;
+ --color-error-lighter: 342 92% 65%;
+
+ /* background */
+ --color-floor-darker: 232 7% 8%;
+ --color-floor-dark: 233 8% 11%;
+ --color-floor: 232 11% 15%;
+ --color-floor-light: 233 8% 19%;
+ --color-floor-lighter: 232 7% 22%;
+
+ /* color contrasts */
+ --color-contrast-lower: 240 6% 26%;
+ --color-contrast-low: 240 3% 41%;
+ --color-contrast-medium: 231 3% 57%;
+ --color-contrast-high: 240 5% 82%;
+ --color-contrast-higher: 240 100% 99%;
+
+ /* font rendering */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ /* --------------------------------
+
+ (END) Global editor code
+
+ -------------------------------- */
+
+ body,
+ [data-theme] {
+ @apply bg-floor text-contrast-high;
+ }
+
+ /* --------------------------------
+
+ (START) Global editor code https://codyhouse.co/ds/globals/typography
+
+ -------------------------------- */
+
+ body {
+ @apply font-sans font-normal;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4 {
+ @apply font-bold;
+ }
+
+ /* --------------------------------
+
+ (END) Global editor code
+
+ -------------------------------- */
+
+ body {
+ @apply text-base lg:text-xl;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4 {
+ @apply text-contrast-higher;
+ }
+
+ h1 {
+ @apply text-3xl lg:text-5xl;
+ }
+
+ h2 {
+ @apply text-2xl lg:text-4xl;
+ }
+
+ h3 {
+ @apply text-xl lg:text-3xl;
+ }
+
+ h4 {
+ @apply text-lg lg:text-2xl;
+ }
+
+ small {
+ @apply text-sm lg:text-base;
+ }
+
+ a,
+ .link {
+ @apply text-primary underline;
+ }
+
+ strong {
+ @apply font-bold;
+ }
+
+ s {
+ @apply line-through;
+ }
+
+ u {
+ @apply underline;
+ }
+
+ mark {
+ @apply bg-accent/20 text-inherit;
+ }
+
+ /* no-js support */
+ html:not(.js) .no-js\:is-hidden {
+ display: none !important;
+ }
+}
+
+/* button components */
+
+/* --------------------------------
+-------------------------------- */
+@layer components {
+ .btn {
+ position: relative;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ white-space: nowrap;
+ font-size: 1em;
+ @apply px-3 lg:px-5 py-1.5 lg:py-2 rounded bg-floor-dark text-contrast-higher;
+ cursor: pointer;
+ text-decoration: none;
+ line-height: 1.2;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transition: all 0.2s ease;
+ will-change: transform;
+ }
+
+ .btn:focus-visible {
+ box-shadow: 0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 2px hsla(var(--color-contrast-higher) / 0.15);
+ outline: none;
+ }
+
+ .btn:active {
+ transform: translateY(2px);
+ }
+
+ /* themes */
+ .btn--primary {
+ background: hsl(var(--color-primary));
+ color: hsl(var(--color-white));
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-primary-darker) / 0.25),
+ 0px 2px 6px hsla(var(--color-primary-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker) / 0.25);
+ }
+
+ .btn--primary:hover {
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25),
+ 0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25);
+ }
+
+ .btn--primary:focus-visible {
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25),
+ 0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25),
+ 0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 4px hsl(var(--color-primary));
+ }
+
+ .btn--subtle {
+ background: hsl(var(--color-floor-lighter));
+ color: hsl(var(--color-contrast-higher));
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+ 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
+ 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .btn--subtle:hover {
+ background: hsl(var(--color-floor-light));
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+ 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
+ }
+
+ .btn--subtle:focus-visible {
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+ 0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12),
+ 0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-contrast-high));
+ }
+
+ .btn--accent {
+ background: hsl(var(--color-accent));
+ color: hsl(var(--color-white));
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-accent-darker) / 0.25),
+ 0px 2px 6px hsla(var(--color-accent-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker) / 0.25);
+ }
+
+ .btn--accent:hover {
+ background: hsl(var(--color-accent-light));
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25),
+ 0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1);
+ }
+
+ .btn--accent:focus-visible {
+ box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25),
+ 0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1),
+ 0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-accent));
+ }
+
+ /* feedback */
+ .btn--disabled,
+ .btn[disabled],
+ .btn[readonly] {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+}
+
+/* --------------------------------
+
+ (END) Global editor code
+
+-------------------------------- */
+
+/* input/form style */
+
+/* --------------------------------
+
+ (START) Global editor code https://codyhouse.co/ds/globals/forms
+
+-------------------------------- */
+@layer components {
+ .form-control {
+ font-size: 1em;
+ @apply px-2 lg:px-3 py-1.5 lg:py-2 rounded bg-floor-dark;
+ line-height: 1.2;
+ box-shadow: inset 0px 0px 0px 1px hsl(var(--color-contrast-lower));
+ transition: all 0.2s ease;
+ }
+
+ .form-control::placeholder {
+ opacity: 1;
+ @apply text-contrast-low;
+ }
+
+ .form-control:focus,
+ .form-control:focus-within {
+ @apply bg-floor;
+ box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-primary)),
+ 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+ outline: none;
+ }
+
+ .form-control--disabled,
+ .form-control[disabled],
+ .form-control[readonly] {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ .form-control[aria-invalid="true"],
+ .form-control.form-control--error {
+ box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error));
+ }
+
+ .form-control[aria-invalid="true"]:focus,
+ .form-control[aria-invalid="true"]:focus-within,
+ .form-control.form-control--error:focus,
+ .form-control.form-control--error:focus-within {
+ box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error)),
+ 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .form-legend {
+ @apply mb-3 lg:mb-5 text-contrast-higher text-lg lg:text-2xl;
+ }
+
+ .form-label {
+ display: inline-block;
+ @apply text-sm lg:text-base;
+ }
+}
+
+/* --------------------------------
+
+ (END) Global editor code
+
+-------------------------------- */
+
+/* text component + icon + inner shadow */
+@layer components {
+ /* Custom text component classes */
+ .text-component {
+ --line-height-multiplier: 1;
+ --text-space-y-multiplier: 1;
+ --heading-line-height: 1.2;
+ --body-line-height: 1.4;
+ }
+ .text-component.leading-extra-tight {
+ line-height: normal;
+ --heading-line-height: 1;
+ --body-line-height: 1.1;
+ }
+ .text-component.leading-tight {
+ --heading-line-height: 1.1;
+ --body-line-height: 1.2;
+ line-height: normal;
+ }
+ .text-component.leading-snug {
+ --heading-line-height: 1.15;
+ --body-line-height: 1.4;
+ line-height: normal;
+ }
+ .text-component.leading-normal {
+ --heading-line-height: 1.22;
+ --body-line-height: 1.58;
+ line-height: normal;
+ }
+ .text-component.leading-relaxed {
+ --heading-line-height: 1.3;
+ --body-line-height: 1.72;
+ line-height: normal;
+ }
+
+ .text-component.text-space-y-xxs {
+ --text-space-y-multiplier: 0.25;
+ }
+ .text-component.text-space-y-xs {
+ --text-space-y-multiplier: 0.5;
+ }
+ .text-component.text-space-y-sm {
+ --text-space-y-multiplier: 0.75;
+ }
+ .text-component.text-space-y-md {
+ --text-space-y-multiplier: 1.25;
+ }
+ .text-component.text-space-y-lg {
+ --text-space-y-multiplier: 1.5;
+ }
+ .text-component.text-space-y-xl {
+ --text-space-y-multiplier: 1.75;
+ }
+ .text-component.text-space-y-xxl {
+ --text-space-y-multiplier: 2;
+ }
+
+ .text-component :where(h1),
+ .text-component :where(h2),
+ .text-component :where(h3),
+ .text-component :where(h4) {
+ line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
+ margin-bottom: calc(0.3125em * var(--text-space-y-multiplier, 1));
+ }
+
+ .text-component :where(h2),
+ .text-component :where(h3),
+ .text-component :where(h4) {
+ margin-top: calc(0.9375em * var(--text-space-y-multiplier, 1));
+ }
+
+ .text-component p,
+ .text-component blockquote,
+ .text-component ul li,
+ .text-component ol li {
+ line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
+ }
+
+ .text-component ul,
+ .text-component ol,
+ .text-component p,
+ .text-component blockquote {
+ margin-bottom: calc(0.9375em * var(--text-space-y-multiplier, 1));
+ }
+
+ .text-component :where(ul),
+ .text-component :where(ol) {
+ list-style-position: inside;
+ }
+
+ .text-component ul ul,
+ .text-component ul ol,
+ .text-component ol ul,
+ .text-component ol ol {
+ padding-left: 1em;
+ margin-bottom: 0;
+ }
+
+ .text-component :where(ul) {
+ list-style-type: disc;
+ }
+
+ .text-component :where(ol) {
+ list-style-type: decimal;
+ }
+
+ .text-component :where(img) {
+ display: block;
+ margin: 0 auto;
+ }
+
+ .text-component :where(figcaption) {
+ @apply text-contrast-low text-sm lg:text-base;
+ text-align: center;
+ margin-top: 0.5em;
+ }
+
+ .text-component :where(em) {
+ font-style: italic;
+ }
+
+ .text-component :where(hr) {
+ @apply bg-contrast-lower;
+ height: 1px;
+ margin-top: calc(1.875em * var(--text-space-y-multiplier, 1));
+ margin-bottom: calc(1.875em * var(--text-space-y-multiplier, 1));
+ margin-left: auto;
+ margin-right: auto;
+ border: none;
+ }
+
+ .text-component > *:first-child {
+ margin-top: 0;
+ }
+
+ .text-component > *:last-child {
+ margin-bottom: 0;
+ }
+
+ .text-component :where(blockquote) {
+ padding-left: 1em;
+ @apply border-l-4 border-contrast-lower;
+ font-style: italic;
+ }
+
+ .article {
+ /* e.g., blog posts */
+ --body-line-height: 1.58;
+ --text-space-y-multiplier: 1.2;
+ }
+
+ /* Icons */
+ .icon {
+ --size: 1em;
+ height: var(--size);
+ width: var(--size);
+ display: inline-block;
+ color: inherit;
+ fill: currentColor;
+ line-height: 1;
+ flex-shrink: 0;
+ max-width: initial;
+ }
+
+ .icon--is-spinning {
+ animation: icon-spin 1s infinite linear;
+ }
+
+ @keyframes icon-spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ /* inner shadow */
+ :where(.inner-glow, .inner-glow-top) {
+ position: relative;
+ }
+
+ .inner-glow::after,
+ .inner-glow-top::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .inner-glow::after {
+ box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
+ }
+ .inner-glow-top::after {
+ box-shadow: var(inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075));
+ }
+}
+
+/* #region CodyHouse components CSS */
+
+/* #endregion */
+
@tailwind utilities;
+
+/* custom utility classes */
+@layer utilities {
+ /* overflow */
+ .momentum-scrolling {
+ -webkit-overflow-scrolling: touch;
+ }
+
+ /* perspective */
+ .perspective-xs {
+ perspective: 250px;
+ }
+ .perspective-sm {
+ perspective: 500px;
+ }
+ .perspective-md {
+ perspective: 1000px;
+ }
+ .perspective-lg {
+ perspective: 1500px;
+ }
+ .perspective-xl {
+ perspective: 3000px;
+ }
+
+ /* text shadow */
+ .text-shadow-xs {
+ text-shadow: 0 1px 1px rgba(#000, 0.15);
+ }
+ .text-shadow-sm {
+ text-shadow: 0 1px 2px rgba(#000, 0.25);
+ }
+ .text-shadow-md {
+ text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2);
+ }
+ .text-shadow-lg {
+ text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2);
+ }
+ .text-shadow-xl {
+ text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2),
+ 0 6px 24px rgba(#000, 0.25);
+ }
+ .text-shadow-none {
+ text-shadow: none;
+ }
+}
diff --git a/src/components/description.svelte b/src/components/description.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/description.svelte
diff --git a/src/components/hero.svelte b/src/components/hero.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/hero.svelte
diff --git a/src/routes/[lang=lang]/+page.server.ts b/src/routes/[lang=lang]/+page.server.ts
index d3a98a5..6e0a910 100644
--- a/src/routes/[lang=lang]/+page.server.ts
+++ b/src/routes/[lang=lang]/+page.server.ts
@@ -6,8 +6,8 @@ import { fromLocalizedString } from '$lib/utils';
export const load = (async ({ locals }) => {
const contactSection = await sanity.fetch(groq`*[_type == "contact"][0]`);
- console.log(contactSection);
-
+ const heroSection = await sanity.fetch(groq`*[_type == "hero"][0]`);
+ const descriptionSection = await sanity.fetch(groq`*[_type == "description"][0]`);
return {
contact: {
phone: fromLocalizedString(contactSection.phone, locals.locale),
diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte
index 666aa80..b757a71 100644
--- a/src/routes/[lang=lang]/+page.svelte
+++ b/src/routes/[lang=lang]/+page.svelte
@@ -11,7 +11,6 @@
const M: Model = {
contact: data.contact,
};
- console.log(data);
</script>
<Contact model={M.contact} />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index aac61b2..5294834 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,7 +1,117 @@
module.exports = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
- extend: {},
+ colors: {
+ transparent: "transparent",
+ current: "currentColor",
+ inherit: "inherit",
+ primary: {
+ DEFAULT: "hsl(var(--color-primary) / <alpha-value>)",
+ darker: "hsl(var(--color-primary-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-primary-dark) / <alpha-value>)",
+ light: "hsl(var(--color-primary-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-primary-lighter) / <alpha-value>)",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--color-accent) / <alpha-value>)",
+ darker: "hsl(var(--color-accent-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-accent-dark) / <alpha-value>)",
+ light: "hsl(var(--color-accent-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-accent-lighter) / <alpha-value>)",
+ },
+ black: "hsl(var(--color-black) / <alpha-value>)",
+ white: "hsl(var(--color-white) / <alpha-value>)",
+ warning: {
+ DEFAULT: "hsl(var(--color-warning) / <alpha-value>)",
+ darker: "hsl(var(--color-warning-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-warning-dark) / <alpha-value>)",
+ light: "hsl(var(--color-warning-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-warning-lighter) / <alpha-value>)",
+ },
+ success: {
+ DEFAULT: "hsl(var(--color-success) / <alpha-value>)",
+ darker: "hsl(var(--color-success-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-success-dark) / <alpha-value>)",
+ light: "hsl(var(--color-success-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-success-lighter) / <alpha-value>)",
+ },
+ error: {
+ DEFAULT: "hsl(var(--color-error) / <alpha-value>)",
+ darker: "hsl(var(--color-error-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-error-dark) / <alpha-value>)",
+ light: "hsl(var(--color-error-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-error-lighter) / <alpha-value>)",
+ },
+ floor: {
+ DEFAULT: "hsl(var(--color-floor) / <alpha-value>)",
+ darker: "hsl(var(--color-floor-darker) / <alpha-value>)",
+ dark: "hsl(var(--color-floor-dark) / <alpha-value>)",
+ light: "hsl(var(--color-floor-light) / <alpha-value>)",
+ lighter: "hsl(var(--color-floor-lighter) / <alpha-value>)",
+ },
+ contrast: {
+ lower: "hsl(var(--color-contrast-lower) / <alpha-value>)",
+ low: "hsl(var(--color-contrast-low) / <alpha-value>)",
+ medium: "hsl(var(--color-contrast-medium) / <alpha-value>)",
+ high: "hsl(var(--color-contrast-high) / <alpha-value>)",
+ higher: "hsl(var(--color-contrast-higher) / <alpha-value>)",
+ },
+ },
+ extend: {
+ zIndex: {
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 5: "5",
+ 15: "15",
+ },
+ borderRadius: {
+ inherit: "inherit",
+ },
+ lineHeight: {
+ "extra-tight": "1.1",
+ },
+ transitionTimingFunction: {
+ "out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+ },
+ boxShadow: {
+ "inner-xs":
+ "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)",
+ "inner-2xs":
+ "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)",
+ "inner-sm":
+ "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1)",
+ "inner-md":
+ "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12)",
+ "inner-lg":
+ "inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15)",
+ "inner-top-xs":
+ "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)",
+ "inner-top-sm":
+ "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1)",
+ "inner-top-md":
+ "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12)",
+ "inner-top-lg":
+ "inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075), 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15)",
+ },
+ opacity: {
+ 7: ".07",
+ 8: ".08",
+ 9: ".09",
+ 12: ".12",
+ 15: ".15",
+ 35: ".35",
+ 65: ".65",
+ 85: ".85",
+ 98: ".98",
+ },
+ borderWidth: {
+ 3: "3px",
+ },
+ outlineWidth: {
+ 3: "3px",
+ },
+ },
},
- plugins: [],
-};
+ plugins: [require("@tailwindcss/aspect-ratio")],
+}; \ No newline at end of file
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 08:12:09 +0100