From 5aa7fccb908eb7307d316284769a9cdabfdd7699 Mon Sep 17 00:00:00 2001
From: Jon Torre <78599298+Jcahilltorre@users.noreply.github.com>
Date: Thu, 22 Aug 2024 12:35:52 +0100
Subject: [PATCH] docs: add shortcodes and CSS (#71)

* docs: add shortcodes and CSS

* docs: update CSS
---
 assets/css/f5-hugo.css                   | 24 +++++++++++++++++++++++-
 layouts/shortcodes/before-you-begin.html |  3 +++
 layouts/shortcodes/call-out.html         | 14 ++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/before-you-begin.html
 create mode 100644 layouts/shortcodes/call-out.html

diff --git a/assets/css/f5-hugo.css b/assets/css/f5-hugo.css
index f7eb3ce..6e9e4fc 100644
--- a/assets/css/f5-hugo.css
+++ b/assets/css/f5-hugo.css
@@ -484,7 +484,6 @@ blockquote,
 dd,
 ol,
 p,
-table,
 ul {
   border: 0;
   font-family: inherit;
@@ -496,6 +495,29 @@ ul {
   padding: 0;
 }
 
+table {
+   width: 100%;
+   border-collapse: collapse;
+  }
+  th, td {
+   padding: 8px;
+   text-align: left;
+  }
+  th {
+   background-color: #289951 ; /* Dark green */
+   color: white; /* White text for readability */
+  }
+  .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #fff; /* White */
+  }
+  .table-striped > tbody > tr:nth-of-type(even) {
+   background-color: #f9f9f9; /* Light gray */
+  }
+  th, td {
+   border: none;
+  }
+
+
 .section-heading {
   padding-top: 20px;
 }
diff --git a/layouts/shortcodes/before-you-begin.html b/layouts/shortcodes/before-you-begin.html
new file mode 100644
index 0000000..cd94795
--- /dev/null
+++ b/layouts/shortcodes/before-you-begin.html
@@ -0,0 +1,3 @@
+<blockquote class="tip">
+   <div><strong>Before you begin:</strong><br/> {{ .Inner | markdownify }}</div>
+ </blockquote>
\ No newline at end of file
diff --git a/layouts/shortcodes/call-out.html b/layouts/shortcodes/call-out.html
new file mode 100644
index 0000000..4a7b20e
--- /dev/null
+++ b/layouts/shortcodes/call-out.html
@@ -0,0 +1,14 @@
+<!-- Blockquote element with a class that is the first parameter passed to the shortcode -->
+<blockquote class="{{ .Get 0 }}">
+   <div>
+     <!-- Check if the third parameter (icon class) is provided -->
+     {{ with .Get 2 }}
+       <!-- If the icon class is provided, render an <i> element with the given class -->
+       <i class="{{ . }}"></i>
+     {{ end }}
+     <!-- Render the second parameter (title) as a strong element -->
+     <strong>{{ .Get 1 }}</strong><br/>
+     <!-- Render the inner content of the shortcode, converting it from Markdown to HTML -->
+     {{ .Inner | markdownify }}
+   </div>
+ </blockquote>
\ No newline at end of file