Skip to content

Commit 3acff67

Browse files
bcbbcb
committed
Work on homepage
1 parent 5a7fb64 commit 3acff67

File tree

2 files changed

+129
-66
lines changed

2 files changed

+129
-66
lines changed

‎index.css‎

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,31 @@ html,
22
body {
33
margin: 0;
44
padding: 0;
5+
background-color: #111;
56
}
67

78
body {
89
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted",
910
"Segoe UI", "Liberation Sans", sans-serif;
10-
background-color: #071039;
1111
}
1212

1313
main {
14-
max-width: 800px;
14+
}
15+
16+
section {
1517
margin: 0 auto;
16-
padding: 2em 2em;
18+
padding: 0 2em;
19+
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
1724
}
1825

1926
#logo {
2027
display: block;
2128
max-width: 300px;
22-
margin: 1em auto 0;
29+
margin: 0 auto 1em auto;
2330
}
2431

2532
#reliableapps {
@@ -53,21 +60,71 @@ h2 {
5360
text-decoration: underline;
5461
}
5562

56-
.project {
57-
margin-bottom: 3em;
63+
.projects h1 {
64+
color: #eee;
65+
text-align: center;
66+
margin-top: 6em;
67+
}
68+
69+
section.start {
70+
background-color: #071039;
71+
min-height: 80vh;
72+
}
73+
74+
section.project {
75+
margin-top: 14rem;
76+
margin-bottom: 14rem;
5877
}
5978

60-
.project img {
79+
section.project img {
6180
display: block;
6281
margin-left: auto;
6382
margin-right: auto;
6483
max-width: 100%;
84+
margin-bottom: 1em;
85+
}
86+
87+
section.project h2 {
88+
font-size: 2rem;
89+
margin: 0;
90+
padding: 0;
91+
}
92+
93+
section.project h3 {
94+
max-width: 400px;
95+
font-size: 120%;
96+
font-weight: normal;
97+
color: #eee;
98+
text-align: center;
99+
font-style: italic;
100+
line-height: 140%;
65101
}
66102

67-
.project p {
103+
section.project p {
68104
text-align: center;
69105
}
70106

71-
.project p a {
107+
section.project p a {
72108
color: cyan;
73109
}
110+
111+
112+
/* GitHub icon before GitHub links */
113+
a[href*="github.com"]::before {
114+
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04-3.338.725-4.042-1.61-4.042-1.61-.546-1.38-1.332-1.747-1.332-1.747-1.09-.745.084-.73.084-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.805 1.305 3.49.997.108-.775.42-1.305.763-1.605-2.665-.3-5.467-1.335-5.467-5.932 0-1.31.465-2.38 1.235-3.22-.125-.303-.535-1.523.115-3.176 0 0 1.005-.322 3.3 1.23a11.48 11.48 0 013.003-.404c1.02.004 2.045.138 3.004.404 2.28-1.552 3.285-1.23 3.285-1.23.655 1.653.245 2.873.12 3.176.77.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.922.43.37.815 1.1.815 2.222 0 1.606-.015 2.896-.015 3.286 0 .32.21.694.825.577C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12z"/></svg>');
115+
display: inline-block;
116+
vertical-align: middle;
117+
margin-right: 0.4em;
118+
width: 16px;
119+
height: 16px;
120+
}
121+
122+
/* Docs icon before Docs links */
123+
a.docs-link::before {
124+
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="16"><path d="M6 2h9a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm0 2v16h9V4H6zm3 3h3v2H9V7zm0 3h3v2H9v-2z"/></svg>');
125+
display: inline-block;
126+
vertical-align: middle;
127+
margin-right: 0.4em;
128+
width: 16px;
129+
height: 16px;
130+
}

‎index.html‎

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,88 +3,94 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Exploding Labs</title>
67
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
78
<link rel="stylesheet" href="/index.css" />
8-
<title>Exploding Labs</title>
99
</head>
1010
<body>
1111
<main>
12-
<img id="logo" src="/assets/logo.png" alt="Logo" data-aos="flip-left" />
13-
14-
<img
15-
id="reliableapps"
16-
src="/assets/reliableapps.png"
17-
data-aos="flip-right"
18-
/>
12+
<section class="start">
13+
<img id="logo" src="/assets/logo.png" alt="Logo" data-aos="flip-left" />
1914

20-
<p id="pitch">
21-
Exploding Labs builds profitable SaaS apps using our own open-source
22-
infrastructure. At the core is <b>Minibase</b> — a lightweight platform
23-
for quickly launching database-driven web apps. We use it to ship real
24-
products, and so can you. Our tools are open.
25-
</p>
15+
<img
16+
id="reliableapps"
17+
src="/assets/reliableapps.png"
18+
data-aos="flip-right"
19+
/>
2620

27-
<div class="projects">
28-
<!-- iko -->
29-
<div class="project">
30-
<a href="/iko/">
31-
<img src="/assets/iko.png" alt="iko logo" />
32-
</a>
33-
<h2>iko</h2>
34-
<p>
35-
<a href="/iko/">Docs</a> |
36-
<a href="https://github.com/explodinglabs/iko">GitHub</a>
21+
<p id="pitch">
22+
Exploding Labs builds profitable SaaS apps using our own open-source
23+
infrastructure. At the core is <b>Minibase</b> — a lightweight platform
24+
for quickly launching database-driven web apps. We use it to ship real
25+
products, and so can you. Our tools are open.
3726
</p>
38-
</div>
27+
</section>
3928

40-
<!-- powersync -->
41-
<div class="project">
42-
<img src="/assets/powersync.png" alt="powersync logo" />
43-
<h2>PowerSync</h2>
44-
<p>
45-
<a href="https://github.com/explodinglabs/powersync">GitHub</a>
46-
</p>
47-
</div>
29+
<div class="projects">
30+
<h1>Projects</h1>
4831

49-
<!-- jsonrpcserver -->
50-
<div class="project">
51-
<a href="/jsonrpcserver/">
52-
<img src="/assets/jsonrpcserver.png" alt="jsonrpcserver logo" />
53-
</a>
54-
<h2>jsonrpcserver</h2>
55-
<p>
56-
<a href="/jsonrpcserver/">Docs</a> |
57-
<a href="https://github.com/explodinglabs/jsonrpcserver">GitHub</a>
58-
</p>
59-
</div>
32+
<!-- iko -->
33+
<section class="project">
34+
<a href="/iko/"><img src="/assets/iko.png" alt="iko logo" /></a>
35+
<h2>iko</h2>
36+
<h3>A command-line tool for generation and management of database migrations.</h3>
37+
<p>
38+
<a class="docs-link" href="/iko/">Docs</a> |
39+
<a href="https://github.com/explodinglabs/iko">GitHub</a>
40+
</p>
41+
</section>
6042

61-
<!-- jsonrpcclient -->
62-
<div class="project">
63-
<a href="/jsonrpcclient/">
64-
<img src="/assets/jsonrpcclient.png" alt="jsonrpcclient logo" />
65-
</a>
66-
<h2>jsonrpcclient</h2>
67-
<p>
68-
<a href="/jsonrpcclient/">Docs</a> |
69-
<a href="https://github.com/explodinglabs/jsonrpcclient">GitHub</a>
70-
</p>
43+
<!-- powersync -->
44+
<section class="project">
45+
<img src="/assets/powersync.png" alt="powersync logo" />
46+
<h3>
47+
Keep browsers in sync during development.
48+
</h3>
49+
<p>
50+
<a href="https://github.com/explodinglabs/powersync">GitHub</a>
51+
</p>
52+
</section>
53+
54+
<!-- jsonrpcserver -->
55+
<section class="project">
56+
<a href="/jsonrpcserver/"><img src="/assets/jsonrpcserver.png" alt="jsonrpcserver logo" /></a>
57+
<h3>
58+
Process incoming JSON-RPC requests in Python.
59+
</h3>
60+
<p>
61+
<a class="docs-link" href="/jsonrpcserver/">Docs</a> |
62+
<a href="https://github.com/explodinglabs/jsonrpcserver">GitHub</a>
63+
</p>
64+
</section>
65+
66+
<!-- jsonrpcclient -->
67+
<section class="project">
68+
<a href="/jsonrpcclient/"><img src="/assets/jsonrpcclient.png" alt="jsonrpcclient logo" /></a>
69+
<h3>
70+
Generate JSON-RPC requests and parse responses in Python.
71+
</h3>
72+
<p>
73+
<a class="docs-link" href="/jsonrpcclient/">Docs</a> |
74+
<a href="https://github.com/explodinglabs/jsonrpcclient">GitHub</a>
75+
</p>
76+
</section>
7177
</div>
7278

73-
</div>
7479
</main>
7580

7681
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
7782
<script>
7883
AOS.init();
7984
</script>
8085

81-
<script
86+
<!--script
8287
id="powersync"
8388
type="text/javascript"
8489
data-events-uri=":8080/.well-known/mercure"
8590
data-events-topic="powersync"
8691
src="https://explodinglabs.github.io/powersync/powersync-0.1.0.js"
8792
async
88-
></script>
93+
></script-->
8994
</body>
95+
9096
</html>

0 commit comments

Comments
 (0)