diff --git a/assets/css/fonts.css b/assets/css/fonts.css index 902d97f..0f46e16 100644 --- a/assets/css/fonts.css +++ b/assets/css/fonts.css @@ -1,105 +1,244 @@ -/* eb-garamond-regular - latin */ +/* montserrat-100 - latin */ @font-face { - font-display: fallback; - font-family: "EB Garamond"; + font-display: swap; + font-family: "Montserrat"; + font-style: normal; + font-weight: 100; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-100.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-100italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 100; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-100italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-200 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: normal; + font-weight: 200; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-200.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-200italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 200; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-200italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-300 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: normal; + font-weight: 300; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-300.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-300italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 300; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-300italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-regular - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; font-style: normal; font-weight: 400; - src: - local(""), - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-regular.woff2") - format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-regular.woff") - format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-regular.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } -/* eb-garamond-600 - latin */ +/* montserrat-italic - latin */ @font-face { - font-display: fallback; - font-family: "EB Garamond"; + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 400; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-500 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: normal; + font-weight: 500; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-500.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-500italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 500; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-500italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-600 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; font-style: normal; font-weight: 600; - src: - local(""), - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-600.woff2") - format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-600.woff") - format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* eb-garamond-italic - latin */ -@font-face { - font-display: fallback; - font-family: "EB Garamond"; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-600.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-600italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; font-style: italic; - font-weight: 400; - src: - local(""), - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-italic.woff2") - format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-italic.woff") - format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* eb-garamond-700italic - latin */ -@font-face { - font-display: fallback; - font-family: "EB Garamond"; + font-weight: 600; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-600italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-700 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; + font-style: normal; + font-weight: 700; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-700.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-700italic - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; font-style: italic; font-weight: 700; - src: - local(""), - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-700italic.woff2") - format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/eb-garamond-v19/eb-garamond-v19-latin-700italic.woff") - format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-700italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } - -/* lora-regular - latin */ +/* montserrat-800 - latin */ @font-face { - font-display: fallback; - font-family: "Lora"; + font-display: swap; + font-family: "Montserrat"; font-style: normal; - font-weight: 400; - src: - local(""), - url("/css/fonts/lora-v20/lora-v20-latin-regular.woff2") format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/lora-v20/lora-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + font-weight: 800; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-800.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } -/* lora-600 - latin */ +/* montserrat-800italic - latin */ @font-face { - font-display: fallback; - font-family: "Lora"; + font-display: swap; + font-family: "Montserrat"; + font-style: italic; + font-weight: 800; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-800italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* montserrat-900 - latin */ +@font-face { + font-display: swap; + font-family: "Montserrat"; font-style: normal; - font-weight: 600; - src: - local(""), - url("/css/fonts/lora-v20/lora-v20-latin-600.woff2") format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/lora-v20/lora-v20-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + font-weight: 900; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-900.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } -/* lora-italic - latin */ +/* montserrat-900italic - latin */ @font-face { - font-display: fallback; - font-family: "Lora"; + font-display: swap; + font-family: "Montserrat"; font-style: italic; + font-weight: 900; + src: url("/css/fonts/montserrat-v25/montserrat-v25-latin-900italic.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* roboto-slab-100 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 100; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-100.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-200 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 200; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-200.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-300 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 300; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-300.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-regular - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; font-weight: 400; - src: - local(""), - url("/css/fonts/lora-v20/lora-v20-latin-italic.woff2") format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/lora-v20/lora-v20-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-regular.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } -/* lora-600italic - latin */ +/* roboto-slab-500 - latin */ @font-face { - font-display: fallback; - font-family: "Lora"; - font-style: italic; + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 500; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-500.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-600 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; font-weight: 600; - src: - local(""), - url("/css/fonts/lora-v20/lora-v20-latin-600italic.woff2") format("woff2"), - /* Chrome 26+, Opera 23+, Firefox 39+ */ - url("/css/fonts/lora-v20/lora-v20-latin-600italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-600.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-700 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 700; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-700.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-800 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 800; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-800.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* roboto-slab-900 - latin */ +@font-face { + font-display: swap; + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 900; + src: url("/css/fonts/roboto-slab-v32/roboto-slab-v32-latin-900.woff2") + format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } diff --git a/assets/css/main.css b/assets/css/main.css index a83248b..955a7f4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,3 +1,4 @@ +@import "./fonts.css"; @tailwind base; html { @@ -42,7 +43,7 @@ html { } .content-area a:hover { - @apply text-yellow; + @apply text-blue-darker; } .content-area > p + p, @@ -73,12 +74,12 @@ html { } .content-aside a { - @apply text-darkblue underline; + @apply text-blue underline; @apply transition-colors duration-500; } .content-aside a:hover { - @apply text-yellow; + @apply text-blue-darker; } .content-aside > ul { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b106f77..46755da 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,12 +12,31 @@ {{- end -}} - {{ $cssFonts := resources.Get "css/fonts.css" }} - - - + + + + + {{ $cssTW := resources.Get "css/main.css" }} {{ $css := $cssTW | resources.PostCSS (dict "inlineImports" true) }} @@ -77,10 +96,10 @@