smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-06-28 04:35:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Relative typography for the dashboard

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren
2022-07-12 11:34:04 +02:00
parent 8b922477d9
commit 0ff2202da0
3 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
gui/dashboard/tile-rawvalue.svelte
View File

@ -10,22 +10,20 @@
export let weight = 600;
</script>
<Tile {title} {subtitle} {color} {date}>
<div class="value {color}" class:center style:font-weight={weight}>
<Tile {title} {subtitle} {color} {date} {center}>
<div class="value {color}" style:font-weight={weight} class:center>
{value}
</div>
</Tile>
<style>
.value {
font-size: 3rem;
font-size: 3vw;
font-weight: 600;
margin-top: auto;
}
.value.center {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto 0;
}
</style>

15
gui/dashboard/tile.svelte
View File

@ -3,6 +3,7 @@
export let subtitle;
export let color;
export let date;
export let center = false;
</script>
<div class="tile {color}">
@ -26,7 +27,7 @@
</div>
{/if}
<div class="content"><slot /></div>
<div class="content" class:center><slot /></div>
</div>
<style>
@ -60,25 +61,33 @@
}
.desc {
font-size: 1.3rem;
margin-bottom: 1rem;
display: flex;
}
.desc .title {
font-weight: 300;
font-size: 1.7vw;
}
.desc .subtitle {
font-weight: 100;
font-weight: 200;
font-size: 1.5vw;
}
.desc .time {
opacity: 0.6;
margin-left: auto;
font-size: 1.3vw;
}
.content {
flex-grow: 1;
display: flex;
}
.content.center {
justify-content: center;
align-items: center;
}
</style>