jekyll-theme-dashboard 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +249 -0
  4. data/_includes/hooks/body-posthook.html +0 -0
  5. data/_includes/hooks/body-prehook.html +0 -0
  6. data/_includes/hooks/head-posthook.html +1 -0
  7. data/_layouts/default.html +209 -0
  8. data/_sass/_layout.scss +196 -0
  9. data/_sass/_responsive.scss +71 -0
  10. data/_sass/jekyll-theme-dashboard.scss +66 -0
  11. data/_sass/thirdparty/bootstrap.min.scss +7 -0
  12. data/assets/js/thirdparty/bootstrap.min.js +7 -0
  13. data/assets/js/thirdparty/jquery-3.4.1.min.js +2 -0
  14. data/assets/js/thirdparty/popper.min.js +5 -0
  15. metadata +70 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 52c412e29e47f09672ca6ba07e851cf55f4468dc43a49e15c250d0bcc5c9f875
4
+ data.tar.gz: 25e718246e4aa0826415cde782b2a1320943b3e20c4fa8a79dd1062f6aceb48b
5
+ SHA512:
6
+ metadata.gz: f179d6b8411a9256e0cc4b3e719d22b3eacc8ea9c5557a381cfec50742777007c512899257c6f29fb890565ab0ae22f6378550e5a32bb2b807b66fa1b2f7d66c
7
+ data.tar.gz: 5aeea56608c9365e5302c7b17907918eca47c1404a2c833d3529a581daadbf84b4db3415f1706ad72170b7be98b385946ee26e5f3c39dd94daf25bf4caf4cd0a
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 TensorWorks Pty Ltd
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,249 @@
1
+ # Dashboard theme for Jekyll
2
+
3
+ This is a [Jekyll](https://jekyllrb.com/) theme designed primarily for creating dashboards that display large numbers of hyperlinks. It is used at TensorWorks for our internal dashboards.
4
+
5
+ This theme is designed to be highly configurable, whilst providing sensible defaults for most options in order to make it as easy as possible to get up and running quickly. The configuration mechanisms are largely derived from [jekyll-theme-gitbook](https://github.com/adamrehn/jekyll-theme-gitbook) and should feel familiar to users of that theme. See the [Configuration](#configuration) section for details of the available settings.
6
+
7
+ **You can view a [live demo of this theme here](https://tensorworks.github.io/jekyll-theme-dashboard-demo) and view the [source code for the demo site here](https://github.com/TensorWorks/jekyll-theme-dashboard-demo).**
8
+
9
+
10
+ ## Contents
11
+
12
+ - [Installation](#installation)
13
+ - [Configuration](#configuration)
14
+ - [Theme configuration](#theme-configuration)
15
+ - [Dashboard contents](#dashboard-contents)
16
+ - [Dashboard related links](#dashboard-related-links)
17
+ - [Site structure](#site-structure)
18
+ - [CSS styles](#css-styles)
19
+ - [Hooks](#hooks)
20
+ - [Legal](#legal)
21
+
22
+
23
+ ## Installation
24
+
25
+ Add the following line to your site's `Gemfile`:
26
+
27
+ ```ruby
28
+ gem "jekyll-theme-dashboard"
29
+ ```
30
+
31
+ Also add the following line to your site's `_config.yml` file:
32
+
33
+ ```yaml
34
+ theme: "jekyll-theme-dashboard"
35
+ ```
36
+
37
+
38
+ ## Configuration
39
+
40
+ ### Theme configuration
41
+
42
+ All configuration data for this theme is stored under a top-level YAML key called `theme-settings`, which has the following structure:
43
+
44
+ ```yaml
45
+ theme-settings:
46
+
47
+
48
+ # Logo settings (OPTIONAL, only needed if you want to override the defaults)
49
+ logo:
50
+
51
+ # Override the path to the site's logo image (OPTIONAL, defaults to "/assets/images/logo.svg")
52
+ default: "/assets/images/logo.svg"
53
+
54
+ # Specify an alternative version of the site's logo image to use in dark mode (OPTIONAL, defaults to the light mode logo)
55
+ dark: "/assets/images/logo-dark.svg"
56
+
57
+
58
+ # Favicon settings (OPTIONAL, only needed if you want to override the defaults)
59
+ favicon:
60
+
61
+ # Override the PNG version of the favicon (OPTIONAL, defaults to "/assets/images/favicon.png")
62
+ png: "/path/to/favicon.png"
63
+
64
+ # Override the SVG version of the favicon (OPTIONAL, defaults to "/assets/images/favicon.svg")
65
+ svg: "/path/to/favicon.svg"
66
+
67
+
68
+ # Font Awesome icon settings (OPTIONAL, only needed if you want to override the defaults)
69
+ fontawesome:
70
+
71
+ # Specify that you are providing Font Awesome through your own CSS (OPTIONAL, defaults to false)
72
+ local: true
73
+
74
+ # Specify a Font Awesome Kit URL to provide icons (OPTIONAL, defaults to none, takes precedence over "local" if both are specified)
75
+ kit: "https://kit.fontawesome.com/xxxxxxxxxx.js"
76
+ ```
77
+
78
+ ### Dashboard contents
79
+
80
+ The theme displays information as a series of grouped cards, which must be specified in `_data/cards.yml` with the following structure:
81
+
82
+ ```yaml
83
+ # The top-level element is a list of groups
84
+ -
85
+
86
+ # (OPTIONAL: the title for the box that displays the group of cards, defaults to no title)
87
+ group: "Group Title"
88
+
89
+ # (OPTIONAL: an icon to display next to the group title, defaults to no icon)
90
+ icon: group.svg
91
+
92
+ # (OPTIONAL: a dark mode icon to display next to the group title, defaults to the light mode icon)
93
+ icon-dark: group-dark.svg
94
+
95
+ # (OPTIONAL: the background colour of the box that displays the group of cards, defaults to transparent)
96
+ background: "#ddd"
97
+
98
+ # (OPTIONAL: the dark mode background colour of the box that displays the group of cards, defaults to transparent)
99
+ background-dark: "#777"
100
+
101
+ # (OPTIONAL: the text colour of the group title, defaults to "#000")
102
+ text: "#000"
103
+
104
+ # (OPTIONAL: the dark mode text colour of the group title, defaults to "#fff")
105
+ text-dark: "#fff"
106
+
107
+ # The list of cards in the group
108
+ cards:
109
+
110
+ -
111
+
112
+ # The card title
113
+ name: My Card
114
+
115
+ # The card type (one of "link-list", "icon-grid" or "custom")
116
+ type: link-list
117
+
118
+
119
+ # (ONLY USED WHEN TYPE IS "link-list": the list of links to display on the card)
120
+ links:
121
+
122
+ -
123
+
124
+ # The text to display for the link
125
+ name: "Very Helpful Link"
126
+
127
+ # The URL for the link
128
+ url: "https://some.helpful/website"
129
+
130
+ # The description for the link
131
+ description: "This is a very helpful link."
132
+
133
+ # (OPTIONAL: an icon to display for the link, defaults to no icon)
134
+ icon: helpful.svg
135
+
136
+ # (OPTIONAL: a dark mode icon to display for the link, defaults to the light mode icon)
137
+ icon-dark: helpful-dark.svg
138
+
139
+ # (OPTIONAL: whether to display the link description by default, defaults to false)
140
+ expanded: false
141
+
142
+
143
+ # (ONLY USED WHEN TYPE IS "icon-grid": the list of icons to display on the card)
144
+ icons:
145
+
146
+ -
147
+ # The name of the link, which is used as the alternate text for the image
148
+ name: "Another Helpful Link"
149
+
150
+ # The icon to display for the link
151
+ icon: another-helpful.svg
152
+
153
+ # (OPTIONAL: a dark mode icon to display for the link, defaults to the light mode icon)
154
+ icon-dark: another-helpful-dark.svg
155
+
156
+ # The URL for the link
157
+ url: "https://another.helpful/website"
158
+
159
+
160
+ # (ONLY USED WHEN TYPE IS "custom": the HTML file from the `_include` directory that provides the card body contents)
161
+ include: custom-card-body.html
162
+
163
+ # (OPTIONAL, AND ONLY USED WHEN TYPE IS "custom": a custom CSS class to add to the card body, defaults to no class)
164
+ body-class: my-custom-class
165
+ ```
166
+
167
+ ### Dashboard related links
168
+
169
+ The theme optionally supports displaying a set of related links at the top of the page, which is useful when you have multiple related dashboard sites and want to quickly jump between them. These related links are specified in the optional file `_data/related.yml` with the following structure:
170
+
171
+ ```yaml
172
+ # (OPTIONAL: the title for the box that displays the related links, defaults to "Related Dashboards")
173
+ title: "Related Dashboards"
174
+
175
+ # (OPTIONAL: the background colour of the box that displays the related links, defaults to transparent)
176
+ background: "#f0f0f0"
177
+
178
+ # (OPTIONAL: the dark mode background colour of the box that displays the related links, defaults to transparent)
179
+ background-dark: "#323232"
180
+
181
+ # (OPTIONAL: the text colour of the related links, defaults to "#000")
182
+ text: "#000"
183
+
184
+ # (OPTIONAL: the dark mode text colour of the related links, defaults to "#fff")
185
+ text-dark: "#fff"
186
+
187
+ # The list of related links
188
+ links:
189
+
190
+ -
191
+ # The text to display for the link
192
+ name: "Some Other Dashboard"
193
+
194
+ # The URL for the link
195
+ url: "https://some.other/dashboard"
196
+
197
+ # (OPTIONAL: an icon to display for the link, defaults to no icon)
198
+ icon: other-dashboard.svg
199
+
200
+ # (OPTIONAL: a dark mode icon to display for the link, defaults to the light mode icon)
201
+ icon-dark: other-dashboard-dark.svg
202
+ ```
203
+
204
+ ### Site structure
205
+
206
+ The intended use case for the theme is a single index page that uses the default layout. The simplest way to implement this is to create a file called `index.html` in the root of your site's filesystem directory with the following contents:
207
+
208
+ ```
209
+ ---
210
+ layout: default
211
+ ---
212
+ ```
213
+
214
+ The theme assumes that all images are stored in `/assets/images/`, and in particular assumes that all icons referenced in `cards.yml` and `related.yml` are stored in `/assets/images/icons/`.
215
+
216
+ ### CSS styles
217
+
218
+ If you use the theme's default settings then your site is expected to have an `assets/css/style.scss` file with the following contents as a minimum:
219
+
220
+ ```scss
221
+ ---
222
+ ---
223
+ @import '{{ site.theme }}';
224
+ ```
225
+
226
+ You can change the list of CSS files that get included in the site's `<head>` tag by providing your own `_includes/hooks/head-posthook.html` file, as described in the [Hooks](#hooks) section below. Irrespective of whether you use the default CSS filesystem path or a custom list of paths, at least one CSS file will need to include the theme's CSS styles using the code above. You can then add your own CSS rules to augment or override the default theme styles.
227
+
228
+ ### Hooks
229
+
230
+ In addition to the configuration options discussed in the sections above, you can control the HTML output of your site by using a set of supported include files that the theme refers to as "hooks". The default contents of these hooks are located in the theme's [`_includes/hooks`](https://github.com/TensorWorks/jekyll-theme-dashboard/tree/main/_includes/hooks) subdirectory, and are used throughout the theme's default layout. To replace the contents of a given hook, simply create a file in your site's filesystem directory with the same filename (e.g. `_includes/hooks/head-posthook.html`) and Jekyll will automatically use your version of the file instead of the default version from the theme.
231
+
232
+ The following hooks are currently supported:
233
+
234
+ - `head-posthook.html`: included at the end of the site's `<head>` tag. This hook is typically used for providing additional `<meta>` tags, CSS files or Javascript files. The default version of this hook simply includes the CSS file `/assets/css/style.css`.
235
+
236
+ - `body-prehook.html`: included at the start of the site's `<body>` tag. The default version of this hook is empty.
237
+
238
+ - `body-posthook.html`: included at the end of the site's `<body>` tag. This hook is typically used for providing additional Javascript files or code. The default version of this hook is empty.
239
+
240
+
241
+ ## Legal
242
+
243
+ Copyright &copy; 2025, TensorWorks Pty Ltd. Licensed under the MIT License, see the file [LICENSE](./LICENSE) for details.
244
+
245
+ The following third-party libraries are bundled in the theme's source tree and are covered by their respective licenses:
246
+
247
+ - [Bootstrap](https://getbootstrap.com/) ([MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE))
248
+ - [jQuery](https://jquery.com/) ([MIT License](https://github.com/jquery/jquery/blob/master/LICENSE.txt))
249
+ - [Popper](https://popper.js.org/) ([MIT License](https://github.com/floating-ui/floating-ui/blob/v2.x/LICENSE.md))
data/_includes/hooks/body-posthook.html ADDED
File without changes
data/_includes/hooks/body-prehook.html ADDED
File without changes
data/_includes/hooks/head-posthook.html ADDED
@@ -0,0 +1 @@
1
+ <link href="{{ "/" | relative_url }}assets/css/style.css" rel="stylesheet" type="text/css">
data/_layouts/default.html ADDED
@@ -0,0 +1,209 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>{{ site.title | escape }}</title>
5
+
6
+ <meta charset="utf-8">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9
+
10
+ <link rel="icon" type="image/svg+xml" href="{% if site.theme-settings.favicon and site.theme-settings.favicon.svg %}{{ site.theme-settings.favicon.svg | uri_escape }}{% else %}{{ "/" | relative_url }}assets/images/favicon.svg{% endif %}">
11
+ <link rel="icon" type="image/png" href="{% if site.theme-settings.favicon and site.theme-settings.favicon.png %}{{ site.theme-settings.favicon.png | uri_escape }}{% else %}{{ "/" | relative_url }}assets/images/favicon.png{% endif %}">
12
+ <link rel="apple-touch-icon" type="image/png" href="{% if site.theme-settings.favicon and site.theme-settings.favicon.png %}{{ site.theme-settings.favicon.png | uri_escape }}{% else %}{{ "/" | relative_url }}assets/images/favicon.png{% endif %}">
13
+
14
+ <meta property="og:title" content="{{ site.title | escape }}">
15
+ <meta property="og:type" content="website">
16
+ <meta property="og:url" content="{{ site.url | uri_escape }}{{ page.url | uri_escape }}">
17
+
18
+ {% if site.theme-settings.fontawesome.kit %}
19
+ <script src="{{ site.theme-settings.fontawesome.kit | uri_escape }}" crossorigin="anonymous"></script>
20
+ {% elsif site.theme-settings.fontawesome.local != true %}
21
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
22
+ {% endif %}
23
+
24
+ {% include hooks/head-posthook.html %}
25
+
26
+ </head>
27
+
28
+ <body>
29
+
30
+ {% include hooks/body-prehook.html %}
31
+
32
+ <p class="logo">
33
+ <picture>
34
+ {% if site.theme-settings.logo.dark %}<source srcset="{{ site.theme-settings.logo.dark | uri_escape }}" media="(prefers-color-scheme: dark)">{% endif %}
35
+ <img src="{% if site.theme-settings.logo.default %}{{ site.theme-settings.logo.default | uri_escape }}{% else %}{{ "/" | relative_url }}assets/images/logo.svg{% endif %}" alt="{{ site.title | escape }}">
36
+ </picture>
37
+ </p>
38
+
39
+ {% if site.data.related and site.data.related.links %}
40
+ <div class="related-wrapper">
41
+ <div class="related" style="{% if site.data.related.background %}--background: {{ site.data.related.background | escape }};{% endif %} {% if site.data.related.background-dark %}--background-dark: {{ site.data.related.background-dark | escape }};{% endif %} {% if site.data.related.text %}--text: {{ site.data.related.text | escape }};{% endif %} {% if site.data.related.text-dark %}--text-dark: {{ site.data.related.text-dark | escape }};{% endif %}">
42
+ <div class="related-header">{% if site.data.related.title %}{{ site.data.related.title | escape }}{% else %}Related Dashboards{% endif %}</div>
43
+
44
+ <ul class="related-links">
45
+ {% for link in site.data.related.links %}
46
+
47
+ <li>
48
+ {% if link.icon %}
49
+ <span class="link-icon-wrapper">
50
+
51
+ {% if link.icon-dark %}
52
+ <picture>
53
+ <source srcset="{{ "/" | relative_url }}assets/images/icons/{{ link.icon-dark | uri_escape }}" media="(prefers-color-scheme: dark)">
54
+ <img class="link-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ link.icon | uri_escape }}">
55
+ </picture>
56
+ {% else %}
57
+ <img class="link-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ link.icon | uri_escape }}">
58
+ {% endif %}
59
+
60
+ </span>
61
+ {% endif %}
62
+
63
+ <a href="{{ link.url | uri_escape }}">{{ link.name | escape }}</a>
64
+ </li>
65
+
66
+ {% endfor %}
67
+ </ul>
68
+ </div>
69
+ </div>
70
+ {% endif %}
71
+
72
+ <div class="dashboard-grid">
73
+
74
+ {% for group in site.data.cards %}
75
+
76
+ <div class="group" style="{% if group.background %}--background: {{ group.background | escape }};{% endif %} {% if group.background-dark %}--background-dark: {{ group.background-dark | escape }};{% endif %} {% if group.text %}--text: {{ group.text | escape }};{% endif %} {% if group.text-dark %}--text-dark: {{ group.text-dark | escape }};{% endif %}">
77
+
78
+ {% if group.group or group.icon %}
79
+ <div class="group-header">
80
+
81
+ {% if group.icon %}
82
+ <span class="group-icon-wrapper{% if group.group %}{% else %} icon-only{% endif %}">
83
+ {% if group.icon-dark %}
84
+ <picture>
85
+ <source srcset="{{ "/" | relative_url }}assets/images/icons/{{ group.icon-dark | uri_escape }}" media="(prefers-color-scheme: dark)">
86
+ <img class="group-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ group.icon | uri_escape }}">
87
+ </picture>
88
+ {% else %}
89
+ <img class="group-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ group.icon | uri_escape }}">
90
+ {% endif %}
91
+ </span>
92
+ {% endif %}
93
+
94
+ {{ group.group | escape }}
95
+
96
+ </div>
97
+ {% endif %}
98
+
99
+ <div class="group-cards{% if group.background or group.background-dark %} has-background{% endif %}">
100
+
101
+ {% for card in group.cards %}
102
+
103
+ {% case card.type %}
104
+
105
+ {% when "link-list" %}
106
+
107
+ <div class="card">
108
+ <h2 class="card-header">{{ card.name | escape }}</h2>
109
+ <ul class="list-group list-group-flush">
110
+ {% for link in card.links %}
111
+
112
+ <li class="list-group-item link">
113
+
114
+ <div class="link-header">
115
+ {% if link.icon %}
116
+ <span class="link-icon-wrapper">
117
+
118
+ {% if link.icon-dark %}
119
+ <picture>
120
+ <source srcset="{{ "/" | relative_url }}assets/images/icons/{{ link.icon-dark | uri_escape }}" media="(prefers-color-scheme: dark)">
121
+ <img class="link-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ link.icon | uri_escape }}">
122
+ </picture>
123
+ {% else %}
124
+ <img class="link-icon" src="{{ "/" | relative_url }}assets/images/icons/{{ link.icon | uri_escape }}">
125
+ {% endif %}
126
+
127
+ </span>
128
+ {% endif %}
129
+
130
+ <a href="{{ link.url | uri_escape }}">{{ link.name | escape }}</a>
131
+ </div>
132
+
133
+ <div class="link-description">
134
+ <details{% if link.expanded == true %} open{% endif %}>
135
+ <summary class="fa"></summary>
136
+ <p>{% if link.description %}{{ link.description | escape }}{% else %}<em>(No description provided.)</em>{% endif %}</p>
137
+ </details>
138
+ </div>
139
+
140
+ </li>
141
+
142
+ {% endfor %}
143
+ </ul>
144
+ </div>
145
+
146
+ {% when "icon-grid" %}
147
+
148
+ {% assign isOdd = card.icons | size | modulo: 2 %}
149
+ {% if isOdd == 1 %}
150
+ {% assign columns = 3 %}
151
+ {% else %}
152
+ {% assign columns = 2 %}
153
+ {% endif %}
154
+ <div class="card">
155
+ <h2 class="card-header">{{ card.name | escape }}</h2>
156
+ <div class="card-body card-grid" style="grid-template-columns: repeat({{ columns }}, 1fr);">
157
+ {% for link in card.icons %}
158
+ <a href="{{ link.url | uri_escape }}">
159
+
160
+ {% if link.icon %}
161
+
162
+ <picture>
163
+ {% if link.icon-dark %}
164
+ <source srcset="{{ "/" | relative_url }}assets/images/icons/{{ link.icon-dark | uri_escape }}" media="(prefers-color-scheme: dark)">
165
+ {% endif %}
166
+ <img src="{{ "/" | relative_url }}assets/images/icons/{{ link.icon | uri_escape }}" alt="{{ link.name | escape }}" title="{{ link.name | escape }}">
167
+ </picture>
168
+
169
+ {% else %}
170
+ {{ link.name | escape }}
171
+ {% endif %}
172
+
173
+ </a>
174
+ {% endfor %}
175
+ </div>
176
+ </div>
177
+
178
+ {% when "custom" %}
179
+
180
+ <div class="card">
181
+ <h2 class="card-header">{{ card.name | escape }}</h2>
182
+ <div class="card-body{% if card.body-class %} {{ card.body-class | escape }}{% endif %}">
183
+ {% include {{ card.include }} %}
184
+ </div>
185
+ </div>
186
+
187
+ {% else %}
188
+ Error! Unknown card type "{{ card.type | escape }}"!
189
+
190
+ {% endcase %}
191
+
192
+ {% endfor %}
193
+
194
+ </div>
195
+
196
+ </div>
197
+
198
+ {% endfor %}
199
+
200
+ </div>
201
+
202
+ <script src="{{ "/" | relative_url }}assets/js/thirdparty/jquery-3.4.1.min.js"></script>
203
+ <script src="{{ "/" | relative_url }}assets/js/thirdparty/popper.min.js"></script>
204
+ <script src="{{ "/" | relative_url }}assets/js/thirdparty/bootstrap.min.js"></script>
205
+
206
+ {% include hooks/body-posthook.html %}
207
+
208
+ </body>
209
+ </html>
data/_sass/_layout.scss ADDED
@@ -0,0 +1,196 @@
1
+ @charset "UTF-8";
2
+
3
+ * {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ @media not print {
8
+
9
+ html, body
10
+ {
11
+ scroll-behavior: smooth;
12
+ min-height: 100%;
13
+ }
14
+ }
15
+
16
+ html, body
17
+ {
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+
22
+ .logo
23
+ {
24
+ text-align: center;
25
+ margin: 3rem 0;
26
+ }
27
+
28
+ .logo img
29
+ {
30
+ width: 25rem;
31
+ max-width: 90%;
32
+ }
33
+
34
+ .related-wrapper
35
+ {
36
+ display: flex;
37
+ flex-direction: row;
38
+ justify-content: center;
39
+ padding-bottom: 3rem;
40
+ }
41
+
42
+ .related
43
+ {
44
+ width: 50%;
45
+ padding-bottom: 0.5rem;
46
+ }
47
+
48
+ .dashboard-grid, .group-cards
49
+ {
50
+ box-sizing: border-box;
51
+ width: 100%;
52
+ display: grid;
53
+ grid-auto-rows: minmax(1rem, auto);
54
+ grid-auto-flow: dense;
55
+ }
56
+
57
+ .dashboard-grid
58
+ {
59
+ gap: 2rem;
60
+ padding: 2rem;
61
+ padding-top: 0;
62
+ }
63
+
64
+ .group-cards
65
+ {
66
+ gap: 1rem;
67
+ }
68
+
69
+ .group-cards.has-background {
70
+ padding: 1rem;
71
+ }
72
+
73
+ .group-header + .group-cards.has-background {
74
+ padding-top: 0;
75
+ }
76
+
77
+ .dashboard-grid .group, .group-cards .card {
78
+ align-self: start;
79
+ }
80
+
81
+ .list-group-item {
82
+ position: relative;
83
+ }
84
+
85
+ .list-group-item summary, .list-group-item a, .list-group-item details p {
86
+ padding: 0.75rem 1.25rem;
87
+ }
88
+
89
+ .group-icon-wrapper, .group-icon-wrapper picture,
90
+ .list-group-item .link-icon-wrapper, .list-group-item .link-icon-wrapper picture,
91
+ .related-links .link-icon-wrapper, .related-links .link-icon-wrapper picture
92
+ {
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ }
97
+
98
+ .group-icon-wrapper
99
+ {
100
+ width: 2rem;
101
+ height: 2rem;
102
+ margin-right: 1rem;
103
+ }
104
+
105
+ .group-icon-wrapper.icon-only {
106
+ margin-right: 0;
107
+ }
108
+
109
+ .group-icon-wrapper .group-icon
110
+ {
111
+ max-width: 2rem;
112
+ max-height: 2rem;
113
+ }
114
+
115
+ .list-group-item .link-icon-wrapper, .related-links .link-icon-wrapper {
116
+ margin-left: 1.25rem;
117
+ }
118
+
119
+ .list-group-item .link-icon-wrapper, .list-group-item .link-icon-wrapper picture,
120
+ .related-links .link-icon-wrapper, .related-links .link-icon-wrapper picture
121
+ {
122
+ width: 1.5rem;
123
+ height: 1.5rem;
124
+ }
125
+
126
+ .list-group-item .link-icon, .related-links .link-icon
127
+ {
128
+ max-width: 1.5rem;
129
+ max-height: 1.5rem;
130
+ }
131
+
132
+ .group-header, .related-header, .list-group-item .link-header, .related ul.related-links, .related ul.related-links li
133
+ {
134
+ display: flex;
135
+ flex-direction: row;
136
+ align-items: center;
137
+ }
138
+
139
+ .related ul.related-links {
140
+ justify-content: center;
141
+ }
142
+
143
+ .related ul.related-links, .related ul.related-links li
144
+ {
145
+ list-style-type: none;
146
+ margin: 0;
147
+ padding: 0;
148
+ }
149
+
150
+ .related ul.related-links li {
151
+ padding: 1rem 2rem;
152
+ }
153
+
154
+ .related ul.related-links li a {
155
+ padding-left: 0.75rem;
156
+ }
157
+
158
+ .list-group-item summary
159
+ {
160
+ display: list-item !important;
161
+ position: absolute;
162
+ right: 0;
163
+ top: 0;
164
+ }
165
+
166
+ .list-group-item a
167
+ {
168
+ display: block;
169
+ padding-right: 2.75rem;
170
+ }
171
+
172
+ .list-group-item .link-icon + a {
173
+ padding-left: 0.75rem;
174
+ }
175
+
176
+ .card-grid
177
+ {
178
+ display: grid;
179
+ grid-auto-rows: minmax(1rem, auto);
180
+ padding: 2rem;
181
+ gap: 2rem;
182
+ }
183
+
184
+ .card-grid a {
185
+ text-align: center;
186
+ }
187
+
188
+ .card-grid a .icon {
189
+ font-size: 5rem;
190
+ }
191
+
192
+ .card-grid a img
193
+ {
194
+ width: 100%;
195
+ max-width: 5rem;
196
+ }