Style Changes

components/logo.tsx

@@ -1,7 +1,7 @@
 export default function Logo(props) {
     return (
         <>
-            <svg width={44 * (props.size ?? 1)} height={56 * (props.size ?? 1)} viewBox="0 0 28 22" xmlns="http://www.w3.org/2000/svg">
+            <svg className={`logo`} width={44 * (props.size ?? 1)} height={56 * (props.size ?? 1)} viewBox="0 0 28 22" xmlns="http://www.w3.org/2000/svg">
                 <path fill={props.color ?? `hsl(var(--nextra-primary-hue)100% 50%/1)`} d="M18.6763 18.1558C18.2968 17.957 17.9342 17.729 17.5919 17.4738L18.6763 18.1558ZM17.5919 17.4738C17.1352 17.4123 16.8574 17.6355 17.5164 18.292C17.6059 18.3508 17.6691 18.4406 17.6932 18.5434C17.7173 18.6461 17.7003 18.7539 17.6459 18.8448C16.5103 18.3316 16.549 18.9327 17.0102 19.6859C15.3262 19.2816 16.798 20.6193 16.059 20.788C15.105 20.4461 15.2803 21.5527 15.9753 21.71C16.5723 21.1185 18.7689 19.4943 18.7122 18.2437C18.7019 18.2137 18.6899 18.1844 18.6763 18.1558C18.2968 17.957 17.9342 17.729 17.5919 17.4738ZM11.7307 20.788C10.9916 20.6193 12.4625 19.2816 10.7794 19.6859C11.2406 18.9362 11.2793 18.3316 10.1437 18.8448C10.0891 18.7539 10.072 18.6461 10.0961 18.5433C10.1201 18.4405 10.1835 18.3506 10.2732 18.292C11.0392 17.5283 10.5429 17.3508 9.96391 17.5256C9.669 17.7638 9.3705 17.9994 9.07829 18.2411C9.02164 19.4917 11.2182 21.1159 11.8152 21.7073C12.5084 21.5527 12.6846 20.4461 11.7307 20.788ZM6.62912 14.403C6.83053 14.8171 7.06314 15.2161 7.32503 15.5965C8.19351 15.2086 8.96652 14.6427 9.59168 13.9372C9.30756 13.4565 9.23203 12.7806 9.53413 11.9342C9.85809 12.1928 10.1964 12.4336 10.5474 12.6558C11.1578 11.6426 11.5726 10.5285 11.7711 9.36881C10.4287 9.46988 8.93443 9.69223 7.79167 10.2846C7.09306 10.9631 7.18657 12.2128 7.36099 13.0741C7.91394 14.1956 7.21264 13.8643 6.62912 14.403ZM20.9816 14.4223C20.595 15.2476 19.4261 17.1055 18.5657 17.102C18.2528 16.5413 17.7322 16.5747 17.4634 15.8795C16.2945 16.2451 15.6031 16.9763 15.4197 18.2033C14.7562 17.4799 14.6051 18.379 14.0647 18.0626C14.0315 18.0119 13.9832 17.9724 13.9263 17.9495C13.8693 17.9265 13.8066 17.9212 13.7465 17.9343V17.9115C13.6644 17.9283 13.5923 17.9756 13.5451 18.0433C13.0056 18.3615 12.8536 17.4606 12.191 18.183C12.0624 17.3253 11.6839 16.7109 11.0689 16.2926C10.7854 16.1042 10.4748 15.9582 10.1473 15.8593C9.87759 16.5527 9.35701 16.5211 9.04412 17.0818C8.64402 17.0818 8.17738 16.6819 7.7539 16.1687C8.57352 15.6712 9.32261 15.0704 9.98189 14.3819C10.8279 15.0595 12.3079 14.8908 13.0964 13.6445C12.4066 13.5273 11.7405 13.3024 11.1238 12.9783C11.891 11.864 12.446 10.6233 12.7619 9.31608H12.7691C13.3688 9.28411 13.9701 9.2991 14.5673 9.3609C16.1588 9.44351 18.5279 9.64126 19.8172 10.3092C20.5158 10.9877 20.4223 12.2427 20.2479 13.0996C19.6922 14.2158 20.3971 13.8862 20.9816 14.4223ZM14.5799 15.8197C14.3884 15.5816 14.1025 14.8196 13.795 14.5252C13.4956 14.8328 13.2178 15.5666 13.0308 15.7995C12.7745 16.21 13.3194 16.4552 13.4632 16.6608C13.5634 16.5568 13.6864 16.4763 13.8229 16.4253C13.9496 16.4692 14.0027 16.5475 14.1501 16.681C14.2913 16.4728 14.8371 16.2284 14.5799 15.8197ZM18.0739 11.9527C17.0246 12.778 15.9097 13.4301 14.5152 13.6639C15.836 15.7486 19.0943 14.824 18.0739 11.9527ZM28 7.69982C27.697 8.46357 27.0802 8.59716 26.5407 9.10602C22.9003 11.5467 25.0347 14.7361 22.3069 11.1415L22.894 10.9042C21.3448 9.23434 17.7583 8.32383 14.1313 8.31152C10.5007 8.32383 6.65609 9.23258 5.10603 10.9042L5.69405 11.1415C2.96526 14.7361 5.09974 11.5467 1.46015 9.10602C0.920688 8.59716 0.302999 8.46357 0 7.69982L0.0899131 7.61194C5.72102 9.49185 6.23621 1.00016 11.0338 0C11.3935 1.19615 12.574 2.28947 13.938 2.23586V2.22707L14.0027 2.23146L14.0683 2.22707V2.23586C15.4314 2.28947 16.6164 1.19615 16.9715 0C21.7701 1.00016 22.2853 9.49185 27.9092 7.61457L28 7.69982ZM14.0324 5.97635L15.5087 7.00815L15.8513 6.54059L14.4774 5.58086L15.854 4.61409L15.5114 4.14653L14.0153 5.19591H14.0099L12.5156 4.15093L12.1739 4.61849L13.5504 5.58525L12.1739 6.54235L12.5156 7.00991L13.9919 5.97635H14.0324ZM22.8679 6.75943C21.3196 4.68968 20.1778 2.09084 17.8437 0.856024C17.4454 0.466683 16.5714 2.39493 14.4001 2.93193C14.2673 2.93169 14.1347 2.92436 14.0027 2.90996C13.871 2.92438 13.7387 2.93172 13.6062 2.93193C11.4339 2.39493 10.56 0.471077 10.1626 0.856024C7.82493 2.09084 6.68576 4.68968 5.1384 6.76119C7.03552 5.2214 7.62263 3.2826 10.3532 1.73578C11.3674 3.05849 12.7439 3.77037 14.0638 3.77916C15.3828 3.76686 16.7432 3.07079 17.7574 1.74896C20.488 3.29842 20.9699 5.2214 22.8679 6.76119V6.75943Z" />
             </svg>
             {props.title && <>

main.scss

@@ -1,10 +1,16 @@
-// *,
-// *::before,
-// *::after {
-//     margin: 0;
-//     padding: 0;
-//     box-sizing: border-box;
-// }
+/* Montserrat */
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+/* Caveat */
+@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 
 :root {
     --containerWidth: 90%;
@@ -47,17 +53,78 @@
     --dangerColor: rgba(255, 28, 11, 0.75);
     --softWhite: rgba(255, 255, 255, 0.87);
     --gameBlueSoft: rgba(0, 194, 255, 0.75);
+    --softSkyBlue: rgba(132, 169, 177, 1) !important;
     --transition: 0.24s cubic-bezier(0.77, 0.2, 0.05, 1) !important;
 }
 
+html[class~=dark] .dark\:nx-bg-dark {
+    background: black !important;
+    padding: 1em;
+    margin: 0;
+}
+
+html[class~=dark] .dark\:nx-text-neutral-500, html[class~=dark] .dark\:nx-text-gray-400 {
+    transition: var(--transition) !important;
+    color: var(--softWhite) !important;
+    &:hover {
+        color: white !important;
+    }
+}
+
+header, nav {
+    background: black !important;
+    border-bottom: solid 1px var(--bg);
+    --tw-shadow: 0 -12px 16px #111;
+}
+
+.logo {
+    transition: var(--transition) !important;
+    padding: .5rem .5rem .5rem 0;
+    -webkit-mask-image: -webkit-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    mask-image: -webkit-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    mask-image: -moz-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    mask-image: -o-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    mask-image: linear-gradient(60deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    -webkit-mask-size: 400%;
+    mask-size: 400%;
+    -webkit-mask-position: 0%;
+    mask-position: 0%;
+    &:hover {
+        mask-position: 100%;
+        -webkit-mask-position: 100%;
+        transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        -o-transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        -moz-transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        -webkit-transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        mask-image: -webkit-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+        -webkit-mask-image: -webkit-linear-gradient(30deg, black 25%, rgba(0, 0, 0, .2)50%, black 75%);
+    }
+}
+
+main {
+    --tw-shadow: 0 -12px 16px #111;
+    // border-top: solid 1px var(--bg);
+    border-left: solid 1px var(--bg);
+    border-right: solid 1px var(--bg);
+}
+
+footer {
+    display: none;
+}
+
+.nx-max-w-\[90rem\] {
+    max-width: 100% !important;
+    padding: 1.5em !important;
+}
+
 body {
     // margin: 0;
     // padding: 0;
     // width: 100%;
     // overflow-x: hidden;
     background: black !important;
-    // font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    //     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 
     // &.Game {
     //     overflow-y: hidden !important;