---
website/block.svg | 4 +
website/community/index.html | 2 -
website/docs/config/index.html | 2 -
website/docs/index.html | 2 -
website/docs/leaderboard/index.html | 2 -
website/docs/online/index.html | 2 -
website/docs/replay/index.html | 2 -
website/download/index.html | 2 -
website/index.html | 11 +-
website/style.css | 207 +++++++++++++++++++++++-----
10 files changed, 185 insertions(+), 51 deletions(-)
create mode 100644 website/block.svg
diff --git a/website/block.svg b/website/block.svg
new file mode 100644
index 0000000..07c6ac6
--- /dev/null
+++ b/website/block.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+ <rect x="0" y="0" width="7" height="7" fill="#4050F0" />
+ <path d="M0,0 L1,0 L1,1 L0,1 L0,0 M1,1 L3,1 L3,2 L2,2 L2,3 L1,3 L 1,1" fill="white" />
+</svg>
diff --git a/website/community/index.html b/website/community/index.html
index 3c5cae0..d5cf92b 100644
--- a/website/community/index.html
+++ b/website/community/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-curlink" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -31,7 +30,6 @@
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/docs/config/index.html b/website/docs/config/index.html
index a77cce8..8a0d262 100644
--- a/website/docs/config/index.html
+++ b/website/docs/config/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -57,7 +56,6 @@ input 1 start joypad 3
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/docs/index.html b/website/docs/index.html
index 0a9a484..c70bde7 100644
--- a/website/docs/index.html
+++ b/website/docs/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -32,7 +31,6 @@
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/docs/leaderboard/index.html b/website/docs/leaderboard/index.html
index 9e6a904..daf7061 100644
--- a/website/docs/leaderboard/index.html
+++ b/website/docs/leaderboard/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -38,7 +37,6 @@ JJJJJJJJ 100000 11
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/docs/online/index.html b/website/docs/online/index.html
index b7585d4..509938c 100644
--- a/website/docs/online/index.html
+++ b/website/docs/online/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -27,7 +26,6 @@
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/docs/replay/index.html b/website/docs/replay/index.html
index bec3e7a..3acf7d4 100644
--- a/website/docs/replay/index.html
+++ b/website/docs/replay/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -43,7 +42,6 @@ repeat
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/download/index.html b/website/download/index.html
index 66acc39..2da408c 100644
--- a/website/download/index.html
+++ b/website/download/index.html
@@ -18,7 +18,6 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
@@ -40,7 +39,6 @@
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/index.html b/website/index.html
index 61b7b22..6e8f824 100644
--- a/website/index.html
+++ b/website/index.html
@@ -19,19 +19,19 @@
<li><a class="nav-link" href="/community/">Community</a></li>
</ul>
</nav>
- <hr>
</header>
<main>
<article>
- <h2>About</h2>
- <b>generic tetromino game</b> is a free (GPL-3) clone of NES Tetris, that remains as faithful to the original as possible, while also adding new features.
- <a class="download" href="/download/">Download</a>
<div class="video">
- <video controls>
+ <!-- If you update the dimensions, don't forget to update aspect-ratio! -->
+ <video controls width="640" height="480" style="aspect-ratio: 4 / 3">
<source src="/demo.mp4" type="video/mp4">
<a href="/demo.mp4">Demo video</a>
</video>
</div>
+ <h2>About</h2>
+ <b>generic tetromino game</b> is a free (GPL-3) clone of NES Tetris, that remains as faithful to the original as possible, while also adding new features.
+ <a class="download" href="/download/">Download</a>
<section>
<h3>Features</h3>
<ul>
@@ -71,7 +71,6 @@
</article>
</main>
<footer>
- <hr>
<p>Copyright Sebastian 2023 blablabla something something legal stuff.
<p>All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> (CC BY-SA 4.0) license unless otherwise indicated.
</footer>
diff --git a/website/style.css b/website/style.css
index 4f58775..ff836cb 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3,16 +3,128 @@
src: url("PressStart2P.ttf") format("truetype");
}
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 81.25%;
+ height: 100%;
+}
+
+@media (min-width: 25rem) {
+ html {
+ font-size: 93.75%;
+ }
+}
+
body {
+ position: relative;
background-color: black;
- color: white;
+ color: #c0c0c0;
font-family: "PressStart2P", monospace;
- margin: 0 1em;
+ line-height: 1.4;
+ max-width: 60rem;
+ min-height: 100%;
+ margin: 0 auto;
+ padding: 1em 2em;
+}
+
+body::before,
+body::after {
+ content: '';
+ position: absolute;
+ background: url(/block.svg) 0 0 / 16px 16px;
+}
+
+@media (max-width: 559px) {
+ body::before,
+ body::after {
+ left: 0;
+ width: 100%;
+ height: 14px;
+ }
+
+ body::before {
+ top: 0;
+ }
+
+ body::after {
+ bottom: 0;
+ }
+}
+
+@media (min-width: 560px) {
+ body {
+ padding-left: 2.5em;
+ padding-right: 2.5em;
+ }
+
+ body::before,
+ body::after {
+ top: 0;
+ width: 14px;
+ height: 100%;
+ }
+
+ body::before {
+ left: 0;
+ }
+
+ body::after {
+ right: 0;
+ }
+}
+
+h1, h2, h3, b, strong {
+ color: white;
+}
+
+a:link {
+ color: skyblue;
+ text-decoration-thickness: 2px;
+}
+
+a:hover {
+ color: white;
+}
+
+a:visited {
+ color: violet;
+}
+
+a:active {
+ color: skyblue;
+ opacity: 0.75;
+}
+
+ul {
+ padding-left: 1.25em;
+}
+
+li {
+ margin-bottom: 1em;
+ list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 6 6' fill='%23ccc'%3E%3Crect y='1' width='3' height='3'/%3E%3C/svg%3E");
+}
+
+pre {
+ padding: 0.5em 1em;
+ font-size: 1.25em;
+ background: #202020;
}
header {
- text-align: center;
- width: 100%;
+ margin-bottom: 4em;
+}
+
+footer {
+ font-size: smaller;
+ margin-top: 4em;
+ border-top: 4px solid #333;
+}
+
+header h1 {
+ margin-bottom: 0.25em;
}
h1, .nav {
@@ -20,56 +132,89 @@ h1, .nav {
}
.nav {
- overflow: hidden;
+ font-size: 0;
+ margin: 0 0 2rem -0.25rem;
+ padding: 0;
}
-.nav>li {
- display: inline;
- padding: 0 0 1em 1em;
+.nav > li {
+ display: inline-block;
+ font-size: 0.85rem;
+ list-style: none;
+ margin: 0 1em 0.25em 0;
}
-.nav-link, .nav-curlink {
- color: white;
+.nav > li > a {
+ display: inline-block;
+ padding: 0.25em 0.5em;
+ white-space: nowrap;
}
-.nav-link:hover {
- background-color: darkblue;
+.nav > li > a:active {
+ transform: translateY(1px);
}
-.nav-curlink {
- background-color: blue;
+.nav-curlink, a.nav-curlink {
+ background-color: skyblue;
+ color: black;
+ text-decoration: none;
}
-.download {
+.download, a.download {
+ position: relative;
display: block;
text-align: center;
- background-color: green;
- margin: 1em 25%;
- padding: 1em;
+ text-decoration: none;
+ max-width: 20rem;
+ margin: 1.5em 0;
+ padding: 1.25em;
font-weight: bold;
- border-radius: 12px;
- color: white !important;
+ border: none;
+ border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5' fill='green'%3E%3Crect x='1' y='0' width='3' height='1'/%3E%3Crect x='1' y='4' width='3' height='1'/%3E%3Crect x='0' y='1' width='1' height='3'/%3E%3Crect x='4' y='1' width='1' height='3'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E") 2 fill / 6px;
+ background-repeat: no-repeat;
+ color: white;
text-transform: uppercase;
- font-weight: bold;
+}
+
+.download::before {
+ content: '';
+ position: absolute;
+ top: 9px;
+ left: 9px;
+ width: 6px;
+ height: 6px;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 2 2' fill='white'%3E%3Cpath d='M 0,0 L 2,0 L 2,1 L 1,1 L 1,2 L 0,2 L 0,0'/%3E%3C/svg%3E");
}
.download:hover {
- background-color: darkgreen;
+ border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5' fill='%23393'%3E%3Crect x='1' y='0' width='3' height='1'/%3E%3Crect x='1' y='4' width='3' height='1'/%3E%3Crect x='0' y='1' width='1' height='3'/%3E%3Crect x='4' y='1' width='1' height='3'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E") 2 fill / 6px;
}
-.video {
- text-align: center;
- padding: 1em 0;
+.download:active {
+ transform: translateY(2px);
}
-pre {
- padding: 0 8em;
+section {
+ margin: 4em 0;
}
-a:link {
- color: skyblue;
+.video {
+ margin: 2em 0;
}
-a:visited {
- color: violet;
+.video video {
+ width: 100%;
+ height: auto;
+}
+
+@media (min-width: 35rem) {
+ .video {
+ float: right;
+ margin: 0 0 4em 2em;
+ width: 45%;
+ }
+
+ .download {
+ width: 40%;
+ }
}
--
2.37.1 (Apple Git-137.1)
