HTML/CSS only tabs (#678)

* Fix pre tag margin top so it looks good inside containers

* Bind to 0.0.0.0 for docker container support

* Add HTML only tabs shortcode

exampleSite/config.toml

@@ -84,8 +84,8 @@ stylesrc = [
   "https://cdn.jsdelivr.net/"
 ]
 scriptsrc = [
-  "'self'", 
-  "'unsafe-inline'", 
+  "'self'",
+  "'unsafe-inline'",
   "https://www.google-analytics.com",
   "https://cdn.jsdelivr.net/"
 ]

exampleSite/content/posts/html-and-css-only-tabs.md

@@ -0,0 +1,133 @@
++++
+author = "Hugo Authors"
+title = "HTML and CSS only tabs"
+date = "2022-05-15"
+description = "Sample article showcasing shortcodes for HTML/CSS only tabs"
+tags = [
+    "markdown",
+    "css",
+    "html",
+]
+categories = [
+    "themes",
+    "syntax",
+]
+series = ["Themes Guide"]
+aliases = ["migrate-from-jekyl"]
++++
+
+## Basic shortcodes
+
+The following content:
+
+```markdown
+{{</* tabgroup */>}}
+  {{</* tab name="Hello" */>}}
+  Hello World!
+  {{</* /tab */>}}
+
+  {{</* tab name="Goodbye" */>}}
+  Goodbye Everybody!
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+```
+
+Will generate:
+
+{{< tabgroup >}}
+  {{< tab name="Hello" >}}
+  Hello World!
+  {{< /tab >}}
+
+  {{< tab name="Goodbye" >}}
+  Goodbye Everybody!
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+## Right alighment
+
+You can also align the tabs to the right:
+
+```markdown
+{{</* tabgroup align="right" */>}}
+  {{</* tab name="Hello" */>}}
+  Hello World!
+  {{</* /tab */>}}
+
+  {{</* tab name="Goodbye" */>}}
+  Goodbye Everybody!
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+```
+
+Giving you this look:
+
+{{< tabgroup align="right" >}}
+  {{< tab name="Hello" >}}
+  Hello World!
+  {{< /tab >}}
+
+  {{< tab name="Goodbye" >}}
+  Goodbye Everybody!
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+## Markdown content
+
+Any valid markdown can be used inside the tab:
+
+~~~markdown
+{{</* tabgroup align="right" style="code" */>}}
+  {{</* tab name="Ruby" */>}}
+
+```ruby
+puts 'Hello'
+```
+
+  {{</* /tab */>}}
+  {{</* tab name="Python" */>}}
+
+```python
+print('Hello')
+```
+
+  {{</* /tab */>}}
+  {{</* tab name="JavaScript" */>}}
+
+```js
+console.log('Hello')
+```
+
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+
+~~~
+
+And you get this lovely content:
+
+{{< tabgroup align="right" style="code" >}}
+  {{< tab name="Ruby" >}}
+
+```ruby
+puts 'Hello'
+```
+
+  {{< /tab >}}
+  {{< tab name="Python" >}}
+
+```python
+print('Hello')
+```
+
+  {{< /tab >}}
+  {{< tab name="JavaScript" >}}
+
+```js
+console.log('Hello')
+```
+
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+In this case `style="code"` makes it look a little nicer for scenarios where
+your content purely a code block.

exampleSite/resources/_gen/assets/scss/scss/coder-dark.scss_9e20ccd2d8034c8e0fd83b11fb6e2bd5.content

@@ -233,6 +233,27 @@ body.colorscheme-dark .navigation .menu-button i:hover, body.colorscheme-dark .n
   body.colorscheme-auto .navigation .menu-button i:hover, body.colorscheme-auto .navigation .menu-button i:focus {
     color: #dadada; } }
 
+body.colorscheme-dark .tabs label.tab-label {
+  background-color: #424242;
+  border-color: #4f4f4f; }
+
+body.colorscheme-dark .tabs input.tab-input:checked + label.tab-label {
+  background-color: #212121; }
+
+body.colorscheme-dark .tabs .tab-content {
+  background-color: #212121;
+  border-color: #4f4f4f; }
+
+@media (prefers-color-scheme: dark) {
+  body.colorscheme-auto .tabs label.tab-label {
+    background-color: #424242;
+    border-color: #4f4f4f; }
+  body.colorscheme-auto .tabs input.tab-input:checked + label.tab-label {
+    background-color: #212121; }
+  body.colorscheme-auto .tabs .tab-content {
+    background-color: #212121;
+    border-color: #4f4f4f; } }
+
 body.colorscheme-dark .taxonomy-element {
   background-color: #424242; }
   body.colorscheme-dark .taxonomy-element a {

exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -3147,7 +3147,7 @@ strong {
 
 .highlight > div,
 .highlight > pre {
-  margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   padding: 1rem;
   border-radius: 1rem; }
 
@@ -3576,6 +3576,55 @@ figure {
         text-align: center;
         width: 3.2rem; }
 
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem 0 2rem 0;
+  position: relative; }
+  .tabs.tabs-left {
+    justify-content: flex-start; }
+    .tabs.tabs-left label.tab-label {
+      margin-right: 0.5rem; }
+    .tabs.tabs-left .tab-content {
+      border-radius: 0px 4px 4px 4px; }
+  .tabs.tabs-right {
+    justify-content: flex-end; }
+    .tabs.tabs-right label.tab-label {
+      margin-left: 0.5rem; }
+    .tabs.tabs-right .tab-content {
+      border-radius: 4px 0px 4px 4px; }
+  .tabs input.tab-input {
+    display: none; }
+  .tabs label.tab-label {
+    background-color: #e0e0e0;
+    border-color: #ccc;
+    border-radius: 4px 4px 0px 0px;
+    border-style: solid;
+    border-bottom-style: hidden;
+    border-width: 1px;
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 0.3rem 0.6rem;
+    position: relative;
+    top: 1px;
+    user-select: none; }
+  .tabs input.tab-input:checked + label.tab-label {
+    background-color: #fafafa; }
+  .tabs .tab-content {
+    background-color: #fafafa;
+    border-color: #ccc;
+    border-style: solid;
+    border-width: 1px;
+    display: none;
+    order: 2;
+    padding: 1rem;
+    width: 100%; }
+  .tabs.tabs-code .tab-content {
+    padding: 0.5rem; }
+    .tabs.tabs-code .tab-content pre {
+      margin: 0; }
+
 .taxonomy li {
   display: inline-block;
   margin: 0.9rem; }