website

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

514cf1b5 — pyrossh

improve font

Files changed (8) hide show

src/components/Wrapper.astro CHANGED Viewed

@@ -5,8 +5,7 @@
 <style>
   div {
     flex: 1;
-    width: calc(95ex - (1em * 2));
-    /* width: calc(104ex - (1em * 2)); */
+    width: min(70ch, 100% - 4rem); /* To make the website more readable */
     margin-right: auto;
     margin-left: auto;
     padding-left: 1em;

src/layouts/Base.css CHANGED Viewed

@@ -26,16 +26,16 @@ body {
   flex: 1;
   background-color: var(--color-body-bg);
   color: var(--color-text);
-  font-family: var(--font-roboto);
+  font-family: system-ui;
   text-rendering: optimizeLegibility;
   font-variant-ligatures: common-ligatures;
   font-kerning: normal;
-  font-size: 14pt;
+  font-size: 1.25rem;
-  line-height: 1.6;
+  line-height: 1.5;
   min-height: 100vh;
   @media (max-width: 720px) {
-    font-size: 13pt;
+    font-size: 1.1rem;
   }
 }

src/pages/cv/index.astro CHANGED Viewed

@@ -249,6 +249,10 @@ import Layout from "@/layouts/Base.astro";
   </div>
 </Layout>
 <style>
+  p {
+    font-size: 1.1rem;
+  }
   b {
     font-weight: 600;
   }
@@ -259,6 +263,7 @@ import Layout from "@/layouts/Base.astro";
   }
   li {
+    font-size: 1.1rem;
     list-style-type: disc;
     list-style-position: outside;
   }
@@ -271,22 +276,25 @@ import Layout from "@/layouts/Base.astro";
   }
   h4 {
+    font-size: 1.1rem;
     font-weight: 600;
     margin-top: 0.5rem;
   }
   h5 {
+    font-size: 1.1rem;
     margin-top: 0.5rem;
   }
   h6 {
+    font-size: 1rem;
     font-weight: 600;
     margin-top: 0.5rem;
     span {
       font-family: sans-serif;
       font-weight: 400;
-      font-size: 0.95rem;
+      font-size: 1rem;
     }
   }
 </style>

src/pages/index.astro CHANGED Viewed

@@ -12,7 +12,7 @@ import styles from "./index.module.css";
   <div class={styles.pageContainer}>
     <div>
       <h1 class={styles.title}>Hello!</h1>
-      <p>
+      <p class={styles.description}>
         <a
           class={styles.linkUnderline}
           href="https://www.linkedin.com/in/pyrossh"
@@ -26,7 +26,7 @@ import styles from "./index.module.css";
         I like to build frameworks and automate common tasks to make it easier to
         develop applications.
       </p>
-      <p>
+      <p class={styles.description}>
         I enjoy working on open-source projects, and during the last decade,
         I've created a number of projects that are widely used.
       </p>

src/pages/index.module.css CHANGED Viewed

@@ -1,5 +1,9 @@
+.description {
+  font-size: 1.1rem;
+}
 h2 {
-  font-size: 16pt;
+  font-size: 1.4rem;
   font-weight: 600;
 }
@@ -79,7 +83,7 @@ section {
   padding: 0.5rem;
   background: var(--color-box-bg);
   color: var(--color-text);
-  font-size: 0.95em;
+  font-size: 0.95rem;
   a {
     color: var(--color-card-link);
@@ -105,7 +109,7 @@ section {
     grid-template-columns: auto auto auto;
     text-align: center;
     margin-top: 1rem;
-    font-size: 0.95em;
+    font-size: 1.1rem;
     li {
       background-color: var(--color-box-bg);
@@ -127,7 +131,7 @@ section {
       align-items: baseline;
       padding: 0.25rem;
       background-color: var(--color-box-bg);
-      font-size: 0.95em;
+      font-size: 1.1rem;
       @media (max-width: 720px) {
         flex-direction: column;
@@ -167,6 +171,7 @@ section {
       align-items: center;
       background-color: var(--color-box-bg);
       padding: 0.25rem;
+      font-size: 1rem;
       a {
         display: flex;
@@ -176,7 +181,6 @@ section {
         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

@@ -32,7 +32,7 @@ const { Content } = await render(Astro.props);
   article {
     h1 {
       text-align: left;
-      font-size: 27pt;
+      font-size: 1.8rem;
       font-weight: bold;
       line-height: 1;
       margin-top: 0.5rem;
@@ -40,6 +40,7 @@ const { Content } = await render(Astro.props);
     }
     time {
+      font-size: 1.1rem;
       text-align: left;
       color: rgb(var(--gray));
     }
@@ -49,22 +50,25 @@ const { Content } = await render(Astro.props);
     }
     h2 {
+      font-size: 1.1rem;
-      font-weight: 700;
+      font-weight: 500;
     }
     h3 {
-      font-size: 1.3rem;
+      font-size: 1.25rem;
       font-weight: 700;
       margin-top: 0.5rem;
       margin-bottom: 0.1rem;
     }
     p {
+      font-size: 1.1rem;
       padding-bottom: 1rem;
     }
     p,
     li {
+      font-size: 1.1rem;
       code {
         color: var(--color-code-fg);
         background-color: var(--color-box-bg);

src/pages/posts/index.astro CHANGED Viewed

@@ -38,7 +38,7 @@ const posts = (await getCollection("content")).sort(
   .posts-title {
     font-weight: 700;
-    font-size: 1.875rem;
+    font-size: 1.8rem;
     line-height: 2.25rem;
   }
@@ -58,6 +58,7 @@ const posts = (await getCollection("content")).sort(
   }
   .post-list-item a {
+    font-size: 1.1rem;
     color: var(--color-post-link);
     text-decoration-line: underline;
     text-underline-offset: 4px;
@@ -71,7 +72,7 @@ const posts = (await getCollection("content")).sort(
   }
   .post-list-item time {
-    font-size: 12pt;
+    font-size: 1.1rem;
   }
   .post-list-item__content {

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

@@ -137,7 +137,7 @@ h5 {
   }
   pre {
-    /* background: $pre-background; */
+    background: var(--color-box-bg);
     padding: 0.25rem;
   }