aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rwxr-xr-xassets/Fullscreen.svg19
-rwxr-xr-xassets/Smallscreen.svg21
-rw-r--r--assets/css/main.css59
-rw-r--r--assets/js/darkmode.js11
-rw-r--r--assets/js/fullscreen.js27
5 files changed, 132 insertions, 5 deletions
diff --git a/assets/Fullscreen.svg b/assets/Fullscreen.svg
new file mode 100755
index 0000000..0de34f0
--- /dev/null
+++ b/assets/Fullscreen.svg
@@ -0,0 +1,19 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4 <rect id="Fullscreen" x="0" y="0" width="200" height="200" style="fill:none;"/>
5 <g id="Fullscreen1" serif:id="Fullscreen">
6 <g transform="matrix(0.844444,0,0,0.844444,15.5556,15.5556)">
7 <path d="M130,22.632C123.028,22.632 117.368,16.972 117.368,10C117.368,3.028 123.028,-2.632 130,-2.632L170.163,-2.632C178.774,-2.632 187.033,0.789 193.122,6.878C199.211,12.967 202.632,21.226 202.632,29.837L202.632,70C202.632,76.972 196.972,82.632 190,82.632C183.028,82.632 177.368,76.972 177.368,70L177.368,29.837C177.368,27.926 176.609,26.093 175.258,24.742C173.907,23.391 172.074,22.632 170.163,22.632L130,22.632Z"/>
8 </g>
9 <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
10 <path d="M71.333,173.509C78.227,173.509 83.825,179.106 83.825,186C83.825,192.894 78.227,198.491 71.333,198.491L31.616,198.491C23.101,198.491 14.934,195.108 8.913,189.087C2.892,183.066 -0.491,174.899 -0.491,166.384L-0.491,126.667C-0.491,119.773 5.106,114.175 12,114.175C18.894,114.175 24.491,119.773 24.491,126.667L24.491,166.384C24.491,168.273 25.242,170.086 26.578,171.422C27.914,172.758 29.727,173.509 31.616,173.509L71.333,173.509Z"/>
11 </g>
12 <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
13 <path d="M177.509,126.667C177.509,119.773 183.106,114.175 190,114.175C196.894,114.175 202.491,119.773 202.491,126.667L202.491,166.384C202.491,174.899 199.108,183.066 193.087,189.087C187.066,195.108 178.899,198.491 170.384,198.491L130.667,198.491C123.773,198.491 118.175,192.894 118.175,186C118.175,179.106 123.773,173.509 130.667,173.509L170.384,173.509C172.273,173.509 174.086,172.758 175.422,171.422C176.758,170.086 177.509,168.273 177.509,166.384L177.509,126.667Z"/>
14 </g>
15 <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
16 <path d="M24.491,67.333C24.491,74.227 18.894,79.825 12,79.825C5.106,79.825 -0.491,74.227 -0.491,67.333L-0.491,27.616C-0.491,19.101 2.892,10.934 8.913,4.913C14.934,-1.108 23.101,-4.491 31.616,-4.491L71.333,-4.491C78.227,-4.491 83.825,1.106 83.825,8C83.825,14.894 78.227,20.491 71.333,20.491L31.616,20.491C29.727,20.491 27.914,21.242 26.578,22.578C25.242,23.914 24.491,25.727 24.491,27.616L24.491,67.333Z"/>
17 </g>
18 </g>
19</svg>
diff --git a/assets/Smallscreen.svg b/assets/Smallscreen.svg
new file mode 100755
index 0000000..de417ed
--- /dev/null
+++ b/assets/Smallscreen.svg
@@ -0,0 +1,21 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4 <g transform="matrix(1,0,0,1,-217,0)">
5 <g id="Smallscreen" transform="matrix(1,0,0,1,217,0)">
6 <rect x="0" y="0" width="200" height="200" style="fill:none;"/>
7 <g transform="matrix(-0.844444,0,0,-0.844444,285.778,83.1111)">
8 <path d="M130,22.632C123.028,22.632 117.368,16.972 117.368,10C117.368,3.028 123.028,-2.632 130,-2.632L170.163,-2.632C178.774,-2.632 187.033,0.789 193.122,6.878C199.211,12.967 202.632,21.226 202.632,29.837L202.632,70C202.632,76.972 196.972,82.632 190,82.632C183.028,82.632 177.368,76.972 177.368,70L177.368,29.837C177.368,27.926 176.609,26.093 175.258,24.742C173.907,23.391 172.074,22.632 170.163,22.632L130,22.632Z"/>
9 </g>
10 <g transform="matrix(-0.853933,0,0,-0.853933,84.9139,284.165)">
11 <path d="M71.333,173.509C78.227,173.509 83.825,179.106 83.825,186C83.825,192.894 78.227,198.491 71.333,198.491L31.616,198.491C23.101,198.491 14.934,195.108 8.913,189.087C2.892,183.066 -0.491,174.899 -0.491,166.384L-0.491,126.667C-0.491,119.773 5.106,114.175 12,114.175C18.894,114.175 24.491,119.773 24.491,126.667L24.491,166.384C24.491,168.273 25.242,170.086 26.578,171.422C27.914,172.758 29.727,173.509 31.616,173.509L71.333,173.509Z"/>
12 </g>
13 <g transform="matrix(-0.853933,0,0,-0.853933,287.581,284.165)">
14 <path d="M177.509,126.667C177.509,119.773 183.106,114.175 190,114.175C196.894,114.175 202.491,119.773 202.491,126.667L202.491,166.384C202.491,174.899 199.108,183.066 193.087,189.087C187.066,195.108 178.899,198.491 170.384,198.491L130.667,198.491C123.773,198.491 118.175,192.894 118.175,186C118.175,179.106 123.773,173.509 130.667,173.509L170.384,173.509C172.273,173.509 174.086,172.758 175.422,171.422C176.758,170.086 177.509,168.273 177.509,166.384L177.509,126.667Z"/>
15 </g>
16 <g transform="matrix(-0.853933,0,0,-0.853933,84.9139,81.4981)">
17 <path d="M24.491,67.333C24.491,74.227 18.894,79.825 12,79.825C5.106,79.825 -0.491,74.227 -0.491,67.333L-0.491,27.616C-0.491,19.101 2.892,10.934 8.913,4.913C14.934,-1.108 23.101,-4.491 31.616,-4.491L71.333,-4.491C78.227,-4.491 83.825,1.106 83.825,8C83.825,14.894 78.227,20.491 71.333,20.491L31.616,20.491C29.727,20.491 27.914,21.242 26.578,22.578C25.242,23.914 24.491,25.727 24.491,27.616L24.491,67.333Z"/>
18 </g>
19 </g>
20 </g>
21</svg>
diff --git a/assets/css/main.css b/assets/css/main.css
index 97d1f73..a7d2bf8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,6 +17,35 @@ footer {
17 background: #00000055; 17 background: #00000055;
18} 18}
19 19
20.fixed {
21 position: fixed;
22 top: 0;
23}
24
25#actions {
26 width: 100%;
27 padding: .5rem;
28}
29
30#actions button:first-of-type {
31 margin-right: 1rem;
32}
33
34#actions button {
35 background: transparent;
36 border: none;
37 width: fit-content;
38 padding: 0;
39}
40
41#actions button:hover {
42 color:aquamarine !important;
43}
44
45.aligned.right {
46 justify-content: flex-end;
47}
48
20.flex { 49.flex {
21 display: flex; 50 display: flex;
22} 51}
@@ -25,6 +54,11 @@ footer {
25 flex-direction: row; 54 flex-direction: row;
26} 55}
27 56
57.centered {
58 align-items: center;
59 justify-content: center;
60}
61
28.flex.col { 62.flex.col {
29 flex-direction: column; 63 flex-direction: column;
30} 64}
@@ -75,4 +109,27 @@ footer {
75 text-transform: uppercase; 109 text-transform: uppercase;
76 font-weight: 600; 110 font-weight: 600;
77} 111}
78 \ No newline at end of file 112
113.icon svg {
114 width: 1em;
115 height: 1em;
116 margin-right: .4em;
117}
118
119.hide {
120 display: none;
121}
122
123.icon:hover {
124 color: inherit !important;
125}
126
127html[data-theme="dark"] .icon,
128html[data-theme="dark"] #actions button {
129 color: white;
130}
131
132html[data-theme="light"] .icon,
133html[data-theme="light"] #actions button {
134 color: #24333e;
135} \ No newline at end of file
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 0000000..c6094d0
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,11 @@
1// get with web apis #fullscren element and on click toggle fullscreen
2const darkmode = document.getElementById('darkmode');
3const html = document.querySelector('html');
4darkmode.addEventListener('click', () => {
5 if (html.dataset.theme === 'dark') {
6 html.dataset.theme = 'light';
7 } else {
8 html.dataset.theme = 'dark';
9 }
10});
11
diff --git a/assets/js/fullscreen.js b/assets/js/fullscreen.js
index e191854..e3cc342 100644
--- a/assets/js/fullscreen.js
+++ b/assets/js/fullscreen.js
@@ -1,15 +1,27 @@
1// get with web apis #fullscren element and on click toggle fullscreen 1// page
2const fullscreen = document.getElementById('fullscreen'); 2const fullscreen = document.getElementById('fullscreen');
3const fullscreenIcon = document.getElementById('fullscreen-icon');
4const smallscreenIcon = document.getElementById('smallscreen-icon');
3const elem = document.documentElement; 5const elem = document.documentElement;
4fullscreen.addEventListener('click', () => { 6
7// Functions
8
9function toggleFullscreen(event) {
10 // check if the event is a keydown event or a click event
11 if (event.type === 'keydown') {
12 // check if the key pressed is '/' key
13 if (event.key !== '/') return;
14 }
5 if (document.fullscreenElement) { 15 if (document.fullscreenElement) {
6 closeFullscreen(); 16 closeFullscreen();
7 } else { 17 } else {
8 openFullscreen(); 18 openFullscreen();
9 } 19 }
10}); 20}
11 21
12function openFullscreen() { 22function openFullscreen() {
23 smallscreenIcon.classList.toggle('hide');
24 fullscreenIcon.classList.toggle('hide');
13 if (elem.requestFullscreen) { 25 if (elem.requestFullscreen) {
14 elem.requestFullscreen(); 26 elem.requestFullscreen();
15 } else if (elem.webkitRequestFullscreen) { /* Safari */ 27 } else if (elem.webkitRequestFullscreen) { /* Safari */
@@ -20,6 +32,8 @@ function openFullscreen() {
20} 32}
21 33
22function closeFullscreen() { 34function closeFullscreen() {
35 smallscreenIcon.classList.toggle('hide');
36 fullscreenIcon.classList.toggle('hide');
23 if (document.exitFullscreen) { 37 if (document.exitFullscreen) {
24 document.exitFullscreen(); 38 document.exitFullscreen();
25 } else if (document.webkitExitFullscreen) { /* Safari */ 39 } else if (document.webkitExitFullscreen) { /* Safari */
@@ -27,4 +41,9 @@ function closeFullscreen() {
27 } else if (document.msExitFullscreen) { /* IE11 */ 41 } else if (document.msExitFullscreen) { /* IE11 */
28 document.msExitFullscreen(); 42 document.msExitFullscreen();
29 } 43 }
30} \ No newline at end of file 44}
45
46// Listeners
47
48fullscreen.addEventListener('click', toggleFullscreen);
49document.addEventListener('keydown', toggleFullscreen); \ No newline at end of file