Skip to content

Commit 0bdb7fa

Browse files
gregsdennisgregsdennis
committed
add light mode switching
1 parent 6b39a7b commit 0bdb7fa

File tree

8 files changed

+560
-4
lines changed

8 files changed

+560
-4
lines changed

‎.jekyll-metadata‎

6.05 KB
Binary file not shown.

‎_includes/head.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!-- The Head -->
2+
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
6+
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta
10+
name="viewport"
11+
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
12+
>
13+
14+
{% if page.layout == 'home' or page.layout == 'post' %}
15+
{% if site.google_analytics.pv.proxy_endpoint %}
16+
<meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
17+
{% endif %}
18+
19+
{% if site.google_analytics.pv.cache_path %}
20+
<meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
21+
{% endif %}
22+
{% endif %}
23+
24+
{% capture seo_tags %}
25+
{% seo title=false %}
26+
{% endcapture %}
27+
28+
{% if page.image %}
29+
{% assign img = page.image.path | default: page.image %}
30+
31+
{% unless img contains '://' %}
32+
{% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
33+
{% capture target %}"{{ img | absolute_url }}"{% endcapture %}
34+
35+
{% if site.img_cdn contains '//' %}
36+
<!-- it's a cross-origin URL -->
37+
{% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
38+
{% else %}
39+
<!-- it's a local file path -->
40+
{%- capture replacement -%}
41+
"{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
42+
{%- endcapture -%}
43+
{% endif %}
44+
45+
{% assign seo_tags = seo_tags | replace: target, replacement %}
46+
{% endunless %}
47+
{% endif %}
48+
49+
{{ seo_tags }}
50+
51+
<title>
52+
{%- unless page.layout == 'home' -%}
53+
{{ page.title | append: ' | ' }}
54+
{%- endunless -%}
55+
{{ site.title }}
56+
</title>
57+
58+
<!-- Material Icons -->
59+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
60+
61+
{% include favicons.html %}
62+
63+
{% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
64+
<link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
65+
66+
{% else %}
67+
{% for cdn in site.data.assets[origin].cdns %}
68+
<link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
69+
<link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
70+
{% endfor %}
71+
72+
<link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
73+
{% endif %}
74+
75+
<!-- GA -->
76+
{% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
77+
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
78+
<link rel="dns-prefetch" href="https://www.google-analytics.com">
79+
80+
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
81+
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
82+
83+
{% if site.google_analytics.pv.proxy_endpoint %}
84+
{% assign proxy_url = site.google_analytics.pv.proxy_endpoint
85+
| replace: 'https://', ''
86+
| split: '/'
87+
| first
88+
| prepend: 'https://'
89+
%}
90+
<link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
91+
<link rel="dns-prefetch" href="{{ proxy_url }}">
92+
{% endif %}
93+
{% endif %}
94+
95+
<!-- Bootstrap -->
96+
<link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css | relative_url}}">
97+
98+
<!-- Font Awesome -->
99+
<link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
100+
101+
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
102+
103+
{% if site.toc and page.toc %}
104+
<link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
105+
{% endif %}
106+
107+
{% if page.layout == 'page' or page.layout == 'post' %}
108+
<!-- Manific Popup -->
109+
<link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css | relative_url }}">
110+
{% endif %}
111+
112+
<!-- JavaScript -->
113+
114+
<script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
115+
116+
{% include mode-toggle.html %}
117+
</head>

‎_includes/js-selector.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!-- JS selector for site. -->
2+
3+
<!-- layout specified -->
4+
5+
{% if page.layout == 'post' %}
6+
{% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
7+
<!-- pv-report needs countup.js -->
8+
<script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
9+
{% endif %}
10+
{% endif %}
11+
12+
{% if page.layout == 'post' or page.layout == 'page' %}
13+
<!-- image lazy-loading & popup & clipboard -->
14+
{% assign _urls = site.data.assets[origin]['magnific-popup'].js
15+
| append: ','
16+
| append: site.data.assets[origin].lazysizes.js
17+
| append: ','
18+
| append: site.data.assets[origin].clipboard.js
19+
%}
20+
21+
{% include jsdelivr-combine.html urls=_urls %}
22+
{% endif %}
23+
24+
{% if page.layout == 'home'
25+
or page.layout == 'post'
26+
or page.layout == 'archives'
27+
or page.layout == 'category'
28+
or page.layout == 'tag'
29+
%}
30+
{% assign locale = site.lang | split: '-' | first %}
31+
32+
{% assign _urls = site.data.assets[origin].dayjs.js.common
33+
| append: ','
34+
| append: site.data.assets[origin].dayjs.js.locale
35+
| replace: ':LOCALE', locale
36+
| append: ','
37+
| append: site.data.assets[origin].dayjs.js.relativeTime
38+
| append: ','
39+
| append: site.data.assets[origin].dayjs.js.localizedFormat
40+
%}
41+
42+
{% include jsdelivr-combine.html urls=_urls %}
43+
{% endif %}
44+
45+
{% case page.layout %}
46+
{% when 'categories', 'post', 'page' %}
47+
{% assign type = page.layout %}
48+
{% when 'home', 'archives', 'category', 'tag' %}
49+
{% assign type = 'misc' %}
50+
{% else %}
51+
{% assign type = 'commons' %}
52+
{% endcase %}
53+
54+
{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
55+
<script defer src="{{ script | relative_url }}"></script>
56+
57+
<!-- Theme icon updater -->
58+
<script defer src="{{ '/assets/js/theme-icon-updater.js' | relative_url }}"></script>
59+
60+
{% if page.math %}
61+
<!-- MathJax -->
62+
<script>
63+
/* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
64+
MathJax = {
65+
tex: {
66+
/* start/end delimiter pairs for in-line math */
67+
inlineMath: [
68+
['$', '$'],
69+
['\\(', '\\)']
70+
],
71+
/* start/end delimiter pairs for display math */
72+
displayMath: [
73+
['$$', '$$'],
74+
['\\[', '\\]']
75+
]
76+
}
77+
};
78+
</script>
79+
<script src="{{ site.data.assets[origin].polyfill.js | relative_url }}"></script>
80+
<script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
81+
{% endif %}
82+
83+
<!-- commons -->
84+
85+
<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
86+
87+
{% if jekyll.environment == 'production' %}
88+
<!-- PWA -->
89+
{% if site.pwa.enabled %}
90+
<script defer src="{{ '/app.js' | relative_url }}"></script>
91+
{% else %}
92+
<script defer src="{{ '/unregister.js' | relative_url }}"></script>
93+
{% endif %}
94+
95+
<!-- GA -->
96+
{% if site.google_analytics.id != empty and site.google_analytics.id %}
97+
{% include google-analytics.html %}
98+
{% endif %}
99+
{% endif %}

‎_includes/sidebar.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!--
2+
The Side Bar
3+
-->
4+
5+
<div id="sidebar" class="d-flex flex-column align-items-end">
6+
<div class="profile-wrapper text-center">
7+
<div id="avatar">
8+
<a href="{{ '/' | relative_url }}" class="mx-auto">
9+
{% if site.avatar != empty and site.avatar %}
10+
{% capture avatar_url %}
11+
{% if site.avatar contains '://' %}
12+
{{ site.avatar }}
13+
{% elsif site.img_cdn != empty and site.img_cdn %}
14+
{{ site.avatar | prepend: site.img_cdn }}
15+
{% else %}
16+
{{ site.avatar | relative_url }}
17+
{% endif %}
18+
{% endcapture %}
19+
<img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
20+
{% endif %}
21+
</a>
22+
</div>
23+
24+
<div class="site-title">
25+
<a href="{{ '/' | relative_url }}">{{ site.title }}</a>
26+
</div>
27+
<div class="site-subtitle font-italic">{{ site.tagline }}</div>
28+
29+
</div><!-- .profile-wrapper -->
30+
31+
<ul class="w-100">
32+
33+
<!-- home -->
34+
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
35+
<a href="{{ '/' | relative_url }}" class="nav-link">
36+
<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
37+
<span>{{ site.data.locales[site.lang].tabs.home | upcase }}</span>
38+
</a>
39+
</li>
40+
<!-- the real tabs -->
41+
{% for tab in site.tabs %}
42+
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
43+
<a href="{{ tab.url | relative_url }}" class="nav-link">
44+
<i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
45+
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
46+
47+
<span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
48+
</a>
49+
</li> <!-- .nav-item -->
50+
{% endfor %}
51+
52+
</ul> <!-- ul.nav.flex-column -->
53+
54+
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
55+
56+
{% for entry in site.data.contact %}
57+
{% case entry.type %}
58+
{% when 'github', 'twitter' %}
59+
{%- capture url -%}
60+
https://{{ entry.type }}.com/{{ site[entry.type].username }}
61+
{%- endcapture -%}
62+
{% when 'email' %}
63+
{% assign email = site.social.email | split: '@' %}
64+
{%- capture url -%}
65+
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
66+
{%- endcapture -%}
67+
{% when 'rss' %}
68+
{% assign url = '/feed.xml' | relative_url %}
69+
{% else %}
70+
{% assign url = entry.url %}
71+
{% endcase %}
72+
73+
{% if url %}
74+
<a href="{{ url }}" aria-label="{{ entry.type }}"
75+
{% assign link_types = '' %}
76+
77+
{% unless entry.noblank %}
78+
target="_blank"
79+
{% assign link_types = 'noopener noreferrer' %}
80+
{% endunless %}
81+
82+
{% if entry.type == 'mastodon' %}
83+
{% assign link_types = link_types | append: ' me' | strip %}
84+
{% endif %}
85+
86+
{% unless link_types == empty %}rel="{{ link_types }}"{% endunless %}>
87+
88+
<i class="{{ entry.icon }}"></i>
89+
</a>
90+
{% endif %}
91+
92+
{% endfor %}
93+
94+
</div> <!-- .sidebar-bottom -->
95+
96+
</div><!-- #sidebar -->

‎_includes/topbar.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!--
2+
The Top Bar
3+
-->
4+
5+
<div id="topbar-wrapper">
6+
<div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
7+
<span id="breadcrumb">
8+
9+
{% assign paths = page.url | split: '/' %}
10+
11+
{% if paths.size == 0 or page.layout == 'home' %}
12+
<!-- index page -->
13+
<span>{{ site.data.locales[site.lang].tabs.home | capitalize }}</span>
14+
15+
{% else %}
16+
17+
{% for item in paths %}
18+
19+
{% if forloop.first %}
20+
<span>
21+
<a href="{{ '/' | relative_url }}">
22+
{{ site.data.locales[site.lang].tabs.home | capitalize }}
23+
</a>
24+
</span>
25+
26+
{% elsif forloop.last %}
27+
28+
{% if page.collection == 'tabs' %}
29+
<span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
30+
{% else %}
31+
<span>{{ page.title }}</span>
32+
{% endif %}
33+
34+
{% elsif page.layout == 'category' or page.layout == 'tag' %}
35+
<span>
36+
<a href="{{ item | relative_url }}">
37+
{{ site.data.locales[site.lang].tabs[item] | default: page.title }}
38+
</a>
39+
</span>
40+
{% endif %}
41+
42+
{% endfor %}
43+
44+
{% endif %}
45+
46+
</span><!-- endof #breadcrumb -->
47+
48+
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
49+
50+
<div id="topbar-title">
51+
{% if page.layout == 'home' %}
52+
{{- site.data.locales[site.lang].title | default: site.title -}}
53+
{% elsif page.collection == 'tabs' or page.layout == 'page' %}
54+
{%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
55+
{{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
56+
{% else %}
57+
{{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
58+
{% endif %}
59+
</div>
60+
61+
<div id="topbar-right" class="d-flex align-items-center">
62+
<button class="mode-toggle btn" aria-label="Switch Mode" tabindex="-1">
63+
<span class="tooltip-icon">
64+
<i class="material-icons">lightbulb</i>
65+
<span class="tooltip-text header-tooltip">Turn the lights off</span>
66+
</span>
67+
</button>
68+
69+
<i id="search-trigger" class="fas fa-search fa-fw"></i>
70+
<span id="search-wrapper" class="align-items-center">
71+
<i class="fas fa-search fa-fw"></i>
72+
<input class="form-control" id="search-input" type="search"
73+
aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | capitalize }}...">
74+
</span>
75+
<span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel }}</span>
76+
</div>
77+
</div>
78+
79+
</div>

0 commit comments

Comments
 (0)