Skip to content

Commit 02d49f1

Browse files
BeelinkBeelink
committed
responsive
1 parent fd32c14 commit 02d49f1

File tree

9 files changed

+169
-44
lines changed

9 files changed

+169
-44
lines changed

‎imgs/icons/arrow.png‎

249 Bytes
Loading

‎imgs/icons/github.png‎

847 Bytes
Loading

‎imgs/icons/windows.png‎

395 Bytes
Loading

‎index.css‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ header {
3737
box-sizing: border-box;
3838
background-color: var(--module-color-light);
3939
background-image: linear-gradient(to right bottom, var(--module-color-light), var(--module-color-dark));
40-
padding-bottom: 140px;
40+
padding-bottom: 15vw;
4141
}
4242

4343
header a {
@@ -96,6 +96,10 @@ header .navbar a:hover .link {
9696

9797
/* APPS */
9898

99+
.apps {
100+
margin-top: -5vw;
101+
}
102+
99103
.apps .app-row {
100104
display: flex;
101105
justify-content: center;
@@ -110,6 +114,7 @@ header .navbar a:hover .link {
110114

111115
.apps .icon {
112116
width: 128px;
117+
margin-top: 32px;
113118
filter: var(--filter-shadow-white);
114119
}
115120

@@ -139,12 +144,23 @@ header .navbar a:hover .link {
139144
text-decoration: none;
140145
font: 20px/30px "Inter";
141146
display: inline-block;
147+
vertical-align: middle;
148+
margin: 0 8px;
142149
}
143150

144151
.apps a:hover {
145152
text-decoration: underline
146153
}
147154

155+
.apps a img {
156+
vertical-align: middle;
157+
}
158+
159+
.apps a span {
160+
margin: 0 8px;
161+
vertical-align: middle;
162+
}
163+
148164
/* MAIN */
149165

150166
main {
@@ -287,6 +303,44 @@ footer a:hover {
287303

288304
/* MEDIA */
289305

306+
@media screen and (max-width: 1200px) {
307+
.apps {
308+
padding: 0 16px;
309+
margin-top: 0;
310+
}
311+
312+
.apps .app-row {
313+
flex-direction: column;
314+
margin-bottom: 48px;
315+
}
316+
317+
.apps .column {
318+
max-width: 100%;
319+
margin-bottom: 32px;
320+
}
321+
322+
.apps .screenshot {
323+
display: none;
324+
}
325+
}
326+
327+
@media screen and (max-width: 900px) {
328+
header {
329+
padding-bottom: 32px;
330+
position: fixed;
331+
z-index: 500;
332+
}
333+
334+
.header-svg {
335+
display: none;
336+
}
337+
338+
.apps {
339+
padding: 128px 0 0 0;
340+
margin-top: 0;
341+
}
342+
}
343+
290344
@media screen and (max-width: 480px) {
291345
header {
292346
justify-content: center;
@@ -296,9 +350,25 @@ footer a:hover {
296350
display: none;
297351
}
298352

353+
main .donate a {
354+
width: 100%;
355+
}
356+
299357
footer {
300358
flex-direction: column;
301359
gap: 8px;
302360
text-align: center;
303361
}
362+
}
363+
364+
/* SPECIAL EFFECTS */
365+
366+
.special-effects {
367+
position: fixed;
368+
top: 0;
369+
left: 0;
370+
right: 0;
371+
bottom: 0;
372+
pointer-events: none;
373+
z-index: 1000;
304374
}

‎index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
<title>QuickPictureViewer - Lightweight, versatile desktop image viewer for Windows</title>
77
<link rel="stylesheet" href="index.css">
88
<script src="js/jquery-3.5.1.min.js"></script>
9-
<script src="js/showdown.min.js"></script>
9+
<script src="js/snowflakes.js"></script>
1010
<script src="js/index.js"></script>
1111
<link rel="shortcut icon" href="https://github.com/ModuleArt/quick-picture-viewer/blob/master/quick-picture-viewer/resources/imgs/picture32.png?raw=true" type="image/png">
1212
</head>
1313
<body>
14+
<div id="special-effects" class="special-effects"></div>
1415
<header>
1516
<a href="https://moduleart.github.io">
1617
<div class="logo">
@@ -41,22 +42,25 @@
4142
<div class="column">
4243
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/quick-picture-viewer/resources/imgs/picture512.png" />
4344
<h1>Quick Picture Viewer</h1>
44-
<h3>Lightweight, versatile desktop image viewer for Windows</h3>
45-
<a href="https://moduleart.github.io/quick-picture-viewer">More details ↗</a>
45+
<h3>Lightweight, versatile desktop image viewer</h3>
46+
<a id="quick-picture-viewer" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
47+
<a href="https://moduleart.github.io/quick-picture-viewer"><span>More details</span><img src="imgs/icons/arrow.png" /></a>
4648
</div>
4749
</div>
4850
<div class="app-row">
4951
<div class="column">
5052
<img class="icon" src="imgs/picker512.png" />
5153
<h1>Quick Color Picker</h1>
52-
<h3>Lightweight desktop color picker and color editor utility for Windows</h3>
53-
<a href="https://github.com/ModuleArt/quick-color-picker">GitHub ↗</a>
54+
<h3>Lightweight desktop color picker and color editor utility</h3>
55+
<a id="quick-color-picker" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
56+
<a href="https://github.com/ModuleArt/quick-color-picker"><img src="imgs/icons/github.png" /><span>GitHub</span></a>
5457
</div>
5558
<div class="column">
5659
<img class="icon" src="imgs/rec512.png" />
5760
<h1>Quick Screen Recorder</h1>
58-
<h3>Lightweight desktop screen recorder for Windows</h3>
59-
<a href="https://github.com/ModuleArt/quick-screen-recorder">GitHub ↗</a>
61+
<h3>Lightweight desktop screen recorder</h3>
62+
<a id="quick-screen-recorder" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
63+
<a href="https://github.com/ModuleArt/quick-screen-recorder"><img src="imgs/icons/github.png" /><span>GitHub</span></a>
6064
</div>
6165
</div>
6266
</div>

‎js/index.js‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,16 @@
11
$(document).ready(function () {
2-
let converter = new showdown.Converter();
2+
let apps = ["quick-picture-viewer", "quick-color-picker", "quick-screen-recorder"];
3+
let setups = ["QuickPictureViewer-Setup.exe", "QuickColorPicker-Setup.msi", "QuickScreenRecorder-Setup.msi"];
34

4-
$.getJSON("https://api.github.com/repos/ModuleArt/quick-picture-viewer/releases/latest").done(function(json) {
5+
for (let i = 0; i < apps.length; i++) {
6+
$.getJSON("https://api.github.com/repos/ModuleArt/" + apps[i] + "/releases/latest").done(function(json) {
57

6-
// download link
7-
let downloadLink = document.getElementById("download-link");
8-
downloadLink.href = "https://github.com/ModuleArt/quick-picture-viewer/releases/download/" + json.tag_name + "/QuickPictureViewer-Setup.exe";
9-
downloadLink.getElementsByClassName("version")[0].innerHTML = json.tag_name;
10-
downloadLink.getElementsByClassName("size")[0].innerHTML = "Win 7-10, " + formatBytes(json.assets[0].size);
8+
// download link
9+
let downloadLink = document.getElementById(apps[i]);
10+
downloadLink.href = "https://github.com/ModuleArt/" + apps[i] + "/releases/download/" + json.tag_name + "/" + setups[i];
1111

12-
// what's new
13-
let whatsNewLink = document.getElementById("whats-new").getElementsByClassName("release-title")[0];
14-
whatsNewLink.innerHTML = json.name;
15-
whatsNewLink.href = "https://github.com/ModuleArt/quick-picture-viewer/releases/tag/" + json.tag_name;
16-
document.getElementById("whats-new").getElementsByClassName("release-date")[0].innerHTML = " - " + new Date(json.published_at).toLocaleDateString('en-US', {
17-
day: '2-digit',
18-
month: '2-digit',
19-
year: 'numeric',
12+
// copyright year
13+
document.getElementById("copyright").innerHTML = "Copyright © " + new Date().getFullYear() + " Module Art";
2014
});
21-
document.getElementById("whats-new").getElementsByClassName("release-markdown")[0].innerHTML = converter.makeHtml(json.body);
22-
23-
// copyright year
24-
document.getElementById("copyright").innerHTML = "Copyright © " + new Date().getFullYear() + " Module Art";
25-
});
26-
});
27-
28-
function formatBytes(bytes, decimals = 1) {
29-
if (bytes === 0) return '0 Bytes';
30-
31-
const k = 1024;
32-
const dm = decimals < 0 ? 0 : decimals;
33-
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
34-
35-
const i = Math.floor(Math.log(bytes) / Math.log(k));
36-
37-
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
38-
}
15+
}
16+
});

‎js/particles.min.js‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/showdown.min.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎js/snowflakes.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
let script = document.createElement("script");
3+
script.src = "js/particles.min.js";
4+
script.onload = function () {
5+
let month = new Date().getMonth();
6+
if (month == 0 || month == 10 || month == 11) {
7+
particlesJS("special-effects", {
8+
particles: {
9+
number: {
10+
value: 50,
11+
density: {
12+
enable: true,
13+
value_area: 800,
14+
},
15+
},
16+
color: {
17+
value: "#ffffff",
18+
},
19+
opacity: {
20+
value: 0.5,
21+
random: false,
22+
anim: {
23+
enable: false,
24+
},
25+
},
26+
size: {
27+
value: 4,
28+
random: true,
29+
anim: {
30+
enable: false,
31+
},
32+
},
33+
line_linked: {
34+
enable: false,
35+
},
36+
move: {
37+
enable: true,
38+
speed: 1, //speed of snowflakes
39+
direction: "bottom",
40+
random: true,
41+
straight: false,
42+
out_mode: "out",
43+
bounce: false,
44+
attract: {
45+
enable: true,
46+
rotateX: 300,
47+
rotateY: 1200,
48+
},
49+
},
50+
},
51+
interactivity: {
52+
events: {
53+
onhover: {
54+
enable: false,
55+
},
56+
onclick: {
57+
enable: false,
58+
},
59+
resize: true,
60+
},
61+
},
62+
retina_detect: true,
63+
});
64+
}
65+
};
66+
document.body.append(script);
67+
});

0 commit comments

Comments
 (0)