Skip to content

Commit 856cad3

Browse files
BeelinkBeelink
committed
New grid system ...
Changes: - New background gradient - New grid system for apps - New font - A lot of design improvements
1 parent ead8637 commit 856cad3

File tree

9 files changed

+81
-81
lines changed

9 files changed

+81
-81
lines changed

‎css/index.css‎

Lines changed: 42 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
@font-face {
2-
font-family: "Open Sans";
3-
src: url("../fonts/OpenSans-Bold.ttf");
2+
font-family: "San Francisco Text";
3+
src: url("../fonts/SFUIText-Bold.ttf");
44
font-weight: bold;
55
}
66

77
@font-face {
8-
font-family: "Open Sans";
9-
src: url("../fonts/OpenSans-Regular.ttf");
8+
font-family: "San Francisco Text";
9+
src: url("../fonts/SFUIText-Regular.ttf");
1010
}
1111

1212
body {
13-
background:hsla(0, 0%, 0%, 1);
14-
background-repeat: no-repeat;
15-
background-attachment: fixed;
16-
background-image: linear-gradient(to right top, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%, 1));
17-
background-image:-moz-linear-gradient(to right top, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%, 1));
1813
margin: 0;
1914
padding: 0;
2015
z-index: 0;
@@ -106,7 +101,7 @@ header .links .link:hover {
106101
max-width: 1200px;
107102
margin: auto;
108103
color: #fff;
109-
font: 16px "Open Sans";
104+
font: 16px "San Francisco Text";
110105
}
111106

112107
.container a, .mfp-title a {
@@ -123,41 +118,24 @@ header .links .link:hover {
123118
}
124119

125120
.tile-section {
126-
position: relative;
127-
display: flex;
128-
flex-wrap: wrap;
129-
flex-direction: row;
130-
justify-content: space-between;
131-
align-items: stretch;
121+
margin: 0 -32px;
132122
}
133123

134124
.tile-section .tile {
135-
background: rgba(255, 255, 255, 0.03);
125+
background: rgba(255, 255, 255, 0.05);
136126
border-radius: 32px;
137127
padding: 32px;
138-
width: calc(50% - 80px);
139-
margin-bottom: 32px;
128+
width: calc(50% - 96px);
129+
margin: 16px;
140130
text-align: left;
141131
}
142132

143133
.tile-section .mini-tile {
144-
background: rgba(255, 255, 255, 0.03);
134+
background: rgba(255, 255, 255, 0.05);
145135
border-radius: 32px;
146136
padding: 32px;
147-
width: calc(25% - 80px);
148-
margin-bottom: 32px;
149-
}
150-
151-
.tile-section.col-1 .mini-tile {
152-
width: calc(100% - 80px);
153-
}
154-
155-
.tile-section.col-2 .mini-tile {
156-
width: calc(50% - 80px);
157-
}
158-
159-
.tile-section.col-3 .mini-tile {
160-
width: calc(33.3% - 80px);
137+
width: calc(50% - 96px);
138+
margin: 16px;
161139
}
162140

163141
.tile-section .mini-tile .link {
@@ -173,12 +151,9 @@ header .links .link:hover {
173151
}
174152

175153
.tile-section .screenshot {
176-
border-radius: 16px 16px 0 0;
154+
border-radius: 16px;
177155
width: calc(100% + 64px);
178156
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)));
180-
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
181-
height: 300px;
182157
object-fit: cover;
183158
object-position: top;
184159
transition: border-radius 0.2s, transform 0.2s;
@@ -204,7 +179,7 @@ header .links .link:hover {
204179
background: none;
205180
border: none;
206181
color: #fff;
207-
font: 14px "Open Sans";
182+
font: 14px "San Francisco Text";
208183
width: 100%;
209184
margin-top: 16px;
210185
outline: none;
@@ -322,7 +297,7 @@ header .links .link:hover {
322297
margin-top: 28px;
323298
padding-right: 8px;
324299
border-radius: 8px;
325-
background-color: rgba(255, 255, 255, 0.09);
300+
background-color: rgba(255, 255, 255, 0.05);
326301
font-weight: bold;
327302
}
328303

@@ -378,12 +353,8 @@ footer span {
378353
/* media */
379354

380355
@media screen and (max-width: 1300px) {
381-
.tile-section .tile {
382-
width: 100%;
383-
}
384-
385-
.tile-section .mini-tile, .tile-section.col-2 .mini-tile, .tile-section.col-3 .mini-tile {
386-
width: calc(50% - 80px);
356+
.tile-section .tile, .tile-section .mini-tile {
357+
width: calc(100% - 96px);
387358
}
388359
}
389360

@@ -401,20 +372,27 @@ footer span {
401372
margin: 0 16px;
402373
}
403374

404-
.tile-section .mini-tile, .tile-section.col-2 .mini-tile, .tile-section.col-3 .mini-tile {
405-
width: 100%;
406-
margin-bottom: 16px;
375+
.tile-section {
376+
margin: 0 -16px;
377+
}
378+
379+
.tile-section .mini-tile {
380+
width: calc(100% - 64px);
407381
padding: 16px;
408382
border-radius: 16px;
409383
}
410384

411385
.tile-section .tile {
386+
width: calc(100% - 64px);
412387
text-align: center;
413-
margin-bottom: 16px;
414388
padding: 16px;
415389
border-radius: 16px;
416390
}
417391

392+
.tile-section .tile .release-info {
393+
text-align: left;
394+
}
395+
418396
.tile-section .tile .links, .mfp-title .links {
419397
float: none;
420398
margin-top: 16px;
@@ -442,6 +420,15 @@ footer span {
442420
display: block;
443421
margin: 0;
444422
}
423+
424+
footer .container {
425+
display: block;
426+
}
427+
428+
footer span {
429+
margin-top: 8px;
430+
display: block;
431+
}
445432
}
446433

447434
@media screen and (max-width: 450px) {
@@ -456,15 +443,6 @@ footer span {
456443
.container h2 {
457444
margin: 64px 0 32px 0;
458445
}
459-
460-
footer .container {
461-
display: block;
462-
}
463-
464-
footer span {
465-
margin-top: 8px;
466-
display: block;
467-
}
468446
}
469447

470448
/* magnific popup */
@@ -497,7 +475,7 @@ img.mfp-img {
497475
}
498476

499477
.mfp-title {
500-
font: 16px "Open Sans";
478+
font: 16px "San Francisco Text";
501479
padding: 0 28px 0 20px;
502480
}
503481

@@ -535,7 +513,7 @@ img.mfp-img {
535513
}
536514

537515
.mfp-s-ready .mfp-preloader {
538-
font: 16px "Open Sans";
516+
font: 16px "San Francisco Text";
539517
}
540518

541519
/* scrollbar */
@@ -545,13 +523,13 @@ img.mfp-img {
545523
}
546524

547525
::-webkit-scrollbar-track {
548-
background: #333;
526+
background: #100b27;
549527
}
550528

551529
::-webkit-scrollbar-thumb {
552-
background: #555;
530+
background: #594B8F;
553531
}
554532

555533
::-webkit-scrollbar-thumb:hover {
556-
background: #777;
534+
background: #8177AA;
557535
}

‎css/particles.css‎

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

‎fonts/HelveticaNeueCyr-Bold.ttf‎

23.4 KB
Binary file not shown.

‎fonts/HelveticaNeueCyr-Medium.ttf‎

23.8 KB
Binary file not shown.

‎fonts/SFUIText-Bold.ttf‎

208 KB
Binary file not shown.

‎fonts/SFUIText-Regular.ttf‎

199 KB
Binary file not shown.

‎index.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<script src="js/jquery-3.5.1.min.js"></script>
1111
<script src="js/jquery.magnific-popup.min.js"></script>
1212
<script src="js/showdown.min.js"></script>
13+
<script src="js/masonry.pkgd.min.js"></script>
1314
<script src="js/index.js"></script>
1415
<meta name="theme-color" content="#0d0c0c">
1516
<link rel="shortcut icon" type="image/png" href="imgs/moduleart256.png">
@@ -63,8 +64,8 @@
6364
<main>
6465
<div class="container">
6566
<div class="top-section">
66-
<h1>Hello!</h1>
67-
<span>We develop applications and indie games. And not only...<br>In Module Art, we are trying to create something extraordinary from a simple idea.</span>
67+
<h1>✌ Hello!</h1>
68+
<span>We develop applications and indie games with ❤<br>In Module Art, we are trying to create something extraordinary from a simple idea.</span>
6869
</div>
6970
<h2>Best apps</h2>
7071
<div class="tile-section">
@@ -90,7 +91,7 @@ <h2>Best apps</h2>
9091
</div>
9192
</a>
9293
</div>
93-
<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"/>
94+
<img onload="updateMasonry(this.parentNode.parentNode)" 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"/>
9495
<div class="desc"></div>
9596
<button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
9697
<div class="release-info"></div>
@@ -117,7 +118,7 @@ <h2>Best apps</h2>
117118
</div>
118119
</a>
119120
</div>
120-
<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"/>
121+
<img onload="updateMasonry(this.parentNode.parentNode)" 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"/>
121122
<div class="desc"></div>
122123
<button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
123124
<div class="release-info"></div>
@@ -144,14 +145,14 @@ <h2>Best apps</h2>
144145
</div>
145146
</a>
146147
</div>
147-
<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"/>
148+
<img onload="updateMasonry(this.parentNode.parentNode)" 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"/>
148149
<div class="desc"></div>
149150
<button class="release-btn" onclick="toggleReleaseInfo(this)"></button>
150151
<div class="release-info"></div>
151152
</div>
152153
</div>
153154
<h2>Coming soon</h2>
154-
<div class="tile-section col-2">
155+
<div class="tile-section">
155156
<div class="mini-tile">
156157
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/tinote/master/WindowsApp/quick-sticky-notes/resources/imgs/tinote256.png"/>
157158
<span class="title">Tinote</span>
@@ -179,9 +180,9 @@ <h2>Coming soon</h2>
179180
</div>
180181
</div>
181182
<h2>Paused projects</h2>
182-
<div class="tile-section col-3">
183+
<div class="tile-section">
183184
<div class="mini-tile">
184-
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/ferny/master/imgs/icon256.png"/>
185+
<img onload="updateMasonry(this.parentNode.parentNode)" class="icon" src="https://raw.githubusercontent.com/ModuleArt/ferny/master/imgs/icon256.png"/>
185186
<span class="title">Ferny Web Browser</span>
186187
<div class="links">
187188
<a href="https://github.com/ModuleArt/ferny" title="GitHub repository">
@@ -193,7 +194,7 @@ <h2>Paused projects</h2>
193194
</div>
194195
</div>
195196
<div class="mini-tile">
196-
<img class="icon" src="https://github.com/ModuleArt/quick-music-player/blob/master/quick-music-player/resources/imgs/music96.png?raw=true"/>
197+
<img onload="updateMasonry(this.parentNode.parentNode)" class="icon" src="https://github.com/ModuleArt/quick-music-player/blob/master/quick-music-player/resources/imgs/music96.png?raw=true"/>
197198
<span class="title">Quick Music Player</span>
198199
<div class="links">
199200
<a href="https://github.com/ModuleArt/quick-music-player" title="GitHub repository">
@@ -205,7 +206,7 @@ <h2>Paused projects</h2>
205206
</div>
206207
</div>
207208
<div class="mini-tile">
208-
<img class="icon" src="https://lh3.googleusercontent.com/TS0oJTzJRC1QIvvMXJx0Pwttexbd86LDDS1P8PyGWMIYUxRMBsu5RsxfMLuiZNeB3Rw=s180-rw"/>
209+
<img onload="updateMasonry(this.parentNode.parentNode)" class="icon" src="https://lh3.googleusercontent.com/TS0oJTzJRC1QIvvMXJx0Pwttexbd86LDDS1P8PyGWMIYUxRMBsu5RsxfMLuiZNeB3Rw=s180-rw"/>
209210
<span class="title">The Environs: Survival</span>
210211
<div class="links">
211212
<a href="https://play.google.com/store/apps/details?id=com.moduleart.tesurvival" title="Google Play">

‎js/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
$(document).ready(function () {
2+
updateMasonry();
3+
4+
$(window).resize(function() {
5+
updateMasonry();
6+
});
7+
28
$(".screenshot").magnificPopup({
39
type: "image",
410
removalDelay: 300,
@@ -58,4 +64,15 @@ function toggleReleaseInfo(btn) {
5864
btn.classList.toggle("show");
5965
let relInfo = btn.parentNode.getElementsByClassName("release-info")[0];
6066
relInfo.classList.toggle("show");
67+
updateMasonry(btn.parentNode.parentNode);
68+
}
69+
70+
function updateMasonry(section) {
71+
if (section != null) {
72+
$(section).masonry();
73+
} else {
74+
$(".tile-section").each(function(index, element) {
75+
$(element).masonry();
76+
});
77+
}
6178
}

‎js/masonry.pkgd.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.

0 commit comments

Comments
 (0)