Skip to content

Commit 17f0efd

Browse files
maxhatei2maxhatei2
committed
ver 1.1
1 parent 305b2d7 commit 17f0efd

File tree

3 files changed

+94
-18
lines changed

3 files changed

+94
-18
lines changed

‎index.html‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,18 @@
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10+
<div class="header">
11+
<div class="text">
1012
<h1>kPad</h1>
1113
<p><i>a feature-packed text editor while still <15 MB</i></p>
12-
<img id="version-badge" src="https://img.shields.io/badge/version-loading-lightgrey?style=for-the-badge" alt="version">
14+
</div>
15+
<img src="kPad Dark Logo.png" alt="kPad logo" width="200">
16+
</div>
17+
<img id="version-badge" src="https://img.shields.io/badge/" alt="version">
1318
<p>supports <b>plugins</b>, <b>URL opening protocols</b>, <b>auto-updating</b>!</p>
14-
<a href="https://github.com/maxhatei2/kPad"><img alt="Static Badge" src="https://img.shields.io/badge/github repo-click me-blue"></a>
15-
16-
<h3>direct download links:</h3>
17-
<div>
18-
<img src="pkg_icon.svg" alt="pkg icon" width="20">
19-
<a href="https://github.com/maxhatei2/kPad/releases/latest/download/kPad-mac_arm64.zip">download mac  silicon</a>
20-
</div>
21-
<div>
22-
<img src="pkg_icon.svg" alt="pkg icon" width="20">
23-
<a href="https://github.com/maxhatei2/kPad/releases/latest/download/kPad-mac_x86_64.zip">download mac  intel</a>
24-
</div>
25-
<div>
26-
<img src="pkg_icon.svg" alt="pkg icon" width="20">
27-
<a href="https://github.com/maxhatei2/kPad/releases/latest/download/kPad-Windows_x86_64.zip">download windows x64</a>
28-
</div>
29-
<p>^ all of the above ^ are automatically the latest release.</p>
19+
<a href="https://github.com/maxhatei2.kPad/releases/latest/kPad-mac_arm64.zip"><img alt="Static Badge" src="https://img.shields.io/badge/download-mac silicon-orange"></a>
20+
<a href="https://github.com/maxhatei2.kPad/releases/latest/kPad-mac_x86_64.zip"><img alt="Static Badge" src="https://img.shields.io/badge/download-mac intel-orange"></a>
21+
<a href="https://github.com/maxhatei2.kPad/releases/latest/kPad-Windows_x86_64.zip"><img alt="Static Badge" src="https://img.shields.io/badge/download-windows amd64-orange"></a>
3022

3123
<p>for more info, look at the github repo and <a href="https://github.com/maxhatei2/kPad/wiki">wiki</a>.</p>
3224

@@ -55,6 +47,7 @@ <h3>direct download links:</h3>
5547
console.error('failed to fetch kPad version', err);
5648
document.getElementById('version-badge').src = 'https://img.shields.io/badge/version-unknown-lightgrey?style=for-the-badge';
5749
});
50+
5851
</script>
5952
</body>
6053
</html>

‎kPad Dark Logo.png‎

7.93 KB
Loading

‎style.css‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ body {
22
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
33
color: white;
44
background-color: rgb(29, 29, 29);
5+
margin: 0;
6+
height: 100vh; /* full viewport height */
7+
display: flex; /* make body a flex container */
8+
justify-content: center; /* center horizontally */
9+
align-items: center; /* center vertically */
10+
flex-direction: column; /* stack elements vertically */
511
}
612

713
footer p {
@@ -19,4 +25,81 @@ code {
1925
border-radius: 3px; /* slightly rounded corners */
2026
font-family: monospace; /* monospace font */
2127
font-size: 0.95em;
22-
}
28+
}
29+
30+
.header {
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-between;
34+
width: 80%; /* optional: control width */
35+
max-width: 800px; /* optional: don’t get too wide */
36+
}
37+
38+
.header .text {
39+
flex: 1;
40+
}
41+
42+
.header img {
43+
max-width: 500px;
44+
height: auto;
45+
border-radius: 15%;
46+
}
47+
48+
.header h1 {
49+
text-shadow: 0 0 8px orange, 0 0 15px orange;
50+
}
51+
52+
@media (max-width: 600px) {
53+
.header {
54+
flex-direction: column; /* stack vertically */
55+
align-items: center; /* center text & logo */
56+
text-align: center;
57+
}
58+
59+
.header .text {
60+
margin-bottom: 10px; /* spacing between text and logo */
61+
}
62+
63+
.header img {
64+
max-width: 150px; /* shrink logo for mobile */
65+
}
66+
}
67+
68+
.header, #version-badge, p, a {
69+
opacity: 0;
70+
transform: translateY(20px);
71+
animation: fadeSlideIn 0.8s forwards;
72+
}
73+
74+
.header { animation-delay: 0.2s; }
75+
#version-badge { animation-delay: 0.5s; }
76+
p, a { animation-delay: 0.8s; }
77+
78+
@keyframes fadeSlideIn {
79+
to {
80+
opacity: 1;
81+
transform: translateY(0);
82+
}
83+
}
84+
85+
a, .btn {
86+
transition: all 0.3s ease;
87+
}
88+
89+
a:hover {
90+
color: #ffaa00;
91+
transform: scale(1.05);
92+
}
93+
94+
#version-badge:hover {
95+
filter: brightness(1.2);
96+
}
97+
98+
.header img {
99+
transition: transform 0.5s ease;
100+
}
101+
102+
.header img:hover {
103+
transform: rotate(-5deg) scale(1.05);
104+
}
105+

0 commit comments

Comments
 (0)