Skip to content

Commit 09aaa6f

Browse files
afrendeiroafrendeiro
committed
separate css and js
1 parent 1e4af74 commit 09aaa6f

File tree

4 files changed

+153
-153
lines changed

4 files changed

+153
-153
lines changed

‎assets/css/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
a {
2+
overflow-wrap: break-word;
3+
word-wrap: break-word;
4+
white-space: normal;
5+
}
6+
.btn-outline-success {
7+
--bs-btn-color: #0d6efd !important;
8+
--bs-btn-border-color: #0d6efd !important;
9+
--bs-btn-hover-bg: #0d6efd !important;
10+
--bs-btn-hover-border-color: #0d6efd !important;
11+
}
12+
.navbar-btn {
13+
color: #0d6efd;
14+
}
15+
.unstyled-link {
16+
text-decoration: none !important;
17+
color: inherit !important;
18+
}
19+
code {
20+
padding: 2px 4px;
21+
}
22+
pre {
23+
/* background-color: #ccc; */
24+
padding: 1em;
25+
border-radius: 4px;
26+
overflow-x: auto;
27+
}
28+
blockquote {
29+
border-left: 4px solid #ccc;
30+
margin: 1em 0;
31+
padding-left: 1em;
32+
font-style: italic;
33+
}
34+
35+
/* Ensure padding and bullet styling are applied */
36+
/* Only apply list styles within the Markdown-rendered content area */
37+
.markdown-body ul,
38+
#content ul,
39+
.markdown-body ol,
40+
#content ol {
41+
padding-left: 2rem;
42+
margin-left: 0;
43+
}
44+
table {
45+
border-collapse: separate;
46+
margin-left: 1rem;
47+
margin-right: 1rem;
48+
margin-bottom: 1rem;
49+
border: 1px solid #dee2e6;
50+
}
51+
.navbar-header.navbar-right {
52+
display: flex;
53+
flex-wrap: nowrap;
54+
justify-content: flex-end;
55+
align-items: center;
56+
}
57+
[data-bs-theme="light"] .logo-light {
58+
display: inline-block;
59+
}
60+
[data-bs-theme="light"] .logo-dark {
61+
display: none;
62+
}
63+
[data-bs-theme="dark"] .logo-light {
64+
display: none;
65+
}
66+
[data-bs-theme="dark"] .logo-dark {
67+
display: inline-block;
68+
}

‎assets/js/color_toggler.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*!
2+
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3+
* Copyright 2011-2024 The Bootstrap Authors
4+
* Licensed under the Creative Commons Attribution 3.0 Unported License.
5+
*/
6+
7+
(() => {
8+
"use strict";
9+
10+
const getStoredTheme = () => localStorage.getItem("theme");
11+
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
12+
13+
const getPreferredTheme = () => {
14+
const storedTheme = getStoredTheme();
15+
if (storedTheme) {
16+
return storedTheme;
17+
}
18+
19+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
20+
};
21+
22+
const setTheme = (theme) => {
23+
if (theme === "auto") {
24+
document.documentElement.setAttribute("data-bs-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
25+
} else {
26+
document.documentElement.setAttribute("data-bs-theme", theme);
27+
}
28+
};
29+
30+
setTheme(getPreferredTheme());
31+
32+
const showActiveTheme = (theme, focus = false) => {
33+
const themeSwitcher = document.querySelector("#bd-theme");
34+
35+
if (!themeSwitcher) {
36+
return;
37+
}
38+
39+
const themeSwitcherText = document.querySelector("#bd-theme-text");
40+
const activeThemeIcon = document.querySelector(".theme-icon-active use");
41+
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
42+
const svgOfActiveBtn = btnToActive.querySelector("svg use").getAttribute("href");
43+
44+
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
45+
element.classList.remove("active");
46+
element.setAttribute("aria-pressed", "false");
47+
});
48+
49+
btnToActive.classList.add("active");
50+
btnToActive.setAttribute("aria-pressed", "true");
51+
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
52+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
53+
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
54+
55+
if (focus) {
56+
themeSwitcher.focus();
57+
}
58+
};
59+
60+
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
61+
const storedTheme = getStoredTheme();
62+
if (storedTheme !== "light" && storedTheme !== "dark") {
63+
setTheme(getPreferredTheme());
64+
}
65+
});
66+
67+
window.addEventListener("DOMContentLoaded", () => {
68+
showActiveTheme(getPreferredTheme());
69+
70+
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
71+
toggle.addEventListener("click", () => {
72+
const theme = toggle.getAttribute("data-bs-theme-value");
73+
setStoredTheme(theme);
74+
setTheme(theme);
75+
showActiveTheme(theme, true);
76+
});
77+
});
78+
});
79+
})();

‎config.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
deploy_url: https://rendeiro.group/
2-
static_url: https://raw.githubusercontent.com/rendeirolab/rendeirolab.github.io/main/assets/
2+
static_url: https://cdn.jsdelivr.net/gh/rendeirolab/rendeirolab.github.io@main/assets
33
template_dir: templates
44
content_dir: content
55
build_dir: docs

‎templates/_template.html‎

Lines changed: 5 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -48,77 +48,9 @@
4848
<!-- SEO -->
4949
<link rel="canonical" href="{{ page_url }}" />
5050

51-
<!-- Other head content like title, meta tags, etc. -->
52-
<style>
53-
a {
54-
overflow-wrap: break-word;
55-
word-wrap: break-word;
56-
white-space: normal;
57-
}
58-
.btn-outline-success {
59-
--bs-btn-color: #0d6efd !important;
60-
--bs-btn-border-color: #0d6efd !important;
61-
--bs-btn-hover-bg: #0d6efd !important;
62-
--bs-btn-hover-border-color: #0d6efd !important;
63-
}
64-
.navbar-btn {
65-
color: #0d6efd;
66-
}
67-
.unstyled-link {
68-
text-decoration: none !important;
69-
color: inherit !important;
70-
}
71-
code {
72-
padding: 2px 4px;
73-
}
74-
pre {
75-
/* background-color: #ccc; */
76-
padding: 1em;
77-
border-radius: 4px;
78-
overflow-x: auto;
79-
}
80-
blockquote {
81-
border-left: 4px solid #ccc;
82-
margin: 1em 0;
83-
padding-left: 1em;
84-
font-style: italic;
85-
}
86-
/* Ensure padding and bullet styling are applied */
87-
/* Only apply list styles within the Markdown-rendered content area */
88-
.markdown-body ul,
89-
#content ul,
90-
.markdown-body ol,
91-
#content ol {
92-
padding-left: 2rem;
93-
margin-left: 0;
94-
}
95-
table {
96-
border-collapse: separate;
97-
margin-left: 1rem;
98-
margin-right: 1rem;
99-
margin-bottom: 1rem;
100-
border: 1px solid #dee2e6;
101-
}
102-
.navbar-header.navbar-right {
103-
display: flex;
104-
flex-wrap: nowrap;
105-
justify-content: flex-end;
106-
align-items: center;
107-
}
108-
[data-bs-theme="light"] .logo-light {
109-
display: inline-block;
110-
}
111-
[data-bs-theme="light"] .logo-dark {
112-
display: none;
113-
}
114-
[data-bs-theme="dark"] .logo-light {
115-
display: none;
116-
}
117-
[data-bs-theme="dark"] .logo-dark {
118-
display: inline-block;
119-
}
120-
121-
</style>
51+
<!-- Load assets/styles/style.css -->
52+
<link rel="stylesheet" href="{{ static_url }}/css/style.css">
53+
12254
{% endblock %}
12355
</head>
12456

@@ -247,87 +179,8 @@ <h1><a href="/">Rendeiro group</a></h1>
247179
<!-- Bootstrap JS -->
248180
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
249181
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
250-
<script type="text/javascript">
251-
/*!
252-
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
253-
* Copyright 2011-2024 The Bootstrap Authors
254-
* Licensed under the Creative Commons Attribution 3.0 Unported License.
255-
*/
256-
257-
(() => {
258-
"use strict";
259-
260-
const getStoredTheme = () => localStorage.getItem("theme");
261-
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
262-
263-
const getPreferredTheme = () => {
264-
const storedTheme = getStoredTheme();
265-
if (storedTheme) {
266-
return storedTheme;
267-
}
268-
269-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
270-
};
271-
272-
const setTheme = (theme) => {
273-
if (theme === "auto") {
274-
document.documentElement.setAttribute("data-bs-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
275-
} else {
276-
document.documentElement.setAttribute("data-bs-theme", theme);
277-
}
278-
};
279-
280-
setTheme(getPreferredTheme());
281-
282-
const showActiveTheme = (theme, focus = false) => {
283-
const themeSwitcher = document.querySelector("#bd-theme");
284-
285-
if (!themeSwitcher) {
286-
return;
287-
}
288-
289-
const themeSwitcherText = document.querySelector("#bd-theme-text");
290-
const activeThemeIcon = document.querySelector(".theme-icon-active use");
291-
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
292-
const svgOfActiveBtn = btnToActive.querySelector("svg use").getAttribute("href");
293-
294-
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
295-
element.classList.remove("active");
296-
element.setAttribute("aria-pressed", "false");
297-
});
298-
299-
btnToActive.classList.add("active");
300-
btnToActive.setAttribute("aria-pressed", "true");
301-
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
302-
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
303-
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
304-
305-
if (focus) {
306-
themeSwitcher.focus();
307-
}
308-
};
309-
310-
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
311-
const storedTheme = getStoredTheme();
312-
if (storedTheme !== "light" && storedTheme !== "dark") {
313-
setTheme(getPreferredTheme());
314-
}
315-
});
316-
317-
window.addEventListener("DOMContentLoaded", () => {
318-
showActiveTheme(getPreferredTheme());
319-
320-
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
321-
toggle.addEventListener("click", () => {
322-
const theme = toggle.getAttribute("data-bs-theme-value");
323-
setStoredTheme(theme);
324-
setTheme(theme);
325-
showActiveTheme(theme, true);
326-
});
327-
});
328-
});
329-
})();
330-
</script>
182+
<!-- Bootstrap color toggle -->
183+
<script defer src="{{ static_url }}/js/color_toggler.js"></script>
331184
{% endblock js %}
332185
</body>
333186
</html>

0 commit comments

Comments
 (0)