Github button styles

drift_website/lib/_style.scss

@@ -3,6 +3,7 @@
 
 @use "src/styles/base";
 @use "src/styles/details";
+@use "src/styles/github";
 @use "src/styles/header";
 @use "src/styles/sidebar";
 @use "src/styles/ui";

drift_website/lib/src/styles/_github.scss

@@ -0,0 +1,50 @@
+.github-button {
+  display: flex;
+  padding: 0.7rem 0.4rem;
+  border-radius: 8px;
+  align-items: center;
+  column-gap: 0.5rem;
+  font-size: 0.7rem;
+  text-decoration: none;
+  line-height: 1.2em;
+
+  &:hover {
+    background-color: color-mix(in srgb, currentColor 5%, transparent);
+  }
+
+  & * {
+    transition: opacity 200ms ease-in-out;
+  }
+
+  &:hover * {
+    opacity: 1!important;
+  }
+
+  .github-icon {
+    width: 1.2rem;
+  }
+
+  .github-info {
+    display: flex;
+    flex-direction: column;
+
+    & > span:first-child {
+        margin-bottom: 2px;
+        opacity: 0.9;
+        font-family: "monospace";
+    }
+
+    & > span:last-child {
+        display: flex;
+        opacity: 0.7;
+        align-items: center;
+        column-gap: 0.3em;
+        font-size: 0.9em;
+        font-weight: 800;
+
+        span {
+            font-weight: 500;
+        }
+    }
+  }
+}