diff --git a/index.html b/index.html
index edd4762..24aef9e 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,16 @@
- Boilerplate Website
+
+
+
+ Earth Walker Design
diff --git a/src/style.css b/src/style.css
index 3ebb69e..669819b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,48 +4,48 @@
@custom-variant dark (&:is(.dark *));
:root {
- --background: hsl(0 0% 100%);
- --foreground: hsl(0 0% 3.9%);
- --card: hsl(0 0% 100%);
- --card-foreground: hsl(0 0% 3.9%);
- --popover: hsl(0 0% 100%);
- --popover-foreground: hsl(0 0% 3.9%);
- --primary: hsl(0 0% 9%);
- --primary-foreground: hsl(0 0% 98%);
- --secondary: hsl(0 0% 96.1%);
- --secondary-foreground: hsl(0 0% 9%);
- --muted: hsl(0 0% 96.1%);
- --muted-foreground: hsl(0 0% 45.1%);
- --accent: hsl(0 0% 96.1%);
- --accent-foreground: hsl(0 0% 9%);
- --destructive: hsl(0 84.2% 60.2%);
- --destructive-foreground: hsl(0 0% 98%);
- --border: hsl(0 0% 89.8%);
- --input: hsl(0 0% 89.8%);
- --ring: hsl(0 0% 3.9%);
- --radius: 0.5rem;
+ --background: oklch(0.985 0.005 80);
+ --foreground: oklch(0.2 0.012 60);
+ --card: oklch(0.985 0.005 80);
+ --card-foreground: oklch(0.2 0.012 60);
+ --popover: oklch(0.985 0.005 80);
+ --popover-foreground: oklch(0.2 0.012 60);
+ --primary: oklch(0.18 0.008 60);
+ --primary-foreground: oklch(0.97 0.008 80);
+ --secondary: oklch(0.94 0.008 75);
+ --secondary-foreground: oklch(0.2 0.012 60);
+ --muted: oklch(0.94 0.008 75);
+ --muted-foreground: oklch(0.5 0.015 60);
+ --accent: oklch(0.92 0.018 65);
+ --accent-foreground: oklch(0.2 0.012 60);
+ --destructive: oklch(0.55 0.18 25);
+ --destructive-foreground: oklch(0.97 0.008 80);
+ --border: oklch(0.88 0.01 70);
+ --input: oklch(0.88 0.01 70);
+ --ring: oklch(0.2 0.012 60);
+ --radius: 0.25rem;
}
.dark {
- --background: hsl(0 0% 3.9%);
- --foreground: hsl(0 0% 98%);
- --card: hsl(0 0% 3.9%);
- --card-foreground: hsl(0 0% 98%);
- --popover: hsl(0 0% 3.9%);
- --popover-foreground: hsl(0 0% 98%);
- --primary: hsl(0 0% 98%);
- --primary-foreground: hsl(0 0% 9%);
- --secondary: hsl(0 0% 14.9%);
- --secondary-foreground: hsl(0 0% 98%);
- --muted: hsl(0 0% 14.9%);
- --muted-foreground: hsl(0 0% 63.9%);
- --accent: hsl(0 0% 14.9%);
- --accent-foreground: hsl(0 0% 98%);
- --destructive: hsl(0 62.8% 30.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --border: hsl(0 0% 14.9%);
- --input: hsl(0 0% 14.9%);
- --ring: hsl(0 0% 83.1%);
+ --background: oklch(0.16 0.008 60);
+ --foreground: oklch(0.95 0.01 80);
+ --card: oklch(0.18 0.008 60);
+ --card-foreground: oklch(0.95 0.01 80);
+ --popover: oklch(0.18 0.008 60);
+ --popover-foreground: oklch(0.95 0.01 80);
+ --primary: oklch(0.95 0.01 80);
+ --primary-foreground: oklch(0.18 0.008 60);
+ --secondary: oklch(0.24 0.012 60);
+ --secondary-foreground: oklch(0.95 0.01 80);
+ --muted: oklch(0.24 0.012 60);
+ --muted-foreground: oklch(0.7 0.012 70);
+ --accent: oklch(0.3 0.022 65);
+ --accent-foreground: oklch(0.95 0.01 80);
+ --destructive: oklch(0.45 0.18 25);
+ --destructive-foreground: oklch(0.95 0.01 80);
+ --border: oklch(0.28 0.012 60);
+ --input: oklch(0.28 0.012 60);
+ --ring: oklch(0.85 0.012 75);
}
@theme inline {
@@ -69,15 +69,36 @@
--color-input: var(--input);
--color-ring: var(--ring);
--radius-lg: var(--radius);
- --radius-md: calc(var(--radius) - 2px);
- --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 1px);
+ --radius-sm: calc(var(--radius) - 2px);
+ --font-sans:
+ 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, sans-serif;
+ --font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
}
@layer base {
* {
@apply border-border;
}
+ html {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground font-sans;
+ font-feature-settings:
+ 'ss01',
+ 'cv11';
+ }
+ h1,
+ h2,
+ h3 {
+ @apply font-serif;
+ font-feature-settings: 'ss01';
}
}
+
+@utility eyebrow {
+ @apply text-xs uppercase tracking-[0.18em] text-muted-foreground;
+}