Skip to content
Permalink
Browse files
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
  • Loading branch information
sdwolfz committed May 29, 2022
1 parent 9ea82c5 commit 5e4e500cdfe00babb29eb7aeef18c9d0ec3c5a47
Show file tree
Hide file tree
Showing 19 changed files with 418 additions and 10 deletions.
@@ -6,7 +6,7 @@ build:
$(HUGO_BIN) --themesDir=../.. --source=exampleSite

demo:
$(HUGO_BIN) server -D --themesDir=../.. --source=exampleSite
$(HUGO_BIN) server -D --themesDir=../.. --source=exampleSite --bind 0.0.0.0

release: build
rm -rf ./resources && cp -r ./exampleSite/resources ./resources
@@ -136,7 +136,7 @@ strong {

.highlight>div,
.highlight>pre {
margin: 0 0 2rem;
margin: 2rem 0 2rem;
padding: 1rem;
border-radius: 1rem;
}
@@ -0,0 +1,77 @@
.tabs {
display: flex;
flex-wrap: wrap;
margin: 2rem 0 2rem 0;
position: relative;

&.tabs-left {
justify-content: flex-start;

label.tab-label {
margin-right: 0.5rem;
}

.tab-content {
border-radius: 0px 4px 4px 4px;
}
}

&.tabs-right {
justify-content: flex-end;

label.tab-label {
margin-left: 0.5rem;
}

.tab-content {
border-radius: 4px 0px 4px 4px;
}
}

input.tab-input {
display: none;
}

label.tab-label {
background-color: $alt-bg-color;
border-color: $darker-alt-bg-color;
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;
}

input.tab-input:checked + label.tab-label {
background-color: $bg-color;
}

.tab-content {
background-color: $bg-color;
border-color: $darker-alt-bg-color;
border-style: solid;
border-width: 1px;
display: none;
order: 2;
padding: 1rem;
width: 100%;
}

&.tabs-code {
.tab-content {
padding: 0.5rem;

pre {
margin: 0;
}
}
}
}
@@ -0,0 +1,27 @@
@mixin tabs_dark {
.tabs {
label.tab-label {
background-color: $alt-bg-color-dark;
border-color: $lighter-alt-bg-color-dark;
}

input.tab-input:checked + label.tab-label {
background-color: $bg-color-dark;
}

.tab-content {
background-color: $bg-color-dark;
border-color: $lighter-alt-bg-color-dark;
}
}
}

body.colorscheme-dark {
@include tabs_dark();
}

body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include tabs_dark();
}
}
@@ -25,13 +25,15 @@ $bg-color: #fafafa !default;
$fg-color: #212121 !default;
$alt-bg-color: #e0e0e0 !default;
$alt-fg-color: #000 !default;
$darker-alt-bg-color: #ccc !default;
$link-color: #1565c0 !default;

// Dark colors
$bg-color-dark: #212121 !default;
$fg-color-dark: #dadada !default;
$alt-bg-color-dark: #424242 !default;
$alt-fg-color-dark: #dadada !default;
$lighter-alt-bg-color-dark: #4f4f4f !default;
$link-color-dark: #42a5f5 !default;

// Notice colors
@@ -3,6 +3,7 @@
@import "content_dark";
@import "notices_dark";
@import "navigation_dark";
@import "tabs_dark";
@import "taxonomies_dark";
@import "footer_dark";
@import "float_dark";
@@ -6,6 +6,7 @@
@import "notices";
@import "navigation";
@import "pagination";
@import "tabs";
@import "taxonomies";
@import "footer";
@import "float";
@@ -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/"
]
@@ -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.
@@ -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 {
@@ -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; }

0 comments on commit 5e4e500

Please sign in to comment.