@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 /* 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 */ } /* 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 */ } /* 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 */ } /* 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 */ } /* noto-sans-tc-regular - chinese-traditional_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: 'Noto Sans TC'; font-style: normal; font-weight: 400; src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* noto-sans-tc-700 - chinese-traditional_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: 'Noto Sans TC'; font-style: normal; font-weight: 700; src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* noto-sans-sc-regular - chinese-simplified_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: 'Noto Sans SC'; font-style: normal; font-weight: 400; src: url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* noto-sans-sc-700 - chinese-simplified_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: 'Noto Sans SC'; font-style: normal; font-weight: 700; src: url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } @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: 'linjapimejapona'; font-style: normal; font-weight: 400; src: url('/fonts/linjapimejapona.ttf') format("truetype") } /* 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); } .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; } }