add: github button

apps/web/src/components/Github.css

@@ -0,0 +1,12 @@
+button.github-btn {
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: var(--style-color);
+        transition: fill 0.2s ease-in-out; 
+    }
+    @media (hover: hover) {
+        &:hover svg { fill: var(--style-background); }
+    }
+    &:active svg{ fill: var(--style-background); }
+}

apps/web/src/components/Github.tsx

@@ -0,0 +1,20 @@
+import './Github.css'
+export function Github() {
+    return (
+        <button
+            className="github-btn"
+            onClick={() => window.open('https://github.com/VickScarlet/remake')}
+        >
+            <svg
+                fill="currentColor"
+                width="800px"
+                height="800px"
+                viewBox="0 0 1024 1024"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" />
+            </svg>
+        </button>
+    )
+}
+export default Github

apps/web/src/components/ThemeToggle.tsx

@@ -65,8 +65,9 @@ export function ThemeToggle() {
                     cy="12"
                     r="5"
                     mask="url(#ios-fail-proof-mask)"
+                    fill="currentColor"
                 />
-                <g className="sun-beams">
+                <g className="sun-beams" stroke="currentColor">
                     <line x1="12" y1="1" x2="12" y2="3" />
                     <line x1="12" y1="21" x2="12" y2="23" />
                     <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />

apps/web/src/containers/Home.css

@@ -7,19 +7,19 @@
         justify-content: center;
         .main { font-weight: bold; }
     }
-    .theme-toggle-btn {
+    > .actions {
         position: fixed;
         bottom: 1rem;
         right: 1rem;
+        width: auto;
         display: flex;
-        width: 2.5rem;
+        gap: 1rem;
-        height: 2.5rem;
+        >.github-btn,
-        padding: 0.25rem;
+        >.theme-toggle-btn {
-        cursor: pointer;
+            width: 2.5rem;
-        align-items: center;
+            height: 2.5rem;
-        justify-content: center;
+            padding: 0.25rem;
-        -webkit-tap-highlight-color: transparent;
+        }
-        transition: background-color 0.3s;
     }
     >.controls {
         flex-direction: column;

apps/web/src/containers/Home.tsx

@@ -1,6 +1,7 @@
 import { useRemake, useFeatures, useGoAchv, useGoThanks } from '@remake/hooks'
 import { TextSvg } from '@/components/TextSvg'
 import ThemeToggle from '@/components/ThemeToggle'
+import Github from '@/components/Github'
 import './Home.css'
 
 export default function Home() {
@@ -31,7 +32,10 @@ export default function Home() {
                     </div>
                 )}
             </div>
-            <ThemeToggle />
+            <div className="actions">
+                {features && <Github />}
+                <ThemeToggle />
+            </div>
         </div>
     )
 }

apps/web/src/styles/common.css

@@ -66,6 +66,7 @@ button {
     user-select: none;
     transition: all 0.2s ease-in-out;
     outline: none;
+    -webkit-tap-highlight-color: transparent;
     @media (hover: hover) {
         &:hover {
             background: var(--style-color);