nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated theming and fixed warnings

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 10:35:28 +01:00
parent 85549d41f8
commit 63cc84916e
11 changed files with 119 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/styles/global.css
View File

@@ -1,5 +1,10 @@
@import "tailwindcss";
/*
* NARLBLOG PROFESSIONAL THEME ENGINE
* All UI components are automatically linked to these tokens.
*/
@theme {
--color-crust: var(--crust);
--color-mantle: var(--mantle);
@@ -65,11 +70,12 @@
--flamingo: #eebebe; --rosewater: #f2d5cf;
}
/* Highly optimized light mode colors */
.latte {
--crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5;
--surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
--overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
--text: #4c4f69; --subtext0: #5c5f77; --subtext1: #6c6f85;
--text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
--blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
--sky: #04a5e5; --teal: #179299; --green: #40a02b;
--yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
@@ -96,57 +102,18 @@ body {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Dynamic CodeMirror Theme */
.cm-s-narlblog.CodeMirror {
background: var(--crust) !important;
color: var(--text) !important;
border: 1px solid var(--surface1);
}
.cm-s-narlblog .cm-header { color: var(--mauve) !important; font-weight: bold; }
.cm-s-narlblog .cm-string { color: var(--green) !important; }
.cm-s-narlblog .cm-link { color: var(--blue) !important; text-decoration: underline; }
.cm-s-narlblog .cm-url { color: var(--sky) !important; }
.cm-s-narlblog .cm-comment { color: var(--subtext0) !important; font-style: italic; }
.cm-s-narlblog .cm-quote { color: var(--peach) !important; }
.cm-s-narlblog .CodeMirror-cursor { border-left-color: var(--text) !important; }
.cm-s-narlblog.cm-fat-cursor .CodeMirror-cursor { background: var(--text) !important; }
.cm-s-narlblog .CodeMirror-selected { background: var(--surface2) !important; }
.cm-s-narlblog .CodeMirror-line::selection, .cm-s-narlblog .CodeMirror-line > span::selection, .cm-s-narlblog .CodeMirror-line > span > span::selection { background: var(--surface2); }
.cm-s-narlblog .CodeMirror-line::-moz-selection, .cm-s-narlblog .CodeMirror-line > span::-moz-selection, .cm-s-narlblog .CodeMirror-line > span > span::-moz-selection { background: var(--surface2); }
/* Dynamic Highlight.js Theme */
.hljs { color: var(--text) !important; background: transparent !important; }
.hljs-comment, .hljs-quote { color: var(--subtext0) !important; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve) !important; font-weight: bold; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach) !important; }
.hljs-string, .hljs-doctag { color: var(--green) !important; }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue) !important; font-weight: bold; }
.hljs-type, .hljs-class .hljs-title { color: var(--yellow) !important; font-weight: bold; }
.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue) !important; font-weight: normal; }
.hljs-regexp, .hljs-link { color: var(--sky) !important; }
.hljs-symbol, .hljs-bullet { color: var(--pink) !important; }
.hljs-built_in, .hljs-builtin-name { color: var(--red) !important; }
.hljs-meta { color: var(--overlay1) !important; font-weight: bold; }
.hljs-deletion { background: var(--maroon); color: var(--crust); }
.hljs-addition { background: var(--green); color: var(--crust); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Typography styles for Markdown */
/* Professional Typography */
.prose { color: var(--text) !important; }
.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; color: var(--mauve) !important; }
.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; color: var(--lavender) !important; }
.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; color: var(--blue) !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 a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; color: var(--blue) !important; }
.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; color: var(--text) !important; }
.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; color: var(--subtext0) !important; }
.prose pre { @apply bg-crust 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 text-peach; color: var(--peach) !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; }
/* Dynamic UI Components */
.glass {
background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
backdrop-filter: blur(12px);
@@ -154,3 +121,18 @@ body {
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
border-radius: 1rem;
}
.cm-s-narlblog.CodeMirror {
background: var(--crust) !important;
color: var(--text) !important;
border: 1px solid var(--surface1);
}
.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; }