ui redesign, markdown fix + metadata and auth header
This commit is contained in:
+235
-65
@@ -1,8 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/*
|
||||
* NARLBLOG PROFESSIONAL THEME ENGINE
|
||||
* All UI components are automatically linked to these tokens.
|
||||
/*
|
||||
* NARLBLOG THEME ENGINE
|
||||
* All UI components automatically pick up these tokens.
|
||||
*/
|
||||
|
||||
@theme {
|
||||
@@ -32,6 +32,9 @@
|
||||
--color-pink: var(--pink);
|
||||
--color-flamingo: var(--flamingo);
|
||||
--color-rosewater: var(--rosewater);
|
||||
|
||||
--font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
:root, .mocha {
|
||||
@@ -70,12 +73,12 @@
|
||||
--flamingo: #eebebe; --rosewater: #f2d5cf;
|
||||
}
|
||||
|
||||
/* Redesigned light themes for better contrast */
|
||||
/* Light themes — darkened secondary text for WCAG AA against base. */
|
||||
.latte {
|
||||
--crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
|
||||
--surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
|
||||
--overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
|
||||
--text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
|
||||
--overlay0: #7c7f93; --overlay1: #6c6f85; --overlay2: #5c5f77;
|
||||
--text: #1e1e2e; --subtext0: #3c3f59; --subtext1: #4c4f69;
|
||||
--blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
|
||||
--sky: #04a5e5; --teal: #179299; --green: #40a02b;
|
||||
--yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
|
||||
@@ -88,77 +91,244 @@
|
||||
--surface0: #cbd5e1; --surface1: #94a3b8; --surface2: #64748b;
|
||||
--overlay0: #475569; --overlay1: #334155; --overlay2: #1e293b;
|
||||
--text: #0f172a; --subtext0: #1e293b; --subtext1: #334155;
|
||||
--blue: #5cdbdf; --lavender: #8ab4f8; --sapphire: #38bdf8;
|
||||
--sky: #0ea5e9; --teal: #2dd4bf; --green: #34d399;
|
||||
--yellow: #fcd34d; --peach: #fbbf24; --maroon: #f43f5e;
|
||||
--red: #ef4444; --mauve: #f0498b; --pink: #ec4899;
|
||||
--flamingo: #f472b6; --rosewater: #fda4af;
|
||||
--blue: #0284c7; --lavender: #6366f1; --sapphire: #0ea5e9;
|
||||
--sky: #0284c7; --teal: #0d9488; --green: #16a34a;
|
||||
--yellow: #ca8a04; --peach: #ea580c; --maroon: #be123c;
|
||||
--red: #dc2626; --mauve: #9333ea; --pink: #db2777;
|
||||
--flamingo: #be185d; --rosewater: #b91c1c;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--base);
|
||||
color: var(--text) !important;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Professional Typography */
|
||||
.prose { color: var(--text) !important; }
|
||||
.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6; color: var(--mauve) !important; }
|
||||
.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8; color: var(--lavender) !important; }
|
||||
.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6; color: var(--blue) !important; }
|
||||
.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; color: var(--text) !important; }
|
||||
.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic my-4 md:my-6; color: var(--subtext0) !important; }
|
||||
.prose pre { @apply p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; background-color: var(--crust) !important; }
|
||||
.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono; color: var(--peach) !important; }
|
||||
.prose pre code { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; }
|
||||
.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-6 md:my-8; }
|
||||
.prose a { color: var(--blue) !important; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
|
||||
.prose a:hover { color: var(--sky) !important; }
|
||||
.prose ul { @apply list-disc pl-6 mb-4 space-y-1 text-sm md:text-base; color: var(--text) !important; }
|
||||
.prose ol { @apply list-decimal pl-6 mb-4 space-y-1 text-sm md:text-base; color: var(--text) !important; }
|
||||
.prose li { @apply leading-relaxed; color: var(--text) !important; }
|
||||
.prose li > ul, .prose li > ol { @apply mt-1 mb-0; }
|
||||
.prose ul ul { list-style-type: circle; }
|
||||
.prose ul ul ul { list-style-type: square; }
|
||||
.prose hr { @apply my-8 border-0; border-top: 1px solid var(--surface2); }
|
||||
.prose h4 { @apply text-lg md:text-xl font-medium mb-2 mt-4; color: var(--sapphire) !important; }
|
||||
.prose h5 { @apply text-base md:text-lg font-medium mb-1 mt-3; color: var(--teal) !important; }
|
||||
.prose h6 { @apply text-sm md:text-base font-medium mb-1 mt-3; color: var(--subtext1) !important; }
|
||||
.prose strong { color: var(--text) !important; font-weight: 700; }
|
||||
.prose em { color: var(--subtext1) !important; }
|
||||
.prose del { color: var(--overlay1) !important; text-decoration: line-through; }
|
||||
.prose li input[type="checkbox"] { @apply mr-2 accent-blue; vertical-align: middle; }
|
||||
.prose li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.5rem; }
|
||||
code, pre, kbd, samp {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Professional Table Styles */
|
||||
.prose table { @apply w-full mb-8 border-collapse overflow-hidden rounded-xl; border: 1px solid var(--surface1); }
|
||||
.prose thead { @apply bg-surface0/50; }
|
||||
.prose th { @apply px-4 py-3 text-left font-bold text-sm md:text-base border-b border-surface1; color: var(--mauve) !important; }
|
||||
.prose td { @apply px-4 py-2 border-b border-surface1 text-sm md:text-base; color: var(--text) !important; }
|
||||
.prose tr:last-child td { @apply border-b-0; }
|
||||
.prose tr:nth-child(even) { @apply bg-surface0/20; }
|
||||
|
||||
/* Dynamic UI Components */
|
||||
.glass {
|
||||
/* Prose — readable column, calm hierarchy */
|
||||
.prose {
|
||||
color: var(--text);
|
||||
max-width: 70ch;
|
||||
line-height: 1.7;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.prose h1 {
|
||||
font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
color: var(--mauve);
|
||||
margin: 0 0 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 2.5rem 0 1rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--surface2) 60%, transparent);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.prose h3 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 2rem 0 0.75rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.prose h4 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
.prose h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--subtext1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
.prose h6 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--subtext0);
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
.prose p {
|
||||
margin: 0 0 1.1rem;
|
||||
}
|
||||
.prose blockquote {
|
||||
border-left: 3px solid var(--mauve);
|
||||
padding: 0.25rem 0 0.25rem 1.1rem;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--subtext1);
|
||||
font-style: italic;
|
||||
}
|
||||
.prose pre {
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid color-mix(in srgb, var(--surface1) 70%, transparent);
|
||||
margin: 1.5rem 0;
|
||||
background-color: var(--crust);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.prose code {
|
||||
background-color: color-mix(in srgb, var(--surface0) 80%, transparent);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9em;
|
||||
color: var(--peach);
|
||||
}
|
||||
.prose pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.75rem;
|
||||
margin: 1.75rem 0;
|
||||
border: 1px solid color-mix(in srgb, var(--surface1) 50%, transparent);
|
||||
}
|
||||
.prose a {
|
||||
color: var(--blue);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-thickness: 1px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.prose a:hover {
|
||||
color: var(--sky);
|
||||
}
|
||||
.prose ul, .prose ol {
|
||||
margin: 0 0 1.1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.prose ul { list-style: disc; }
|
||||
.prose ol { list-style: decimal; }
|
||||
.prose ul ul { list-style: circle; }
|
||||
.prose ul ul ul { list-style: square; }
|
||||
.prose li { margin: 0.25rem 0; }
|
||||
.prose hr {
|
||||
margin: 2.5rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in srgb, var(--surface2) 70%, transparent);
|
||||
}
|
||||
.prose strong { color: var(--text); font-weight: 700; }
|
||||
.prose em { color: inherit; font-style: italic; }
|
||||
.prose del { color: var(--overlay1); text-decoration: line-through; }
|
||||
.prose li input[type="checkbox"] { margin-right: 0.5rem; accent-color: var(--blue); vertical-align: middle; }
|
||||
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.25rem; }
|
||||
|
||||
/* GFM tables */
|
||||
.prose table {
|
||||
width: 100%;
|
||||
margin: 1.75rem 0;
|
||||
border-collapse: collapse;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--surface1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.prose thead { background-color: color-mix(in srgb, var(--surface0) 60%, transparent); }
|
||||
.prose th {
|
||||
padding: 0.6rem 0.9rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid var(--surface1);
|
||||
}
|
||||
.prose td {
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--surface1) 60%, transparent);
|
||||
}
|
||||
.prose tr:last-child td { border-bottom: 0; }
|
||||
.prose tr:nth-child(even) td { background-color: color-mix(in srgb, var(--surface0) 25%, transparent); }
|
||||
|
||||
/* Glass surface */
|
||||
.glass {
|
||||
background-color: color-mix(in srgb, var(--surface0) 75%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
||||
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.cm-s-narlblog.CodeMirror {
|
||||
background: var(--crust) !important;
|
||||
color: var(--text) !important;
|
||||
border: 1px solid var(--surface1);
|
||||
/* Don't double-blur nested glass surfaces */
|
||||
.glass .glass {
|
||||
background-color: color-mix(in srgb, var(--surface0) 50%, transparent);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cm-s-narlblog .cm-header { color: var(--mauve) !important; }
|
||||
.cm-s-narlblog .cm-string { color: var(--green) !important; }
|
||||
.cm-s-narlblog .cm-keyword { color: var(--mauve) !important; font-weight: bold; }
|
||||
.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
|
||||
|
||||
.hljs { color: var(--text) !important; background: transparent !important; }
|
||||
.hljs-keyword, .hljs-selector-tag { color: var(--mauve) !important; font-weight: bold; }
|
||||
.hljs-string { color: var(--green) !important; }
|
||||
.hljs-comment { color: var(--subtext0) !important; font-style: italic; }
|
||||
/* hljs token colors — driven by theme tokens */
|
||||
.hljs { color: var(--text); background: transparent; }
|
||||
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--mauve); font-weight: 600; }
|
||||
.hljs-string, .hljs-attr { color: var(--green); }
|
||||
.hljs-number, .hljs-literal { color: var(--peach); }
|
||||
.hljs-comment, .hljs-quote { color: var(--overlay1); font-style: italic; }
|
||||
.hljs-title, .hljs-section, .hljs-name { color: var(--blue); }
|
||||
.hljs-type, .hljs-class .hljs-title { color: var(--yellow); }
|
||||
.hljs-variable, .hljs-template-variable { color: var(--red); }
|
||||
|
||||
/* KaTeX inherits prose color */
|
||||
.katex { color: var(--text); }
|
||||
|
||||
/* Admin auth gate — set by inline head script before paint */
|
||||
html:not(.admin-authed) #admin-content { display: none; }
|
||||
.admin-authed #admin-content { display: block; }
|
||||
|
||||
/* Skeleton loader */
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--surface0) 50%, transparent) 0%,
|
||||
color-mix(in srgb, var(--surface1) 50%, transparent) 50%,
|
||||
color-mix(in srgb, var(--surface0) 50%, transparent) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
color: var(--text);
|
||||
padding: 0.65rem 1.1rem;
|
||||
border-radius: 0.6rem;
|
||||
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
|
||||
font-size: 0.85rem;
|
||||
z-index: 200;
|
||||
animation: toast-in 0.2s ease;
|
||||
}
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translate(-50%, 8px); }
|
||||
to { opacity: 1; transform: translate(-50%, 0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user