website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

485d57a3 — pyrossh

add basic git commits

Files changed (13) hide show

bun.lock +3 -0
package.json +1 -0
src/components/Wrapper.astro +3 -1
src/containers/Log.astro +14 -0
src/content.config.ts +43 -0
src/layouts/Base.css +3 -6
src/pages/index.astro +10 -147
src/pages/index.module.css +134 -0
src/pages/posts/[...slug].astro +1 -0
src/pages/posts/index.astro +4 -5
src/pages/repos/[...slug]/commits/index.astro +48 -0
src/pages/repos/[...slug]/index.astro +334 -0
src/pages/repos/[...slug]/index.module.css +152 -0

bun.lock CHANGED Viewed

@@ -10,6 +10,7 @@
         "@effective/css-reset": "^3.2.0",
         "@tailwindcss/vite": "^4.1.4",
         "astro": "^5.7.5",
+        "date-fns": "^4.1.0",
         "simple-git": "^3.27.0",
         "tailwindcss": "^4.1.4",
       },
@@ -350,6 +351,8 @@
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
     "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
     "decode-named-character-reference": ["decode-named-character-reference@1.1.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w=="],

package.json CHANGED Viewed

@@ -14,6 +14,7 @@
     "@effective/css-reset": "^3.2.0",
     "@tailwindcss/vite": "^4.1.4",
     "astro": "^5.7.5",
+    "date-fns": "^4.1.0",
     "simple-git": "^3.27.0",
     "tailwindcss": "^4.1.4"
   },

src/components/Wrapper.astro CHANGED Viewed

@@ -4,7 +4,9 @@
 <style>
   div {
+    flex: 1;
+    /* width: calc(95ex - (1em * 2)); */
-    width: calc(95ex - (1em * 2));
+    width: calc(104ex - (1em * 2));
     margin-right: auto;
     margin-left: auto;
     padding-left: 1em;

src/containers/Log.astro ADDED Viewed

@@ -0,0 +1,14 @@
+---
+import { simpleGit } from "simple-git";
+const res = await simpleGit().log();
+---
+{
+  res.all.map((commit) => (
+    <div>
+      <h4>{commit.hash}</h4>
+      <p>{commit.message}</p>
+      <span>{commit.date}</span>
+    </div>
+  ))
+}

src/content.config.ts CHANGED Viewed

@@ -1,7 +1,50 @@
+import fs from "fs";
+import { simpleGit } from "simple-git";
 import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
+import { REPOS } from './consts';
 export const collections = {
+  repos: defineCollection({
+    loader: {
+      name: "loader",
+      load: async (ctx) => {
+        for (const r of REPOS) {
+          const repoPath = process.cwd() + "/../" + r.title;
+          const readmePath = repoPath + "/README.md";
+          console.log("loading repo " + repoPath)
+          const res = await simpleGit(repoPath).log();
+          ctx.store.set({
+            id: r.title,
+            data: {
+              title: r.title,
+              description: r.description,
+              commits: res.all.map((item) => ({
+                hash: item.hash,
+                message: item.message,
+                author_name: item.author_name,
+                date: item.date,
+              })),
+            },
+            rendered: {
+              html: fs.existsSync(readmePath) ? await (await import(readmePath)).compiledContent() : "",
+            }
+          });
+        }
+      },
+    },
+    schema: z.object({
+      title: z.string(),
+      description: z.string().max(80),
+      commits: z.array(z.object({
+        hash: z.string(),
+        message: z.string(),
+        author_name: z.string(),
+        date: z.string(),
+        // diff: z.string(),
+      })),
+    }),
+  }),
   content: defineCollection({
     loader: glob({ base: './src/content', pattern: '**/*.{md,mdx}' }),
     // Type-check frontmatter using a schema

src/layouts/Base.css CHANGED Viewed

@@ -12,6 +12,7 @@
   --color-post-link: #3395ff;
   --color-highlight-bg: #703be1;
   --color-code-fg: rgb(244, 176, 176);
+  --color-md-table-bg: #343a40;
 }
 [theme='light'] {
@@ -24,10 +25,7 @@
   --color-post-link: #000000;
   --color-highlight-bg: #9befee;
   --color-code-fg: #d14;
-}
-html {
-  background-color: white;
+  --color-md-table-bg: #343a40;
 }
 body {
@@ -52,8 +50,7 @@ body {
   font-kerning: normal;
   font-size: 14pt;
   line-height: 1.6;
-  /* min-height: 100vh; */
+  min-height: 100vh;
-  /* min-width: 992px !important; */
   /* font-family: sans-serif; */
   /* font-size: 1rem; */
   /* text-align: initial; */

src/pages/index.astro CHANGED Viewed

@@ -9,6 +9,8 @@ import zellij from "@/assets/logos/zellij.png";
 import inkscape from "@/assets/logos/inkscape.png";
 import ghostty from "@/assets/logos/ghostty.png";
 import { REPOS } from "@/consts";
+import Log from "@/containers/Log.astro";
+import styles from "./index.module.css";
 ---
 <Layout
@@ -37,7 +39,7 @@ import { REPOS } from "@/consts";
         I've created a number of projects that are widely used.
       </p>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
-        <section class="interests">
+        <section class={styles.interests}>
           <h2>Interests</h2>
           <ul>
             <li>HTML</li>
@@ -54,7 +56,7 @@ import { REPOS } from "@/consts";
             <li>Iceberg</li>
           </ul>
         </section>
-        <section class="contact">
+        <section class={styles.contact}>
           <h2>Contact</h2>
           <ul>
             <li>
@@ -82,7 +84,7 @@ import { REPOS } from "@/consts";
           </ul>
         </section>
       </div>
-      <section class="tools">
+      <section class={styles.tools}>
         <h2>Tools</h2>
         <ul>
           <li>
@@ -158,19 +160,15 @@ import { REPOS } from "@/consts";
           </li>
         </ul>
       </section>
-      <section class="projects">
+      <section>
         <h2>Repos</h2>
-        <div class="repos">
+        <div class={styles.repos}>
           {
             REPOS.map((repo) => (
-              <div class="event">
+              <div class={styles.repo}>
                 <h4>
-                  <a href={`https://git.sr.ht/~pyrossh/${repo.title}`}>
+                  <a href={`/repos/${repo.title}`}>{repo.title}</a>
-                    {" "}
-                    {repo.title}{" "}
-                  </a>
                 </h4>
                 <p>{repo.description}</p>
               </div>
             ))
@@ -179,140 +177,5 @@ import { REPOS } from "@/consts";
       </section>
     </div>
   </div>
+  <!-- <Log /> -->
 </Layout>
-<style>
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-  }
-  section {
-    display: flex;
-    flex-direction: column;
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-  }
-  .rounded-md {
-    border-radius: 0.375rem;
-  }
-  .projects {
-    .repos {
-      display: grid;
-      grid-template-columns: auto auto;
-      gap: 1rem;
-      margin-top: 0.5rem;
-      @media (max-width: 720px) {
-        gap: 1rem;
-        grid-template-columns: auto;
-      }
-    }
-    .event {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      padding: 0.5rem;
-      background: var(--color-box-bg);
-      color: var(--color-text);
-      font-size: 0.95em;
-      a {
-        color: var(--color-card-link);
-      }
-      h4 {
-        font-size: 1.1rem;
-        font-weight: 500;
-        line-height: 1.2;
-        border-bottom: 1px solid #495057;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        margin-bottom: 0;
-        padding: 0;
-      }
-    }
-  }
-  .interests {
-    ul {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: auto auto auto;
-      text-align: center;
-      margin-top: 1rem;
-      li {
-        background-color: var(--color-box-bg);
-        padding: 0.25rem;
-      }
-    }
-  }
-  .contact {
-    ul {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: auto;
-      margin-top: 1rem;
-      li {
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        padding: 0.25rem;
-        background-color: var(--color-box-bg);
-        @media (max-width: 720px) {
-          flex-direction: column;
-        }
-      }
-      a {
-        color: var(--color-link);
-      }
-      strong {
-        font-weight: 500;
-        margin-right: 0.5rem;
-      }
-    }
-  }
-  .tools {
-    img {
-      width: 36px;
-    }
-    ul {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: auto auto auto auto;
-      text-align: center;
-      margin-top: 1rem;
-      @media (max-width: 720px) {
-        grid-template-columns: auto auto auto;
-      }
-      li {
-        background-color: var(--color-box-bg);
-        padding: 0.25rem;
-        a {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          text-align: left;
-          margin-left: 0.25rem;
-          margin-right: 0.25rem;
-          font-size: 0.9em;
-          div {
-            flex: 1;
-          }
-        }
-      }
-    }
-  }
-</style>

src/pages/index.module.css ADDED Viewed

@@ -0,0 +1,134 @@
+h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+section {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.repos {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  @media (max-width: 720px) {
+    gap: 1rem;
+    grid-template-columns: auto;
+  }
+}
+.repo {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0.5rem;
+  background: var(--color-box-bg);
+  color: var(--color-text);
+  font-size: 0.95em;
+  a {
+    color: var(--color-card-link);
+  }
+  h4 {
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: 1.2;
+    border-bottom: 1px solid #495057;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-bottom: 0;
+    padding: 0;
+  }
+}
+.interests {
+  ul {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: auto auto auto;
+    text-align: center;
+    margin-top: 1rem;
+    li {
+      background-color: var(--color-box-bg);
+      padding: 0.25rem;
+    }
+  }
+}
+.contact {
+  ul {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: auto;
+    margin-top: 1rem;
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      padding: 0.25rem;
+      background-color: var(--color-box-bg);
+      @media (max-width: 720px) {
+        flex-direction: column;
+      }
+    }
+    a {
+      color: var(--color-link);
+    }
+    strong {
+      font-weight: 500;
+      margin-right: 0.5rem;
+    }
+  }
+}
+.tools {
+  img {
+    width: 36px;
+  }
+  ul {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: auto auto auto auto;
+    text-align: center;
+    margin-top: 1rem;
+    @media (max-width: 720px) {
+      grid-template-columns: auto auto auto;
+    }
+    li {
+      background-color: var(--color-box-bg);
+      padding: 0.25rem;
+      a {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        text-align: left;
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+        font-size: 0.9em;
+        div {
+          flex: 1;
+        }
+      }
+    }
+  }
+}

src/pages/posts/[...slug].astro CHANGED Viewed

@@ -16,6 +16,7 @@ type Props = CollectionEntry<"content">;
 const {
   data: { title, description, pubDate },
 } = Astro.props;
+console.log(Astro.props);
 const { Content } = await render(Astro.props);
 ---

src/pages/posts/index.astro CHANGED Viewed

@@ -27,7 +27,6 @@ const posts = (await getCollection("content")).sort(
       }
     </ul>
   </div>
-  <hr />
 </Layout>
 <style>
   .container {
@@ -43,10 +42,10 @@ const posts = (await getCollection("content")).sort(
     span {
       font-size: 13pt;
-      /* text-gray-900 */
     }
+    time {
+      font-size: 12pt;
-  }
+    }
-  hr {
-    padding-bottom: 75%;
   }
 </style>

src/pages/repos/[...slug]/commits/index.astro ADDED Viewed

@@ -0,0 +1,48 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import { render } from "astro:content";
+import Layout from "@/layouts/Base.astro";
+import { intlFormatDistance } from "date-fns";
+import styles from "./slug.module.css";
+export async function getStaticPaths() {
+  const repos = await getCollection("repos");
+  return repos.map((repo) => ({
+    params: { slug: repo.id },
+    props: repo,
+  }));
+}
+type Props = CollectionEntry<"repos">;
+const {
+  data: { title, description, commits },
+} = Astro.props;
+---
+<Layout title={title} description={description}>
+  <div class="event-list mb-2">
+    {
+      commits.map((commit) => (
+        <div class={styles.event}>
+          <div>
+            <a
+              href={`/repos/${title}/commits/${commit.hash}`}
+              title={commit.hash}
+              rel="nofollow"
+            >
+              {commit.hash.substring(0, 8)}
+            </a>
+            — {commit.author_name}
+            <small class="pull-right">
+              <a href={`/repos/${title}/logs?from=??`} rel="nofollow">
+                <span title={commit.date}>
+                  {intlFormatDistance(commit.date, new Date())}
+                </span>
+              </a>
+            </small>
+          </div>
+          <pre class="commit">{commit.message}</pre>
+        </div>
+      ))
+    }
+  </div>
+</Layout>

src/pages/repos/[...slug]/index.astro ADDED Viewed

@@ -0,0 +1,334 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import { render } from "astro:content";
+import Layout from "@/layouts/Base.astro";
+import { intlFormatDistance } from "date-fns";
+import styles from "./index.module.css";
+export async function getStaticPaths() {
+  const repos = await getCollection("repos");
+  return repos.map((repo) => ({
+    params: { slug: repo.id },
+    props: repo,
+  }));
+}
+type Props = CollectionEntry<"repos">;
+const {
+  data: { title, description, commits },
+} = Astro.props;
+const latestCommits = commits.slice(0, 3);
+const { Content } = await render(Astro.props);
+---
+<Layout title={title} description={description}>
+  <div class={styles.header}>
+    <h1>{title}</h1>
+  </div>
+  <hr />
+  <div class={styles.headerExtension}>
+    <h2 class=".expand">{description}</h2>
+    <!-- <h2>git@pyrossh.dev:~repos/website.git</h2> -->
+  </div>
+  <div class={styles.summary}>
+    <div>
+      <div class="event-list mb-2">
+        {
+          latestCommits.map((commit) => (
+            <div class={styles.event}>
+              <div>
+                <a
+                  href={`/repos/${title}/commits/${commit.hash}`}
+                  title={commit.hash}
+                  rel="nofollow"
+                >
+                  {commit.hash.substring(0, 8)}
+                </a>
+                — {commit.author_name}
+                <small class="pull-right">
+                  <a href={`/repos/${title}/logs?from=??`} rel="nofollow">
+                    <span title={commit.date}>
+                      {intlFormatDistance(commit.date, new Date())}
+                    </span>
+                  </a>
+                </small>
+              </div>
+              <pre class="commit">{commit.message}</pre>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+    <div class={styles.sectionRight}>
+      <!-- <div class={styles.left}>
+        <h3>refs</h3>
+        <dl>
+          <dt>main</dt>
+          <dd>
+            <a href="/~pyrossh/website/tree" rel="nofollow"
+              >browse&nbsp;<span
+                class="icon icon-caret-right"
+                aria-hidden="true"
+                ><svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 192 512"
+                  ><path
+                    d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
+                  ></path></svg
+                >
+              </span></a
+            >
+            <a href="/~pyrossh/website/log" rel="nofollow"
+              >log&nbsp;<span class="icon icon-caret-right" aria-hidden="true"
+                ><svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 192 512"
+                  ><path
+                    d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
+                  ></path></svg
+                >
+              </span></a
+            >
+          </dd>
+        </dl>
+      </div> -->
+      <div class={styles.right}>
+        <h3>clone</h3>
+        <dl>
+          <dt>read-only</dt>
+          <dd>
+            <a href={`https://pyrossh.dev/repos/${title}`}>
+              https://pyrossh.dev/repos/{title}.git
+            </a>
+          </dd>
+          <dt>read/write</dt>
+          <dd>git@pyrossh.dev:~repos/website.git</dd>
+        </dl>
+        <div class={styles.bottom}>
+          <a href="/~pyrossh/website/send-email" class={styles.btnPrimary}
+            >Prepare a patchset <span
+              class="icon icon-caret-right"
+              aria-hidden="true"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 192 512"
+                ><path
+                  d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
+                ></path></svg
+              >
+            </span></a
+          >
+          <p class="text-muted text-centered">
+            <small>
+              Use this or <a href="https://git-send-email.io">git send-email</a>
+              to send changes upstream.
+            </small>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class={styles.nav}>
+    <ul>
+      <li class="nav-item">
+        <a class="nav-link active" href={`/${title}`}>Readme</a>
+      </li>
+      <div>|</div>
+      <li class="nav-item">
+        <a class="nav-link" href={`/${title}/files`}>Files</a>
+      </li>
+      <div>|</div>
+      <li class="nav-item">
+        <a class="nav-link" href={`${title}/commits`}>Commits</a>
+      </li>
+      <div>|</div>
+      <li class="nav-item">
+        <a class="nav-link" href={`/${title}/branches`}>Branches</a>
+      </li>
+      <div>|</div>
+      <li class="nav-item">
+        <a class="nav-link" href={`/${title}/tags`}>Tags</a>
+      </li>
+    </ul>
+  </div>
+  <div class="markdown">
+    <Content />
+  </div>
+</Layout>
+<style>
+  h1,
+  h2 {
+    margin-top: 0;
+    small {
+      font-size: 12px;
+    }
+  }
+  h3 {
+    font-size: 1.3rem;
+    border-bottom: 1px solid var(--color-gray-200);
+    padding-bottom: 0.25rem;
+    small {
+      font-size: 1rem;
+      margin-left: 1rem;
+    }
+  }
+  h4 {
+    font-size: 1.1rem;
+    border-bottom: 1px solid var(--color-gray-200);
+    padding-bottom: 0.25rem;
+    small {
+      font-size: 0.8rem;
+      margin-left: 1rem;
+    }
+  }
+  h5 {
+    font-size: 1rem;
+    font-weight: bold;
+  }
+  .markdown {
+    font-size: 12pt;
+    table {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 1rem;
+      border-collapse: collapse;
+      text-indent: initial;
+      unicode-bidi: isolate;
+      border-spacing: 2px;
+      border-color: gray;
+      color: white;
+      font-size: 1rem;
+      thead {
+        th {
+          padding: 0.1rem 0.75rem;
+          border: none;
+        }
+      }
+      tbody {
+        td {
+          position: relative;
+          background-clip: padding-box;
+          vertical-align: middle;
+          padding: 0.1rem 0.75rem;
+          border: 1px solid var(--color-gray-400);
+          background-color: white;
+          label {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    table,
+    table tbody tr,
+    table tbody td,
+    table thead th {
+      /* background: var(--color-gray-800); */
+      background: #343a40;
+    }
+    table tbody td {
+      /* border: 1px solid var(--color-gray-900); */
+      border: 1px solid #212529;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      position: relative;
+      margin-top: 1em;
+      &:first-child {
+        margin-top: 0;
+      }
+      & > a:first-child {
+        transition: opacity 0.15s linear;
+        opacity: 0;
+        position: absolute;
+        font-size: inherit;
+        left: -0.7em;
+      }
+      @media (prefers-reduced-motion) {
+        & > a:first-child {
+          transition: none;
+        }
+      }
+      &:hover > a:first-child {
+        opacity: 1;
+      }
+      img {
+        margin: 0 0.2rem;
+        max-width: 100%;
+      }
+    }
+    blockquote {
+      padding-left: 0.5rem;
+      border-left: 3px solid #aaa;
+    }
+    pre {
+      background: $pre-background;
+      padding: 0.25rem;
+    }
+    code {
+      margin: 0;
+      background: transparent;
+      color: white;
+      font-size: 87.5%;
+      /* color: #e83e8c; */
+      word-break: break-word;
+    }
+    .alert {
+      padding: 0.5rem;
+      border-radius: 0;
+      .form-group & {
+        margin-top: 1rem;
+      }
+    }
+    .text-centered {
+      text-align: center;
+    }
+    .text-right {
+      text-align: right;
+    }
+    .pull-left {
+      float: left;
+    }
+    .pull-right {
+      float: right;
+    }
+  }
+</style>

src/pages/repos/[...slug]/index.module.css ADDED Viewed

@@ -0,0 +1,152 @@
+.header {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: baseline;
+  @media (max-width: 720px) {
+    flex-direction: column;
+    align-items: start;
+  }
+  h1 {
+    text-align: left;
+    font-size: 27pt;
+    font-weight: bold;
+    line-height: 1;
+    margin-top: 0.5rem;
+    margin-bottom: 0.1rem;
+  }
+}
+.headerExtension {
+  display: flex;
+  flex: 1;
+  background: #131618;
+  /* margin-bottom: 1rem; */
+  padding-top: 0.3rem;
+  padding-left: 0.3rem;
+  font-size: 0.95rem;
+  @media (max-width: 720px) {
+    flex-direction: column;
+    align-items: start;
+  }
+  .expand {
+    flex: 1;
+  }
+}
+.nav {
+  margin-bottom: 1rem;
+  ul {
+    display: flex;
+    align-items: center;
+    @media (max-width: 720px) {
+      margin-top: 0.5rem;
+    }
+    div {
+      padding-right: 0.5rem;
+    }
+    li {
+      font-size: 12pt;
+      padding-right: 0.5rem;
+      color: #65686a;
+      cursor: pointer;
+      color: #ced4da;
+    }
+  }
+}
+time {
+  text-align: left;
+  color: rgb(var(--gray));
+}
+.summary {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 12px;
+  @media (max-width: 720px) {
+    grid-template-columns: auto;
+  }
+}
+.event {
+  background: #131618;
+  color: #fff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  font-size: 11pt;
+  a {
+    color: #3395ff;
+  }
+  small {
+    font-size: 85%;
+    font-weight: 400;
+    float: right;
+  }
+}
+.sectionRight {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 1rem;
+  font-size: 12pt;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+  h3, h4 {
+    /* border-bottom-color: #e9ecef; */
+    font-size: 1.3rem;
+    border-bottom: 1px solid #495057;
+    padding-bottom: .25rem;
+    margin-bottom: .5rem;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+  a {
+    color: var(--color-link);
+  }
+  .left {
+    display: flex;
+    flex-direction: column;
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    .bottom {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 1rem;
+    }
+  }
+}
+.btnPrimary {
+  display: flex;
+  justify-content: center;
+  background: #0062cc;
+  border: #001933 1px solid;
+  color: #fff !important;
+  border-radius: 0;
+  padding: .1rem .75rem;
+  font-size: .9rem;
+  width: 100%;
+  text-align: center;
+}

~repos /website

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.