A layouts/shortcodes/aside.html

@@ -0,0 +1,1 @@ 
+<div class="_aside">{{ .Inner | markdownify }} </div>

M static/css/blog.css → static/css/blog.css

@@ -36,7 +36,7 @@ 
 .bcontent h1{
     font-weight: 600;
     font-size: 1.8rem;
-    line-height: 1;
+    line-height: 1.2;
     color: var(--text-primary);
     fill: var(--text-primary);
 }
@@ -102,6 +102,16 @@ line-height: 1.4;
     white-space: nowrap;
 }
 
+.footnotes ol{
+    list-style-position: inside;
+    padding-top: 1rem;
+}
+
+.footnotes li>p {
+    display: inline-block;
+    margin: 0.3rem;
+}
+
 .post-text{
     font-family: 'Inter', sans-serif;
     font-size: 16px;
@@ -124,12 +134,18 @@ margin-bottom: 1rem;
 }
 
 .post-text a {
-    border-bottom: 2px solid #B554E3aa;
+    border-bottom: 2px solid #008aff80; 
 }
 
 .post-text a:hover {
-    color: #8a3ead;
+    color: #008aff;
     text-decoration: none;
+}
+
+.post-text sup {
+    border-radius: 0.25rem;
+    padding: 0.1rem 0.3rem;
+    background-color: #008aff1f;
 }
 
 .post-text figure img{
@@ -162,6 +178,12 @@ font-size:1.2rem;
     margin-top: 1.5rem;
 }
 
+.post-text h4{
+    font-weight: 600;
+    font-size:1rem;
+    margin-top: 1rem;
+}
+
 .post-text ul{
     list-style-position: outside;
     padding: 0 1.2rem;
@@ -198,22 +220,21 @@ .post-text pre::-webkit-scrollbar-thumb:active {
   background-color: rgba(3,122,255,0.8);
 }
 
-.post-text > p > code{
+:not(pre) > code{
     font-family: monospace;
     font-size: 14px;
-    background: rgba(0,0,0,0.08);
-    border: 1px solid rgba(0,0,0,0.1);
+    background-color: var(--code-bg);
+    border: 1px solid var(--pre-border);
     padding: 0 0.3rem;
     border-radius: 0.2rem;
 }
 
-.post-text > p > a > code{
-    font-family: monospace;
-    font-size: 14px;
-    background: rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.1);
-    padding: 0 0.4rem;
-    border-radius: 0.2rem;
+.post-text ._aside {
+    border: 1px solid #008aff42;
+    border-radius: 6px;
+    background-color: #40a6ff14;
+    padding: 0.5rem 2.5rem;
+    margin-top: 1rem;
 }
 
 .post-text blockquote {
@@ -255,6 +276,10 @@ }
 
     .post-item > .post-date{
         margin-bottom: 0.2rem;
+    }
+
+    .post-text ._aside {
+        padding: 0.5rem 1.5rem;
     }
 
 

M static/css/main.css → static/css/main.css

@@ -31,6 +31,7 @@ --dark-logo-top: white;
     --dark-logo-bottom: #eeeeee;
     --dark-pre-bg: #000000;
     --dark-pre-border: #ffffff30;
+    --dark-code-bg: #1a1a1a;
 
     --light-bg: #f3f3f3;
     --light-text: #666666;
@@ -40,8 +41,9 @@ --light-card-head: #333333;
     --light-card-text: #292929;
     --light-logo-top: #1a1a1a;
     --light-logo-bottom: #4d4d4d;
-    --light-pre-bg: #0000003d;
+    --light-pre-bg: #0000000f;
     --light-pre-border: #00000026;
+    --light-code-bg: #0000000f;
 }
 
 body.theme-light, body.theme-auto{
@@ -55,8 +57,10 @@ --card-head: var(--light-card-head);
     --card-text: var(--light-card-text);
     --logo-top: var(--light-logo-top);
     --logo-bottom: var(--light-logo-bottom);
-    --pre-bg: #0000000f;
+    --pre-bg: var(--light-pre-bg);
     --pre-border: var(--light-pre-border);
+    --code-bg: var(--light-code-bg);
+    --scrollbar: #00000021;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -73,6 +77,7 @@ --logo-top: var(--dark-logo-top);
         --logo-bottom: var(--dark-logo-bottom);
         --pre-bg: var(--dark-pre-bg);
         --pre-border: var(--dark-pre-border);
+        --code-bg: var(--dark-code-bg);
         --scrollbar: #ffffff11;
     }
 }
@@ -90,7 +95,8 @@ --logo-top: var(--dark-logo-top);
     --logo-bottom: var(--dark-logo-bottom);
     --pre-bg: var(--dark-pre-bg);
     --pre-border: var(--dark-pre-border);
-    --scrollbar: #ffffff11;
+    --code-bg: var(--dark-code-bg);
+    --scrollbar: #ffffff25;
 }
 
 body{