Skip to content

Commit 56e97c8

Browse files
BeelinkBeelink
committed
🍭 New background styling ...
Changes: - New background styling - Text-based header - Minor design improvements
1 parent 856cad3 commit 56e97c8

File tree

4 files changed

+45
-44
lines changed

4 files changed

+45
-44
lines changed

‎css/index.css‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,10 @@ header .links {
7676

7777
header .links .link {
7878
display: inline-block;
79-
margin-left: 32px;
79+
margin-left: 16px;
8080
transition: transform 0.2s, opacity 0.2s;
8181
border-radius: 4px;
82-
}
83-
84-
header .links .link img {
85-
width: 24px;
86-
vertical-align: middle;
82+
padding: 8px 16px;
8783
}
8884

8985
header a:focus .link {
@@ -113,6 +109,12 @@ header .links .link:hover {
113109
margin: 64px 0;
114110
}
115111

112+
.container h2:before {
113+
content: "";
114+
height: 2px;
115+
width: 100%;
116+
}
117+
116118
.top-section {
117119
padding: 120px 8px;
118120
}
@@ -122,7 +124,7 @@ header .links .link:hover {
122124
}
123125

124126
.tile-section .tile {
125-
background: rgba(255, 255, 255, 0.05);
127+
background: rgba(0, 0, 0, 0.1);
126128
border-radius: 32px;
127129
padding: 32px;
128130
width: calc(50% - 96px);
@@ -131,7 +133,7 @@ header .links .link:hover {
131133
}
132134

133135
.tile-section .mini-tile {
134-
background: rgba(255, 255, 255, 0.05);
136+
background: rgba(0, 0, 0, 0.1);
135137
border-radius: 32px;
136138
padding: 32px;
137139
width: calc(50% - 96px);
@@ -153,10 +155,11 @@ header .links .link:hover {
153155
.tile-section .screenshot {
154156
border-radius: 16px;
155157
width: calc(100% + 64px);
156-
margin: 28px -32px;
158+
margin: 32px -32px;
157159
object-fit: cover;
158160
object-position: top;
159161
transition: border-radius 0.2s, transform 0.2s;
162+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
160163
}
161164

162165
.tile-section .screenshot:hover {
@@ -275,7 +278,7 @@ header .links .link:hover {
275278
}
276279

277280
.tile-section .version, .mfp-title .version {
278-
opacity: 0.25;
281+
opacity: 0.5;
279282
}
280283

281284
.tile-section .title, .mfp-title .title {
@@ -287,17 +290,13 @@ header .links .link:hover {
287290

288291
/* pre footer */
289292

290-
.pre-footer {
291-
margin-top: 128px;
292-
}
293-
294293
.pre-footer .link {
295294
display: inline-block;
296295
transition: transform 0.2s, opacity 0.2s;
297296
margin-top: 28px;
298297
padding-right: 8px;
299298
border-radius: 8px;
300-
background-color: rgba(255, 255, 255, 0.05);
299+
background-color: rgba(0, 0, 0, 0.1);
301300
font-weight: bold;
302301
}
303302

@@ -376,6 +375,11 @@ footer span {
376375
margin: 0 -16px;
377376
}
378377

378+
.tile-section .screenshot {
379+
margin-top: 16px;
380+
margin-bottom: 16px;
381+
}
382+
379383
.tile-section .mini-tile {
380384
width: calc(100% - 64px);
381385
padding: 16px;
@@ -463,7 +467,7 @@ img.mfp-img {
463467
.mfp-figure:after {
464468
box-shadow: none;
465469
border-radius: 0 0 32px 32px;
466-
background: rgba(255, 255, 255, 0.1);
470+
background: rgba(0, 0, 0, 0.1);
467471
}
468472

469473
.mfp-arrow-right:before {
@@ -523,13 +527,13 @@ img.mfp-img {
523527
}
524528

525529
::-webkit-scrollbar-track {
526-
background: #100b27;
530+
background: #AE3D3B;
527531
}
528532

529533
::-webkit-scrollbar-thumb {
530-
background: #594B8F;
534+
background: #832E2C;
531535
}
532536

533537
::-webkit-scrollbar-thumb:hover {
534-
background: #8177AA;
538+
background: #6E2625;
535539
}

‎css/particles.css‎

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

‎index.html‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script src="js/showdown.min.js"></script>
1313
<script src="js/masonry.pkgd.min.js"></script>
1414
<script src="js/index.js"></script>
15-
<meta name="theme-color" content="#0d0c0c">
15+
<meta name="theme-color" content="#83519E">
1616
<link rel="shortcut icon" type="image/png" href="imgs/moduleart256.png">
1717
</head>
1818
<body>
@@ -33,30 +33,14 @@
3333
</div>
3434
</a>
3535
<div class="links">
36-
<a href="https://github.com/ModuleArt" title="GitHub">
37-
<div class="link">
38-
<img src="imgs/icons/github.png"/>
39-
</div>
40-
</a>
4136
<a href="https://www.patreon.com/moduleart" title="Patreon">
42-
<div class="link">
43-
<img src="imgs/icons/patreon.png"/>
44-
</div>
37+
<div class="link">Patreon</div>
4538
</a>
4639
<a href="https://www.buymeacoffee.com/ModuleArt" title="Buy me a coffee">
47-
<div class="link">
48-
<img src="imgs/icons/coffee.png"/>
49-
</div>
50-
</a>
51-
<a href="https://play.google.com/store/apps/dev?id=5537509128825838150" title="Google Play">
52-
<div class="link">
53-
<img src="imgs/icons/google-play.png"/>
54-
</div>
40+
<div class="link">Buy me a coffee</div>
5541
</a>
56-
<a href="mailto:module.art.team@gmail.com" title="Mail to Module Art">
57-
<div class="link">
58-
<img src="imgs/icons/mail.png"/>
59-
</div>
42+
<a href="https://github.com/ModuleArt" title="GitHub">
43+
<div class="link">GitHub</div>
6044
</a>
6145
</div>
6246
</div>
@@ -65,7 +49,7 @@
6549
<div class="container">
6650
<div class="top-section">
6751
<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>
52+
<span>We develop apps and indie games with ❤<br>In Module Art, we are trying to create something extraordinary from a simple idea.</span>
6953
</div>
7054
<h2>Best apps</h2>
7155
<div class="tile-section">
@@ -154,7 +138,7 @@ <h2>Best apps</h2>
154138
<h2>Coming soon</h2>
155139
<div class="tile-section">
156140
<div class="mini-tile">
157-
<img class="icon" src="https://raw.githubusercontent.com/ModuleArt/tinote/master/WindowsApp/quick-sticky-notes/resources/imgs/tinote256.png"/>
141+
<img onload="updateMasonry(this.parentNode.parentNode)" class="icon" src="https://raw.githubusercontent.com/ModuleArt/tinote/master/WindowsApp/quick-sticky-notes/resources/imgs/tinote256.png"/>
158142
<span class="title">Tinote</span>
159143
<div class="links">
160144
<a href="https://github.com/ModuleArt/tinote" title="GitHub repository">
@@ -218,6 +202,7 @@ <h2>Paused projects</h2>
218202
</div>
219203
</div>
220204
</div>
205+
<h2>Support</h2>
221206
<div class="pre-footer">
222207
<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>
223208
<a href="https://www.patreon.com/moduleart">

‎pages/quick-picture-viewer.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quick Picture Viewer by Module Art</title>
7+
<link rel="stylesheet" href="css/pages.css">
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)