Website redesign: unified light theme, polished docs, data-driven pages

.github/workflows/deploy.yaml

@@ -43,6 +43,10 @@ jobs:
 
       - name: Build
         run: npm run build-with-docs
+        env:
+          # Used by scripts/stars.js to lift the GitHub API rate limit
+          # from 60/hr (anonymous) to 1,000/hr.
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v4

assets/scss/_custom_contributors.scss

@@ -1,149 +1,93 @@
+// =====================================================================
+// /contributors page — light theme. Keeps the filter mechanic from
+// script-search.html: rows hidden until .item-wrapper gets .show, and the
+// matched login's contribution/ranking divs are revealed by JS.
+// (uses $ink/$body/$muted/$line/$brand/$brand-grad from _custom_home.scss)
+// =====================================================================
 .td-contributors {
-  .page-title {
-    margin-bottom: 0.5em;
-  }
-  .head-wrapper {
-    display: flex;
-    line-height: 40px;
-    font-size: 15px;
-    font-weight: bold;
-    background-color: #f6f8fa;
-    padding: 0 0.4em;
-    position: sticky;
+  background: #fff;
 
-    .title {
-      flex: 1;
-      padding: 0.6em;
+  .eyebrow {
+    display: inline-block; font-size: 12px; font-weight: 700;
+    letter-spacing: .14em; text-transform: uppercase; color: $brand; margin-bottom: 12px;
+  }
 
-      &:nth-child(1) {
-        flex: 1.8;
-      }
+  .contrib-hero {
+    padding: calc(4rem + 30px) 0 28px;
+    background:
+      radial-gradient(800px 380px at 12% 0%, rgba(55,136,208,.10), transparent 60%),
+      radial-gradient(640px 340px at 100% 0%, rgba(232,78,161,.06), transparent 55%),
+      linear-gradient(180deg, #f7faff 0%, #fff 70%);
+    border-bottom: 1px solid $line;
+    .page-title {
+      font-size: 36px; font-weight: 800; color: $ink; letter-spacing: -.6px;
+      margin: 0 0 10px; border: 0; padding: 0;
+    }
+    .current-contributor {
+      color: $brand;
+      a { color: $brand; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
+          .icon-github { font-size: .9em; } }
     }
+    p { font-size: 15px; color: $body; line-height: 1.6; margin: 0; a { color: $brand; } }
   }
 
+  .contrib-wrap { max-width: 980px; padding-top: 28px; padding-bottom: 64px; }
+
+  // table header
+  .head-wrapper {
+    display: flex; align-items: center;
+    background: #f7faff; border: 1px solid $line; border-radius: 10px 10px 0 0;
+    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: $muted;
+    .title { flex: 1; padding: 12px 16px; &:nth-child(1) { flex: 1.8; } }
+  }
+
+  // rows
   .contributors-wrapper {
-    font-size: 14px;
-    display: flex;
-    flex-direction: column;
+    border: 1px solid $line; border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden;
 
     .item-wrapper {
-      min-height: 55px;
-      flex-wrap: wrap;
-      padding: 0 0.4em;
       display: none;
-
-      &.show {
-        display: flex;
-
-        &:nth-child(even) {
-          background-color: #f6f8fa;
-        }
-      }
+      align-items: center;
+      min-height: 54px;
+      border-top: 1px solid $line;
+      &:first-child { border-top: 0; }
+      &.show { display: flex; }
+      &.show:nth-of-type(even) { background: #fafcfe; }
+      &.show:hover { background: #f3f7fc; }
 
       .item {
-        flex: 1;
-        padding: 0 0.6em;
-        display: flex;
-        align-items: center;
-
-        &:nth-child(1) {
-          flex: 0.9;
-        }
-
-        .total {
-          font-size: 16px;
-        }
-
-        .item-text {
-          display: flex;
-          align-items: center;
-
-          img {
-            margin-right: 0.3rem;
-          }
-        }
+        flex: 1.8; padding: 0 16px; display: flex; align-items: center;
+        .item-text { display: flex; align-items: center; gap: 10px; }
+        .name { font-size: 14px; font-weight: 600; color: $ink; }
+        img { border-radius: 6px; }
       }
     }
 
     .item-contributors {
-      flex: 1;
-
+      flex: 2;
       .d-flex {
-        align-items: center;
-        .dn {
-          display: none!important;
-        }
+        display: flex; align-items: center;
+        .dn { display: none !important; }      // name span lives in the hero, hidden here
         > div {
-          line-height: 55px;
-          padding: 0 0.6em;
-          display: none;
-          width: 50%;
+          display: none;                        // revealed by JS for the matched login
+          width: 50%; padding: 0 16px; line-height: 54px;
+          font-family: ui-monospace, "SF Mono", Menlo, monospace;
+          font-size: 13.5px; color: $body;
         }
-      }
-
-      ul, li {
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        position: relative;
-        border: 1px solid #eaecef;
-        border-radius: 4px;
-        padding: 4px 7px;
-        box-shadow: #f8f9fa 0px 1px 2px 0px;
-
-        a {
-          color: #2c3e50;
-        }
-
-        .contributions-count {
-          color: #999;
-        }
-
-        &.active {
-          color: #1e80ff;
-          background: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
-          box-shadow: 0px 2px 6px #ABD1F2;
-
-          .contributions-count {
-            color: #666;
-          }
-        }
-
+        > div:nth-of-type(odd) { color: $ink; font-weight: 700; }   // contributions
       }
     }
-
   }
 
   .search-tips {
-    text-align: center;
-    padding: 3em;
-    font-size: 16px;
-    color: #999;
+    text-align: center; padding: 3em 1em; font-size: 15px; color: $muted;
   }
 
-  @media (max-width: 992px) {
+  @media (max-width: 768px) {
+    .head-wrapper .title:nth-child(1) { flex: 2.4; }
     .contributors-wrapper {
-      .head-wrapper {
-        .title {
-          &:nth-child(1) {
-            flex: 3.8;
-          }
-        }
-      }
-      img {
-        display: none;
-      }
-
-      .item-contributors {
-        .item {
-          &:nth-child(1) {
-            flex: 1.8;
-          }
-        }
-      }
+      .item-wrapper .item { flex: 2.4; }
+      img { display: none; }
     }
   }
 }
-