feat(extension): make it look much better

extension/src/ash.css

@@ -0,0 +1,241 @@
+:root {
+    --background: #13092b;
+    --background-transparent: #13092baa;
+    --background-2: #090f2b;
+    --foreground: #ddd;
+    --foreground-bright: #fff;
+    --foreground-dim: #aaa;
+    --error: orange;
+    --accent: #f9027a;
+    --accent-dim: hsl(331, 50%, 49%);
+}
+
+body {
+    font-family: sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    margin: 0;
+    box-sizing: border-box;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
+}
+
+a {
+    color: var(--foreground);
+}
+
+h1 {
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+h1::before {
+    content: '# ';
+    margin-right: 16px;
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h2::before {
+    content: '## ';
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h3::before {
+    content: '### ';
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h4::before {
+    content: '#### ';
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h5::before {
+    content: '##### ';
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h6::before {
+    content: '###### ';
+    color: var(--foreground-dim);
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+.page-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+}
+
+.content {
+    margin: 16px;
+    padding: 8px;
+    width: calc(100% - 32px);
+    max-width: 720px;
+    flex: 1;
+    background-color: var(--background-transparent);
+}
+
+.content img {
+    max-width: 100%;
+    align-self: center;
+}
+
+.footer {
+    margin-bottom: 16px;
+    text-align: center;
+}
+
+.generated {
+    font-size: 12px;
+}
+
+blockquote {
+    border-left: var(--accent) 2px solid;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    padding-inline-start: 20px;
+    margin-inline-start: 10px;
+    margin-inline-end: 20px;
+    color: var(--foreground-dim);
+}
+
+pre {
+    overflow-x: auto;
+    border: var(--accent) 1px solid;
+    padding-left: 24px;
+    background-color: var(--background-2) !important;
+    border-radius: 4px;
+}
+
+pre::-webkit-scrollbar, code::-webkit-scrollbar {
+    height: 8px;
+}
+
+pre::-webkit-scrollbar-track, code::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+pre::-webkit-scrollbar-thumb, code::-webkit-scrollbar-thumb {
+    background-color: var(--accent);
+    border-radius: 2px;
+}
+
+pre::-webkit-scrollbar-thumb:hover, code::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-dim);
+}
+
+code {
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+    color: #edafb8;
+    text-decoration-color: initial;
+    border: #ffffff88 1px solid;
+    padding: 0.1em 0.2em;
+    border-radius: 4px;
+    background-color: var(--background-2);
+}
+
+a > code {
+    text-decoration: underline;
+}
+
+pre > code {
+    border: none;
+    padding: 0;
+}
+
+.icon-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+.icon-row svg {
+    transition: fill 200ms ease;
+    fill: white;
+}
+
+.hover-email:hover {
+    fill: var(--accent);
+}
+
+.hover-matrix:hover {
+    color: #0DBD8B;
+}
+
+.hover-github:hover {
+    fill: #24292f;
+}
+
+.hover-mastodon:hover {
+    fill: #3c99dc;
+}
+
+.hover-reddit:hover {
+    fill: #ff4500;
+}
+
+.hover-twitch:hover {
+    fill: #6441a5;
+}
+
+.hover-gitea:hover {
+    fill: #609926;
+}
+
+.hover-kofi:hover {
+    fill: #ff5a6a;
+}
+
+.icon {
+    height: 1.2em;
+    fill: var(--foreground-dim);
+    vertical-align: sub;
+}
+
+table, th, td {
+    border: var(--accent-dim) 1px solid;
+}
+
+table {
+    border-spacing: 0;
+    overflow-x: scroll;
+    border-width: 2px;
+    border-radius: 4px;
+}
+
+th {
+    padding: 0 1rem;
+}
+
+td {
+    padding: 8px;
+}
+
+/* app-specific styles */
+tr.code-bad {
+    color: var(--foreground-dim);
+}
+
+td.code-bad {
+    text-decoration: line-through;
+}

extension/src/popup.html

@@ -6,13 +6,15 @@
         <title>Checkin Codes</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="ash.css">
         <script src="config.js"></script>
         <script src="popup.js" defer></script>
     </head>
     <body>
-        <main id="root">
-            <h1>Available codes</h1>
-        </main>
+        <div class="page-container">
+            <main class="content" id="root">
+                <h1>Available codes</h1>
+            </main>
+        </div>
     </body>
 </html>

extension/src/popup.js

@@ -3,11 +3,15 @@
 
     function codeTable(codes) {
         const table = document.createElement('table');
-        table.innerHTML = '<thead><tr><td>Code</td><td>Score</td></tr></thead>';
+        table.innerHTML = '<thead><tr><th>Code</th><th>Score</th></tr></thead>';
         const body = document.createElement('tbody');
         for (const { code, score } of codes) {
             const row = document.createElement('tr');
             const codeEle = document.createElement('td');
+            if (score <= 0) {
+                row.classList.add('code-bad');
+                codeEle.classList.add('code-bad');
+            }
             codeEle.innerText = code;
             row.appendChild(codeEle);
             const scoreEle = document.createElement('td');

extension/src/styles.css

@@ -1,14 +0,0 @@
-html, body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-    font-size: 16px;
-}
-
-main {
-    padding: 8px;
-}
-
-h1 {
-    margin: 0;
-}