Update UI

yaodong · Aug 14, 2024 · ca48b2d · ca48b2d
1 parent 5cbeb06
commit ca48b2d
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# Digital Garden
+
+A digital garden is a collection of notes, essays, and other content that is continuously updated and interconnected.
+It is a way to share knowledge and ideas in a more organic and evolving manner compared to traditional blogs or websites.
diff --git a/_assets/stylesheets/application.css b/_assets/stylesheets/application.css
@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 :root {
-  --font-serif: "Merriweather", serif;
-  --font-sans: "Mulish", sans-serif;
+  --font-serif: "Merriweather", Georgia, serif;
+  --font-sans: "Mulish", --apple-system, Helvetica, Arial, sans-serif;
 }
 
 body {
@@ -19,6 +19,14 @@ h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-serif), serif;
 }
 
+.font-serif {
+  font-family: var(--font-serif), serif;
+}
+
+.font-sans {
+  font-family: var(--font-sans), sans-serif;
+}
+
 .boundary {
   @apply w-full p-10;
 }
diff --git a/_config.yml b/_config.yml
@@ -8,7 +8,7 @@ baseurl: ""
 permalink: /:title/
 
 # the name of your site, e.g. ACME Corp.
-title: "Yaodong Zhao"
+title: "yaodong.dev"
 
 plugins:
   - jekyll-feed
@@ -22,3 +22,6 @@ exclude:
   - postcss.config.js
   - tailwind.config.js
   - tsconfig.json
+  - README.md
+  - .idea
+  - .github
diff --git a/_includes/fonts.html → _includes/head.html b/_includes/fonts.html → _includes/head.html
@@ -1,3 +1,4 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="{{ "/assets/stylesheets/application.css" | relative_url }}">
diff --git a/_includes/header.html b/_includes/header.html
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -0,0 +1,16 @@
+<div class="flex justify-between font-serif">
+  <div class="flex items-center space-x-2">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         class="h-6 w-auto stroke-stone-700 stroke-2" width="44" height="44"
+         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+      <path d="M19.953 8.017l1.047 6.983v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2l1.245 -8.297a2 2 0 0 1 1.977 -1.703h3.778" />
+      <path d="M3 15h18" />
+      <path d="M13 3l5.5 1.5" />
+      <path d="M15.75 3.75l-2 7" />
+      <path d="M7 10.5c1.667 -.667 3.333 -.667 5 0c1.667 .667 3.333 .667 5 0" />
+    </svg>
+    <a href="/" class="text-stone-800 font-light">{{ site.title }}</a>
+  </div>
+  <div><a href="/about">About</a></div>
+</div>
diff --git a/_includes/post-icon.html → _includes/post-stage.html b/_includes/post-icon.html → _includes/post-stage.html
@@ -1,6 +1,6 @@
 {% if include.stage == "seedlings" %}
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     class="h-6 w-auto stroke-teal-700 stroke-2" width="44" height="44"
      viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
      stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -10,7 +10,7 @@
 </svg>
 {% elsif include.stage == "budding" %}
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="h-6 w-auto" width="44" height="44"
+     class="h-6 w-auto stroke-teal-700 stroke-2" width="44" height="44"
      viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
      stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -21,7 +21,7 @@
 </svg>
 {% elsif include.stage == "evergreen" %}
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     class="h-6 w-auto stroke-teal-700 stroke-2" width="44" height="44"
      viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
      stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -30,7 +30,7 @@
 </svg>
 {% else %}
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="h-6 w-auto stroke-stone-800" width="44" height="44"
+     class="h-6 w-auto stroke-teal-700 stroke-2" width="44" height="44"
      viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
      stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="utf-8">
-    <title>{{ page.title }}</title>
-    {% include fonts.html %}
-    <link rel="stylesheet" href="{{ "/assets/stylesheets/application.css" | relative_url }}">
-  </head>
-  <body>
-    <div class="container mx-auto">
-      {% include header.html %}
-      {{ content }}
-    </div>
-  </body>
+<html lang="{{ site.lang | default: " en-US" }}">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <title>{{ page.title }}</title>
+  {% include head.html %}
+</head>
+<body>
+  <div class="p-5 lg:px-5 xl:px-10">
+    {% include navigation.html %}
+  </div>
+  <div class="max-w-6xl mx-auto p-5 lg:px-5 xl:px-10">
+    {{ content }}
+  </div>
+</body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,18 +2,31 @@
 layout: default
 ---
 
-<div class="container mx-auto">
+<div class="-mx-5 sm:mx-auto p-5 bg-white sm:rounded sm:shadow">
 
-  <div class="flex flex-col items-center mb-5 mt-10 space-y-2">
-    <h1 class="text-3xl font-bold text-gray-800">{{ page.title }}</h1>
-    <div class="flex space-x-3 text-gray-600 text-sm">
-      Planted on {{ page.created_date | date_to_string }}{% if page.updated_date %}, Last tended on {{ page.updated_date | date_to_string }}{% endif %}
+  <div class="max-w-3xl mx-auto">
+
+    <div class="flex flex-col my-5 sm:my-10 space-y-2">
+      <div class="flex items-center space-x-1">
+        {% include post-stage.html stage=page.stage %}
+        <span class="font-bold text-sm">{{ page.stage | upcase }}</span>
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-gray-800">{{ page.title }}</h1>
+      </div>
+      <div class="flex justify-evenly">
+        <div class="grow"></div>
+        <div class="flex-initial text-gray-600 text-sm">
+          <p>Planted on {{ page.created_date | date_to_string }}</p>
+          {% if page.updated_date %}<p>Last tended on {{ page.updated_date | date_to_string }}</p>{% endif %}
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="prose mx-auto">
-    {{content}}
-  </div>
+    <div class="prose max-w-3xl mx-auto">
+      {{content}}
+    </div>
 
-  <div class="mt-20"></div>
+    <div class="mt-20"></div>
+  </div>
 </div>
diff --git a/_posts/2024-01-28-the-self-and-singleton-class-in-ruby.md b/_posts/2024-01-28-the-self-and-singleton-class-in-ruby.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 category: notes
-stage: seedlings
+stage: evergreen
 title: The self and singleton class in Ruby
 created_date: 2024-01-28
 updated_date: 2024-08-06

diff --git a/index.html b/index.html
@@ -3,29 +3,24 @@
 title: Yaodong Zhao
 ---
 
-<div class="py-12 px-3">
-    <div class="mb-5 px-2">
-        <h1 class="flex space-x-1 items-center mb-2">
+<div class="max-w-3xl mx-auto">
+    <div class="mb-5">
+        <h1 class="flex space-x-1 items-center">
             <span class="font-bold text-lg">Notes</span>
             <img src="{{ '/assets/images/arrow-right.svg' | asset_path }}" class="h-6 w-auto">
         </h1>
         <p class="text-stone-500">Loose, unopinionated notes on things.</p>
     </div>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {% assign posts = site.posts | where: "category", "notes" | sort: "updated_date" | reverse | slice: 0, 10 %}
-        {% for post in posts %}
-            <div class="flex flex-col space-y-1 bg-white border px-3 pb-3 pt-5 rounded-lg">
-                <div class="flex space-x-1 items-center">
-                    <span>{% include post-icon.html stage=post.stage %}</span>
-                    <a class="text-xl font-semibold" href="{{ post.url }}">{{ post.title }}</a>
-                </div>
-                <div class="text-stone-500 px-2">
-                    {{ post.excerpt }}
-                </div>
-                <div class="text-right mb-5 px-2">
-                    <a href="{{ post.url }}" class="text-sm text-stone-500">Read more</a>
-                </div>
+    {% assign posts = site.posts | where: "category", "notes" | sort: "updated_date" | reverse | slice: 0, 10 %}
+    {% for post in posts %}
+        <div class="flex flex-col space-y-1 bg-white p-3 shadow rounded">
+            <div class="flex space-x-1 items-center">
+                <span>{% include post-stage.html stage=post.stage %}</span>
+                <h2><a class="text-xl font-semibold" href="{{ post.url }}">{{ post.title }}</a></h2>
             </div>
-        {% endfor %}
-    </div>
+            <div class="text-stone-700 pl-7">
+                {{ post.excerpt }}
+            </div>
+        </div>
+    {% endfor %}
 </div>