Skip to content

Commit e63087c

Browse files
wixoaGitwixoaGit
committed
Styling update & screenshots
1 parent d17dda7 commit e63087c

File tree

2 files changed

+156
-41
lines changed

2 files changed

+156
-41
lines changed

‎index.html‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,62 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
45
<meta name="viewport" content="width=device-width, initial-scale=1" />
56
<meta name="description" content="Information and links on the OpenDream project">
6-
<title>OpenDream Info & Links</title>
7+
<title>OpenDream Game Engine</title>
78
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
89
<link rel="stylesheet" href="style.css" />
910
</head>
1011
<body>
11-
<picture>
12-
<source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
13-
<source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
14-
<source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
15-
<img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
16-
</picture>
17-
<br>
18-
<p style="text-align: center">OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
19-
<div id="links">
20-
<a href="https://github.com/OpenDreamProject/OpenDream/">
21-
<picture>
22-
<source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg" width="64px">
23-
<source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg" width="64px">
24-
<img alt="OpenDream GitHub">
25-
</picture>
26-
</a>
27-
<a href="https://discord.opendre.am">
28-
<picture>
29-
<source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg" width="64px">
30-
<source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg" width="64px">
31-
<img alt="OpenDream Discord Server">
32-
</picture>
33-
</a>
34-
<a href="https://ref.opendre.am/">
35-
<img id="link-ODRef" src="/assets/odref.svg" width="64px" alt="OpenDream DM Reference">
36-
</a>
12+
<div id="hero">
13+
<picture>
14+
<source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
15+
<source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
16+
<source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
17+
<img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
18+
</picture>
19+
<br>
20+
<div id="hero-links">
21+
<div>
22+
<a href="https://github.com/OpenDreamProject/OpenDream/">
23+
<picture>
24+
<source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg">
25+
<source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg">
26+
<img alt="OpenDream GitHub">
27+
</picture>
28+
<p>GitHub</p>
29+
</a>
30+
</div>
31+
<div>
32+
<a href="https://discord.opendre.am">
33+
<picture>
34+
<source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg">
35+
<source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg">
36+
<img alt="OpenDream Discord Server">
37+
</picture>
38+
<p>Discord</p>
39+
</a>
40+
</div>
41+
<div>
42+
<a href="https://ref.opendre.am/">
43+
<img id="link-ODRef" src="/assets/odref.svg" alt="OpenDream DM Reference">
44+
<p>DM Reference</p>
45+
</a>
46+
</div>
47+
</div>
48+
</div>
49+
<div id="contents">
50+
<h1>OpenDream Game Engine</h1>
51+
<p>OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
52+
<div id="screenshots">
53+
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot.png?raw=true" alt="OpenDream running tg station"/>
54+
<p>OpenDream running <a href="https://github.com/tgstation/tgstation">/tg/station</a></p>
55+
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot2.png?raw=true" alt="OpenDream running Paradise"/>
56+
<p>OpenDream running <a href="https://github.com/ike709/Paradise/tree/rustg_64">Paradise</a></p>
57+
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot3.png?raw=true" alt="OpenDream running Goonstation"/>
58+
<p>OpenDream running <a href="https://github.com/goonstation/goonstation">Goonstation</a></p>
59+
</div>
3760
</div>
3861
</body>
3962
</html>

‎style.css‎

Lines changed: 105 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,132 @@
33
}
44

55
@media (prefers-color-scheme: light) {
6-
body {
7-
background-color: #fafafa;
6+
:root {
7+
--background-color: #fafafa;
8+
--contents-box-shadow: grey;
9+
--hero-button-box-shadow: black;
10+
--hero-button-background: #fffb;
811
}
912
}
1013

1114
@media (prefers-color-scheme: dark) {
12-
body {
13-
background-color: #1b1b1b;
15+
:root {
16+
--background-color: #1b1b1b;
17+
--contents-box-shadow: black;
18+
--hero-button-box-shadow: white;
19+
--hero-button-background: #000b;
1420
}
1521
}
1622

23+
body {
24+
margin: 0px;
25+
background-color: var(--background-color);
26+
}
27+
28+
body:before {
29+
content: "";
30+
position: absolute;
31+
width: 100%;
32+
height: 100%;
33+
top: 0px;
34+
z-index: -1;
35+
36+
background-size: 60px 60px;
37+
background-position: -10px -10px;
38+
background-image:
39+
linear-gradient(to right, grey 1px, transparent 1px),
40+
linear-gradient(to bottom, grey 1px, transparent 1px);
41+
filter:
42+
drop-shadow( 5px 5px 5px grey );
43+
}
44+
45+
a:link,a:visited {
46+
text-decoration: none;
47+
}
48+
49+
a:visited {
50+
color: LinkText;
51+
}
52+
53+
a:hover {
54+
text-decoration: underline;
55+
}
56+
1757
#logo {
1858
display: block;
1959
margin-left: auto;
2060
margin-right: auto;
21-
margin-top: 100px;
61+
margin-top: 80px;
2262
}
2363

24-
#links {
64+
@media (min-width: 520px) {
65+
#hero-links {
66+
flex-direction: row;
67+
}
68+
}
69+
70+
@media (max-width: 520px) {
71+
#hero-links {
72+
flex-direction: column;
73+
}
74+
}
75+
76+
#hero-links {
2577
display: flex;
26-
flex-direction: row;
2778
justify-content: center;
2879
align-items: center;
2980
gap: 20px;
3081
}
3182

32-
a:link,a:visited {
33-
text-decoration: none;
83+
#hero-links > div {
84+
background-color: var(--hero-button-background);
85+
border: 2px white solid;
86+
border-radius: 8px;
87+
box-shadow: 0px 0px 4px var(--hero-button-box-shadow);
88+
padding: 4px 4px 0px 4px;
89+
height: 100%;
90+
transition-duration: 0.2s;
91+
transition-property: box-shadow;
3492
}
3593

36-
a:visited {
37-
color: LinkText;
94+
#hero-links div:hover {
95+
box-shadow: 0px 0px 16px var(--hero-button-box-shadow);
3896
}
3997

40-
a:hover {
41-
text-decoration: underline;
98+
#hero-links p {
99+
float: right;
100+
color: CanvasText;
101+
margin: 0px 0px 0px 4px;
102+
font-size: 24px;
103+
}
104+
105+
#hero-links img {
106+
height: 32px;
107+
}
108+
109+
#contents {
110+
background-color: var(--background-color);
111+
box-shadow: 0px -5px 5px var(--contents-box-shadow);
112+
}
113+
114+
#contents {
115+
text-align: center;
116+
min-height: 100vh;
117+
}
118+
119+
#screenshots {
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
margin-bottom: 10px;
124+
}
125+
126+
#screenshots img {
127+
width: 100%;
128+
max-width: 1080px;
129+
margin: 20px 10px 0px 10px;
130+
}
131+
132+
#screenshots p {
133+
margin-top: 0px;
42134
}

0 commit comments

Comments
 (0)