Support dark mode

Author: zzq0826

src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx

@@ -31,7 +31,7 @@ const AdditionalInfo = ({ data, selectedTool, onClose }) => {
                 fill-rule="evenodd"
                 clip-rule="evenodd"
                 d="M17.731 1.56775C18.0897 1.20911 18.0897 0.627628 17.731 0.268984C17.3724 -0.0896612 16.7909 -0.0896612 16.4322 0.268984L9 7.70123L1.56775 0.268984C1.20911 -0.0896611 0.627629 -0.0896611 0.268984 0.268984C-0.0896607 0.627628 -0.0896607 1.20911 0.268984 1.56775L7.70123 9L0.268984 16.4323C-0.0896612 16.7909 -0.0896612 17.3724 0.268984 17.731C0.627628 18.0897 1.20911 18.0897 1.56775 17.731L17.731 1.56775ZM12.0065 10.7078C11.6479 10.3491 11.0664 10.3491 10.7078 10.7078C10.3491 11.0664 10.3491 11.6479 10.7078 12.0065L16.4322 17.731C16.7909 18.0897 17.3724 18.0897 17.731 17.731C18.0897 17.3724 18.0897 16.7909 17.731 16.4322L12.0065 10.7078Z"
-                fill="black"
+                fill="currentColor"
               />
             </svg>
           </div>

src/components/Tooling/Content/Content.module.css

@@ -2,11 +2,13 @@
   border-radius: 27px;
   /* background: #fff8f3; */
   padding: 30px;
+  margin-bottom: 30px;
 }
 
 .toolsList {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr minmax(424px, 1fr);
+  /* grid-template-columns:  8fr 2fr; */
   gap: 30px;
   margin-top: 30px;
 }

src/layouts/MainLayout.astro

@@ -137,15 +137,20 @@ changeLanguage(content.lang)
           margin-right: 20px;
         }
 
-        .wider-content {
-          grid-template-columns: minmax(230px, 2fr) 8fr 2fr;
-        }
-
         #grid-right {
           grid-column: 3;
           display: flex;
         }
       }
+
+      @media screen and (max-width: 90em) and (min-width: 72em) {
+        .wider-content {
+          grid-template-columns: 1fr minmax(0, 68vw);
+        }
+        .wider-content #grid-right {
+          display: none;
+        }
+      }
     </style>
     <style is:global>
       .layout > * {