website
add tetris page
| -rw-r--r-- | components/screenshotlist.js | 7 | ||||
| -rw-r--r-- | img/tetris/ss1.png | bin | 0 -> 23901 bytes | |||
| -rw-r--r-- | img/tetris/ss2.png | bin | 0 -> 26566 bytes | |||
| -rw-r--r-- | projects.html | 5 | ||||
| -rw-r--r-- | projects/tetris.html | 40 | ||||
| -rw-r--r-- | style/bouncy-screenshots.css | 14 | ||||
| -rw-r--r-- | style/chess.css | 11 | ||||
| -rw-r--r-- | style/styles.css | 3 | ||||
| -rw-r--r-- | style/tetris.css | 32 |
9 files changed, 94 insertions, 18 deletions
diff --git a/components/screenshotlist.js b/components/screenshotlist.js index 2325e12..05ce283 100644 --- a/components/screenshotlist.js +++ b/components/screenshotlist.js @@ -14,13 +14,6 @@ customElements.define( const style = ` .screenshot { max-width: 350px; - display: inline-block; - transition: var(--transition-length) var(--ease) all; - margin: 0 10px; - } - - .screenshot:hover { - transform: scale(1.09); } .screenshot_list { diff --git a/img/tetris/ss1.png b/img/tetris/ss1.png Binary files differnew file mode 100644 index 0000000..b54a5b8 --- /dev/null +++ b/img/tetris/ss1.png diff --git a/img/tetris/ss2.png b/img/tetris/ss2.png Binary files differnew file mode 100644 index 0000000..5abf81c --- /dev/null +++ b/img/tetris/ss2.png diff --git a/projects.html b/projects.html index c1d5480..c2bdc97 100644 --- a/projects.html +++ b/projects.html @@ -20,9 +20,12 @@ <h1 class="header">Projects</h1> <div id="inner_column"> <div class="button_list"> - <a class="button chess_button" href="projects/chess.html"> + <a class="button chess_button" href="/projects/chess.html"> <i class="fa-solid fa-chess-queen"></i> chess </a> + <a class="button tetris_button" href="/projects/tetris.html"> + <i class="fa-solid fa-square"></i> tetris + </a> </div> </div> </div> diff --git a/projects/tetris.html b/projects/tetris.html new file mode 100644 index 0000000..e799ecf --- /dev/null +++ b/projects/tetris.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>bendn - tetris</title> + <script + src="https://kit.fontawesome.com/be4f130556.js" + crossorigin="anonymous" + ></script> + <script src="/components/backbutton.js"></script> + <script src="/components/downloadbutton.js"></script> + <script src="/components/screenshotlist.js"></script> + + <link rel="stylesheet" href="/style/tetris.css" /> + <link rel="stylesheet" href="/style/styles.css" /> + </head> + <body> + <div id="wrapper"> + <back-button></back-button> + <h1 class="header">tetris</h1> + <div id="inner_column"> + <div class="button_list"> + <download-button game="tetris"></download-button> + <a class="button" href="https://bend-n.github.io/tetris"> + <i class="fa-solid fa-circle-play"></i> play + </a> + <a class="button" href="https://bendn.itch.io/tetris"> + <i class="fa-brands fa-itch-io"></i> view + </a> + </div> + <p>I made this one on the spur of a moment.</p> + <screenshot-list + images="/img/tetris/ss1.png /img/tetris/ss2.png" + ></screenshot-list> + </div> + </div> + </body> +</html> diff --git a/style/bouncy-screenshots.css b/style/bouncy-screenshots.css new file mode 100644 index 0000000..7f04d15 --- /dev/null +++ b/style/bouncy-screenshots.css @@ -0,0 +1,14 @@ +img.screenshot { + margin: 0 10px; + border-radius: 15px; + border: 5px solid var(--background-color); + transition: var(--transition-length) var(--ease) all; +} + +img.screenshot:hover { + transform: scale(1.09); +} + +.screenshot_list { + padding: 20px 0; +} diff --git a/style/chess.css b/style/chess.css index 6a7b6a5..808d912 100644 --- a/style/chess.css +++ b/style/chess.css @@ -1,3 +1,5 @@ +@import "/style/bouncy-screenshots.css"; + .header { font-size: 2em; } @@ -14,12 +16,3 @@ padding: 15px; text-align: center; } - -.screenshot { - border-radius: 15px; - border: 5px solid var(--background-color); -} - -.screenshot_list { - padding: 20px 0; -} diff --git a/style/styles.css b/style/styles.css index e39631f..e79cc11 100644 --- a/style/styles.css +++ b/style/styles.css @@ -19,6 +19,7 @@ :root { --background-color: #002b36; --background2-color: #073642; + --button-text-color: var(--text-color); --button-color: #268bd2; --background-border-color: var(--button-color); --text-color: #eee8d5; @@ -40,7 +41,7 @@ button, text-decoration: none; display: inline-block; border: none; - color: var(--text-color); + color: var(--button-text-color); transition: var(--transition-length) var(--ease) all; } button:hover, diff --git a/style/tetris.css b/style/tetris.css new file mode 100644 index 0000000..26c5b5f --- /dev/null +++ b/style/tetris.css @@ -0,0 +1,32 @@ +@import "/style/bouncy-screenshots.css"; + +#wrapper { + padding-bottom: 20px; + padding-top: 20px; + background-image: repeating-linear-gradient( + #eee8d5 0 5px, + transparent 5px 100% + ), + repeating-linear-gradient(90deg, #eee8d5 0 5px, transparent 5px 100%); + background-size: 30px 30px; + background-color: #fdf6e3 !important; +} + +#inner_column { + width: 900px; + border: 5px solid #dc322f; + border-radius: 10px; +} + +:root { + --text-color: #657b83 !important; + --highlight-text-color: #586e75 !important; + --background-color: #eee8d5 !important; + --background2-color: #fdf6e3 !important; + --button-text-color: #eee8d5 !important; +} + +.button_list { + padding: 15px; + text-align: center; +} |
