make font customaizable via code injetion for zutrinken#121

TEAMS-Senior-Design · Jul 1, 2020 · fef637a · fef637a
1 parent 8ab5adc
commit fef637a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ If you like this theme, you can buy me a ~~coffee~~ [beer](https://paypal.me/zut
 
 * Responsive layout
 * Dark Mode
-* Search
+* Search & Tag archive
 * Post reading progress
 * Code highlight including line numbers
 * Disqus support
@@ -57,6 +57,23 @@ If you like this theme, you can buy me a ~~coffee~~ [beer](https://paypal.me/zut
 </style>
 ````
 
+## Setup custom google fonts
+
+1. Go to [fonts.google.com](https://fonts.google.com/) and choose a font.
+2. Choose __Embed__ and copy the `<link>` code.
+3. Go to __Code injection__.  
+4. Add this to __Blog Header__:  
+````
+<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --font-primary: 'Mukta', sans-serif;
+    --font-secondary: 'Crimson Text', serif;
+  }
+</style>
+````
+
 ## Setup [Disqus](https://disqus.com/)
 
 1. Go to __Code injection__.  

diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -13,6 +13,11 @@ $inner: calc(64rem + 8vw);
 /* ==========================================================================
    Basics
    ========================================================================== */
+:root {
+	--font-primary: 'Fira Sans', sans-serif;
+	--font-secondary: 'Cardo', serif;
+}
+
 html {
 	font-size: 62.5%;
 	overflow-x: hidden;
@@ -24,7 +29,10 @@ html.menu-active {
 }
 
 body {
-	font: 400 1em / 1.5em 'Fira Sans', sans-serif;
+	font-family: var(--font-primary);
+	font-size: 1em;
+	line-height: 1.5em;
+	font-weight: 400;
 	color: $color-text-primary;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
@@ -107,13 +115,13 @@ textarea {
 	}
 
 	p {
-		font-family: 'Cardo', serif;
+		font-family: var(--font-secondary);
 		margin: 0 0 4rem;
 	}
 
 	ol,
 	ul {
-		font-family: 'Cardo', serif;
+		font-family: var(--font-secondary);
 		margin: 0 0 4rem;
 		padding-left: 2em;
 		box-sizing: border-box;
@@ -137,7 +145,7 @@ textarea {
 		line-height: 1.5em;
 		text-align: right;
 		color: $color-primary;
-		font-family: 'Fira Sans', sans-serif;
+		font-family: var(--font-primary);
 	}
 
 	ul > li:before {
@@ -176,7 +184,7 @@ textarea {
 	}
 
 	blockquote {
-		font-family: 'Cardo', serif;
+		font-family: var(--font-secondary);
 		margin: 0 0 4rem;
 		padding: 0.25em 1em;
 		-moz-box-sizing: border-box;
@@ -218,7 +226,7 @@ textarea {
 	}
 
 	dl {
-		font-family: 'Cardo', serif;
+		font-family: var(--font-secondary);
 		margin: 0 0 4rem;
 		padding-left: 30px;
 	}
@@ -837,7 +845,7 @@ textarea {
 }
 
 .blog-description {
-	font-family: 'Cardo', serif;
+	font-family: var(--font-secondary);
 	display: block;
 	margin-top: 1rem;
 	padding: 0;
@@ -907,7 +915,7 @@ textarea {
 		font-size: 2em;
 		line-height: 1.5em;
 		margin: 1rem 0;
-		font-family: 'Cardo', serif;
+		font-family: var(--font-secondary);
 		color: $color-text-secondary;
 		@media (prefers-color-scheme: dark) {
 			color: $color-text-secondary-dark;
@@ -1875,7 +1883,7 @@ textarea {
 
 .post-excerpt {
 	margin: 1em 0 0;
-	font-family: 'Cardo', serif;
+	font-family: var(--font-secondary);
 	font-size: 2em;
 	line-height: 1.5em;
 }
@@ -2291,7 +2299,7 @@ textarea {
 .post-nav-excerpt {
 	height: 5rem;
 	margin: 0 0 1rem;
-	font-family: 'Cardo', serif;
+	font-family: var(--font-secondary);
 	font-size: 1.75em;
 	line-height: 2.5rem;
 	display: -webkit-box;