Skip to content

Commit

Permalink
Styling update & screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@wixoaGit
wixoaGit committed Jan 7, 2025
1 parent d17dda7 commit e63087c
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 41 deletions.
79 changes: 51 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,62 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Information and links on the OpenDream project">
<title>OpenDream Info & Links</title>
<title>OpenDream Game Engine</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<picture>
<source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
<source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
<source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
<img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
</picture>
<br>
<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>
<div id="links">
<a href="https://github.com/OpenDreamProject/OpenDream/">
<picture>
<source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg" width="64px">
<source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg" width="64px">
<img alt="OpenDream GitHub">
</picture>
</a>
<a href="https://discord.opendre.am">
<picture>
<source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg" width="64px">
<source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg" width="64px">
<img alt="OpenDream Discord Server">
</picture>
</a>
<a href="https://ref.opendre.am/">
<img id="link-ODRef" src="/assets/odref.svg" width="64px" alt="OpenDream DM Reference">
</a>
<div id="hero">
<picture>
<source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
<source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
<source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
<img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
</picture>
<br>
<div id="hero-links">
<div>
<a href="https://github.com/OpenDreamProject/OpenDream/">
<picture>
<source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg">
<source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg">
<img alt="OpenDream GitHub">
</picture>
<p>GitHub</p>
</a>
</div>
<div>
<a href="https://discord.opendre.am">
<picture>
<source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg">
<source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg">
<img alt="OpenDream Discord Server">
</picture>
<p>Discord</p>
</a>
</div>
<div>
<a href="https://ref.opendre.am/">
<img id="link-ODRef" src="/assets/odref.svg" alt="OpenDream DM Reference">
<p>DM Reference</p>
</a>
</div>
</div>
</div>
<div id="contents">
<h1>OpenDream Game Engine</h1>
<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>
<div id="screenshots">
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot.png?raw=true" alt="OpenDream running tg station"/>
<p>OpenDream running <a href="https://github.com/tgstation/tgstation">/tg/station</a></p>
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot2.png?raw=true" alt="OpenDream running Paradise"/>
<p>OpenDream running <a href="https://github.com/ike709/Paradise/tree/rustg_64">Paradise</a></p>
<img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot3.png?raw=true" alt="OpenDream running Goonstation"/>
<p>OpenDream running <a href="https://github.com/goonstation/goonstation">Goonstation</a></p>
</div>
</div>
</body>
</html>
118 changes: 105 additions & 13 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,132 @@
}

@media (prefers-color-scheme: light) {
body {
background-color: #fafafa;
:root {
--background-color: #fafafa;
--contents-box-shadow: grey;
--hero-button-box-shadow: black;
--hero-button-background: #fffb;
}
}

@media (prefers-color-scheme: dark) {
body {
background-color: #1b1b1b;
:root {
--background-color: #1b1b1b;
--contents-box-shadow: black;
--hero-button-box-shadow: white;
--hero-button-background: #000b;
}
}

body {
margin: 0px;
background-color: var(--background-color);
}

body:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
z-index: -1;

background-size: 60px 60px;
background-position: -10px -10px;
background-image:
linear-gradient(to right, grey 1px, transparent 1px),
linear-gradient(to bottom, grey 1px, transparent 1px);
filter:
drop-shadow( 5px 5px 5px grey );
}

a:link,a:visited {
text-decoration: none;
}

a:visited {
color: LinkText;
}

a:hover {
text-decoration: underline;
}

#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-top: 80px;
}

#links {
@media (min-width: 520px) {
#hero-links {
flex-direction: row;
}
}

@media (max-width: 520px) {
#hero-links {
flex-direction: column;
}
}

#hero-links {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}

a:link,a:visited {
text-decoration: none;
#hero-links > div {
background-color: var(--hero-button-background);
border: 2px white solid;
border-radius: 8px;
box-shadow: 0px 0px 4px var(--hero-button-box-shadow);
padding: 4px 4px 0px 4px;
height: 100%;
transition-duration: 0.2s;
transition-property: box-shadow;
}

a:visited {
color: LinkText;
#hero-links div:hover {
box-shadow: 0px 0px 16px var(--hero-button-box-shadow);
}

a:hover {
text-decoration: underline;
#hero-links p {
float: right;
color: CanvasText;
margin: 0px 0px 0px 4px;
font-size: 24px;
}

#hero-links img {
height: 32px;
}

#contents {
background-color: var(--background-color);
box-shadow: 0px -5px 5px var(--contents-box-shadow);
}

#contents {
text-align: center;
min-height: 100vh;
}

#screenshots {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}

#screenshots img {
width: 100%;
max-width: 1080px;
margin: 20px 10px 0px 10px;
}

#screenshots p {
margin-top: 0px;
}

0 comments on commit e63087c

Please sign in to comment.