1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./bbg-logo.png" type="image/png" />
<title>Blue Bean Games</title>
<meta
name="description"
content="Blue Bean Games is a newly-formed game studio that believes in the power of open-source software. All of our work is completely dedicated to the public domain from company literature to video games."
/>
<style>
/* import Inter font */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* apply Inter font to doc */
html {
font-family: "Inter";
}
/* set page background and text color */
html {
background-color: #006eff;
color: white;
}
/* remove margin and padding from body */
body {
margin: 0;
padding: 0;
}
/* center content of body using flexbox */
body {
display: flex;
justify-content: center;
flex-direction: column;
}
/* make body full height */
body {
height: 100vh;
}
/* constrain body width and center horizontally */
body {
max-width: 666px;
width: 100%;
margin: auto;
}
/* fade in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* fade in body content */
body {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
/* style main paragraph */
p {
font-size: 1.5rem;
text-align: justify;
padding: 0.5rem 0;
margin: 0;
}
/* style footer text */
span {
text-align: right;
opacity: 0.5;
margin-top: 1rem;
}
/* link styles */
a {
color: white;
text-decoration: dotted underline;
}
a:hover {
background: gold;
color: black;
text-decoration: none;
}
span:hover {
opacity: 1;
transition: opacity 0.1s ease-in-out;
}
</style>
</head>
<body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18/client";
ReactDOM.createRoot(document.body).render(
<>
<p>Hello, World! 👋</p>
<p>
We're <b>Blue Bean Games</b>, a small independent game studio based
in the United Kingdom currently working on our first game,{" "}
<b>Perturbed</b>.
</p>
<p>
Our philosophy is simple: we champion open-source software and game
preservation. After a set time post-release, our work enters the
public domain so anyone can use, modify, and share it freely.
</p>
<p>
As we're a new studio, we're always looking for talented individuals
to join our team. If you're passionate about game development and
open-source software, please don't hesitate to send us your
resume/portfolio at <a href="mailto:bbg@zue.dev">bbg@zue.dev</a>.
</p>
<span>
"Blue Bean Games" is made with ❤️ by{" "}
<a href="https://zue.dev" target="_blank">
zue.dev
</a>
</span>
</>,
);
</script>
</body>
</html>
|
