From 77e644f6281aec9a1a4aafd7d628dbe94ac7f4bb Mon Sep 17 00:00:00 2001
From: h7x4 <h7x4@XPS.localdomain>
Date: Wed, 2 Sep 2020 11:17:17 +0200
Subject: [PATCH] Added styling

---
 about.html    | 11 +++++++++--
 css/style.css | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/about.html b/about.html
index e4ef9db..25270f3 100644
--- a/about.html
+++ b/about.html
@@ -7,6 +7,7 @@
   <title>About</title>
   <link rel="shortcut icon" href="img/favicon.svg" type="image/svg+xml">
   <!-- Royalty free icon, source: https://pixabay.com/vectors/flat-design-symbol-icon-www-2126879/ -->
+  <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
@@ -19,7 +20,13 @@
       <h2>This is me</h2>
     </header>
 
-    <img src="./img/html_joke.jpg" alt="An html joke">
+    <img 
+      src="./img/html_joke.jpg"
+      alt="An html joke"
+      id="htmlJoke"
+      style="border-width: 6px;"
+    >
+    <!-- Increased to 6px assuming default border-width "medium" at 96dpi is about 4px, https://www.sitepoint.com/community/t/pixel-equivelant-of-border-width-thin-medium-thick/4225/2 -->
     <!-- Source: http://funnygeekjokes.blogspot.com/2013/02/how-to-tell-html-from-html5-joke.html -->
 
     <p>
@@ -64,4 +71,4 @@
   <footer>Created by: Øystein Tveit</footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/css/style.css b/css/style.css
index e69de29..0463da5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,17 @@
+body {
+  background: #AAAAAA
+}
+
+header {
+  font-family: 'Times New Roman', Arial;
+}
+
+p {
+  font-family: 'Noto Serif', Helvetica, Arial;
+}
+
+#htmlJoke {
+  max-width: 150px;
+  border: solid;
+  border-color: red;
+}
