Adjust accessibility

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;

src/_variables.scss

@@ -1,5 +1,6 @@
 $layoutWidth: 1200px;
 $accentColor: #e52b3e;
+$accentColorDarker: darken($accentColor, 5);
 $background: #070707;
 $lightBackground: #fff;
 $textColor: white;

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 (

src/layouts/default.scss

@@ -68,9 +68,6 @@ section > article,
 }
 
 article {
-    p {
-        text-align: justify;
-    }
 
     a {
         color: $accentColor;

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": [

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;
+                        }
+
+                    }
                 }
             }
         }