diff --git a/app.vue b/app.vue index b30941b48..17e8c297b 100644 --- a/app.vue +++ b/app.vue @@ -14,9 +14,16 @@ const colour = '#C71585'; useHead({ htmlAttrs: { - dir: config.dir || 'ltr', + dir: config.style.dir || 'ltr', lang: config.locale, }, + style: [{ + textContent: + `:root { + --font-headings: ${config.style.fontHeadings.join(', ')}; + --font-text: ${config.style.fontText.join(', ')}; + }`, + }], link: [ { rel: 'icon', sizes: '48x48', href: '/favicon.ico' }, { rel: 'icon', sizes: 'any', type: 'image/svg', href: '/logo/logo-primary.svg' }, diff --git a/assets/fonts.scss b/assets/fonts.scss index 2a46b318d..3c3341d28 100644 --- a/assets/fonts.scss +++ b/assets/fonts.scss @@ -1,239 +1,236 @@ @use "sass:list"; +@use "./variables"; @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap'); // We're using google-webfonts-helper https://gwfh.mranftl.com/fonts to self-host fonts -@if list.index($fonts, 'Quicksand') { - /* quicksand-regular - latin-ext_latin */ - @font-face { - font-family: 'Quicksand'; - font-style: normal; - font-weight: 400; - src: url('/fonts/quicksand-v21-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ - src: local('Quicksand'), - url('/fonts/quicksand-v21-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/quicksand-v21-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/quicksand-v21-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/quicksand-v21-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/quicksand-v21-latin-ext_latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */ - } - /* quicksand-700 - latin-ext_latin */ - @font-face { - font-family: 'Quicksand'; - font-style: normal; - font-weight: 700; - src: url('/fonts/quicksand-v21-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ - src: local('Quicksand'), - url('/fonts/quicksand-v21-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/quicksand-v21-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/quicksand-v21-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/quicksand-v21-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/quicksand-v21-latin-ext_latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */ - } +/* quicksand-regular - latin-ext_latin */ +@font-face { + font-family: 'Quicksand'; + font-style: normal; + font-weight: 400; + src: url('/fonts/quicksand-v21-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ + src: local('Quicksand'), + url('/fonts/quicksand-v21-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/quicksand-v21-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/quicksand-v21-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/quicksand-v21-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/quicksand-v21-latin-ext_latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */ +} +/* quicksand-700 - latin-ext_latin */ +@font-face { + font-family: 'Quicksand'; + font-style: normal; + font-weight: 700; + src: url('/fonts/quicksand-v21-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ + src: local('Quicksand'), + url('/fonts/quicksand-v21-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/quicksand-v21-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/quicksand-v21-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/quicksand-v21-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/quicksand-v21-latin-ext_latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'Nunito') { - /* nunito-regular - latin-ext_latin_cyrillic-ext_cyrillic */ - @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Nunito') format('svg'); /* Legacy iOS */ - } - /* nunito-700 - latin-ext_latin_cyrillic-ext_cyrillic */ - @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 700; - src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Nunito') format('svg'); /* Legacy iOS */ - } +/* nunito-regular - latin-ext_latin_cyrillic-ext_cyrillic */ +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 400; + src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Nunito') format('svg'); /* Legacy iOS */ +} +/* nunito-700 - latin-ext_latin_cyrillic-ext_cyrillic */ +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Nunito') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'Zen Maru Gothic') { - /* zen-maru-gothic-regular - latin_japanese */ - @font-face { - font-family: 'Zen Maru Gothic'; - font-style: normal; - font-weight: 400; - src: url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */ - } - /* zen-maru-gothic-700 - latin_japanese */ - @font-face { - font-family: 'Zen Maru Gothic'; - font-style: normal; - font-weight: 700; - src: url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/zen-maru-gothic-v4-latin_japanese-700.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */ - } +/* zen-maru-gothic-regular - latin_japanese */ +@font-face { + font-family: 'Zen Maru Gothic'; + font-style: normal; + font-weight: 400; + src: url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */ +} +/* zen-maru-gothic-700 - latin_japanese */ +@font-face { + font-family: 'Zen Maru Gothic'; + font-style: normal; + font-weight: 700; + src: url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/zen-maru-gothic-v4-latin_japanese-700.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'Nanum Gothic') { - /* nanum-gothic-regular - latin_korean */ - @font-face { - font-family: 'Nanum Gothic'; - font-style: normal; - font-weight: 400; - src: url('/fonts/nanum-gothic-v17-latin_korean-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/nanum-gothic-v17-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/nanum-gothic-v17-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/nanum-gothic-v17-latin_korean-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/nanum-gothic-v17-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/nanum-gothic-v17-latin_korean-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */ - } - /* nanum-gothic-700 - latin_korean */ - @font-face { - font-family: 'Nanum Gothic'; - font-style: normal; - font-weight: 700; - src: url('/fonts/nanum-gothic-v17-latin_korean-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('/fonts/nanum-gothic-v17-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/nanum-gothic-v17-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/nanum-gothic-v17-latin_korean-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/nanum-gothic-v17-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/nanum-gothic-v17-latin_korean-700.svg#NanumGothic') format('svg'); /* Legacy iOS */ - } +/* nanum-gothic-regular - latin_korean */ +@font-face { + font-family: 'Nanum Gothic'; + font-style: normal; + font-weight: 400; + src: url('/fonts/nanum-gothic-v17-latin_korean-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/nanum-gothic-v17-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/nanum-gothic-v17-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/nanum-gothic-v17-latin_korean-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/nanum-gothic-v17-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/nanum-gothic-v17-latin_korean-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */ +} +/* nanum-gothic-700 - latin_korean */ +@font-face { + font-family: 'Nanum Gothic'; + font-style: normal; + font-weight: 700; + src: url('/fonts/nanum-gothic-v17-latin_korean-700.eot'); /* IE9 Compat Modes */ + src: local(''), + url('/fonts/nanum-gothic-v17-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/nanum-gothic-v17-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/nanum-gothic-v17-latin_korean-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/nanum-gothic-v17-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/nanum-gothic-v17-latin_korean-700.svg#NanumGothic') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'Noto Sans TC') { - /* noto-sans-tc-regular - latin_chinese-traditional */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Noto Sans TC'; - font-style: normal; - font-weight: 400; - src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.eot'); /* IE9 Compat Modes */ - src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.svg#NotoSansTC') format('svg'); /* Legacy iOS */ - } - /* noto-sans-tc-700 - latin_chinese-traditional */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Noto Sans TC'; - font-style: normal; - font-weight: 700; - src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.eot'); /* IE9 Compat Modes */ - src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.svg#NotoSansTC') format('svg'); /* Legacy iOS */ - } +/* noto-sans-tc-regular - latin_chinese-traditional */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 400; + src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.eot'); /* IE9 Compat Modes */ + src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-regular.svg#NotoSansTC') format('svg'); /* Legacy iOS */ +} +/* noto-sans-tc-700 - latin_chinese-traditional */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 700; + src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.eot'); /* IE9 Compat Modes */ + src: url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/noto-sans-tc-v26-latin_chinese-traditional-700.svg#NotoSansTC') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'Noto Sans SC') { - /* noto-sans-sc-regular - latin_chinese-simplified */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Noto Sans SC'; - font-style: normal; - font-weight: 400; - src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.eot'); /* IE9 Compat Modes */ - src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.woff') format('woff'), /* Modern Browsers */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.svg#NotoSansSC') format('svg'); /* Legacy iOS */ - } - /* noto-sans-sc-700 - latin_chinese-simplified */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Noto Sans SC'; - font-style: normal; - font-weight: 700; - src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.eot'); /* IE9 Compat Modes */ - src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.woff') format('woff'), /* Modern Browsers */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.svg#NotoSansSC') format('svg'); /* Legacy iOS */ - } +/* noto-sans-sc-regular - latin_chinese-simplified */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 400; + src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.eot'); /* IE9 Compat Modes */ + src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.woff') format('woff'), /* Modern Browsers */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-regular.svg#NotoSansSC') format('svg'); /* Legacy iOS */ +} +/* noto-sans-sc-700 - latin_chinese-simplified */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 700; + src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.eot'); /* IE9 Compat Modes */ + src: url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.woff') format('woff'), /* Modern Browsers */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('/fonts/noto-sans-sc-v26-latin_chinese-simplified-700.svg#NotoSansSC') format('svg'); /* Legacy iOS */ } -@if list.index($fonts, 'sitelen-pona-pona') { - @font-face { - font-family: 'sitelen-pona-pona'; - font-style: normal; - font-weight: 400; - src: url('/fonts/sitelen-pona-pona.otf') format("opentype") - } +@font-face { + font-family: 'sitelen-pona-pona'; + font-style: normal; + font-weight: 400; + src: url('/fonts/sitelen-pona-pona.otf') format("opentype") } -@if list.index($fonts, 'linjapimejapona') { - @font-face { - font-family: 'linjapimejapona'; - font-style: normal; - font-weight: 400; - src: url('/fonts/linjapimejapona.ttf') format("truetype") - } +@font-face { + font-family: 'linjapimejapona'; + font-style: normal; + font-weight: 400; + src: url('/fonts/linjapimejapona.ttf') format("truetype") } -@if list.index($fonts, 'Rubik') { - /* rubik-300 - arabic_latin_latin-ext */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Rubik'; - font-style: normal; - font-weight: 400; - src: url('/fonts/rubik-v28-arabic_latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ - } - /* rubik-700 - arabic_latin_latin-ext */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Rubik'; - font-style: normal; - font-weight: 700; - src: url('/fonts/rubik-v28-arabic_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ - } +/* rubik-300 - arabic_latin_latin-ext */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Rubik'; + font-style: normal; + font-weight: 400; + src: url('/fonts/rubik-v28-arabic_latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* rubik-700 - arabic_latin_latin-ext */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Rubik'; + font-style: normal; + font-weight: 700; + src: url('/fonts/rubik-v28-arabic_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } +/* baloo-bhaijaan-2-regular - arabic_latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Baloo Bhaijaan 2'; + font-style: normal; + font-weight: 400; + src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ +} +/* baloo-bhaijaan-2-700 - arabic_latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Baloo Bhaijaan 2'; + font-style: normal; + font-weight: 700; + src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ +} +.shavian { + --font-text: 'Noto Sans Shavian'; + font-family: list.join(var(--font-text), $font-fallback); +} -@if list.index($fonts, 'Baloo Bhaijaan 2') { - /* baloo-bhaijaan-2-regular - arabic_latin */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Baloo Bhaijaan 2'; - font-style: normal; - font-weight: 400; - src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ - url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ - } - /* baloo-bhaijaan-2-700 - arabic_latin */ - @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Baloo Bhaijaan 2'; - font-style: normal; - font-weight: 700; - src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ - url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ +.sitelen { + --font-text: 'linjapimejapona'; + font-family: list.join(var(--font-text), $font-fallback); + .cartouche { + padding: .1em; + margin-inline-start: .15em; + margin-inline-end: .15em; + border: .075em solid #000; + border-radius: .2em; + font-size: 0.9em; } } diff --git a/assets/variables.scss b/assets/variables.scss index f0d3caea4..d0871989b 100644 --- a/assets/variables.scss +++ b/assets/variables.scss @@ -1,12 +1,9 @@ @use "sass:list"; @use "sass:math"; -@import "../data/variables"; -$fontExtra: null !default; -$fonts: list.join(list.join($fontHeadings, $fontText), $fontExtra); - -$font-family-sans-serif: list.join($fontText, (sans-serif, "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")) !default; -$headings-font-family: list.join($fontHeadings, (sans-serif, $fontText, "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")) !default; +$font-fallback: sans-serif, "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +$font-family-sans-serif: list.join(var(--font-text), $font-fallback); +$headings-font-family: list.join(var(--font-headings), $font-fallback); $btn-font-family: $font-family-sans-serif; $font-family-base: $font-family-sans-serif; diff --git a/components/LanguageVersions.vue b/components/LanguageVersions.vue index aa700af74..5ff3f0061 100644 --- a/components/LanguageVersions.vue +++ b/components/LanguageVersions.vue @@ -7,7 +7,7 @@