restyle blog

Author: livensmi1e

astro.config.mjs

@@ -11,8 +11,8 @@ export default defineConfig({
     remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of Contents" }]],
     shikiConfig: {
       themes: {
-        light: "catppuccin-latte",
-        dark: "catppuccin-frappe",
+        light: "github-light-default",
+        dark: "github-dark-default",
       },
     },
   },

src/components/Header.astro

@@ -50,6 +50,10 @@
         font-weight: 600;
     }
 
+    .logo:hover {
+        color: var(--color-accent);
+    }
+
     .navbar__link {
         font-weight: 500;
         font-size: var(--font-lg);

src/components/Markdown.astro

@@ -42,18 +42,24 @@
     }
 
     .markdown pre {
-        font-size: 0.9em;
+        font-size: 0.95em;
         padding: var(--spacing-md);
         margin: var(--spacing-lg) 0;
-        border-radius: 0.375em;
-        border: 1px solid rgb(210, 208, 208);
     }
 
     .markdown pre code {
-        font-size: 0.9em;
+        font-size: 0.95em;
     }
 
     .markdown blockquote {
+        background-color: var(--color-code);
+        border-inline-start: 5px solid #dbdbdb;
+        padding: var(--spacing-md);
+        margin-bottom: var(--spacing-lg);
+        margin-top: var(--spacing-lg);
+    }
+
+    .markdown blockquote.info {
         border-top-right-radius: 0.375em;
         border-bottom-right-radius: 0.375rem;
         background-color: #60a5fa0d;
@@ -103,22 +109,18 @@
     .markdown p img {
         max-width: 850px;
         height: auto;
-        border-radius: 0.375em;
+        // border-radius: 0.375em;
     }
 
     .markdown img {
-        border-radius: 0.375em;
+        // border-radius: 0.375em;
     }
 
     @media (max-width: 768px) {
         .markdown__meta {
             gap: var(--spacing-xxs);
         }
 
-        .meta__icon {
-            font-size: var(--font-md);
-        }
-
         .markdown p img {
             max-width: 100%;
             width: auto;

src/components/PostPreview.astro

@@ -4,15 +4,12 @@ const { title, date, desc, slug, time } = Astro.props;
 
 <article class="preview">
     <h3 class="preview__title">
-        <a href={`writings/${slug}`}>
+        <a href={`${import.meta.env.BASE_URL}/writings/${slug}`}>
             {title}
         </a>
     </h3>
 
     <div class="preview__meta">
-        <span>
-            <i class="fa-solid fa-calendar-days"></i>
-        </span>
         <span>{date}</span>
         <span>|</span>
         <span>{time}</span>
@@ -21,7 +18,7 @@ const { title, date, desc, slug, time } = Astro.props;
         {desc}
     </p>
     <p class="rm__link">
-        <a href={`writings/${slug}`}>Read more</a>
+        <a href={`${import.meta.env.BASE_URL}/writings/${slug}`}>Read more</a>
     </p>
 </article>
 

src/content/writings/first-step-into-aws.md

@@ -9,7 +9,7 @@ isDraft: true
 
 ## Table of Contents
 
-### CLI
+## CLI
 
 I have completely no idea about this. All I do is blindly copying and following the tutorials/docs. I don't understand what is
 
@@ -26,7 +26,7 @@ Before we can use AWS CLI tool, we have to authenticate against AWS. There are s
 
 **Setup SSO:**
 
-```
+```bash
 aws configure sso
 ```
 
@@ -38,7 +38,7 @@ After filling all the informations, a file named `config` will be created inside
 
 Checking the file, we can see:
 
-```
+```bash
 [default]
 sso_session = your-sso-session
 sso_account_id = id
@@ -61,7 +61,7 @@ Useful resources:
 - https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html
 - https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sso.html#sso-configure-profile-token-auto-sso
 
-### IAM
+## IAM
 
 I understand like this:
 
@@ -70,13 +70,13 @@ I understand like this:
 - There is identity-based policy which defines that policy can do which action to what resource and resourced-based policy which defines who can do which action to it.
 - Policy uses implicit DENY to all action, we can explicitly ALLOW or DENY. Explicit DENY is useful for example when we allow all but one specific identity.
 
-### Lambda
+## Lambda
 
 Integration
 
 API Gateway
 
-### OpenSearch Service
+## OpenSearch Service
 
 Domain
 

src/content/writings/my-first-note.md

@@ -53,3 +53,9 @@ export const GISCUS: GiscusProps = {
 
 > [warning]
 > Highlights information that users should take into account, even when skimming.
+
+Default blockquote
+
+> Tip! You can get ISO 8601 datetime by running new Date().toISOString() in the console. Make sure you remove quotes though.
+
+[Test](https://youtube.com)

src/content/writings/note-on-working-with-mqtt-mosquitto.md

@@ -16,7 +16,7 @@ Mosquitto MQTT broker will be hosted on docker container.
 
 First prepare compose file:
 
-```docker
+```yml
 services:
     mosquitto-broker:
         image: eclipse-mosquitto:2.0.21

src/layouts/Base.astro

@@ -11,7 +11,7 @@ import Footer from "../components/Footer.astro";
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/jpg" href={`${import.meta.env.BASE_URL}/favicon.jpg`} />
+        <link rel="icon" type="image/jpg" href={`${import.meta.env.BASE_URL}/favicon.JPG`} />
         <meta name="generator" content={Astro.generator} />
         <title>Readme</title>
         <link
@@ -42,7 +42,7 @@ import Footer from "../components/Footer.astro";
         font-size: 1rem;
         line-height: 1.5;
         color: var(--color-text);
-        letter-spacing: 0.1rem;
+        // letter-spacing: 0.02rem;
         background-color: var(--color-background);
     }
 </style>

src/layouts/Post.astro

@@ -24,10 +24,7 @@ const { meta } = Astro.props;
     <div class="markdown">
         <h1 class="markdown__title">{meta.data.title}</h1>
         <div class="markdown__meta">
-            <span class="meta__icon">
-                <i class="fa-solid fa-calendar-days"></i>
-            </span>
-            <span>Written: </span>
+            <span>Written at: </span>
             <span>{meta.data.date}</span>
             <span>|</span>
             <span>{meta.data.time}</span>
@@ -45,7 +42,12 @@ const { meta } = Astro.props;
     .markdown__title {
         margin-top: var(--spacing-lg);
         margin-bottom: var(--spacing-xs);
-        font-size: var(--font-xl);
+        font-size: var(--font-2xl);
+        color: var(--color-accent);
+    }
+
+    .markdown__title:hover {
+        color: var(--color-text);
     }
 
     .markdown__meta {
@@ -59,10 +61,6 @@ const { meta } = Astro.props;
     .markdown__desc {
         margin-bottom: var(--spacing-lg);
     }
-
-    .meta__icon {
-        font-size: var(--font-lg);
-    }
 </style>
 
 <script define:vars={{notes}}>

src/styles/global.css

@@ -1,12 +1,10 @@
 :root {
-  --font-family: "Inter", serif;
-
   --color-background: #fff;
-  --color-text: #1c1e21;
-  --color-text-light: #6b7280;
+  --color-text: #4a4a4a;
+  --color-title: #363636;
   --color-accent: #0189f4;
   --color-line: #e5e7eb;
-  --color-code: #f3f4f6;
+  --color-code: #f5f5f5;
 
   --width-desktop: 52rem;
   --width-tablet: 46rem;
@@ -32,11 +30,11 @@
 html[data-theme="dark"] {
   --color-background: #09090b; /* Slate-900 */
   --color-text: #f8fafc; /* Slate-50 */
-  --color-text-light: #94a3b8; /* Slate-400 */
+  --color-title: #f8fafc;
   --color-accent: #3b82f6; /* Blue-500 */
   --color-accent-hover: #60a5fa; /* Blue-400 */
   --color-line: #1e293b; /* Slate-800 */
-  --color-code: #1e293b; /* Slate-800 */
+  --color-code: #cecece; /* Slate-800 */
 }
 
 *,
@@ -50,7 +48,7 @@ html[data-theme="dark"] {
 html,
 body {
   height: 100%;
-  font-family: var(--font-family);
+  font-family: 'Consolas', 'Courier New', monospace, sans-serif;
   font-size: var(--font-md);
   font-weight: 400;
 }
@@ -60,9 +58,21 @@ a {
   color: var(--color-text);
 }
 
+p > a {
+  color: var(--color-accent);
+}
+
+p > a:hover {
+  color: var(--color-accent-hover);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-title);
+}
+
 .astro-code,
 .astro-code span {
-  font-family: "IBM Plex Mono", monospace;
+  background-color: var(--color-code) !important;
 }
 
 html[data-theme="dark"] {
@@ -77,10 +87,9 @@ html[data-theme="dark"] {
 }
 
 code:not(pre code) {
-  border-radius: 0.25rem;
   background-color: var(--color-code);
   padding: 0.25rem;
-  font-weight: 600;
-  font-size: var(--font-xs);
-  font-style: italic;
+  font-weight: 500;
+  font-size: var(--font-sm);
+  color: #da1039;
 }