Skip to content

Commit 21387d7

Browse files
TheRedXDTheRedXD
authored
I rethemed the website a bit
I've decided to retheme the website (it is now dark mode in true dev fashion) At the moment it is using assets from a.thered.sh (my assets website), you could replace them though with your own if you don't trust my website lol
1 parent e7c59b8 commit 21387d7

File tree

1 file changed

+208
-99
lines changed

1 file changed

+208
-99
lines changed

‎index.html‎

Lines changed: 208 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,223 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charSet="utf-8"/>
5-
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
3+
4+
<head>
5+
<meta charSet="utf-8" />
6+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
78
<title>is-a.dev | Free sub-domains for developers</title>
9+
<link rel="stylesheet" href="https://a.thered.sh/assets/fonts/Roboto/font.css">
10+
<link rel="stylesheet" href="https://a.thered.sh/assets/fonts/UbuntuMono/font.css">
11+
<link rel="stylesheet" href="https://a.thered.sh/assets/fa/css/all.min.css">
812
<style>
9-
html, body {
10-
--header-bg: #0f0c19;
11-
--accent: #4e3aA3;
12-
--body-fg: #2f2c39;
13-
14-
margin: 0;
15-
padding: 0;
16-
background-color: #efefef;
17-
color: var(--body-fg);
18-
19-
font-family: Arial, Helvetica, sans-serif;
20-
}
21-
body * { box-sizing: border-box; line-height: 1.5em; }
22-
23-
a, a:visited { color: var(--accent); }
24-
a:hover { opacity: 0.8; }
13+
html,
14+
body {
15+
--header-bg: #0f0c19;
16+
--accent: #4e3aA3;
17+
--body-fg: #9b7dff;
18+
19+
margin: 0;
20+
padding: 0;
21+
background-color: #0f0c19;
22+
color: var(--body-fg);
23+
24+
font-family: 'Roboto Regular', sans-serif;
25+
padding: 20px;
26+
}
27+
28+
body * {
29+
box-sizing: border-box;
30+
line-height: 1.5em;
31+
}
32+
33+
main>p {
34+
font-family: 'Ubuntu Mono Regular';
35+
}
36+
37+
a:hover {
38+
opacity: 0.8;
39+
}
40+
41+
/* scrollbar for chrome users (firefox by default uses their own scrollbar lol) */
42+
::-webkit-scrollbar {
43+
width: 20px;
44+
}
45+
46+
::-webkit-scrollbar-button {
47+
width: 0;
48+
height: 0;
49+
}
50+
51+
::-webkit-scrollbar-track {
52+
background: #0f0c19;
53+
}
54+
55+
::-webkit-scrollbar-thumb {
56+
background: #9b7dff;
57+
border: 6px solid #0f0c19;
58+
border-radius: 10px;
59+
transition: all .2s ease-in-out;
60+
}
61+
62+
::-webkit-scrollbar-thumb:hover {
63+
background: #7041ff;
64+
}
2565
</style>
26-
</head>
27-
<body>
66+
</head>
67+
68+
<body>
2869
<style>
29-
header {
30-
display: flex;
31-
justify-content: center;
32-
align-items: center;
33-
flex-direction: column;
34-
background-color: var(--header-bg);
35-
color: #d8dee9;
36-
}
37-
38-
.domain {
39-
display: flex;
40-
justify-content: flex-start;
41-
letter-spacing: 1px;
42-
font-size: 1.5em;
43-
}
44-
.domain-name {
45-
position: relative;
46-
}
47-
48-
@keyframes domain-fade {
49-
0% { opacity: 0; }
50-
12% { opacity: 1; }
51-
25% { opacity: 0; }
52-
}
53-
54-
.domain .name {
55-
padding: 0 .3em 3px;
56-
transform: translateY(-1px);
57-
background-color: #fff;
58-
color: var(--accent);
59-
font-weight: bold;
60-
}
61-
62-
.domain-name div {
63-
opacity: 0;
64-
--duration: 4s;
65-
animation: domain-fade var(--duration) ease-in-out infinite;
66-
}
67-
.domain-name div:nth-child(1) { animation-delay: 0s; }
68-
.domain-name div:nth-child(2) { animation-delay: 1s; }
69-
.domain-name div:nth-child(3) { animation-delay: 2s; }
70-
.domain-name div:nth-child(4) { animation-delay: 3s; }
70+
header {
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
flex-direction: column;
75+
background-color: var(--header-bg);
76+
color: white;
77+
}
78+
79+
.domain img {
80+
border-radius: 20px;
81+
display: block;
82+
transition: all .2s ease-in-out;
83+
cursor: pointer;
84+
outline: 1px solid transparent;
85+
}
86+
87+
.domain img:hover {
88+
outline: 1px solid #9b7dff;
89+
}
90+
91+
.domain a {
92+
border-radius: 20px;
93+
}
7194
</style>
7295
<header>
73-
<div class="domain">
74-
<img src="https://raw.githubusercontent.com/is-a-dev/register/main/media/banner.png" style="max-width: 1000px; width: 100%; display: block;" />
75-
</div>
96+
<div class="domain">
97+
<a href="https://github.com/is-a-dev" target="_blank"><img
98+
src="https://raw.githubusercontent.com/is-a-dev/register/main/media/banner.png"
99+
style="max-width: 1000px; width: 100%; display: block;" /></a>
100+
</div>
76101
</header>
77102

78103
<style>
79-
main {
80-
padding: 1em;
81-
margin: 1em auto;
82-
max-width: 1000px;
83-
}
84-
85-
h1 {
86-
font-size: 2em;
87-
margin: 0;
88-
padding: 1em 0 0.2em 0;
89-
border-bottom: 1px solid #ddd;
90-
}
104+
main {
105+
padding: 1em;
106+
margin: 1em auto;
107+
max-width: 1000px;
108+
}
109+
110+
main p {
111+
padding-left: 10px;
112+
border-left: 1px solid #9b7dff;
113+
border-radius: 5px;
114+
}
115+
116+
main p img {
117+
border-radius: 10px;
118+
margin-top: 7px;
119+
margin-right: 10px;
120+
transition: all .2s ease-in-out;
121+
outline: 1px solid transparent;
122+
}
123+
124+
main p img:hover {
125+
opacity: 0.8;
126+
outline: 1px solid white;
127+
}
128+
129+
main p img:last-child {
130+
margin-right: 0;
131+
}
132+
133+
main p span {
134+
color: #ffffff;
135+
background-color: #7041ff;
136+
padding: 2px 5px;
137+
border-radius: 5px;
138+
line-height: 1;
139+
}
140+
141+
h1 {
142+
font-size: 2em;
143+
margin: 0;
144+
border-bottom: 4px solid #9b7dff;
145+
border-radius: 5px;
146+
background-color: #9b7dff20;
147+
padding: 20px;
148+
padding-bottom: 17px;
149+
}
150+
151+
h1 p {
152+
border: none;
153+
font-size: 12pt;
154+
color: #bdb7cf;
155+
padding: 0;
156+
margin: 0;
157+
}
158+
159+
a {
160+
color: #ddd2ff;
161+
text-decoration: none;
162+
transition: all .2s ease-in-out;
163+
}
164+
165+
a:hover {
166+
opacity: 0.8;
167+
}
168+
169+
.socials {
170+
display: block;
171+
position: absolute;
172+
top: 0;
173+
right: 0;
174+
margin: 10px;
175+
}
176+
177+
.social {
178+
padding: 10px;
179+
font-size: 16pt;
180+
}
91181
</style>
92182
<main>
93-
<h1>is-a.dev</h1>
94-
<p>
95-
is-a.dev is a service that allows developers to get a sweet-looking ".is-a.dev" subdomain for their personal websites.
96-
<br />
97-
To register your own subdomain, go to the <a href="https://github.com/is-a-dev/register">is-a.dev registration repository</a> and follow the instructions.
98-
</p>
99-
100-
<h2>Report abuse</h2>
101-
<p>
102-
If you believe one of the subdomains is abusing the service, please <a href="https://github.com/is-a-dev/register/issues/new?labels=report-abuse&template=report-abuse.md&title=Report+abuse" target="_blank">report</a> it.
103-
</p>
104-
105-
<h2>Donations</h2>
106-
<p>This project is a free service for developers and will stay that way. Please consider <a href="https://www.buymeacoffee.com/phenax">donating</a> to help me keep this running forever!</p>
107-
108-
<p>
109-
<a href="https://www.buymeacoffee.com/phenax" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="28" width="119"></a>
110-
<a href="https://liberapay.com/phenax" target="_blank"><img src="https://img.shields.io/badge/liberapay-donate-yellow.svg?style=for-the-badge" alt="Liberapay recurring donation button" /></a>
111-
</p>
183+
<div class="socials">
184+
<div class="social">
185+
<a href="https://github.com/is-a-dev" target="_blank"><i class="fa-brands fa-github"></i></a>
186+
</div>
187+
</div>
188+
<h1>is-a.dev<p>Welcome! 👋</p>
189+
</h1>
190+
<p>
191+
<span>is-a.dev</span> is a service that allows developers to get a sweet-looking <span
192+
style="display:inline-block;width:fit-content;line-height:1;">.is-a.dev</span> subdomain for their
193+
personal
194+
websites.
195+
<br />
196+
To register your own subdomain, go to the <a href="https://github.com/is-a-dev/register"
197+
target="_blank">is-a.dev
198+
registration repository</a> and follow the instructions.
199+
</p>
200+
201+
<h2>Report abuse</h2>
202+
<p>
203+
If you believe one of the subdomains is abusing the service, please <a
204+
href="https://github.com/is-a-dev/register/issues/new?labels=report-abuse&template=report-abuse.md&title=Report+abuse"
205+
target="_blank">report</a> it.
206+
</p>
207+
208+
<h2>Donations</h2>
209+
<p>This project is a free service for developers and will stay that way. Please consider <a
210+
href="https://www.buymeacoffee.com/phenax">donating</a> to help me keep this running forever!</p>
211+
212+
<p>
213+
<a href="https://www.buymeacoffee.com/phenax" target="_blank"><img
214+
src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="28"
215+
width="119"></a>
216+
<a href="https://liberapay.com/phenax" target="_blank"><img
217+
src="https://img.shields.io/badge/liberapay-donate-yellow.svg?style=for-the-badge"
218+
alt="Liberapay recurring donation button" /></a>
219+
</p>
112220
</main>
113-
</body>
221+
</body>
222+
114223
</html>

0 commit comments

Comments
 (0)