From ffe742f3a1a453bb3649db77f47acdc80ef8cc54 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips Freeman <the@jeffreyfreeman.me>
Date: Tue, 17 Oct 2023 18:22:25 -0400
Subject: [PATCH] Added pretty quote box and improved tabs shortcode

---
 CHANGELOG.md                      |  3 ++
 assets/css/main.css               | 63 +++++++++++++++++++++++++++++++
 layouts/shortcodes/quote-box.html |  6 +++
 layouts/shortcodes/tabs.html      |  2 +-
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/quote-box.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11fae7130..ff723069c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,9 @@
 * Added a shortcode to render a GitLab based activity heatmap calander.
 * Added `cal-heatmap` support along with `D3.js` and several related extensions.
 * Opened up CORS headers since a static site shouldnt need any CORS protections.
+* Added a `quote-box` shortcode useful for displaying pretty quotes.
+* Improved the `tabs` shortcode so the title can be left off and it wont render
+    a black empty square.
 
 ## 1.1.0
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 7238df13c..8571585da 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -536,6 +536,7 @@ background: transparent;
 .ButtonTabs > .nav-tabs > .button,
 .ButtonTabs > .nav-tabs > .button.is-active {
   box-shadow: none;
+  white-space: normal;
 }
 
 /* highlight styles */
@@ -673,3 +674,65 @@ div#ch-tooltip {
   justify-content: center;
   display: flex;
 }
+
+/* Adding pretty quote boxes */
+/* @import url('https://fonts.googleapis.com/css?family=Special+Elite'); */
+
+.quote-box {
+  text-align: left;
+  /* padding-right: 5em; */
+  /* font-family: 'Special Elite', cursive; */
+
+	color: #3f3f5a;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+  padding-left: 5em;
+  padding-right: 5em;
+}
+
+.quote-box > blockquote {
+	font-weight: 100;
+	font-size: 2rem;
+	max-width: 600px;
+	line-height: 1.4;
+	position: relative;
+	padding: .5rem;
+  border-left: none;
+
+  margin: auto;
+}
+
+.quote-box > blockquote:before,
+.quote-box > blockquote:after {
+	position: absolute;
+	color: #ccc;
+	font-size: 8rem;
+	width: 4rem;
+	height: 4rem;
+}
+
+.quote-box > blockquote:before {
+	content: '“';
+	left: -5rem;
+	top: -2rem;
+}
+
+.quote-box > blockquote:after {
+	content: '”';
+	right: -5rem;
+	bottom: 1rem;
+}
+
+.quote-box > cite {
+	line-height: 3;
+	text-align: right;
+  font-size: 2rem;
+  margin: auto;
+}
+
+.quote-box > cite:before {
+	content: '- ';
+  font-size: 2rem;
+}
diff --git a/layouts/shortcodes/quote-box.html b/layouts/shortcodes/quote-box.html
new file mode 100644
index 000000000..178400cfa
--- /dev/null
+++ b/layouts/shortcodes/quote-box.html
@@ -0,0 +1,6 @@
+<div class="quote-box">
+  <blockquote>
+       {{ .Inner }}
+  </blockquote>
+  <cite>{{ .Get "source" }}</cite>
+</div>
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 26443a4ef..debe88720 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -5,7 +5,7 @@
     </div>
     <div class="col col--9 code-with-header">
       <div class="code-with-header">
-        <div class="code-header">{{ .Get 0 }}</div>
+        {{ if .Get 0 }}<div class="code-header">{{ .Get 0 }}</div>{{ end }}
         <div class="scrollbar-container tab-content">
             {{ .Inner }}
         </div>
-- 
GitLab