s52kj/call-tester
1
0
Fork 0
mirror of https://github.com/jakobkordez/call-tester.git synced 2025-05-30 15:40:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add fonts and changed layout for different sizing

Browse Source
This commit is contained in:
Jakob Kordež 2024-06-28 12:56:18 +02:00
parent c7c594aa8a
commit df14f4a605
5 changed files with 61 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.css
View File

@ -1,3 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Mono:wght@100..700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Inter', sans-serif;
}
.font-mono {
font-family: 'Roboto Mono', monospace;
}

6
src/components/callsign-checker.svelte
View File

@ -91,10 +91,10 @@
<style lang="postcss">
.data-box {
@apply mx-auto grid w-full flex-1 rounded-xl p-4 text-center;
@apply mx-auto flex w-full flex-1 flex-wrap items-center justify-evenly gap-4 rounded-xl p-4 text-center sm:grid;
& > * {
@apply my-auto;
& > *:first-child {
@apply w-full;
}
}
.data-box.cols {

80
src/components/dxcc-entity-info.svelte
View File

@ -13,47 +13,51 @@
<div class="font-mono text-2xl font-medium">{prefix}</div>
<div>{dxccEntity.name}</div>
</div>
<table class="mx-auto w-auto">
<tr><td>CQ Zone</td><td>{dxccEntity.cqz ?? '?'}</td></tr>
<tr><td>ITU Zone</td><td>{dxccEntity.ituz ?? '?'}</td></tr>
<tr><td>Continent</td><td>{dxccEntity.cont ?? '?'}</td></tr>
</table>
<table class="mx-auto w-auto">
<tr>
<td>Latitude</td>
<td>
{#if lat !== undefined}
{Math.abs(lat)}°{lat >= 0 ? 'N' : 'S'}
{:else}
?
{/if}
</td>
</tr>
<tr>
<td>Longitude</td>
<td>
{#if long !== undefined}
{Math.abs(long)}°{long >= 0 ? 'W' : 'E'}
{:else}
?
{/if}
</td>
</tr>
<tr>
<td>TZ Offset</td>
<td>
{#if tz !== undefined}
{tz >= 0 ? '+' : '-'}{Math.abs(tz).toFixed(2).padStart(5, '0').replace('.', ':')}
{:else}
?
{/if}
</td>
</tr>
</table>
<div>
<table class="mx-auto w-auto">
<tr><td>CQ Zone</td><td>{dxccEntity.cqz ?? '?'}</td></tr>
<tr><td>ITU Zone</td><td>{dxccEntity.ituz ?? '?'}</td></tr>
<tr><td>Continent</td><td>{dxccEntity.cont ?? '?'}</td></tr>
</table>
</div>
<div>
<table class="mx-auto w-auto">
<tr>
<td>Latitude</td>
<td>
{#if lat !== undefined}
{Math.abs(lat)}°{lat >= 0 ? 'N' : 'S'}
{:else}
?
{/if}
</td>
</tr>
<tr>
<td>Longitude</td>
<td>
{#if long !== undefined}
{Math.abs(long)}°{long >= 0 ? 'W' : 'E'}
{:else}
?
{/if}
</td>
</tr>
<tr>
<td>TZ Offset</td>
<td>
{#if tz !== undefined}
{tz >= 0 ? '+' : '-'}{Math.abs(tz).toFixed(2).padStart(5, '0').replace('.', ':')}
{:else}
?
{/if}
</td>
</tr>
</table>
</div>
<style lang="postcss">
td {
@apply text-left;
@apply text-left align-baseline;
}
td:first-of-type {
@apply pr-2 text-xs;

22
src/components/styled-input.svelte
View File

@ -47,25 +47,14 @@
<div class="styled-text shared" contenteditable="false" bind:innerHTML={styledText} />
</div>
<style>
<style lang="postcss">
.shared {
font-family: monospace;
text-transform: uppercase;
width: 100%;
font-size: 32px;
padding: 8px 12px;
text-align: center;
border-radius: 12px;
@apply w-full px-3 py-2 text-center font-mono text-2xl uppercase md:text-3xl;
}
.input {
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
background: transparent;
color: transparent;
caret-color: white;
@apply absolute left-0 top-0 border border-[#ccc] bg-transparent text-transparent caret-white;
}
.input::placeholder {
@ -74,9 +63,6 @@
}
.styled-text {
background: #424242;
border: 1px solid transparent;
white-space: pre;
word-wrap: break-word;
@apply whitespace-pre break-words border border-transparent bg-[#424242];
}
</style>

2
src/routes/+layout.svelte
View File

@ -22,7 +22,7 @@
</div>
<footer class="bg-[#444] py-3">
<div class="c flex justify-between gap-4">
<div class="c flex flex-wrap justify-between gap-4">
<div>
Website by <a href="https://jkob.cc/">S52KJ</a>
</div>