jekyll-theme-zer0 0.20.3 → 0.21.2

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.
@@ -1,40 +1,181 @@
1
1
  <!--
2
- file: info-section.html
3
- path: _includes/info-section.html
4
- includes: breadcrumbs.html, searchbar.html, dev-shortcuts.html
5
- references:
6
- - https://getbootstrap.com/docs/5.3/components/modal/
7
- -->
2
+ ===================================================================
3
+ INFO SECTION - Settings Modal with Tabbed Interface
4
+ ===================================================================
5
+
6
+ File: info-section.html
7
+ Path: _includes/components/info-section.html
8
+ Purpose: Unified settings modal with tabs for Settings, Environment, Developer
9
+
10
+ Dependencies:
11
+ - Bootstrap 5 Modal, Tabs
12
+ - _includes/components/env-switcher.html
13
+ - _includes/components/theme-info.html
14
+ - _includes/components/dev-shortcuts.html
15
+ - _includes/components/halfmoon.html
16
+ - _includes/navigation/breadcrumbs.html
17
+
18
+ References:
19
+ - https://getbootstrap.com/docs/5.3/components/modal/
20
+ - https://getbootstrap.com/docs/5.3/components/navs-tabs/
21
+ ===================================================================
22
+ -->
8
23
 
9
- <!-- Modal -->
10
- <div class="modal fade" id="info-section" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
11
- <div class="modal-dialog">
12
- <div class="modal-content">
13
- <div class="modal-header">
14
- <h1 class="modal-title fs-5" id="staticBackdropLabel">Settings and Source</h1>
15
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
24
+ <!-- Settings Modal -->
25
+ <div class="modal fade" id="info-section" tabindex="-1" aria-labelledby="infoSectionLabel" aria-hidden="true">
26
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
27
+ <div class="modal-content">
28
+
29
+ <!-- Modal Header -->
30
+ <div class="modal-header border-bottom-0 pb-0">
31
+ <div class="w-100">
32
+ <div class="d-flex align-items-center justify-content-between mb-2">
33
+ <h5 class="modal-title" id="infoSectionLabel">
34
+ <i class="bi bi-gear-wide-connected me-2"></i>Settings
35
+ </h5>
36
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
37
+ </div>
38
+
39
+ <!-- Tab Navigation -->
40
+ <ul class="nav nav-tabs" id="infoTabs" role="tablist">
41
+ <li class="nav-item" role="presentation">
42
+ <button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-pane" type="button" role="tab" aria-controls="settings-pane" aria-selected="true">
43
+ <i class="bi bi-sliders me-1"></i>
44
+ <span class="d-none d-sm-inline">Settings</span>
45
+ </button>
46
+ </li>
47
+ <li class="nav-item" role="presentation">
48
+ <button class="nav-link" id="environment-tab" data-bs-toggle="tab" data-bs-target="#environment-pane" type="button" role="tab" aria-controls="environment-pane" aria-selected="false">
49
+ <i class="bi bi-hdd-network me-1"></i>
50
+ <span class="d-none d-sm-inline">Environment</span>
51
+ {% if jekyll.environment == "development" %}
52
+ <span class="badge bg-warning text-dark ms-1 d-none d-md-inline-block">Dev</span>
53
+ {% else %}
54
+ <span class="badge bg-success ms-1 d-none d-md-inline-block">Prod</span>
55
+ {% endif %}
56
+ </button>
57
+ </li>
58
+ <li class="nav-item" role="presentation">
59
+ <button class="nav-link" id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer-pane" type="button" role="tab" aria-controls="developer-pane" aria-selected="false">
60
+ <i class="bi bi-code-slash me-1"></i>
61
+ <span class="d-none d-sm-inline">Developer</span>
62
+ </button>
63
+ </li>
64
+ </ul>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Modal Body with Tab Content -->
69
+ <div class="modal-body">
70
+ <div class="tab-content" id="infoTabContent">
71
+
72
+ <!-- Settings Tab -->
73
+ <div class="tab-pane fade show active" id="settings-pane" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
74
+
75
+ <!-- Search -->
76
+ <div class="mb-4">
77
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
78
+ <i class="bi bi-search me-1"></i>Search
79
+ </h6>
80
+ {% include components/searchbar.html %}
81
+ </div>
82
+
83
+ <!-- Theme Toggle -->
84
+ <div class="mb-4">
85
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
86
+ <i class="bi bi-moon-stars me-1"></i>Appearance
87
+ </h6>
88
+ <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
89
+ <span>Theme Mode</span>
90
+ {% include components/halfmoon.html %}
16
91
  </div>
17
- <div class="modal-body">
18
-
19
- <div class="container">
20
- <!-- _include/breadcrumbs.html -->
21
- {% include navigation/breadcrumbs.html %}
22
- {% include components/searchbar.html %}
23
-
24
- <!-- Theme and System Information -->
25
- <div class="my-4">
26
- {% include components/theme-info.html %}
27
- </div>
28
-
29
- <!-- Shortcuts to source bode -->
30
- {% include components/dev-shortcuts.html %}
31
- <!-- Dark Mode Switch -->
32
- {% include components/halfmoon.html %}
33
- </div>
34
92
  </div>
35
- <div class="modal-footer">
36
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
93
+
94
+ <!-- Theme Info (Collapsible) -->
95
+ <div class="mb-3">
96
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
97
+ <i class="bi bi-info-circle me-1"></i>About
98
+ </h6>
99
+ <button class="btn btn-outline-secondary btn-sm w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#themeInfoCollapse" aria-expanded="false" aria-controls="themeInfoCollapse">
100
+ <span>Theme & Build Info</span>
101
+ <i class="bi bi-chevron-down"></i>
102
+ </button>
103
+ <div class="collapse mt-2" id="themeInfoCollapse">
104
+ {% include components/theme-info.html %}
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Environment Tab -->
110
+ <div class="tab-pane fade" id="environment-pane" role="tabpanel" aria-labelledby="environment-tab" tabindex="0">
111
+ {% include components/env-switcher.html %}
112
+ </div>
113
+
114
+ <!-- Developer Tab -->
115
+ <div class="tab-pane fade" id="developer-pane" role="tabpanel" aria-labelledby="developer-tab" tabindex="0">
116
+
117
+ <!-- Page Location -->
118
+ <div class="mb-4">
119
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
120
+ <i class="bi bi-signpost-split me-1"></i>Page Location
121
+ </h6>
122
+ {% include navigation/breadcrumbs.html %}
123
+ </div>
124
+
125
+ <!-- Source Code Shortcuts -->
126
+ <div class="mb-4">
127
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
128
+ <i class="bi bi-code-square me-1"></i>Source Code
129
+ </h6>
130
+ {% include components/dev-shortcuts.html %}
131
+ </div>
132
+
133
+ <!-- Page Metadata -->
134
+ <div class="mb-3">
135
+ <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
136
+ <i class="bi bi-file-earmark-code me-1"></i>Page Info
137
+ </h6>
138
+ <div class="table-responsive">
139
+ <table class="table table-sm table-hover mb-0 small">
140
+ <tbody>
141
+ <tr>
142
+ <td class="text-body-secondary" style="width: 30%;">Layout</td>
143
+ <td><code>{{ page.layout | default: "none" }}</code></td>
144
+ </tr>
145
+ <tr>
146
+ <td class="text-body-secondary">Collection</td>
147
+ <td><code>{{ page.collection | default: "none" }}</code></td>
148
+ </tr>
149
+ <tr>
150
+ <td class="text-body-secondary">Path</td>
151
+ <td><code class="text-break">{{ page.path }}</code></td>
152
+ </tr>
153
+ <tr>
154
+ <td class="text-body-secondary">URL</td>
155
+ <td><code class="text-break">{{ page.url }}</code></td>
156
+ </tr>
157
+ {% if page.date %}
158
+ <tr>
159
+ <td class="text-body-secondary">Date</td>
160
+ <td><code>{{ page.date | date: "%Y-%m-%d" }}</code></td>
161
+ </tr>
162
+ {% endif %}
163
+ </tbody>
164
+ </table>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Modal Footer -->
173
+ <div class="modal-footer">
174
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
175
+ <i class="bi bi-x-lg me-1"></i>Close
176
+ </button>
37
177
  </div>
178
+
38
179
  </div>
39
180
  </div>
40
181
  </div>
@@ -28,6 +28,9 @@
28
28
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
29
29
  crossorigin="anonymous"></script>
30
30
 
31
+ <!-- Navigation scripts - Offcanvas, dropdowns, mobile interactions -->
32
+ <script src="{{ '/assets/js/navigation.js' | relative_url }}"></script>
33
+
31
34
  <!-- Navigation ES6 Modules - Enhanced sidebar, scroll spy, keyboard shortcuts, gestures -->
32
35
  <script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}"></script>
33
36
 
@@ -1,312 +1,104 @@
1
1
  <!--
2
2
  ===================================================================
3
- THEME INFO - Theme Version and System Information Display
3
+ THEME INFO - Compact Theme and Build Information
4
4
  ===================================================================
5
5
 
6
6
  File: theme-info.html
7
7
  Path: _includes/components/theme-info.html
8
- Purpose: Display theme version, Jekyll version, and system information
9
-
10
- Template Logic:
11
- - Automatically extracts theme version from gem specification
12
- - Shows Jekyll and Ruby versions
13
- - Displays GitHub repository information
14
- - Links to theme documentation and changelog
8
+ Purpose: Display compact theme version and system information
15
9
 
16
10
  Dependencies:
17
11
  - site.remote_theme or site.theme configuration
18
- - Jekyll's site.github metadata (for GitHub Pages)
19
-
20
- Notes:
21
- - Version is pulled dynamically during build
22
- - No hardcoded version numbers
12
+ - Jekyll's site.github metadata
23
13
  ===================================================================
24
14
  -->
25
15
 
26
- <div class="theme-info">
27
- <h5 class="border-bottom pb-2 mb-3">
28
- <i class="{{ site.default_icon }} bi-info-circle me-2"></i>
29
- Theme Information
30
- </h5>
31
-
32
- <div class="row g-3">
33
- <!-- Theme Details -->
16
+ <div class="theme-info-compact">
17
+ <div class="row g-2">
18
+
19
+ <!-- Theme -->
34
20
  <div class="col-12">
35
- <div class="card bg-dark border-secondary">
36
- <div class="card-body">
37
- <h6 class="card-title">
38
- <i class="{{ site.default_icon }} bi-palette me-2"></i>
39
- Theme
40
- </h6>
41
-
21
+ <div class="d-flex align-items-center justify-content-between p-2 bg-body-tertiary rounded">
22
+ <div class="d-flex align-items-center">
23
+ <i class="bi bi-palette text-primary me-2"></i>
24
+ <span class="fw-medium small">Theme</span>
25
+ </div>
26
+ <div>
42
27
  {% if site.remote_theme %}
43
28
  {% assign theme_parts = site.remote_theme | split: "/" %}
44
- {% assign theme_owner = theme_parts[0] %}
45
- {% assign theme_repo = theme_parts[1] %}
46
-
47
- <p class="mb-2">
48
- <strong>Name:</strong>
49
- <a href="https://github.com/{{ site.remote_theme }}"
50
- target="_blank"
51
- rel="noopener noreferrer"
52
- class="text-info text-decoration-none">
53
- {{ theme_repo }}
54
- </a>
55
- </p>
56
-
57
- <p class="mb-2">
58
- <strong>Repository:</strong>
59
- <code class="text-warning">{{ site.remote_theme }}</code>
60
- </p>
61
-
62
- {% comment %}
63
- Try to get version from Gem specification if available
64
- This works when the theme is installed as a gem
65
- {% endcomment %}
66
- {% capture theme_version %}
67
- {%- for spec in site.theme_specs -%}
68
- {%- if spec.name == "jekyll-theme-zer0" -%}
69
- {{ spec.version }}
70
- {%- endif -%}
71
- {%- endfor -%}
72
- {% endcapture %}
73
-
74
- {% if theme_version and theme_version != "" %}
75
- <p class="mb-2">
76
- <strong>Version:</strong>
77
- <span class="badge bg-success">v{{ theme_version | strip }}</span>
78
- </p>
79
- {% else %}
80
- <p class="mb-2">
81
- <strong>Version:</strong>
82
- <span class="badge bg-info">Remote (Latest)</span>
83
- <small class="text-muted d-block mt-1">
84
- Using latest version from GitHub
85
- </small>
86
- </p>
87
- {% endif %}
88
-
89
- <div class="mt-3">
90
- <a href="https://github.com/{{ site.remote_theme }}/blob/main/CHANGELOG.md"
91
- target="_blank"
92
- rel="noopener noreferrer"
93
- class="btn btn-sm btn-outline-info me-2">
94
- <i class="{{ site.default_icon }} bi-journal-text"></i>
95
- Changelog
96
- </a>
97
- <a href="https://github.com/{{ site.remote_theme }}#readme"
98
- target="_blank"
99
- rel="noopener noreferrer"
100
- class="btn btn-sm btn-outline-info">
101
- <i class="{{ site.default_icon }} bi-book"></i>
102
- Documentation
103
- </a>
104
- </div>
105
-
29
+ <a href="https://github.com/{{ site.remote_theme }}" target="_blank" rel="noopener" class="text-decoration-none">
30
+ <code class="text-info">{{ theme_parts[1] }}</code>
31
+ <i class="bi bi-box-arrow-up-right ms-1 small"></i>
32
+ </a>
106
33
  {% elsif site.theme %}
107
- <p class="mb-2">
108
- <strong>Name:</strong>
109
- <code class="text-warning">{{ site.theme }}</code>
110
- </p>
111
- <p class="mb-2">
112
- <strong>Type:</strong> Local Theme
113
- </p>
34
+ <code>{{ site.theme }}</code>
35
+ <span class="badge bg-secondary ms-1">Local</span>
114
36
  {% else %}
115
- <p class="text-muted">No theme configured</p>
37
+ <span class="text-body-secondary">Not configured</span>
116
38
  {% endif %}
117
39
  </div>
118
40
  </div>
119
41
  </div>
120
42
 
121
- <!-- Build Environment -->
122
- <div class="col-12">
123
- <div class="card bg-dark border-secondary">
124
- <div class="card-body">
125
- <h6 class="card-title">
126
- <i class="{{ site.default_icon }} bi-cpu me-2"></i>
127
- Build Environment
128
- </h6>
129
-
130
- <p class="mb-2">
131
- <strong>Jekyll:</strong>
132
- <span class="badge bg-primary">v{{ jekyll.version }}</span>
133
- </p>
134
-
135
- <p class="mb-2">
136
- <strong>Ruby:</strong>
137
- <span class="badge bg-danger">v{{ site.powered_by | where: "name", "Ruby" | map: "version" | first | default: "Unknown" }}</span>
138
- </p>
139
-
140
- <p class="mb-2">
141
- <strong>Environment:</strong>
142
- <span class="badge bg-secondary">{{ jekyll.environment }}</span>
143
- </p>
144
-
145
- {% if site.github %}
146
- <p class="mb-2">
147
- <strong>Build:</strong>
148
- <span class="badge bg-info">GitHub Pages</span>
149
- </p>
150
- {% endif %}
151
-
152
- <p class="mb-0">
153
- <strong>Last Build:</strong>
154
- <small class="text-muted">{{ site.time | date: "%Y-%m-%d %H:%M:%S %Z" }}</small>
155
- </p>
156
- </div>
43
+ <!-- Jekyll & Environment -->
44
+ <div class="col-6">
45
+ <div class="p-2 bg-body-tertiary rounded text-center">
46
+ <small class="text-body-secondary d-block">Jekyll</small>
47
+ <span class="badge bg-primary">v{{ jekyll.version }}</span>
157
48
  </div>
158
49
  </div>
159
-
160
- <!-- Site Information -->
161
- <div class="col-12">
162
- <div class="card bg-dark border-secondary">
163
- <div class="card-body">
164
- <h6 class="card-title">
165
- <i class="{{ site.default_icon }} bi-globe me-2"></i>
166
- Site Details
167
- </h6>
168
-
169
- <p class="mb-2">
170
- <strong>Repository:</strong>
171
- <a href="https://github.com/{{ site.repository }}"
172
- target="_blank"
173
- rel="noopener noreferrer"
174
- class="text-info text-decoration-none">
175
- {{ site.repository }}
176
- </a>
177
- </p>
178
-
179
- <p class="mb-2">
180
- <strong>Branch:</strong>
181
- <code class="text-warning">{{ site.branch }}</code>
182
- </p>
183
-
184
- <p class="mb-0">
185
- <strong>Collections:</strong>
186
- <span class="badge bg-secondary">{{ site.collections | size }} configured</span>
187
- </p>
188
- </div>
50
+ <div class="col-6">
51
+ <div class="p-2 bg-body-tertiary rounded text-center">
52
+ <small class="text-body-secondary d-block">Environment</small>
53
+ <span class="badge {% if jekyll.environment == 'production' %}bg-success{% else %}bg-warning text-dark{% endif %}">
54
+ {{ jekyll.environment | capitalize }}
55
+ </span>
189
56
  </div>
190
57
  </div>
191
58
 
192
- <!-- Plugin Information -->
59
+ <!-- Build Time -->
193
60
  <div class="col-12">
194
- <div class="card bg-dark border-secondary">
195
- <div class="card-body">
196
- <h6 class="card-title">
197
- <i class="{{ site.default_icon }} bi-plugin me-2"></i>
198
- Active Plugins
199
- </h6>
200
-
201
- <div class="d-flex flex-wrap gap-2">
202
- {% for plugin in site.plugins %}
203
- <span class="badge bg-info">{{ plugin }}</span>
204
- {% endfor %}
205
- </div>
61
+ <div class="d-flex align-items-center justify-content-between p-2 bg-body-tertiary rounded">
62
+ <div class="d-flex align-items-center">
63
+ <i class="bi bi-clock-history text-secondary me-2"></i>
64
+ <span class="small text-body-secondary">Last Build</span>
206
65
  </div>
66
+ <code class="small">{{ site.time | date: "%Y-%m-%d %H:%M %Z" }}</code>
207
67
  </div>
208
68
  </div>
209
69
 
210
- <!-- Powered By Framework -->
70
+ {% if site.repository %}
71
+ <!-- Repository -->
211
72
  <div class="col-12">
212
- <div class="card bg-dark border-secondary">
213
- <div class="card-body">
214
- <h6 class="card-title">
215
- <i class="{{ site.default_icon }} bi-stack me-2"></i>
216
- Technology Stack
217
- </h6>
218
-
219
- <div class="table-responsive">
220
- <table class="table table-sm table-dark table-hover mb-0">
221
- <thead>
222
- <tr>
223
- <th>Technology</th>
224
- <th>Version</th>
225
- </tr>
226
- </thead>
227
- <tbody>
228
- {% for tech in site.powered_by %}
229
- <tr>
230
- <td>
231
- {% if tech.url %}
232
- <a href="{{ tech.url }}"
233
- target="_blank"
234
- rel="noopener noreferrer"
235
- class="text-decoration-none">
236
- <i class="{{ site.default_icon }} {{ tech.icon }}"></i>
237
- {{ tech.name }}
238
- </a>
239
- {% else %}
240
- <i class="{{ site.default_icon }} {{ tech.icon }}"></i>
241
- {{ tech.name }}
242
- {% endif %}
243
- </td>
244
- <td>
245
- {% if tech.version %}
246
- <code class="text-info">{{ tech.version }}</code>
247
- {% else %}
248
- <span class="text-muted">—</span>
249
- {% endif %}
250
- </td>
251
- </tr>
252
- {% endfor %}
253
- </tbody>
254
- </table>
255
- </div>
73
+ <div class="d-flex align-items-center justify-content-between p-2 bg-body-tertiary rounded">
74
+ <div class="d-flex align-items-center">
75
+ <i class="bi bi-git text-danger me-2"></i>
76
+ <span class="small text-body-secondary">Repository</span>
256
77
  </div>
78
+ <a href="https://github.com/{{ site.repository }}" target="_blank" rel="noopener" class="text-decoration-none small">
79
+ {{ site.repository }}
80
+ <i class="bi bi-box-arrow-up-right ms-1"></i>
81
+ </a>
257
82
  </div>
258
83
  </div>
259
- </div>
260
-
261
- <!-- Help Links -->
262
- <div class="mt-4 pt-3 border-top">
263
- <p class="text-muted mb-2">
264
- <small>
265
- <i class="{{ site.default_icon }} bi-question-circle me-1"></i>
266
- Need help? Check out these resources:
267
- </small>
268
- </p>
269
- <div class="d-flex flex-wrap gap-2">
270
- <a href="https://jekyllrb.com/docs/"
271
- target="_blank"
272
- rel="noopener noreferrer"
273
- class="btn btn-sm btn-outline-secondary">
274
- Jekyll Docs
275
- </a>
276
- <a href="https://github.com/{{ site.remote_theme }}/issues"
277
- target="_blank"
278
- rel="noopener noreferrer"
279
- class="btn btn-sm btn-outline-secondary">
280
- Report Issue
281
- </a>
282
- <a href="https://github.com/{{ site.repository }}/discussions"
283
- target="_blank"
284
- rel="noopener noreferrer"
285
- class="btn btn-sm btn-outline-secondary">
286
- Discussions
287
- </a>
84
+ {% endif %}
85
+
86
+ <!-- Quick Links -->
87
+ <div class="col-12 mt-2">
88
+ <div class="d-flex flex-wrap gap-2 justify-content-center">
89
+ {% if site.remote_theme %}
90
+ <a href="https://github.com/{{ site.remote_theme }}/blob/main/CHANGELOG.md" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">
91
+ <i class="bi bi-journal-text me-1"></i>Changelog
92
+ </a>
93
+ <a href="https://github.com/{{ site.remote_theme }}#readme" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">
94
+ <i class="bi bi-book me-1"></i>Docs
95
+ </a>
96
+ {% endif %}
97
+ <a href="https://jekyllrb.com/docs/" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">
98
+ <i class="bi bi-gem me-1"></i>Jekyll
99
+ </a>
100
+ </div>
288
101
  </div>
102
+
289
103
  </div>
290
104
  </div>
291
-
292
- <style>
293
- .theme-info .card {
294
- transition: transform 0.2s ease-in-out;
295
- }
296
-
297
- .theme-info .card:hover {
298
- transform: translateY(-2px);
299
- }
300
-
301
- .theme-info code {
302
- font-size: 0.875rem;
303
- padding: 0.2rem 0.4rem;
304
- background-color: rgba(0, 0, 0, 0.3);
305
- border-radius: 0.25rem;
306
- }
307
-
308
- .theme-info .badge {
309
- font-size: 0.875rem;
310
- padding: 0.35rem 0.65rem;
311
- }
312
- </style>