From 81eaf2fd5e5980c0c4d59a8805cf541fa8fe51f9 Mon Sep 17 00:00:00 2001
From: zyachel <aricla@protonmail.com>
Date: Sat, 31 Dec 2022 22:10:19 +0530
Subject: [PATCH] fix: couple css improvements for webkit-based browsers

introduces a new mixin to handle webkit-based shenanigans.
also adds a mixin to make keyboard navigation easier.
and other small tweaks to css(like accent color and color scheme).
---
 src/styles/abstracts/_mixins.scss             | 18 +++++++++++++++
 src/styles/abstracts/variables/_themes.scss   |  5 +++-
 src/styles/base/_base.scss                    | 23 +++++++++++++++++++
 src/styles/base/_index.scss                   |  2 +-
 src/styles/base/_root.scss                    |  5 ++++
 .../modules/pages/about/about.module.scss     |  5 ++++
 6 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 26e381f..55e0c2d 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -78,3 +78,21 @@
     background-size: 100% $height;
   }
 }
+
+////////////////////////////////////////////////////////////////
+//           CHECK IF BROWSER IS SAFARI(it's the new IE)
+////////////////////////////////////////////////////////////////
+
+@mixin fix-for-safari {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    @content;
+  }
+}
+
+////////////////////////////////////////////////////////////////
+//           
+////////////////////////////////////////////////////////////////
+@mixin focus-rules {
+  outline: 3px solid var(--clr-highlight);
+  outline-offset: 0.2em;
+}
\ No newline at end of file
diff --git a/src/styles/abstracts/variables/_themes.scss b/src/styles/abstracts/variables/_themes.scss
index 47a51c7..9210018 100644
--- a/src/styles/abstracts/variables/_themes.scss
+++ b/src/styles/abstracts/variables/_themes.scss
@@ -34,7 +34,9 @@ $_light: (
         transparent 70%
       ),
       radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
-    )
+    ),
+  // changes color of native html elemnts, either 'light' or 'dark' must be set.
+  scheme: light
 );
 
 $_dark: (
@@ -54,6 +56,7 @@ $_dark: (
     radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.04) 0px, transparent 70%),
     radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.05) 0px, transparent 50%),
   ),
+  scheme: dark,
 );
 
 $themes: (
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 33586b5..cf38294 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -9,11 +9,17 @@ body {
 #__next {
   display: grid;
   grid-template-rows: min-content 1fr min-content;
+
+  &:has(span[role='progressbar']) {
+    cursor: progress;
+  }
 }
 
 body {
   color: var(--clr-text);
   background-color: var(--clr-bg);
+  color-scheme: var(--clr-scheme);
+  accent-color: var(--clr-fill);
 }
 
 // restricting to 1600px width
@@ -22,3 +28,20 @@ body {
   width: min(100%, var(--max-width));
   margin-inline: auto;
 }
+
+////////////////////////////////////////////////////////
+//                 KEYBOARD NAVIGATION
+////////////////////////////////////////////////////////
+:focus {
+  @include helper.focus-rules;
+}
+
+@supports selector(:focus-visible) {
+  :focus {
+    outline: none;
+  }
+
+  :focus-visible {
+    @include helper.focus-rules;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss
index cd69eae..d482e07 100644
--- a/src/styles/base/_index.scss
+++ b/src/styles/base/_index.scss
@@ -1,5 +1,5 @@
 @forward './reset';
-// @forward './helpers';
+@forward './helpers';
 @forward './root';
 @forward './base';
 @forward './fonts';
diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
index 5e6a2a5..1831f7b 100644
--- a/src/styles/base/_root.scss
+++ b/src/styles/base/_root.scss
@@ -24,4 +24,9 @@
   @include helper.bp('bp-700') {
     @include helper.typescale('mobile');
   }
+
+  // not using any external fonts on webkit because of many issues
+  @include helper.fix-for-safari {
+    --ff-accent: var(--ff-base);
+  }
 }
diff --git a/src/styles/modules/pages/about/about.module.scss b/src/styles/modules/pages/about/about.module.scss
index 12ef704..c017add 100644
--- a/src/styles/modules/pages/about/about.module.scss
+++ b/src/styles/modules/pages/about/about.module.scss
@@ -96,6 +96,11 @@
       content: '+';
       font-weight: bold;
     }
+
+    // fix for webkit(not including blink)
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   &__description {