From 70f50b78bb775c6c2e4a77d9e1bac6c898ec2a73 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Sat, 25 Sep 2021 15:55:11 +0200
Subject: [PATCH] Adjust accessibility

---
 src/_mixins.scss                   |  7 ++++-
 src/_variables.scss                |  1 +
 src/components/languageSwitcher.js |  2 +-
 src/layouts/default.scss           |  3 ---
 src/pages/index.js                 |  2 +-
 src/pages/index.module.scss        | 41 ++++++++++++++++++++++++------
 6 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/_mixins.scss b/src/_mixins.scss
index 8223027..f9db90a 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -45,13 +45,18 @@
     display: flex;
     padding: 10px;
     text-align: center;
-    background: $accentColor;
+    background: $accentColorDarker;
     color: white;
     text-decoration: none;
     box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
     transition: box-shadow 0.25s;
     align-items: center;
     justify-content: center;
+    text-shadow: 0 0 10px black;
+
+    @media(prefers-color-scheme: light) {
+        background-color: $accentColor;
+    }
     
     svg {
         margin-left: 10px;
diff --git a/src/_variables.scss b/src/_variables.scss
index 5f66a5d..b8cbab4 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,6 @@
 $layoutWidth: 1200px;
 $accentColor: #e52b3e;
+$accentColorDarker: darken($accentColor, 5);
 $background: #070707;
 $lightBackground: #fff;
 $textColor: white;
diff --git a/src/components/languageSwitcher.js b/src/components/languageSwitcher.js
index b665431..71e28a6 100644
--- a/src/components/languageSwitcher.js
+++ b/src/components/languageSwitcher.js
@@ -7,7 +7,7 @@ export default function LanguageSwitcher() {
     const { languages, originalPath } = useI18next();
 
     return (
-        <div className={styles.languageModal} id="languageChooser">
+        <div className={styles.languageModal} id="languageChooser" role="dialog">
             <div className={styles.languageModalInner}>
                 <h2>
                     Languages (
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index e757cd3..dbaceab 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -68,9 +68,6 @@ section > article,
 }
 
 article {
-    p {
-        text-align: justify;
-    }
 
     a {
         color: $accentColor;
diff --git a/src/pages/index.js b/src/pages/index.js
index 33482be..3624d0f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -113,7 +113,7 @@ const IndexPage = (props) => {
 
     return (
         <Layout title="Kevin Kandlbinder" transparentTopbar={true} description={t("siteDescription")}
-        image={meta.siteUrl + "/owner.jpg"}
+        image={"/owner.jpg"}
         speakable={{
             "@type": "SpeakableSpecification",
             "xPath": [
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 3bdf9ba..788b00a 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -241,21 +241,46 @@
                         color: #e52b3e;
                     }
 
-                    &.skill_language {
-                        color: #6848da;
-                    }
-
                     &.skill_platform {
                         color: #e5752b;
                     }
 
-                    &.skill_os {
-                        color: #2b66e5;
-                    }
-
                     &.skill_program {
                         color: #18bb20;
                     }
+
+                    &.skill_os {
+                        color: #6d94e9;
+                    }
+
+                    &.skill_language {
+                        color: #886af5;
+                    }
+
+
+                    @media(prefers-color-scheme: light) {
+
+                        &.skill_os {
+                            color: #2b66e5;
+                        }
+
+                        &.skill_language {
+                            color: #6848da;
+                        }
+
+                        &.skill_framework {
+                            color: #db1e31;
+                        }
+    
+                        &.skill_platform {
+                            color: #aa4f12;
+                        }
+    
+                        &.skill_program {
+                            color: #17681b;
+                        }
+
+                    }
                 }
             }
         }