Zoe
3de69f02f2
All checks were successful
Build and Push Docker Image to GHCR / build-and-push (push) Successful in 30s
Admin UI now has the ability to edit links that exist. Deleting items is more accessible and asks for a confirmation before deleting. Link and Category names as well as link descriptions now have a length limit (todo: make it configurable?). Small bug fixes related to image saving are also included in this commit.
135 lines
2.9 KiB
SCSS
135 lines
2.9 KiB
SCSS
@import "tailwindcss";
|
|
|
|
|
|
@theme {
|
|
--color-accent: oklch(57.93% 0.258 294.12);
|
|
--color-success: oklch(70.19% 0.158 160.44);
|
|
--color-error: oklch(53% 0.251 28.48);
|
|
|
|
--color-base: oklch(11% .007 285);
|
|
--color-surface: oklch(19% 0.007 285.66);
|
|
--color-overlay: oklch(26% 0.008 285.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");
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--default-font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
html {
|
|
line-height: normal;
|
|
color-scheme: dark;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-semibold;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(42px, 10vw, 64px);
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(30px, 6vw, 36px);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:not(.search) {
|
|
@apply px-4 py-2 rounded-md w-full bg-surface border border-highlight/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-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);
|
|
|
|
&:not(.admin) {
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Div that holds the image */
|
|
.link-card div:has(img):first-child {
|
|
flex-shrink: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.link-card div:first-child img {
|
|
user-select: none;
|
|
border-radius: 0.375rem;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Div that holds the text */
|
|
.link-card div:nth-child(2) {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.link-card div:nth-child(2) p {
|
|
color: var(--color-subtle);
|
|
} |