From 4583b1912ccc446a08b53597c4e0976ebd4a6b60 Mon Sep 17 00:00:00 2001
From: Dhananjay Balan <mail@dbalan.in>
Date: Sun, 21 Jan 2024 15:57:31 +0100
Subject: [PATCH] Fix blockquotes theme

---
 css/theme.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 99 insertions(+), 5 deletions(-)

diff --git a/css/theme.css b/css/theme.css
index 4f1d221..47a1309 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -14,7 +14,7 @@ html {
 
 #title {
     grid-column-start: 1;
-    font-size: 16pt;
+    font-size: 18pt;
     font-style: bold;
     text-align: left;
 }
@@ -22,7 +22,7 @@ html {
 #nav {
     grid-column-start: 2;
     text-align: right;
-    font-size: 16pt;
+    font-size: 18pt;
     font-variant: small-caps;
     word-spacing: 110%;
 }
@@ -36,6 +36,7 @@ body {
     max-width: 1000px;
     padding: 1em;
     text-align: left;
+    font-size: 14pt;
 }
 
 a:hover {
@@ -44,11 +45,104 @@ a:hover {
   text-decoration: none;
 }
 
-}
+
 blockquote {
-    font-style: italic;
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
+.dark blockquote {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
+blockquote {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 640px) {
+  blockquote {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
+@media (min-width: 768px) {
+  blockquote {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  blockquote {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+blockquote {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-left-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  font-style: italic;
+
+    font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+  // font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  // font-size: 1.125rem;
+  // line-height: 1.75rem;
+}
+
+blockquote::after {
+  --tw-content: close-quote;
+  content: var(--tw-content);
+  font-size: 3rem;
+  line-height: 1;
+}
+
+blockquote::before {
+  font-size: 3rem;
+  line-height: 1;
+  content: var(--tw-content);
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+blockquote::after {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+  content: var(--tw-content);
+  line-height: .1em;
+}
+
+blockquote::before {
+  line-height: .1em;
+  content: var(--tw-content);
+  margin-right: 0.25rem;
+}
+
+blockquote::after {
+  margin-right: 0.25rem;
+  content: var(--tw-content);
+  vertical-align: -.4em;
+}
+
+blockquote::before {
+  vertical-align: -.4em;
+  --tw-content: open-quote;
+  content: var(--tw-content);
+}
+
+blockquote p {
+  display: inline;
+}
+
+
 video,
 code {
     font-weight: normal;
@@ -91,7 +185,7 @@ figcaption {
 
 h1 {
     font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
-    font-size: 30pt;
+    font-size: 34pt;
     font-weight: bold;
 }