From 36ac3f03aaff9d8b226b60d53e9d48b6b521550d Mon Sep 17 00:00:00 2001 From: adminoo Date: Mon, 2 Feb 2026 09:45:29 +0100 Subject: [PATCH] feat: Dark theme, placeholder metadata panel --- internal/web/static/css/main.css | 272 +++++++++++++++++------------- internal/web/templates/index.tmpl | 40 +++++ 2 files changed, 191 insertions(+), 121 deletions(-) diff --git a/internal/web/static/css/main.css b/internal/web/static/css/main.css index 68e754d..805b374 100644 --- a/internal/web/static/css/main.css +++ b/internal/web/static/css/main.css @@ -1,17 +1,23 @@ :root { - --background1: #ffffff; - --background2: #f0f0f0; - --background3: #c4c3c3; - --heading1: #2a2a2a; - --heading2: #4a4a4a; - --heading3: #7c7b7b; - --text1: #5a5a5a; - --code1: #6a6a6a; - --url: #090b0e; - --border-color: #d0d0d0; - --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif; + --background1: #1e1e1e; /* Main background */ + --background2: #252526; /* Code blocks, input backgrounds */ + --background3: #333333; /* Active items */ + --background-hover: #2d2d2d; + + --heading1: #ffffff; /* Primary headings */ + --heading2: #cccccc; /* Secondary headings */ + --heading3: #999999; + + --text1: #d4d4d4; /* Main text */ + --code1: #c5c5c5; /* Inline code text */ + --url: #4ea1ff; /* Link color */ + + --border-color: #3a3a3a; /* Subtle border */ + + --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-size-base: 16px; - --line-height: 1.5; + --line-height: 1.6; + --padding-main: 1cm; --max-width-main: 210mm; } @@ -20,12 +26,14 @@ size: A4; } +/* PRINT MODE */ @media print { body { margin: 2cm 1.5cm 2cm 1.5cm; + background: white; + color: black; } - /* Don't display the list of notes in the printed page */ aside, .note-metadata { display: none; @@ -34,13 +42,16 @@ main { margin-top: 0; break-after: always; + color: black; } h1 { margin-top: 0; + color: black; } } +/* SCREEN MODE */ @media screen { aside, @@ -57,7 +68,9 @@ } } +/* UNIVERSAL */ @media all { + body { display: flex; background: var(--background1); @@ -70,7 +83,7 @@ a { color: var(--url); - font-weight: bold; + font-weight: 500; text-decoration: none; } @@ -78,24 +91,19 @@ text-decoration: underline; } + code { + background-color: var(--background2); + padding: 0.25em 0.45em; + border-radius: 4px; + font-family: monospace; + color: var(--code1); + } + pre { background: var(--background2); padding: 0.8em; - } - - pre code { - padding: 0; - } - - code { - line-break: loose; - background-color: var(--background2); - padding: 0.2em 0.4em; - border-radius: 3px; - font-family: monospace; - color: var(--code1); + border-radius: 4px; overflow-x: auto; - text-wrap: wrap; } header h1 { @@ -107,12 +115,13 @@ text-align: center; } + /* SIDEBAR */ aside { - flex: 0 0 400px; + flex: 0 0 350px; width: 250px; border-right: 1px solid var(--border-color); padding: var(--padding-main); - background-color: #f5f5f5; + background-color: #1a1a1a; } aside ul { @@ -122,44 +131,64 @@ } aside ul li { - padding: 0.5em 0; + padding: 0.5em 0.3em; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; - align-items: end; + align-items: center; + transition: background 0.15s ease-in-out; } - aside ul li:last-child { - border-bottom: none; + aside ul li:hover { + background: var(--background-hover); } - aside ul li a { - display: block; - transition: background-color 0.2s; + .active-note { + background: var(--background3); } - aside ul li a:hover { - background-color: var(--background2); + .note-title a { + padding-left: 0.7em; + font-size: 0.95em; + color: var(--text1); } + .last-modified { + font-size: 0.75em; + opacity: 0.7; + } + + /* SEARCH BAR */ + .search-form { + display: flex; + margin-bottom: 1em; + } + + .search-bar { + width: 100%; + padding: 0.45em; + border: 1px solid var(--border-color); + border-radius: 4px; + background: var(--background2); + color: var(--text1); + } + + .search-bar:focus { + outline: none; + border-color: var(--url); + box-shadow: 0 0 6px #4ea1ff55; + } + + /* MAIN CONTENT */ main { flex: 1; margin: 0 auto; padding: var(--padding-main); - overflow-y: auto; max-height: 100%; } - main a { - text-decoration: underline; - } - - main ul { - padding: 0; - margin: 0 1em; - } - main h1 { + color: var(--heading1); border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; text-transform: uppercase; @@ -167,37 +196,15 @@ } main h2 { - padding: 0.7em 0; + color: var(--heading1); border-bottom: 2px dotted var(--border-color); + padding-bottom: 0.5em; + padding-top: 1em; } - - main h3, main h4 { + main h3, + main h4 { color: var(--heading3); - font-size: 0.9em; - } - - h1, - h2, - h3, - h4 { - margin-bottom: 0.5em; - line-height: 1.2; - } - - h1 { - color: var(--heading1); - font-size: 1.5em; - } - - h2 { - color: var(--heading1); - font-size: 1.2em; - } - - h3 { - color: var(--heading2); - font-size: 1em; } p { @@ -211,61 +218,84 @@ color: var(--heading2); } - .active-note { - background: var(--background3); - } - - .last-modified { - font-size: 0.8em; - } - - .folder { - font-weight: bold; - width: 100%; - } - - .folder span { - padding: 0 1em; - } - - .search-form { - display: flex; - margin-bottom: 1em; - } - - .search-form > * { - display: inline; - } - - /* Add this to the end of the file */ - .search-bar { - width: 100%; - padding: 0.5em; - border: 1px solid var(--border-color); - border-radius: 4px; - font-family: var(--font-main); - font-size: var(--font-size-base); + /* METADATA PANEL (right side) */ + .metadata-panel { + flex: 0 0 300px; /* fixed width panel */ + padding: var(--padding-main); + border-left: 1px solid var(--border-color); + background: #1a1a1a; color: var(--text1); + height: 100vh; + overflow-y: auto; } - .search-bar:focus { - outline: none; - border-color: var(--heading1); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + /* Titles inside metadata panel */ + .metadata-panel h3 { + color: var(--heading1); + font-size: 1em; + margin-top: 1.5em; + margin-bottom: 0.5em; + border-bottom: 1px solid var(--border-color); + padding-bottom: 0.3em; } - .search-results { - margin-bottom: 1em; - margin: 1em 0; - border-bottom: dotted 2px var(--heading1); + /* Metadata block wrapper */ + .meta-block { + margin-bottom: 1.5em; } - .note-title { + /* Tags UI */ + .meta-tags { display: flex; + flex-wrap: wrap; + gap: 0.4em; } - .note-title a { - padding-left: 1em; + .tag { + background: var(--background2); + padding: 0.25em 0.6em; + border-radius: 4px; + color: var(--url); + font-size: 0.8em; + white-space: nowrap; + border: 1px solid var(--border-color); + } + .tag:hover { + background: var(--background-hover); + cursor: pointer; + } + + /* Category display */ + .meta-category { + background: var(--background2); + padding: 0.4em 0.6em; + border-radius: 4px; + font-size: 0.9em; + border: 1px solid var(--border-color); + display: inline-block; + } + + /* Lists for metadata fields */ + .meta-list { + list-style: none; + padding: 0; + margin: 0; + } + + .meta-list li { + margin: 0.3em 0; font-size: 0.9em; } + + /* Placeholder for future stats visualizations */ + .meta-stats-placeholder { + margin-top: 1em; + padding: 1em; + text-align: center; + font-size: 0.8em; + opacity: 0.6; + background: var(--background2); + border-radius: 4px; + border: 1px solid var(--border-color); + } } diff --git a/internal/web/templates/index.tmpl b/internal/web/templates/index.tmpl index 2f12da9..1e02112 100644 --- a/internal/web/templates/index.tmpl +++ b/internal/web/templates/index.tmpl @@ -5,4 +5,44 @@
{{ .RenderedNote }}
+ {{ end }}