From f14f76e2f0eb1c59a3da923d8768b8e96bf5e118 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Sun, 19 Jan 2025 15:05:20 +0200 Subject: [PATCH] feat: add application header with logo and favicon for improved branding --- index.html | 8 ++++++ src/astrolabe.svg | 67 +++++++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 40 ++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 src/astrolabe.svg diff --git a/index.html b/index.html index cda3ff6..6a0d551 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,18 @@ + +
+
+ + Astrolabe logo +

Astrolabe

+ +

Snippets

diff --git a/src/astrolabe.svg b/src/astrolabe.svg new file mode 100644 index 0000000..66f501f --- /dev/null +++ b/src/astrolabe.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index fcb4c62..550aecf 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,6 +2,41 @@ --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } +.app-header { + background: #f5f5f5; + padding: 0.75rem 1rem; + border-bottom: 1px solid #e0e0e0; + display: flex; + align-items: center; + gap: 0.75rem; +} + +.app-header a { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + color: inherit; + transition: opacity 0.2s; +} + +.app-header a:hover { + opacity: 0.8; +} + +.app-header img { + width: 24px; + height: 24px; +} + +.app-header h1 { + font-family: var(--ui-font); + font-size: 1.25rem; + font-weight: 600; + color: #333; + margin: 0; +} + #vis { width: 100%; height: 100%; @@ -37,11 +72,16 @@ .container { display: grid; + grid-template-rows: auto 1fr; grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr); height: 100vh; background-color: #e0e0e0; } +.app-header { + grid-column: 1 / -1; +} + .panel { background: white; overflow-y: auto;