ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: use variable fonts with subsetting (#2817)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2817
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
2022-12-15 21:37:02 +00:00
committed by konrad
parent a3978bb359
commit b6a89a0cde
30 changed files with 331 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/OpenSans-BoldItalic_3ff98862.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/OpenSans-Bold_eb52363b.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/OpenSans-Italic[wght]_c9a8fe68.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/OpenSans-RegularItalic_48244a7a.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/OpenSans-Regular_d0acb717.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/OpenSans[wght]_54a65da5.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Quicksand-Bold_20b26f76.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Quicksand-Regular_3e913e7e.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Quicksand-SemiBold_be48a442.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Quicksand[wght]_87bdcc7f.woff2 Normal file
View File

Binary file not shown.

6
src/components/home/navigation.vue
View File

@ -435,7 +435,7 @@ $vikunja-nav-selected-width: 0.4rem;
.menu-list {
li {
font-weight: 500;
font-weight: 600;
font-family: $vikunja-font;
}
@ -460,7 +460,7 @@ $vikunja-nav-selected-width: 0.4rem;
font-weight: bold;
font-family: $vikunja-font;
color: $vikunja-nav-color;
font-weight: 500;
font-weight: 600;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
@ -479,6 +479,8 @@ $vikunja-nav-selected-width: 0.4rem;
.count {
color: var(--grey-500);
margin-right: .5rem;
// align brackets with number
font-feature-settings: "case";
}
}

1
src/components/namespace/namespace-settings-dropdown.vue
View File

@ -98,5 +98,6 @@ function setSubscriptionInStore(sub: ISubscription) {
<style scoped lang="scss">
.dropdown-trigger {
padding: 0.5rem;
display: flex;
}
</style>

4
src/components/tasks/partials/singleTaskInList.vue
View File

@ -38,7 +38,7 @@
<template v-for="(pt, i) in task.relatedTasks.parenttask">
{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
</template>
>
&rsaquo;
</span>
{{ task.title }}
</span>
@ -71,7 +71,7 @@
class="is-italic"
:aria-expanded="showDefer ? 'true' : 'false'"
>
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
– {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
</time>
</BaseButton>
<CustomTransition name="fade">

3
src/styles/common-imports.scss
View File

@ -10,13 +10,14 @@
// are defined here.
//
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
// the default values get overwritten by the definitions above
@import "bulma-css-variables/sass/utilities/_all";
// since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2);
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;
$pagination-current-border: var(--primary);

154
src/styles/fonts.scss
View File

@ -1,65 +1,105 @@
$font-files-path: '/fonts/';
$font-files-path: '@/assets/fonts/';
// quicksand-regular - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url($font-files-path + 'quicksand-v7-latin-regular.woff2') format('woff2');
// this is the same as the latin range that google uses.
// see for examle the unicode-range definition here:
// https://fonts.googleapis.com/css2?family=Open+Sans
$unicode-range: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,\
U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD";
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Quicksand';
src: url($font-files-path + 'Quicksand[wght]_87bdcc7f.woff2') format('woff2-variations');
src: url($font-files-path + 'Quicksand[wght]_87bdcc7f.woff2') format('woff2') tech('variations');
font-style: normal;
font-weight: 400 700;
font-display: swap;
unicode-range: $unicode-range;
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans[wght]_54a65da5.woff2') format('woff2-variations');
src: url($font-files-path + 'OpenSans[wght]_54a65da5.woff2') format('woff2') tech('variations');
font-weight: 400 700;
font-display: swap;
unicode-range: $unicode-range;
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans-Italic[wght]_c9a8fe68.woff2') format('woff2-variations');
src: url($font-files-path + 'OpenSans-Italic[wght]_c9a8fe68.woff2') format('woff2') tech('variations');
font-weight: 400 700;
font-style: italic;
font-display: swap;
unicode-range: $unicode-range;
}
}
// quicksand-500 - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
}
/* Set up for old browsers */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: 'Quicksand';
src: url($font-files-path + 'Quicksand-Regular_3e913e7e.woff2') format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: $unicode-range;
}
// quicksand-700 - latin
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
}
@font-face {
font-family: 'Quicksand';
src: url($font-files-path + 'Quicksand-SemiBold_be48a442.woff2') format('woff2');
font-style: normal;
font-weight: 600;
font-display: swap;
unicode-range: $unicode-range;
}
// open-sans-regular - latin
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Quicksand';
src: url($font-files-path + 'Quicksand-Bold_20b26f76.woff2') format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: $unicode-range;
}
// open-sans-italic - latin
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans-Regular_d0acb717.woff2') format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: $unicode-range;
}
// open-sans-700 - latin
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans-RegularItalic_48244a7a.woff2') format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: $unicode-range;
}
// open-sans-700italic - latin
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url($font-files-path + 'open-sans-v15-latin-700italic.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans-Bold_eb52363b.woff2') format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: $unicode-range;
}
@font-face {
font-family: 'Open Sans';
src: url($font-files-path + 'OpenSans-BoldItalic_3ff98862.woff2') format('woff2');
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: $unicode-range;
}
}

2
src/views/tasks/TaskDetailView.vue
View File

@ -14,7 +14,7 @@
ref="heading"
/>
<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
{{ getNamespaceTitle(parent.namespace) }} >
{{ getNamespaceTitle(parent.namespace) }} &rsaquo;
<router-link :to="{ name: 'list.index', params: { listId: parent.list.id } }">
{{ getListTitle(parent.list) }}
</router-link>