Add outlines, remove unused transition/border-radius

ekaterinburgdev · Dec 21, 2023 · d03e356 · d03e356 · ekbdev · Dec 21, 2023
1 parent 06241de
commit d03e356
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 18 deletions.
diff --git a/components/ArrowNavLink/ArrowNavLink.module.css b/components/ArrowNavLink/ArrowNavLink.module.css
@@ -1,10 +1,9 @@
 .ArrowNavLink {
     box-shadow: none;
     margin: 0 0 76px;
-    border-radius: 2rem;
     font-weight: 400;
     font-size: clamp(14px, 1.8vw, 18px);
-    transition: 0.3s;
+    transition: 0.3s ease text-decoration-color;
     color: var(--color);
 }
 

diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css
@@ -10,6 +10,7 @@
     cursor: pointer;
     transition: all 0.15s ease;
     text-decoration: none;
+    outline-offset: 3px;
 }
 
 .Button_type-primary {

diff --git a/components/Ecosystem/Ecosystem.module.css b/components/Ecosystem/Ecosystem.module.css
@@ -3,6 +3,12 @@
     --ecosystem-color: var(--color-bg-light);
 }
 
+.Ecosystem a:focus-visible,
+.Ecosystem button:focus-visible  {
+    outline: 2px solid black;
+    outline-offset: 4px;
+}
+
 @media print {
     .Ecosystem {
         display: none;

diff --git a/components/ManualPreview/ManualPreview.module.css b/components/ManualPreview/ManualPreview.module.css
@@ -14,10 +14,7 @@
     font-weight: 500;
     font-size: clamp(18px, 5vw, 21px);
     background: var(--manual-bg-back);
-}
-
-.manual:focus-visible {
-    outline-width: 0;
+    outline-offset: 3px;
 }
 
 .manualEmoji {
@@ -71,10 +68,6 @@
     transform: matrix(1, -0.125, 0, 1, 0, 0) scaleX(0.95);
 }
 
-.manual:focus-visible {
-    outline: 2px solid black;
-}
-
 .manualTitle {
     position: relative;
     font-weight: 400;

diff --git a/components/ManualTitle/ManualTitle.module.css b/components/ManualTitle/ManualTitle.module.css
@@ -6,7 +6,6 @@
 .ManualTitle__mainpage {
     position: relative;
     align-self: flex-start;
-    border-radius: 16px;
     padding-top: 4px;
     color: var(--color);
     font-size: 14px;
@@ -33,6 +32,7 @@
     top: 4px;
     right: -12px;
     opacity: 0.6;
+    outline: none;
 }
 
 .ManualTitle__caption {

diff --git a/components/ProjectLinks/ProjectLinks.module.css b/components/ProjectLinks/ProjectLinks.module.css
@@ -11,6 +11,8 @@
 .ProjectLinks__github {
     display: none;
     color: black;
+    outline-offset: 3px;
+    border-radius: 50%;
 }
 
 .ProjectLinks__github svg {

diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css
@@ -82,6 +82,7 @@ html:has(.open) {
     font-size: 16px;
     border-radius: 8px;
     transition: 0.15s ease;
+    outline-offset: -1px;
 }
 
 .tableOfContentsLink:not(:only-child) {

diff --git a/components/Toolbar/Toolbar.module.css b/components/Toolbar/Toolbar.module.css
@@ -41,11 +41,9 @@
     border-radius: 50%;
     background: transparent;
     color: var(--color);
-    outline: none;
-    outline-width: 0;
     font-size: 0;
     cursor: pointer;
-    transition: 0.15s ease;
+    transition: 0.15s ease color, 0.15s ease background-color;
 }
 
 .Toolbar__item:hover {
@@ -58,10 +56,6 @@
     color: white;
 }
 
-.Toolbar__item:focus-visible svg {
-    box-shadow: inset 0 0 0 2px black;
-}
-
 .hidden {
     visibility: hidden;
 }