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

feat: add custom font styling for improved UI aesthetics

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-19 14:38:11 +02:00
parent 49705d7d30
commit 55d20b4d81
2 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -5,6 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vega-Lite Editor Integration</title> <title>Vega-Lite Editor Integration</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

25
src/styles.css
View File

@@ -1,3 +1,7 @@
:root {
--ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#vis { #vis {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -10,6 +14,27 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Apply font to UI elements */
.panel-header,
.button,
.snippet-item,
.snippet-content {
font-family: var(--ui-font);
}
.panel-header h2 {
font-weight: 600;
font-size: 1.125rem;
}
.button {
font-weight: 500;
}
.snippet-content {
font-size: 0.925rem;
}
.container { .container {
display: grid; display: grid;
grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr); grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);