Skip to content

Commit eaa9c20

Browse files
Albez0-An7hkbdharun
Albez0-An7h
and
kbdharun
authored
feat: add dark mode, remove google analytics script (#82)
Co-authored-by: K.B.Dharun Krishna <[email protected]>
1 parent 1390712 commit eaa9c20

File tree

4 files changed

+97
-34
lines changed

4 files changed

+97
-34
lines changed

‎assets/css/index.css‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,29 @@
66
/*
77
* The fun begins here.
88
*/
9+
910
html {
1011
font: 16px/1.5 Inconsolata, monospace;
1112
}
1213

1314
body {
1415
margin: 2rem 0 5rem;
15-
color: #333;
16+
color: var(--secondary-color);
17+
background-color: var(--primary-color);
18+
}
19+
20+
:root {
21+
--primary-color: #fff;
22+
--secondary-color: #000;
23+
--pre-background-color: #f5f5f5;
24+
--pre-text-color: #333;
25+
}
26+
27+
.dark_theme {
28+
--primary-color: #111;
29+
--secondary-color: #fff;
30+
--pre-background-color: #333;
31+
--pre-text-color: #f5f5f5;
1632
}
1733

1834
a {
@@ -29,13 +45,14 @@ h1, h2, h3, h4, h5, h6 {
2945
font-family: Montserrat, monospace;
3046
margin: 0 0 0.5rem -0.1rem; /* align left edge */
3147
line-height: 1;
32-
color: #111;
48+
color: var(--secondary-color);
3349
text-rendering: optimizeLegibility;
3450
}
3551

3652
h1 {
3753
font-size: 2.5rem;
3854
margin-bottom: 1rem;
55+
display: inline-flex;
3956
}
4057

4158
h2 {
@@ -44,6 +61,15 @@ h2 {
4461
margin-bottom: 0.75rem;
4562
}
4663

64+
#icon{
65+
height: 30px;
66+
width: 30px;
67+
display: inline-flex;
68+
cursor: pointer;
69+
margin-left: 50px;
70+
padding-top: 75px;
71+
}
72+
4773
h2 a {
4874
color: #555;
4975
font-family: Inconsolata, monospace;
@@ -119,7 +145,7 @@ td {
119145
pre,
120146
code {
121147
font-family: "Source Code Pro", monospace;
122-
background-color: #eee;
148+
background-color: var(--pre-background-color);
123149
}
124150

125151
pre {
@@ -131,6 +157,10 @@ code {
131157
padding: .1rem .25rem;
132158
}
133159

160+
iframe{
161+
border: 1px solid
162+
}
163+
134164
.container {
135165
max-width: 30rem;
136166
margin: 0 auto;
@@ -152,8 +182,8 @@ iframe#twitter-widget-0 {
152182
}
153183

154184
.github-corner {
155-
fill: #151513;
156-
color: #fff;
185+
fill: var(--secondary-color);
186+
color: var(--primary-color);
157187
position: fixed;
158188
top: 0;
159189
border: 0;

‎assets/img/Moon.png‎

14.5 KB
Loading

‎assets/img/Sun.png‎

17 KB
Loading

‎index.html‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,41 @@
66
<title>tldr pages</title>
77
<meta name="author" content="tldr pages team">
88
<meta name="description" content="Simplified and community-driven man pages">
9-
<meta name="keywords" content="man, unix, linux, mac, osx, macos, commands, command-line, shell, bash, zsh">
9+
<meta name="keywords" content="man, unix, linux, mac, bsd, android, windows, osx, macos, commands, command-line, shell, bash, zsh, cheatsheet">
1010
<meta name="robots" content="noodp,noydir">
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
1313
<link rel="stylesheet" href="assets/css/index.css">
1414
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat|Inconsolata:400,700|Source+Code+Pro">
1515
<link rel="icon" type="image/png" href="assets/img/icon.png" />
16-
<link href="https://fosstodon.org/@tldr_pages" rel="me" />
16+
<link href="https://fosstodon.org/@tldr_pages" rel="me" />
1717
</head>
1818
<body>
1919
<div class="container">
2020
<h1>tldr pages</h1>
21-
<blockquote>Simplified and community-driven man pages</blockquote>
21+
<img src="assets/img/Moon.png" alt="" id="icon">
22+
<blockquote>Simplified and community-driven man pages.</blockquote>
2223

2324
<p class="widgets">
24-
<a href="https://github.com/tldr-pages/tldr" target="_blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tldr-pages/tldr.svg?logo=github"></a>
25+
<a href="https://github.com/tldr-pages/tldr" target="_blank" rel="noopener" referrer="tldr.sh"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tldr-pages/tldr.svg?logo=github"></a>
2526

26-
<a href="https://twitter.com/tldr_pages" target="_blank"><img alt="Twitter" src="https://img.shields.io/badge/twitter-tldr__pages-%231DA1F2.svg"></a>
27-
28-
<a href="https://fosstodon.org/@tldr_pages" target="_blank"><img alt="Fosstodon" src="https://img.shields.io/badge/fosstodon-tldr__pages-blue"></a>
29-
30-
<a href="https://matrix.to/#/#tldr-pages:matrix.org" target="_blank"><img alt="Matrix" src="https://img.shields.io/matrix/tldr-pages:matrix.org?label=chat+on+Matrix"></a>
27+
<a href="https://twitter.com/tldr_pages" target="_blank" rel="noopener" referrer="tldr.sh"><img alt="Twitter" src="https://img.shields.io/badge/twitter-tldr__pages-%231DA1F2.svg"></a>
28+
29+
<a href="https://fosstodon.org/@tldr_pages" target="_blank" rel="noopener" referrer="tldr.sh"><img alt="Fosstodon" src="https://img.shields.io/badge/fosstodon-tldr__pages-blue"></a>
30+
31+
<a href="https://matrix.to/#/#tldr-pages:matrix.org" target="_blank" rel="noopener" referrer="tldr.sh"><img alt="Matrix" src="https://img.shields.io/matrix/tldr-pages:matrix.org?label=chat+on+Matrix"></a>
3132
</p>
3233

3334
<p>
3435
The tldr pages are a community effort
35-
to simplify the beloved <a href="https://en.wikipedia.org/wiki/Man_page">man pages</a>
36+
to simplify the beloved <a href="https://en.wikipedia.org/wiki/Man_page" referrer="tldr.sh">man pages</a>
3637
with practical examples.
3738
</p>
3839
<p><img src="assets/img/screenshot.png" alt="tldr screenshot"></p>
3940

4041
<p>
41-
Try the <a href="https://tldr.inbrowser.app" target="blank">live demo</a> below,
42-
have a look at the <a href="/assets/tldr-book.pdf">PDF version</a>,
42+
Try the <a href="https://tldr.inbrowser.app" target="blank" referrer="tldr.sh">live demo</a> below,
43+
have a look at the <a href="https://github.com/tldr-pages/tldr/releases/latest/download/tldr-book.pdf" referrer="tldr.sh">PDF version</a>,
4344
or follow the <a href="#installation">installation instructions</a>.
4445
</p>
4546

@@ -48,8 +49,8 @@ <h1>tldr pages</h1>
4849
<p>The live demo requires JavaScript to function. To access the content, please enable JavaScript in your browser settings.</p>
4950
</div>
5051
</noscript>
51-
52-
<iframe id="iframe-content" src="https://tldr.inbrowser.app/pages/common/tar" width="100%" height="500px" style="border: 1px solid"></iframe>
52+
53+
<iframe id="iframe-content" src="https://tldr.inbrowser.app/pages/common/tar" width="100%" height="500px" title="tldr live demo"></iframe>
5354

5455
<h2 id="installation">
5556
<a href="#installation">§</a>
@@ -62,12 +63,12 @@ <h2 id="installation">
6263
<p>
6364
There are many more clients that have sprouted from the community, including:
6465
<ul>
65-
<li>command-line clients</li>
66-
<li>GUI clients for desktop and mobile</li>
67-
<li>web-based clients</li>
68-
<li>clients which integrate with other applications</li>
66+
<li>command-line clients.</li>
67+
<li>GUI clients for desktop and mobile.</li>
68+
<li>web-based clients.</li>
69+
<li>clients which integrate with other applications.</li>
6970
</ul>
70-
They can be found <a href="https://github.com/tldr-pages/tldr/wiki/Clients">in the wiki.</a>
71+
They can be found <a href="https://github.com/tldr-pages/tldr/wiki/Clients" referrer="tldr.sh">in the wiki.</a>
7172
</p>
7273

7374
<h2 id="contributing">
@@ -82,20 +83,20 @@ <h2 id="contributing">
8283
<p>
8384
You're encouraged to create or edit pages
8485
in the <code>pages/</code> folder
85-
at the <a href="https://github.com/tldr-pages/tldr">project's repository</a>
86+
at the <a href="https://github.com/tldr-pages/tldr" referrer="tldr.sh">project's repository</a>
8687
and submit a pull request.
8788
</p>
8889
<p>
8990
Just keep in mind the
90-
<a href="https://github.com/tldr-pages/tldr/blob/main/CONTRIBUTING.md">Contributing guidelines</a>.
91+
<a href="https://github.com/tldr-pages/tldr/blob/main/CONTRIBUTING.md" referrer="tldr.sh">Contributing guidelines</a>.
9192
</p>
9293

9394
<h2 id="license">
9495
<a href="#license">§</a>
9596
License
9697
</h2>
9798

98-
<p><a href="https://github.com/tldr-pages/tldr/blob/main/LICENSE.md">MIT License</a></p>
99+
<p><a href="https://github.com/tldr-pages/tldr/blob/main/LICENSE.md" referrer="tldr.sh">MIT License</a></p>
99100
</div>
100101

101102
<a href="https://github.com/tldr-pages/tldr" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
@@ -109,12 +110,44 @@ <h2 id="license">
109110
});
110111
</script>
111112
<script>
112-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
113-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
114-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
115-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
116-
ga('create', 'UA-71864986-1', 'auto');
117-
ga('send', 'pageview');
113+
var icon = document.getElementById("icon")
114+
icon.onclick = function () {
115+
document.body.classList.toggle("dark_theme")
116+
if (document.body.classList.contains("dark_theme")) {
117+
icon.src = "assets/img/Sun.png";
118+
} else {
119+
icon.src = "assets/img/Moon.png";
120+
}
121+
}
122+
</script>
123+
<script>
124+
var icon = document.getElementById("icon");
125+
126+
function updateTheme(isDark) {
127+
if (isDark) {
128+
document.body.classList.add("dark_theme");
129+
icon.src = "assets/img/Sun.png";
130+
} else {
131+
document.body.classList.remove("dark_theme");
132+
icon.src = "assets/img/Moon.png";
133+
}
134+
}
135+
136+
var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
137+
updateTheme(prefersDarkScheme.matches);
138+
139+
prefersDarkScheme.addEventListener("change", function (e) {
140+
updateTheme(e.matches);
141+
});
142+
143+
icon.onclick = function () {
144+
document.body.classList.toggle("dark_theme");
145+
if (document.body.classList.contains("dark_theme")) {
146+
icon.src = "assets/img/Sun.png";
147+
} else {
148+
icon.src = "assets/img/Moon.png";
149+
}
150+
};
118151
</script>
119152
</body>
120153
</html>

0 commit comments

Comments
 (0)