diff --git a/assets/css/common/main.css b/assets/css/common/main.css
index 3721408..d7ad1d9 100644
--- a/assets/css/common/main.css
+++ b/assets/css/common/main.css
@@ -119,3 +119,68 @@ pre:hover .copy-code {
 .meta-item .post-tags a:before {
     content: "#";
 }
+
+
+/* effects */
+:root {
+    --shadow-color: 0deg 0% 0%;
+    --shadow-elevation-low:
+      0.6px 0.6px 1px hsl(var(--shadow-color) / 0.1),
+      0.9px 0.9px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
+      2.2px 2.2px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
+    --shadow-elevation-medium:
+      0.6px 0.6px 1px hsl(var(--shadow-color) / 0.11),
+      1.8px 1.8px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
+      4.6px 4.6px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
+      11.1px 11.1px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
+
+    --twitter-color: #4a99e9;
+}
+
+
+/* links page */
+
+.links-container {
+  font-size: 16px;
+}
+.links-container blockquote {
+  margin: var(--gap) 0;
+  padding: 0 14px;
+  border-inline-start: 3px solid var(--primary);
+}
+.links .item {
+  padding: 12px;
+  background: var(--entry);
+  border-radius: var(--radius);
+  margin-bottom: var(--gap);
+  border: 1px solid var(--border);
+}
+
+.links .favicon {
+  display: inline-block;
+  background-size: 16px 16px;
+  width: 16px;
+  height: 16px;
+  image-rendering: -webkit-optimize-contrast;
+}
+.links .item .title  {
+}
+.links .item .title .favicon {
+  margin-right: calc(var(--gap) / 2);
+  vertical-align: middle;
+}
+
+.links .item .title a:hover {
+  text-decoration: underline;
+}
+
+.links .item .description {
+  margin-left: calc(16px + var(--gap) / 2);
+  color: var(--secondary);
+}
+
+.links .item .description .delimiter::after {
+    content: "·";
+    margin-inline-start: .5em;
+    margin-inline-end: .5em;
+}
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index a778bd8..00d2fae 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -487,21 +487,6 @@ h6:hover .anchor {
     background-color: var(--secondary);
 }
 
-:root {
-    --shadow-color: 0deg 0% 0%;
-    --shadow-elevation-low:
-      0.6px 0.6px 1px hsl(var(--shadow-color) / 0.1),
-      0.9px 0.9px 1.4px -1.2px hsl(var(--shadow-color) / 0.1),
-      2.2px 2.2px 3.5px -2.5px hsl(var(--shadow-color) / 0.1);
-    --shadow-elevation-medium:
-      0.6px 0.6px 1px hsl(var(--shadow-color) / 0.11),
-      1.8px 1.8px 2.9px -0.8px hsl(var(--shadow-color) / 0.11),
-      4.6px 4.6px 7.3px -1.7px hsl(var(--shadow-color) / 0.11),
-      11.1px 11.1px 17.7px -2.5px hsl(var(--shadow-color) / 0.11);
-
-    --twitter-color: #4a99e9;
-}
-
 .social-links {
     margin: calc(var(--content-gap) * 2) 0;
     background-color: var(--code-bg);