Skip to content

Commit b920605

Browse files
BeelinkBeelink
committed
New app gallery & scrollbar styling
1 parent 39567dc commit b920605

File tree

3 files changed

+143
-57
lines changed

3 files changed

+143
-57
lines changed

‎css/index.css‎

Lines changed: 101 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ header .links .link:hover {
109109
font: 16px "Open Sans";
110110
}
111111

112-
.container a {
112+
.container a, .mfp-title a {
113113
text-decoration: none;
114114
color: #fff;
115115
}
@@ -173,21 +173,24 @@ header .links .link:hover {
173173
}
174174

175175
.tile-section .screenshot {
176-
border-radius: 32px 32px 0 0;
176+
border-radius: 16px 16px 0 0;
177177
width: calc(100% + 64px);
178178
margin: 28px -32px;
179-
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
179+
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
180180
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
181181
height: 300px;
182182
object-fit: cover;
183183
object-position: top;
184+
transition: border-radius 0.2s, transform 0.2s;
184185
}
185186

186187
.tile-section .screenshot:hover {
187188
cursor: zoom-in;
189+
border-radius: 0;
190+
transform: translateY(-8px);
188191
}
189192

190-
.tile-section .icon {
193+
.tile-section .icon, .mfp-title .icon {
191194
vertical-align: middle;
192195
width: 48px;
193196
}
@@ -197,46 +200,46 @@ header .links .link:hover {
197200
text-align: center;
198201
}
199202

200-
.tile-section .links {
203+
.tile-section .links, .mfp-title .links {
201204
float: right;
202205
margin: 8px 0;
203206
}
204207

205-
.tile-section .link {
208+
.tile-section .link, .mfp-title .link {
206209
margin: 4px 0 4px 16px;
207210
transition: transform 0.2s, opacity 0.2s;
208211
display: inline-block;
209212
border-radius: 4px;
210213
}
211214

212-
.tile-section .link:hover {
215+
.tile-section .link:hover, .mfp-title .link:hover {
213216
transform: translateY(-4px);
214217
opacity: 0.5;
215218
cursor: pointer;
216219
}
217220

218-
.tile-section a:focus .link {
221+
.tile-section a:focus .link, .mfp-title a:focus {
219222
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
220223
}
221224

222-
.tile-section .link img, .tile-section .link span {
225+
.tile-section .link img, .tile-section .link span, .mfp-title .link img, .mfp-title .link span {
223226
vertical-align: middle;
224227
font-size: 14px;
225228
}
226229

227-
.tile-section .link img {
230+
.tile-section .link img, .mfp-title .link img {
228231
width: 24px;
229232
}
230233

231-
.tile-section .link span {
234+
.tile-section .link span, .mfp-title .link span {
232235
margin: 0 4px;
233236
}
234237

235-
.tile-section .version {
238+
.tile-section .version, .mfp-title .version {
236239
opacity: 0.25;
237240
}
238241

239-
.tile-section .title {
242+
.tile-section .title, .mfp-title .title {
240243
margin-left: 10px;
241244
vertical-align: middle;
242245
font-weight: bold;
@@ -254,13 +257,15 @@ header .links .link:hover {
254257
transition: transform 0.2s, opacity 0.2s;
255258
margin-top: 28px;
256259
padding-right: 8px;
257-
border-radius: 4px;
260+
border-radius: 8px;
258261
background-color: rgba(255, 255, 255, 0.09);
262+
font-weight: bold;
259263
}
260264

261265
.pre-footer .link img {
262266
width: 32px;
263-
border-radius: 4px 0 0 4px;
267+
border-radius: 8px 0 0 8px;
268+
padding: 8px;
264269
}
265270

266271
.pre-footer a {
@@ -285,7 +290,7 @@ header .links .link:hover {
285290
}
286291

287292
.pre-footer .link span {
288-
margin: 0 12px;
293+
margin: 0 16px;
289294
}
290295

291296
/* footer */
@@ -308,7 +313,7 @@ footer span {
308313

309314
/* media */
310315

311-
@media screen and (max-width: 1200px) {
316+
@media screen and (max-width: 1300px) {
312317
.tile-section .tile {
313318
width: 100%;
314319
}
@@ -319,6 +324,19 @@ footer span {
319324
}
320325

321326
@media screen and (max-width: 650px) {
327+
header .logo {
328+
float: none;
329+
}
330+
331+
header .links {
332+
float: none;
333+
margin-top: 32px;
334+
}
335+
336+
header .links .link {
337+
margin: 0 16px;
338+
}
339+
322340
.tile-section .mini-tile, .tile-section.col-2 .mini-tile, .tile-section.col-3 .mini-tile {
323341
width: 100%;
324342
margin-bottom: 16px;
@@ -333,14 +351,18 @@ footer span {
333351
border-radius: 16px;
334352
}
335353

336-
.tile-section .tile .links {
354+
.tile-section .tile .links, .mfp-title .links {
337355
float: none;
338356
margin-top: 16px;
339357
}
340358

359+
.mfp-title {
360+
text-align: center;
361+
}
362+
341363
.tile-section .tile .screenshot {
342364
height: 200px;
343-
border-radius: 8px 8px 0 0;
365+
width: calc(100% + 32px);
344366
}
345367

346368
main {
@@ -351,22 +373,14 @@ footer span {
351373
margin-top: 64px;
352374
padding: 0 8px;
353375
}
354-
}
355-
356-
@media screen and (max-width: 450px) {
357-
header .logo {
358-
float: none;
359-
}
360376

361-
header .links {
362-
float: none;
363-
margin-top: 32px;
364-
}
365-
366-
header .links .link {
367-
margin: 0 16px;
377+
.pre-footer a {
378+
display: block;
379+
margin: 0;
368380
}
381+
}
369382

383+
@media screen and (max-width: 450px) {
370384
.top-section {
371385
padding: 60px 8px;
372386
}
@@ -391,16 +405,47 @@ footer span {
391405

392406
/* magnific popup */
393407

408+
img.mfp-img {
409+
padding-bottom: 120px;
410+
pointer-events: none;
411+
}
412+
413+
.mfp-gallery .mfp-image-holder .mfp-figure {
414+
cursor: default;
415+
}
416+
417+
.mfp-bottom-bar {
418+
top: calc(100% - 69px);
419+
}
420+
421+
.mfp-figure:after {
422+
box-shadow: none;
423+
border-radius: 0 0 32px 32px;
424+
background: rgba(255, 255, 255, 0.1);
425+
}
426+
427+
.mfp-arrow-right:before {
428+
border-left: none;
429+
}
430+
431+
.mfp-arrow-left:before {
432+
border-right: none;
433+
}
434+
435+
.mfp-title {
436+
font: 16px "Open Sans";
437+
padding: 0 28px 0 20px;
438+
}
439+
394440
.mfp-fade.mfp-bg {
395441
opacity: 0;
396-
397442
-webkit-transition: all 0.15s ease-out;
398443
-moz-transition: all 0.15s ease-out;
399444
transition: all 0.15s ease-out;
400445
}
401446

402447
.mfp-fade.mfp-bg.mfp-ready {
403-
opacity: 0.8;
448+
opacity: 0.9;
404449
}
405450

406451
.mfp-fade.mfp-bg.mfp-removing {
@@ -410,7 +455,6 @@ footer span {
410455
.mfp-fade.mfp-wrap .mfp-content {
411456
opacity: 0;
412457
transform: scale(0.5);
413-
414458
-webkit-transition: all 0.15s ease-out;
415459
-moz-transition: all 0.15s ease-out;
416460
transition: all 0.15s ease-out;
@@ -424,4 +468,26 @@ footer span {
424468
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
425469
opacity: 0;
426470
transform: scale(0.5);
471+
}
472+
473+
.mfp-s-ready .mfp-preloader {
474+
font: 16px "Open Sans";
475+
}
476+
477+
/* scrollbar */
478+
479+
::-webkit-scrollbar {
480+
width: 8px;
481+
}
482+
483+
::-webkit-scrollbar-track {
484+
background: #333;
485+
}
486+
487+
::-webkit-scrollbar-thumb {
488+
background: #555;
489+
}
490+
491+
::-webkit-scrollbar-thumb:hover {
492+
background: #777;
427493
}

‎index.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Module Art - Apps & indie games</title>
7+
<link rel="stylesheet" href="css/magnific-popup.css">
78
<link rel="stylesheet" href="css/index.css">
89
<link rel="stylesheet" href="css/particles.css">
9-
<link rel="stylesheet" href="css/magnific-popup.css">
1010
<script src="js/jquery-3.5.1.min.js"></script>
11-
<script src="js/index.js"></script>
1211
<script src="js/jquery.magnific-popup.min.js"></script>
12+
<script src="js/index.js"></script>
1313
<meta name="theme-color" content="#0d0c0c">
1414
<link rel="shortcut icon" type="image/png" href="imgs/moduleart256.png">
1515
</head>
@@ -67,11 +67,11 @@ <h1>Hello!</h1>
6767
</div>
6868
<h2>Best apps</h2>
6969
<div class="tile-section">
70-
<div class="tile">
70+
<div class="tile" id="quick-picture-viewer">
7171
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/quick-picture-viewer/resources/imgs/picture256.png"/>
7272
<span class="title">Quick Picture Viewer</span>
7373
<div class="links">
74-
<a id="quick-picture-viewer-link" title="Download .exe installer" href="https://github.com/ModuleArt/quick-picture-viewer/releases">
74+
<a class="download-windows" title="Download .exe installer" href="https://github.com/ModuleArt/quick-picture-viewer/releases">
7575
<div class="link">
7676
<img src="imgs/icons/download.png"/>
7777
<span>Windows</span>
@@ -90,13 +90,13 @@ <h2>Best apps</h2>
9090
</a>
9191
</div>
9292
<img class="screenshot" src="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/docs/screenshots/main.png" href="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/docs/screenshots/main.png"/>
93-
<div class="desc">Lightweight, versatile desktop photo viewer for Windows.</div>
93+
<div class="desc"></div>
9494
</div>
95-
<div class="tile">
95+
<div class="tile" id="quick-screen-recorder">
9696
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-screen-recorder/master/quick-screen-recorder/resources/imgs/rec256.png"/>
9797
<span class="title">Quick Screen Recorder</span>
9898
<div class="links">
99-
<a id="quick-screen-recorder-link" title="Download .exe installer" href="https://github.com/ModuleArt/quick-screen-recorder/releases">
99+
<a class="download-windows" title="Download .exe installer" href="https://github.com/ModuleArt/quick-screen-recorder/releases">
100100
<div class="link">
101101
<img src="imgs/icons/download.png"/>
102102
<span>Windows</span>
@@ -116,13 +116,13 @@ <h2>Best apps</h2>
116116

117117
</div>
118118
<img class="screenshot" src="https://github.com/ModuleArt/quick-screen-recorder/raw/master/docs/screenshots/main.png" href="https://github.com/ModuleArt/quick-screen-recorder/raw/master/docs/screenshots/main.png"/>
119-
<div class="desc">Lightweight desktop screen recorder for Windows.</div>
119+
<div class="desc"></div>
120120
</div>
121-
<div class="tile">
121+
<div class="tile" id="quick-color-picker">
122122
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-color-picker/master/quick-color-picker/resources/imgs/picker96.png"/>
123123
<span class="title">Quick Color Picker</span>
124124
<div class="links">
125-
<a id="quick-color-picker-link" title="Download .exe installer" href="https://github.com/ModuleArt/quick-color-picker/releases">
125+
<a class="download-windows" title="Download .exe installer" href="https://github.com/ModuleArt/quick-color-picker/releases">
126126
<div class="link">
127127
<img src="imgs/icons/download.png"/>
128128
<span>Windows</span>
@@ -141,7 +141,7 @@ <h2>Best apps</h2>
141141
</a>
142142
</div>
143143
<img class="screenshot" src="https://github.com/ModuleArt/quick-color-picker/raw/master/docs/screenshots/main.png" href="https://github.com/ModuleArt/quick-color-picker/raw/master/docs/screenshots/main.png"/>
144-
<div class="desc">Lightweight desktop color picker and color editor utility to get and save colors code quickly for Windows.</div>
144+
<div class="desc"></div>
145145
</div>
146146
</div>
147147
<h2>Coming soon</h2>
@@ -215,13 +215,13 @@ <h2>Paused projects</h2>
215215
<div>If you want to support us you can contribute to one of our projects.<br>If you really love what we do you can donate:</div>
216216
<a href="https://www.patreon.com/moduleart">
217217
<div class="link">
218-
<img src="imgs/donate/patreon.jpg"/>
218+
<img src="imgs/donate/patreon.jpg" style="background: #F96855"/>
219219
<span>Patreon</span>
220220
</div>
221221
</a>
222222
<a href="https://www.buymeacoffee.com/ModuleArt">
223223
<div class="link">
224-
<img src="imgs/donate/coffee.jpg"/>
224+
<img src="imgs/donate/coffee.jpg" style="background: #fff"/>
225225
<span>Buy me a coffee</span>
226226
</div>
227227
</a>
@@ -230,7 +230,7 @@ <h2>Paused projects</h2>
230230
</main>
231231
<footer>
232232
<div class="container">
233-
<span>© 2020 Module Art</span>
233+
<span>Copyright © 2020 Module Art</span>
234234
<span>module.art.team@gmail.com</span>
235235
</div>
236236
</footer>

0 commit comments

Comments
 (0)