cerc-io/cosmos-explorer
11
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: font

Browse Source
This commit is contained in:
quangdz1704 2024-07-11 17:36:54 +07:00
parent f17b241e4b
commit fd737aaf83
No known key found for this signature in database
GPG Key ID: E7C1A6283714A3EC
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Countdown.vue
View File

@ -14,7 +14,7 @@ const s = ref(0);
v-if="time"
:time="time > 0 ? time : 0"
v-slot="{ days, hours, minutes, seconds }"
class="countdown-container flex justify-items-center items-start justify-center"
class="countdown-container flex justify-items-center items-start justify-center gap-2 md:gap3"
>
<div class="flex flex-col">
<span
@ -23,7 +23,9 @@ const s = ref(0);
>
{{ days }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">days</p>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
days
</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
@ -33,7 +35,9 @@ const s = ref(0);
>
{{ hours }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">hours</p>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
hours
</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
@ -43,7 +47,9 @@ const s = ref(0);
>
{{ minutes }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">minutes</p>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
minutes
</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
@ -62,7 +68,9 @@ const s = ref(0);
</Transition>
</div>
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">secs</p>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
secs
</p>
</div>
</Countdown>
</template>

30
src/style.css
View File

@ -10,10 +10,17 @@ body {
overflow-x: hidden;
}
:root {
--text-main: #333;
--text-secondary: #4b525d;
--bg-active: #fbfbfc;
--font-family: 'IBM Plex Sans';
}
body {
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: var(--font-family), Inter, -apple-system, BlinkMacSystemFont,
font-family: 'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
font-size: 15px;
@ -23,13 +30,6 @@ body {
background-color: #18181a;
}
:root {
--text-main: #333;
--text-secondary: #4b525d;
--bg-active: #fbfbfc;
--font-family: 'IBM Plex Sans';
}
html.dark,
html[data-theme='dark'] {
--text-main: #f7f7f7;
@ -38,48 +38,48 @@ html[data-theme='dark'] {
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Thin.ttf');
font-weight: 100;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-ExtraLight.ttf');
font-weight: 200;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Light.ttf');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Regular.ttf');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Medium.ttf');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-SemiBold.ttf');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: var(--font-family);
font-family: 'IBM Plex Sans';
src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Bold.ttf');
font-weight: 700;
font-display: swap;