forked from coracle/flotilla
AI pass on redesign
This commit is contained in:
Jon Staab
+203
-12
@@ -2,10 +2,15 @@
|
||||
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: "Baloo 2", "Lato", ui-rounded, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* root */
|
||||
|
||||
:root {
|
||||
font-family: Lato;
|
||||
font-family: var(--font-sans);
|
||||
--sait: var(--safe-area-inset-top, env(safe-area-inset-top));
|
||||
--saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
|
||||
--sail: var(--safe-area-inset-left, env(safe-area-inset-left));
|
||||
@@ -153,15 +158,15 @@
|
||||
}
|
||||
|
||||
@utility heading {
|
||||
@apply text-center text-2xl;
|
||||
@apply font-display text-center text-2xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
@utility subheading {
|
||||
@apply text-center text-xl;
|
||||
@utility brand {
|
||||
@apply font-display text-primary font-bold tracking-tight;
|
||||
}
|
||||
|
||||
@utility superheading {
|
||||
@apply text-center text-4xl;
|
||||
@utility label {
|
||||
@apply font-display text-sm font-semibold tracking-wider uppercase opacity-70;
|
||||
}
|
||||
|
||||
@utility link {
|
||||
@@ -215,8 +220,19 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Lato";
|
||||
font-style: bold;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src:
|
||||
local(""),
|
||||
url("/fonts/Lato-Light.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* Lato ships Regular + Bold only; map 600 (semibold) and 700 (bold) to the
|
||||
Bold file so the browser never synthesizes a faux-bold. */
|
||||
@font-face {
|
||||
font-family: "Lato";
|
||||
font-style: normal;
|
||||
font-weight: 600 700;
|
||||
src:
|
||||
local(""),
|
||||
url("/fonts/Lato-Bold.ttf") format("truetype");
|
||||
@@ -228,13 +244,38 @@
|
||||
font-weight: 400;
|
||||
src:
|
||||
local(""),
|
||||
url("/fonts/Italic.ttf") format("truetype");
|
||||
url("/fonts/Lato-Italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* Baloo 2 — rounded, friendly display face (self-hosted, Latin subset). */
|
||||
@font-face {
|
||||
font-family: "Baloo 2";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Baloo2-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Baloo 2";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Baloo2-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Baloo 2";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Baloo2-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* root */
|
||||
|
||||
:root {
|
||||
font-family: Lato;
|
||||
font-family: var(--font-sans);
|
||||
text-size-adjust: 100%;
|
||||
--sait: var(--safe-area-inset-top, env(safe-area-inset-top));
|
||||
--saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
|
||||
@@ -284,7 +325,7 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* tiptap */
|
||||
/* editors */
|
||||
|
||||
.input-editor,
|
||||
.chat-editor,
|
||||
@@ -323,7 +364,11 @@
|
||||
}
|
||||
|
||||
.chat-editor .tiptap {
|
||||
@apply rounded-box bg-base-300 pr-12;
|
||||
@apply bg-base-300 rounded-[1.5rem] pr-12 transition-shadow;
|
||||
}
|
||||
|
||||
.chat-editor:focus-within .tiptap {
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary), transparent 55%);
|
||||
}
|
||||
|
||||
.note-editor .tiptap {
|
||||
@@ -448,3 +493,149 @@ body.keyboard-open .chat__compose {
|
||||
.chat__scroll-down {
|
||||
@apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16;
|
||||
}
|
||||
|
||||
/* shape, depth & motion */
|
||||
|
||||
/* Accessibility: neutralize all motion when the user asks for it. Decorative
|
||||
motion is otherwise opt-in via `motion-safe:` and the guards below. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Soft, diffuse elevation — replaces ad-hoc hard `shadow-md` uses. */
|
||||
@utility shadow-soft {
|
||||
box-shadow:
|
||||
0 4px 16px -4px oklch(0% 0 0 / 0.18),
|
||||
0 1px 3px oklch(0% 0 0 / 0.08);
|
||||
}
|
||||
|
||||
/* Organic "hand-drawn" avatar masks. The image (or gradient fallback) fills
|
||||
the blob; three variants are chosen deterministically by pubkey hash so a
|
||||
person's shape stays stable across the app. */
|
||||
@utility avatar-blob {
|
||||
border-radius: 42% 58% 54% 46% / 58% 46% 54% 42%;
|
||||
}
|
||||
@utility avatar-blob-2 {
|
||||
border-radius: 60% 40% 46% 54% / 43% 57% 43% 57%;
|
||||
}
|
||||
@utility avatar-blob-3 {
|
||||
border-radius: 47% 53% 62% 38% / 50% 62% 38% 50%;
|
||||
}
|
||||
|
||||
/* Friendly rounded-square for space / relay / room tiles. */
|
||||
@utility squircle {
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
/* Every DaisyUI button speaks in the rounded display voice and presses in. */
|
||||
.btn {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.btn {
|
||||
transition:
|
||||
transform 150ms ease,
|
||||
box-shadow 150ms ease,
|
||||
background-color 150ms ease,
|
||||
border-color 150ms ease;
|
||||
}
|
||||
.btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Motion vocabulary ---- */
|
||||
@keyframes nav-button-pop {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes button-pop {
|
||||
0% {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes pop {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes reaction-pop {
|
||||
0% {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
@keyframes wiggle {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@utility animate-pop {
|
||||
animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@utility animate-reaction-pop {
|
||||
animation: reaction-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@utility animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
@utility animate-wiggle {
|
||||
animation: wiggle 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user