From f1e15863ea5d3c208ff2246180230576216c0352 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Thu, 6 Jul 2023 14:01:56 +0200 Subject: [PATCH] use local fonts --- .stylelintrc.json | 2 +- package-lock.json | 14 ++ package.json | 2 + src/lib/components/Navigation.svelte | 2 + src/lib/fonts/material-symbols-rounded.scss | 33 ++++ src/lib/fonts/noto-sans-mono.scss | 87 ++++++++++ .../style/fonts/material-symbols-rounded.scss | 32 ---- src/lib/style/fonts/noto-sans-mono.scss | 153 ------------------ src/routes/+layout.svelte | 6 +- src/routes/config/+layout.svelte | 7 +- 10 files changed, 148 insertions(+), 190 deletions(-) create mode 100644 src/lib/fonts/material-symbols-rounded.scss create mode 100644 src/lib/fonts/noto-sans-mono.scss delete mode 100644 src/lib/style/fonts/material-symbols-rounded.scss delete mode 100644 src/lib/style/fonts/noto-sans-mono.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 95217002..97b2cec3 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -14,4 +14,4 @@ } ] } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 08452474..59d196da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0fc65499..4a1d9aad 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index 5192b039..997d6fd1 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -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); diff --git a/src/lib/fonts/material-symbols-rounded.scss b/src/lib/fonts/material-symbols-rounded.scss new file mode 100644 index 00000000..51a45d0a --- /dev/null +++ b/src/lib/fonts/material-symbols-rounded.scss @@ -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; +} diff --git a/src/lib/fonts/noto-sans-mono.scss b/src/lib/fonts/noto-sans-mono.scss new file mode 100644 index 00000000..59d6df81 --- /dev/null +++ b/src/lib/fonts/noto-sans-mono.scss @@ -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; +} diff --git a/src/lib/style/fonts/material-symbols-rounded.scss b/src/lib/style/fonts/material-symbols-rounded.scss deleted file mode 100644 index 2b902e0c..00000000 --- a/src/lib/style/fonts/material-symbols-rounded.scss +++ /dev/null @@ -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; -} diff --git a/src/lib/style/fonts/noto-sans-mono.scss b/src/lib/style/fonts/noto-sans-mono.scss deleted file mode 100644 index c0fb8c25..00000000 --- a/src/lib/style/fonts/noto-sans-mono.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 99d5451d..042d3d02 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,6 @@