diff --git a/_includes/head.liquid b/_includes/head.liquid
index 5e261a702891d58b7b556627d6c098cf9da349db..8952f67f369dedfe088a1006d25bf1ccd1997d09 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -23,7 +23,7 @@
 
 <meta name="description" content="{{ head_description }}">
 <meta name="author" content="{{ meta.author }}">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
 <title>{{ head_title }}</title>
 
 <meta name="theme-color" content="#FFFFFF">
@@ -49,7 +49,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="white">
 <meta name="apple-mobile-web-app-title" content="{{ meta.name }}">
 
-<link href="//fonts.googleapis.com/css?family=Crete+Round|Roboto|Montserrat" rel="stylesheet">
+<link href="//fonts.googleapis.com/css?family=Crete+Round|Roboto|Montserrat&display=swap" rel="stylesheet">
 <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="/css/styles.css" rel="stylesheet">
 
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index fa2714c8bfaf71bae68b13ba13ed52cbe340fe65..12b6e4e5b480fd2720f798a4194c83c4743b43b4 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,5 +1,54 @@
-$font-heading: 'Montserrat', sans-serif !default;
-$font-body: 'Crete Round', sans-serif !default;
+$font-heading: 'Montserrat', sans-serif;
+$font-body: 'Crete Round', sans-serif;
+
+$theme-light: (
+	"lighter": #FFFFFF,
+	"light": #FAFAFA,
+	"neutral": #F0F0F0,
+	"dark": #E0E0E0,
+	"darker": #BDBDBD,
+	"primary": #264361,
+	"on-primary": #FFFFFF,
+	"secondary": #0e2033,
+	"on-secondary": #FFFFFF,
+	"tertiary": #000000,
+	"on-tertiary": #FFFFFF,
+	"accent": #0063cc,
+	"on-accent": #FFFFFF,
+	"highlight": #004fa3,
+	"on-highlight": #FFFFFF,
+	"success": #28a745,
+	"danger": #dc3545,
+	"warning": #ffc107,
+	"info": #17a2b8,
+	"white": #FFFFFF,
+	"black": #000000
+);
+
+$theme-dark: (
+	"lighter": #424242,
+	"light": #303030,
+	"neutral": #212121,
+	"dark": #151515,
+	"darker": #101010,
+	"primary": #cefff6,
+	"on-primary": #000000,
+	"secondary": rgb(147, 255, 236),
+	"on-secondary": #000000,
+	"tertiary": #FFFFFF,
+	"on-tertiary": #000000,
+	"accent": #00EAC0,
+	"on-accent": #000000,
+	"highlight": #00EAC0,
+	"on-highlight": #000000,
+	"success": #28a745,
+	"danger": #dc3545,
+	"warning": #ffc107,
+	"info": #17a2b8,
+	"white": #FFFFFF,
+	"black": #000000
+
+);
 
 @import "../../node_modules/@doubledotlabs/dot.css/scss/styles.scss";
 
diff --git a/pages/index.html b/pages/index.html
index b922924a052e82eadc2e1d1ca6f238d5d63f0f2f..544fb89f2050fababe9bc59c2df7178959a7ae66 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -23,14 +23,14 @@ permalink: /
 			{% assign links = "twitter fediverse github linkedin" | split: " " %}
 			{% for link in links %}
 			<a rel="me" class="link" href="{{ meta.links[link] }}">
-				<img class="link-img" src="/images/ic/{{ link }}.svg">
+				<img class="link-img" src="/images/ic/{{ link }}.svg" width="24" height="24" alt="{{ link }}">
 			</a>
 			{% endfor %}
 		</div>
 	</div>
 
 	<div class="d-none d-md-flex col-auto pr-5 align-items-center">
-		<img style="height: 200px;" class="border border-tertiary rounded-circle" src="/images/me.jpg" alt="My profile picture.">
+		<img style="height: 200px;" class="border border-tertiary rounded-circle" src="/images/me.jpg" width="200" height="200" alt="My profile picture.">
 	</div>
 </div>