Skip to content

Commit 5e4e500

Browse files
sdwolfzsdwolfz
authored
HTML/CSS only tabs (luizdepra#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
1 parent 9ea82c5 commit 5e4e500

19 files changed

+418
-10
lines changed

‎Makefile

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ build:
66
$(HUGO_BIN) --themesDir=../.. --source=exampleSite
77

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

1111
release: build
1212
rm -rf ./resources && cp -r ./exampleSite/resources ./resources

‎assets/scss/_base.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ strong {
136136

137137
.highlight>div,
138138
.highlight>pre {
139-
margin: 0 0 2rem;
139+
margin: 2rem 0 2rem;
140140
padding: 1rem;
141141
border-radius: 1rem;
142142
}

‎assets/scss/_tabs.scss

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.tabs {
2+
display: flex;
3+
flex-wrap: wrap;
4+
margin: 2rem 0 2rem 0;
5+
position: relative;
6+
7+
&.tabs-left {
8+
justify-content: flex-start;
9+
10+
label.tab-label {
11+
margin-right: 0.5rem;
12+
}
13+
14+
.tab-content {
15+
border-radius: 0px 4px 4px 4px;
16+
}
17+
}
18+
19+
&.tabs-right {
20+
justify-content: flex-end;
21+
22+
label.tab-label {
23+
margin-left: 0.5rem;
24+
}
25+
26+
.tab-content {
27+
border-radius: 4px 0px 4px 4px;
28+
}
29+
}
30+
31+
input.tab-input {
32+
display: none;
33+
}
34+
35+
label.tab-label {
36+
background-color: $alt-bg-color;
37+
border-color: $darker-alt-bg-color;
38+
border-radius: 4px 4px 0px 0px;
39+
40+
border-style: solid;
41+
border-bottom-style: hidden;
42+
43+
border-width: 1px;
44+
cursor: pointer;
45+
display: inline-block;
46+
order: 1;
47+
padding: 0.3rem 0.6rem;
48+
position: relative;
49+
top: 1px;
50+
user-select: none;
51+
}
52+
53+
input.tab-input:checked + label.tab-label {
54+
background-color: $bg-color;
55+
}
56+
57+
.tab-content {
58+
background-color: $bg-color;
59+
border-color: $darker-alt-bg-color;
60+
border-style: solid;
61+
border-width: 1px;
62+
display: none;
63+
order: 2;
64+
padding: 1rem;
65+
width: 100%;
66+
}
67+
68+
&.tabs-code {
69+
.tab-content {
70+
padding: 0.5rem;
71+
72+
pre {
73+
margin: 0;
74+
}
75+
}
76+
}
77+
}

‎assets/scss/_tabs_dark.scss

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@mixin tabs_dark {
2+
.tabs {
3+
label.tab-label {
4+
background-color: $alt-bg-color-dark;
5+
border-color: $lighter-alt-bg-color-dark;
6+
}
7+
8+
input.tab-input:checked + label.tab-label {
9+
background-color: $bg-color-dark;
10+
}
11+
12+
.tab-content {
13+
background-color: $bg-color-dark;
14+
border-color: $lighter-alt-bg-color-dark;
15+
}
16+
}
17+
}
18+
19+
body.colorscheme-dark {
20+
@include tabs_dark();
21+
}
22+
23+
body.colorscheme-auto {
24+
@media (prefers-color-scheme: dark) {
25+
@include tabs_dark();
26+
}
27+
}

‎assets/scss/_variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ $bg-color: #fafafa !default;
2525
$fg-color: #212121 !default;
2626
$alt-bg-color: #e0e0e0 !default;
2727
$alt-fg-color: #000 !default;
28+
$darker-alt-bg-color: #ccc !default;
2829
$link-color: #1565c0 !default;
2930

3031
// Dark colors
3132
$bg-color-dark: #212121 !default;
3233
$fg-color-dark: #dadada !default;
3334
$alt-bg-color-dark: #424242 !default;
3435
$alt-fg-color-dark: #dadada !default;
36+
$lighter-alt-bg-color-dark: #4f4f4f !default;
3537
$link-color-dark: #42a5f5 !default;
3638

3739
// Notice colors

‎assets/scss/coder-dark.scss

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "content_dark";
44
@import "notices_dark";
55
@import "navigation_dark";
6+
@import "tabs_dark";
67
@import "taxonomies_dark";
78
@import "footer_dark";
89
@import "float_dark";

‎assets/scss/coder.scss

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import "notices";
77
@import "navigation";
88
@import "pagination";
9+
@import "tabs";
910
@import "taxonomies";
1011
@import "footer";
1112
@import "float";

‎exampleSite/config.toml

+2-2
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ stylesrc = [
8484
"https://cdn.jsdelivr.net/"
8585
]
8686
scriptsrc = [
87-
"'self'",
88-
"'unsafe-inline'",
87+
"'self'",
88+
"'unsafe-inline'",
8989
"https://www.google-analytics.com",
9090
"https://cdn.jsdelivr.net/"
9191
]

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

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
+++
2+
author = "Hugo Authors"
3+
title = "HTML and CSS only tabs"
4+
date = "2022-05-15"
5+
description = "Sample article showcasing shortcodes for HTML/CSS only tabs"
6+
tags = [
7+
"markdown",
8+
"css",
9+
"html",
10+
]
11+
categories = [
12+
"themes",
13+
"syntax",
14+
]
15+
series = ["Themes Guide"]
16+
aliases = ["migrate-from-jekyl"]
17+
+++
18+
19+
## Basic shortcodes
20+
21+
The following content:
22+
23+
```markdown
24+
{{</* tabgroup */>}}
25+
{{</* tab name="Hello" */>}}
26+
Hello World!
27+
{{</* /tab */>}}
28+
29+
{{</* tab name="Goodbye" */>}}
30+
Goodbye Everybody!
31+
{{</* /tab */>}}
32+
{{</* /tabgroup */>}}
33+
```
34+
35+
Will generate:
36+
37+
{{< tabgroup >}}
38+
{{< tab name="Hello" >}}
39+
Hello World!
40+
{{< /tab >}}
41+
42+
{{< tab name="Goodbye" >}}
43+
Goodbye Everybody!
44+
{{< /tab >}}
45+
{{< /tabgroup >}}
46+
47+
## Right alighment
48+
49+
You can also align the tabs to the right:
50+
51+
```markdown
52+
{{</* tabgroup align="right" */>}}
53+
{{</* tab name="Hello" */>}}
54+
Hello World!
55+
{{</* /tab */>}}
56+
57+
{{</* tab name="Goodbye" */>}}
58+
Goodbye Everybody!
59+
{{</* /tab */>}}
60+
{{</* /tabgroup */>}}
61+
```
62+
63+
Giving you this look:
64+
65+
{{< tabgroup align="right" >}}
66+
{{< tab name="Hello" >}}
67+
Hello World!
68+
{{< /tab >}}
69+
70+
{{< tab name="Goodbye" >}}
71+
Goodbye Everybody!
72+
{{< /tab >}}
73+
{{< /tabgroup >}}
74+
75+
## Markdown content
76+
77+
Any valid markdown can be used inside the tab:
78+
79+
~~~markdown
80+
{{</* tabgroup align="right" style="code" */>}}
81+
{{</* tab name="Ruby" */>}}
82+
83+
```ruby
84+
puts 'Hello'
85+
```
86+
87+
{{</* /tab */>}}
88+
{{</* tab name="Python" */>}}
89+
90+
```python
91+
print('Hello')
92+
```
93+
94+
{{</* /tab */>}}
95+
{{</* tab name="JavaScript" */>}}
96+
97+
```js
98+
console.log('Hello')
99+
```
100+
101+
{{</* /tab */>}}
102+
{{</* /tabgroup */>}}
103+
104+
~~~
105+
106+
And you get this lovely content:
107+
108+
{{< tabgroup align="right" style="code" >}}
109+
{{< tab name="Ruby" >}}
110+
111+
```ruby
112+
puts 'Hello'
113+
```
114+
115+
{{< /tab >}}
116+
{{< tab name="Python" >}}
117+
118+
```python
119+
print('Hello')
120+
```
121+
122+
{{< /tab >}}
123+
{{< tab name="JavaScript" >}}
124+
125+
```js
126+
console.log('Hello')
127+
```
128+
129+
{{< /tab >}}
130+
{{< /tabgroup >}}
131+
132+
In this case `style="code"` makes it look a little nicer for scenarios where
133+
your content purely a code block.

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

+21
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,27 @@ body.colorscheme-dark .navigation .menu-button i:hover, body.colorscheme-dark .n
233233
body.colorscheme-auto .navigation .menu-button i:hover, body.colorscheme-auto .navigation .menu-button i:focus {
234234
color: #dadada; } }
235235

236+
body.colorscheme-dark .tabs label.tab-label {
237+
background-color: #424242;
238+
border-color: #4f4f4f; }
239+
240+
body.colorscheme-dark .tabs input.tab-input:checked + label.tab-label {
241+
background-color: #212121; }
242+
243+
body.colorscheme-dark .tabs .tab-content {
244+
background-color: #212121;
245+
border-color: #4f4f4f; }
246+
247+
@media (prefers-color-scheme: dark) {
248+
body.colorscheme-auto .tabs label.tab-label {
249+
background-color: #424242;
250+
border-color: #4f4f4f; }
251+
body.colorscheme-auto .tabs input.tab-input:checked + label.tab-label {
252+
background-color: #212121; }
253+
body.colorscheme-auto .tabs .tab-content {
254+
background-color: #212121;
255+
border-color: #4f4f4f; } }
256+
236257
body.colorscheme-dark .taxonomy-element {
237258
background-color: #424242; }
238259
body.colorscheme-dark .taxonomy-element a {

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

+50-1
Original file line numberDiff line numberDiff line change
@@ -3147,7 +3147,7 @@ strong {
31473147

31483148
.highlight > div,
31493149
.highlight > pre {
3150-
margin: 0 0 2rem;
3150+
margin: 2rem 0 2rem;
31513151
padding: 1rem;
31523152
border-radius: 1rem; }
31533153

@@ -3576,6 +3576,55 @@ figure {
35763576
text-align: center;
35773577
width: 3.2rem; }
35783578

3579+
.tabs {
3580+
display: flex;
3581+
flex-wrap: wrap;
3582+
margin: 2rem 0 2rem 0;
3583+
position: relative; }
3584+
.tabs.tabs-left {
3585+
justify-content: flex-start; }
3586+
.tabs.tabs-left label.tab-label {
3587+
margin-right: 0.5rem; }
3588+
.tabs.tabs-left .tab-content {
3589+
border-radius: 0px 4px 4px 4px; }
3590+
.tabs.tabs-right {
3591+
justify-content: flex-end; }
3592+
.tabs.tabs-right label.tab-label {
3593+
margin-left: 0.5rem; }
3594+
.tabs.tabs-right .tab-content {
3595+
border-radius: 4px 0px 4px 4px; }
3596+
.tabs input.tab-input {
3597+
display: none; }
3598+
.tabs label.tab-label {
3599+
background-color: #e0e0e0;
3600+
border-color: #ccc;
3601+
border-radius: 4px 4px 0px 0px;
3602+
border-style: solid;
3603+
border-bottom-style: hidden;
3604+
border-width: 1px;
3605+
cursor: pointer;
3606+
display: inline-block;
3607+
order: 1;
3608+
padding: 0.3rem 0.6rem;
3609+
position: relative;
3610+
top: 1px;
3611+
user-select: none; }
3612+
.tabs input.tab-input:checked + label.tab-label {
3613+
background-color: #fafafa; }
3614+
.tabs .tab-content {
3615+
background-color: #fafafa;
3616+
border-color: #ccc;
3617+
border-style: solid;
3618+
border-width: 1px;
3619+
display: none;
3620+
order: 2;
3621+
padding: 1rem;
3622+
width: 100%; }
3623+
.tabs.tabs-code .tab-content {
3624+
padding: 0.5rem; }
3625+
.tabs.tabs-code .tab-content pre {
3626+
margin: 0; }
3627+
35793628
.taxonomy li {
35803629
display: inline-block;
35813630
margin: 0.9rem; }

0 commit comments

Comments
 (0)