diff --git a/styles/main.css b/styles/main.css index cdb4228..4b65f2a 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,5 +1,24 @@ @import "tailwindcss"; + +@theme { + --color-accent: oklch(57.93% 0.258 294.12); + --color-success: oklch(70.19% 0.158 160.44); + --color-error: oklch(63.43% 0.251 28.48); + + --color-base: oklch(11% .007 285); + --color-surface: oklch(19% 0.007 314.66); + --color-overlay: oklch(26% 0.008 314.66); + + --color-muted: oklch(63% 0.015 286); + --color-subtle: oklch(72% 0.015 286); + --color-text: oklch(87% 0.015 286); + + --color-highlight-sm: oklch(30.67% 0.007 286); + --color-highlight: oklch(39.26% 0.010 286); + --color-highlight-lg: oklch(47.72% 0.011 286); +} + @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2") format("woff2"); @@ -13,6 +32,7 @@ html { line-height: normal; color-scheme: dark; + color: var(--color-text); } h1, @@ -36,14 +56,72 @@ h3 { font-size: 1.25rem; } +button { + cursor: pointer; +} + input:not(.search) { - @apply px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#2E2E32] placeholder:text-[#8A8E90] text-white focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden; + @apply px-4 py-2 rounded-md w-full bg-surface border border-highlight-sm/70 placeholder:text-highlight text-text focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden; &[type="file"] { @apply p-0 cursor-pointer; &::file-selector-button { - @apply px-2 py-2 mr-1 bg-[hsl(240,6%,18%)] text-white cursor-pointer; + @apply px-2 py-2 mr-1 bg-highlight text-subtle cursor-pointer; } } +} + +.link-card { + background: var(--color-overlay); + display: flex; + flex-direction: row; + text-decoration: none; + border-radius: 1rem; + padding: 0.625rem; + align-items: center; + transition-property: box-shadow, transform, translate; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + + &:hover { + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + transform: translateY(-4px); + } + + &:active { + box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1); + transform: translateY(2px); + } +} + +@media (prefers-reduced-motion: reduce) { + .link-card { + transition: none; + + &:hover { + transform: none; + } + + &:active { + transform: none; + } + } +} + +.link-card img { + margin-right: 0.5rem; + user-select: none; + border-radius: 0.375rem; + aspect-ratio: 1/1; + object-fit: cover; +} + +.link-card div { + word-break: break-all; +} + +.link-card div p { + color: var(--color-subtle); } \ No newline at end of file diff --git a/templates/layouts/main.hbs b/templates/layouts/main.hbs index eb0565b..8ab1f0d 100644 --- a/templates/layouts/main.hbs +++ b/templates/layouts/main.hbs @@ -9,7 +9,7 @@ - + {{embed}} {{{devContent}}} diff --git a/templates/views/admin/index.hbs b/templates/views/admin/index.hbs index 46a09eb..4ed6080 100644 --- a/templates/views/admin/index.hbs +++ b/templates/views/admin/index.hbs @@ -1,4 +1,5 @@ -
+
@@ -21,7 +22,7 @@ alt="{{this.Name}}" src="{{this.Icon}}" />

{{this.Name}}