feat: focus ring style

Author: knokmki612

assets/script/index.ts

@@ -1,3 +1,7 @@
+import cssHasPseudo from "css-has-pseudo/browser";
+
+cssHasPseudo(document);
+
 (() => {
   if (document.getElementsByClassName("twitter-tweet").length === 0) return;
   if (!window.twttr) {

assets/style/_base.css

@@ -6,7 +6,7 @@
   letter-spacing: 0.0125rem;
 }
 
-:focus {
+:focus-visible {
   outline: 2px solid var(--color-anchor);
   outline-offset: 1px;
 }
@@ -57,4 +57,8 @@ a {
   &:visited {
     color: var(--color-anchor-visited);
   }
+
+  &:has(> img) {
+    display: inline-flex;
+  }
 }

assets/style/components/_article-tab.css

@@ -1,4 +1,7 @@
 .article-tab {
+  margin: -2px;
+  padding: 2px;
+
   ul {
     display: flex;
     justify-content: center;

assets/style/components/_social-button.css

@@ -22,11 +22,4 @@
       background-color: #00a4de;
     }
   }
-
-  img {
-    display: inline-block;
-    height: 0.75rem;
-    padding-right: 0.25rem;
-    vertical-align: bottom;
-  }
 }

package.hugo.json

@@ -3,12 +3,13 @@
   "version": "3.1.3",
   "author": "knokmki612 <[email protected]>",
   "dependencies": {
-    "autoprefixer": "10.4.0",
+    "autoprefixer": "10.4.5",
+    "css-has-pseudo": "3.0.4",
     "modern-normalize": "1.1.0",
-    "postcss": "8.3.11",
-    "postcss-cli": "9.0.2",
-    "postcss-csso": "5.0.1",
-    "postcss-import": "14.0.2",
+    "postcss": "8.4.12",
+    "postcss-cli": "9.1.0",
+    "postcss-csso": "6.0.0",
+    "postcss-import": "14.1.0",
     "postcss-nested": "5.0.6"
   }
 }

postcss.config.js

@@ -7,6 +7,7 @@ module.exports = () => ({
       path: [join(__dirname, "assets", "style")]
     },
     'postcss-nested': {},
+    'css-has-pseudo': {},
     autoprefixer: {},
     'postcss-csso': {},
   }