docs: add shortcodes and CSS (#71)

* docs: add shortcodes and CSS

* docs: update CSS

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;
 }

layouts/shortcodes/before-you-begin.html

@@ -0,0 +1,3 @@
+<blockquote class="tip">
+   <div><strong>Before you begin:</strong><br/> {{ .Inner | markdownify }}</div>
+ </blockquote>

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>