refactor: improve readability of _variables.css (#2359)

algolia · Nov 16, 2024 · f3dc646 · f3dc646
1 parent 8e419a0
commit f3dc646
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/packages/docsearch-css/src/_variables.css b/packages/docsearch-css/src/_variables.css
@@ -38,7 +38,9 @@
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
     inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
-  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,
+    inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, 0.4);
+
   /* footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: #fff;
@@ -66,7 +68,8 @@ html[data-theme='dark'] {
   );
   --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
     inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55,
+    inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
   --docsearch-footer-background: rgb(30, 33, 54);
   --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
     0 -4px 8px 0 rgba(0, 0, 0, 0.2);

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -57,8 +57,8 @@
   justify-content: center;
   margin-right: 0.4em;
   position: relative;
-  padding: 0px 0px 2px 0px;
-  border: 0px;
+  padding: 0 0 2px;
+  border: 0;
   top: -1px;
   width: 20px;
 }
@@ -68,7 +68,7 @@
   box-shadow: var(--docsearch-key-pressed-shadow);
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {
     display: none;

diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
@@ -545,9 +545,9 @@ svg.DocSearch-Hit-Select-Icon {
   height: 18px;
   justify-content: center;
   margin-right: 0.4em;
-  padding: 0px 0px 1px 0px;
+  padding: 0 0 1px;
   color: var(--docsearch-muted-color);
-  border: 0px;
+  border: 0;
   width: 20px;
 }
 
@@ -564,7 +564,7 @@ assistive tech users */
 }
 
 /* Responsive */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   :root {
     --docsearch-spacing: 10px;
     --docsearch-footer-height: 40px;
@@ -643,6 +643,7 @@ assistive tech users */
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
@@ -1,5 +1,5 @@
-@import url(fragments.css);
-@import 'tailwindcss/tailwind.css';
+@import url('fragments.css');
+@import url('tailwindcss/tailwind.css');
 
 :root {
   --ifm-font-size-base: 16px;
@@ -29,7 +29,7 @@ html[data-theme='dark'] {
 }
 
 /* DocSearch x Algolia logo */
-@media (max-width: 565px) {
+@media (width <=565px) {
   .navbar__logo .docsearch-nav-logo {
     width: 70%;
     height: auto;
@@ -38,13 +38,12 @@ html[data-theme='dark'] {
 }
 
 /* DocSearch x Algolia logo in sidebar */
-@media (min-width: 997px) {
+@media (width >=997px) {
   .theme-doc-sidebar-container .docsearch-nav-logo {
     height: auto;
   }
 }
 
-
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
@@ -119,7 +118,7 @@ html[data-theme='dark'] #hero-apply > div:first-child {
 
 html[data-theme='dark'] .apply-form {
   background-image: radial-gradient(
-    circle at 50% 0px,
+    circle at 50% 0,
     rgb(72, 76, 122),
     rgb(35, 38, 59)
   );
@@ -181,7 +180,7 @@ html[data-theme='dark'] .docsearch-logo {
   opacity: 0.6;
 }
 
-.header-github-link:before {
+.header-github-link::before {
   content: '';
   width: 24px;
   height: 24px;
@@ -190,7 +189,7 @@ html[data-theme='dark'] .docsearch-logo {
     no-repeat;
 }
 
-html[data-theme='dark'] .header-github-link:before {
+html[data-theme='dark'] .header-github-link::before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }