Slightly improve styling

kirillbobyrev · Dec 22, 2024 · a6c78e1 · a6c78e1
1 parent 86d3d64
commit a6c78e1
Showing 1 changed file with 32 additions and 17 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,6 +1,7 @@
 /* Variables */
 
 :root {
+  --text-color: #333;
   --max-width: 48rem;
 
   /* Colors */
@@ -12,23 +13,17 @@
   --muted-background: #f5f5f6;
 
   /* Typography */
-  --line-height: 1.3;
+  --line-height: 1.4;
   --font-size: 105%;
+
+  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 /* Base styles */
 
 body {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Helvetica Neue",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  scroll-behavior: smooth;
+  font-family: var(--body-font);
   margin: auto;
   max-width: var(--max-width);
   padding: 1rem 1.5rem;
@@ -41,6 +36,8 @@ body {
 img {
   max-width: 100%;
   height: auto;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* Image captions (if applicable) */
@@ -76,13 +73,30 @@ code {
   line-height: var(--line-height);
 }
 
+pre:has(code),
+p>code {
+  border: thin solid var(--muted);
+  padding: 1rem;
+  border-radius: 0.4rem;
+  overflow-x: auto;
+  background-color: var(--muted-background);
+  font-size: 0.95rem;
+}
+
+p>code {
+  border-radius: 0.2rem;
+  padding: 0.1rem 0.3rem;
+  background-color: var(--muted-background);
+}
+
 hr {
   border: 0;
   height: 1px;
   background: var(--muted);
 }
 
-pre:has(code), p>code {
+pre:has(code),
+p>code {
   border: thin solid var(--muted);
   padding: .5rem;
   border-radius: 0.3rem;
@@ -103,7 +117,7 @@ time {
 /* Title and menu. */
 
 .blog-title {
-  color: black;
+  color: #222;
   text-decoration: none;
   font-size: xx-large;
   font-weight: bold;
@@ -119,7 +133,7 @@ time {
   text-decoration: none;
   font-size: large;
   padding-right: .3rem;
-  color: black;
+  color: #222;
   font-weight: 600;
   transition: color 0.3s;
 }
@@ -171,18 +185,19 @@ h2 {
 
 /* Misc */
 
-/* TODO: The list ends up shifted too much to the right, likely need to reduce
- * padding somehow. */
 ul:has(li>input) {
   list-style: none;
+  padding-left: 0;
+  margin-left: 1rem;
 }
 
 table {
   border-collapse: collapse;
   width: 100%;
 }
 
-td, th {
+td,
+th {
   border: 1px solid var(--muted);
   padding: 0 1em;
 }