oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 13:12:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add application header with logo and favicon for improved branding

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-19 15:05:20 +02:00
parent 55d20b4d81
commit f14f76e2f0
3 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -14,10 +14,18 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonc-parser@3.2.0/lib/umd/main.js"></script>
<link rel="stylesheet" href="src/styles.css">
<!-- favicon goes here -->
<link rel="icon" href="src/astrolabe.svg" type="image/svg+xml">
</head>
<body>
<div class="container">
<header class="app-header">
<a href="/">
<img src="src/astrolabe.svg" alt="Astrolabe logo">
<h1>Astrolabe</h1>
</a>
</header>
<div class="panel">
<div class="panel-header">
<h2>Snippets</h2>

67
src/astrolabe.svg Normal file
View File

@@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Outer Circle -->
<circle
cx="256"
cy="256"
r="200"
stroke="#000000"
stroke-width="16"
fill="none"
/>
<!-- Inner Circle -->
<circle
cx="256"
cy="256"
r="130"
stroke="#000000"
stroke-width="8"
fill="none"
/>
<!-- Stylized Rotating Arm/Pincer -->
<g transform="translate(256,256)">
<!-- Horizontal bar -->
<line
x1="-80" y1="0" x2="80" y2="0"
stroke="#000000"
stroke-width="8"
/>
<!-- Outer arc on one side -->
<path
d="M 80 0 A 80 80 0 0 1 0 80"
stroke="#000000"
stroke-width="8"
fill="none"
/>
<!-- Outer arc on the other side -->
<path
d="M -80 0 A 80 80 0 0 0 0 80"
stroke="#000000"
stroke-width="8"
fill="none"
/>
<!-- Center pivot circle -->
<circle
cx="0"
cy="0"
r="8"
fill="#000000"
/>
</g>
<!-- Decorative radial lines -->
<g stroke="#000000" stroke-width="4">
<line x1="256" y1="56" x2="256" y2="105"/>
<line x1="456" y1="256" x2="407" y2="256"/>
<line x1="256" y1="456" x2="256" y2="407"/>
<line x1="56" y1="256" x2="105" y2="256"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

40
src/styles.css
View File

@@ -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;