[themes/*] Turn to Fira fonts for the website.

master
Lorenzo Cogotti 2 years ago
parent 8f21e5cb1f
commit b57185eea7

@ -0,0 +1,59 @@
// Fira Mono
@font-face
font-family: 'Fira Mono'
src: local("Fira Mono"), url("fonts/FiraMono-Regular.woff2") format("woff2"), url("fonts/FiraMono-Regular.woff") format("woff")
font-weight: 400
font-style: normal
@font-face
font-family: 'Fira Mono'
src: local("Fira Mono Bold"), url("fonts/FiraMono-Bold.woff2") format("woff2"), url("fonts/FiraMono-Bold.woff") format("woff")
font-weight: 600
font-style: normal
// Fira Sans
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Light"), url("fonts/FiraSans-Light.woff2") format("woff2"), url("fonts/FiraSans-Light.woff") format("woff")
font-weight: 300
font-style: normal
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Light Italic"), url("fonts/FiraSans-LightItalic.woff2") format("woff2"), url("fonts/FiraSans-LightItalic.woff") format("woff")
font-weight: 300
font-style: italic
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Regular"), url("fonts/FiraSans-Regular.woff2") format("woff2"), url("fonts/FiraSans-Regular.woff") format("woff")
font-weight: 400
font-style: normal
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Medium"), url("fonts/FiraSans-Medium.woff2") format("woff2"), url("fonts/FiraSans-Medium.woff") format("woff")
font-weight: 500
font-style: normal
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Medium Italic"), url("fonts/FiraSans-MediumItalic.woff2") format("woff2"), url("fonts/FiraSans-MediumItalic.woff") format("woff")
font-weight: 500
font-style: italic
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Bold"), url("fonts/FiraSans-Bold.woff2") format("woff2"), url("fonts/FiraSans-Bold.woff") format("woff")
font-weight: 600
font-style: normal
@font-face
font-family: 'Fira Sans'
src: local("Fira Sans Bold Italic"), url("fonts/FiraSans-BoldItalic.woff2") format("woff2"), url("fonts/FiraSans-BoldItalic.woff") format("woff")
font-weight: 600
font-style: italic

@ -1,4 +1,5 @@
@import "variables" @import "variables"
@import "fonts"
// Some convenience class to manage resolution specific elements // Some convenience class to manage resolution specific elements
@media only screen and (max-width:600px) @media only screen and (max-width:600px)
@ -54,14 +55,19 @@ h1.page-title:first-letter
body body
margin: 0 margin: 0
font-family: var(--body-font) font-family: var(--sans-font)
font-size: $body-font-size font-size: $sans-font-size
line-height: $body-line-height line-height: $sans-line-height
color: var(--foreground-color) color: var(--foreground-color)
background-color: var(--background-color) background-color: var(--background-color)
-webkit-text-size-adjust: 100% -webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100% -ms-text-size-adjust: 100%
code, .goat text
font-family: var(--mono-font)
font-size: $mono-font-size
line-height: $mono-line-height
a a
color: var(--link-color) color: var(--link-color)
@ -186,7 +192,7 @@ thead th
padding: 7px 12px padding: 7px 12px
display: block display: block
margin: 10px 0 margin: 10px 0
font-size: $body-font-size font-size: $sans-font-size
font-weight: 700 font-weight: 700
text-decoration: none !important text-decoration: none !important
a a

@ -15,12 +15,14 @@ $large-spacer: $spacer * 1.5
$huge-spacer: $spacer * 3 $huge-spacer: $spacer * 3
// Fonts // Fonts
$body-line-height: 1.5 $sans-line-height: 1.5
$mono-line-height: 1
$huge-font-size: 3em $huge-font-size: 3em
$large-font-size: 2em $large-font-size: 2em
$bigger-font-size: 1em $bigger-font-size: 1.2em
$body-font-size: 20px $sans-font-size: 1em
$mono-font-size: 1em
// Consistent border radius // Consistent border radius
$border-radius: 0.25rem $border-radius: 0.25rem
@ -88,7 +90,8 @@ $title-text-color-dark: #ddd
--foreground-color: #{$foreground-color} --foreground-color: #{$foreground-color}
--body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" --sans-font: 'Fira Sans', 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
--mono-font: 'Fira Mono', Menlo, 'Lucida Console', Consolas, monaco, monospace
--text-color: #{$text-color} --text-color: #{$text-color}
--title-text-color: #{$title-text-color} --title-text-color: #{$title-text-color}
@ -104,8 +107,6 @@ $title-text-color-dark: #ddd
--heading-color: #{$gray-900} --heading-color: #{$gray-900}
--border-color: #{$gray-300} --border-color: #{$gray-300}
// --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
@media (prefers-color-scheme:dark) @media (prefers-color-scheme:dark)
\:root \:root
--background-color: #{$background-color-dark} --background-color: #{$background-color-dark}

Loading…
Cancel
Save