Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-22 01:42:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

use local fonts

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-06 14:01:56 +02:00
parent 0759b2e4ad
commit f1e15863ea
10 changed files with 148 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -8,6 +8,8 @@
"name": "cccs",
"version": "0.0.1",
"devDependencies": {
"@fontsource-variable/material-symbols-rounded": "^5.0.4",
"@fontsource-variable/noto-sans-mono": "^5.0.4",
"@material/material-color-utilities": "^0.2.7",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.20.4",
@@ -2168,6 +2170,18 @@
"node": ">=12"
}
},
"node_modules/@fontsource-variable/material-symbols-rounded": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@fontsource-variable/material-symbols-rounded/-/material-symbols-rounded-5.0.4.tgz",
"integrity": "sha512-pFiXd1YRzEaeOTNdXdcmnEtD0CUev4fCeK+ln25saZyHhUXZoO+d2kn9Teh33D7MZCc2rOSJxW/r8L8cxaEqbg==",
"dev": true
},
"node_modules/@fontsource-variable/noto-sans-mono": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-mono/-/noto-sans-mono-5.0.4.tgz",
"integrity": "sha512-CC5p/9/OF3hep8EsSD0UKYMCaA58nqjm4vRKnwvmvHZPA9jFif6q1lRkmI2nx8C30UkdVA1L7JvOUmCUu+RgNA==",
"dev": true
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",

2
package.json
View File

@@ -15,6 +15,8 @@
"@theaninova/prettier-config": "^1.0.0",
"@types/w3c-web-serial": "^1.0.3",
"@vite-pwa/sveltekit": "^0.2.5",
"@fontsource-variable/noto-sans-mono": "^5.0.4",
"@fontsource-variable/material-symbols-rounded": "^5.0.4",
"stylelint": "^15.9.0",
"stylelint-config-standard-scss": "^10.0.0",
"stylelint-config-prettier-scss": "^1.0.0",

2
src/lib/components/Navigation.svelte
View File

@@ -75,6 +75,8 @@
border: none;
border-radius: 50%;
transition: all 250ms ease;
&.error {
color: var(--md-sys-color-on-error);
background: var(--md-sys-color-error);

33
src/lib/fonts/material-symbols-rounded.scss Normal file
View File

@@ -0,0 +1,33 @@
/* fallback */
@font-face {
font-family: "Material Symbols Rounded";
font-weight: 100 700;
font-style: normal;
src: url("@fontsource-variable/material-symbols-rounded/files/material-symbols-rounded-latin-full-normal.woff2")
format("woff2");
}
.icon {
user-select: none;
direction: ltr;
display: inline-block;
/* stylelint-disable-next-line */
font-family: "Material Symbols Rounded";
font-size: 24px;
font-feature-settings: "liga";
font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400), "GRAD"
var(--icon-grade, 0);
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
transition: font-variation-settings 250ms ease;
-moz-osx-font-smoothing: grayscale;
}

87
src/lib/fonts/noto-sans-mono.scss Normal file
View File

@@ -0,0 +1,87 @@
/* noto-sans-mono-cyrillic-ext-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-cyrillic-ext-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* noto-sans-mono-cyrillic-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-cyrillic-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* noto-sans-mono-greek-ext-wght-normal */
@font-face {
font-family: "Noto Sans Mono Variable";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-greek-ext-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+1F00-1FFF;
}
/* noto-sans-mono-greek-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-greek-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0370-03FF;
}
/* noto-sans-mono-vietnamese-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-vietnamese-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* noto-sans-mono-latin-ext-wght-normal */
@font-face {
font-family: "Noto Sans Mono Variable";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-ext-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020,
U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* noto-sans-mono-latin-wght-normal */
@font-face {
font-family: "Noto Sans Mono";
font-weight: 100 900;
font-style: normal;
font-display: swap;
font-stretch: 62.5% 100%;
src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-wght-normal.woff2")
format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301,
U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}

32
src/lib/style/fonts/material-symbols-rounded.scss
View File

@@ -1,32 +0,0 @@
/* fallback */
@font-face {
font-family: 'Material Symbols Rounded';
font-weight: 100 700;
font-style: normal;
src: url("https://fonts.gstatic.com/s/materialsymbolsrounded/v121/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2") format('woff2');
}
.icon {
user-select: none;
direction: ltr;
display: inline-block;
/* stylelint-disable-next-line */
font-family: 'Material Symbols Rounded';
font-size: 24px;
font-feature-settings: 'liga';
font-variation-settings: "FILL" var(--icon-fill, 0) "wght" var(--icon-weigth, 400) "GRAD"
var(--icon-grade, 0);
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
transition: all 250ms ease;
-moz-osx-font-smoothing: grayscale;
}

153
src/lib/style/fonts/noto-sans-mono.scss
View File

@@ -1,153 +0,0 @@
/* cyrillic-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCLwR26eg.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCCwR26eg.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCKwR26eg.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCFwR26eg.woff2") format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCJwR26eg.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCIwR26eg.woff2") format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 320;
font-style: normal;
font-display: swap;
font-stretch: 77.8%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCGwR0.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCLwR26eg.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCCwR26eg.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCKwR26eg.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCFwR26eg.woff2") format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCJwR26eg.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCIwR26eg.woff2") format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
font-stretch: 100%;
src: url("https://fonts.gstatic.com/s/notosansmono/v27/BngRUXNETWXI6LwhGYvaxZikqbCGwR0.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

6
src/routes/+layout.svelte
View File

@@ -1,6 +1,6 @@
<script>
import "$lib/style/fonts/noto-sans-mono.scss"
import "$lib/style/fonts/material-symbols-rounded.scss"
import "$lib/fonts/noto-sans-mono.scss"
import "$lib/fonts/material-symbols-rounded.scss"
import {onMount} from "svelte"
import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
import Navigation from "$lib/components/Navigation.svelte"
@@ -87,7 +87,7 @@
h1 {
margin-block-start: 0;
font-size: 4rem;
font-weight: 900;
font-weight: 700;
color: var(--md-sys-color-secondary);
}
</style>

7
src/routes/config/+layout.svelte
View File

@@ -31,6 +31,9 @@
border-radius: 32px;
}
.icon {
}
a {
display: flex;
gap: 4px;
@@ -41,7 +44,7 @@
padding: 8px;
padding-inline: 16px;
font-weight: 800;
font-weight: 600;
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
@@ -51,6 +54,8 @@
}
a.active {
--icon-fill: 1;
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
}