bendns' repos / bend-n.github.io
website
add pages
Browse Source
bendn 2022-09-03
parent c19e44b · commit 9ef00c8
Diffstat
-rw-r--r--.github/workflows/pages.yml3
-rw-r--r--README.md3
-rw-r--r--components/backbutton.js27
-rw-r--r--components/downloadbutton.js31
-rw-r--r--components/screenshotlist.js37
-rw-r--r--img/chess/ss1.pngbin0 -> 116688 bytes
-rw-r--r--img/chess/ss2.pngbin0 -> 94224 bytes
-rw-r--r--img/chess/ss3.pngbin0 -> 92825 bytes
-rw-r--r--index.html27
-rw-r--r--projects.html30
-rw-r--r--projects/chess.html40
-rw-r--r--style/chess.css25
-rw-r--r--style/index.css12
-rw-r--r--style/projects.css8
-rw-r--r--style/styles.css62
15 files changed, 299 insertions, 6 deletions
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 5828616..bfba722 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -35,8 +35,7 @@ jobs:
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
- # Upload entire repository
- path: '.'
+ path: "."
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
diff --git a/README.md b/README.md
index 6522c9a..1fd62cb 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
-# hey look its markdown
-beep
+# website
diff --git a/components/backbutton.js b/components/backbutton.js
new file mode 100644
index 0000000..cc6bfa7
--- /dev/null
+++ b/components/backbutton.js
@@ -0,0 +1,27 @@
+customElements.define(
+ "back-button",
+ class extends HTMLElement {
+ constructor() {
+ super();
+ }
+ connectedCallback() {
+ this.innerHTML = `
+<style>
+ .back_button {
+ position: fixed;
+ margin: 15px;
+ z-index: 100;
+ }
+</style>
+
+<button class="button back_button" onclick="goBack()">
+ <i class="fa-solid fa-caret-left"></i> back
+</button>`;
+ }
+ }
+);
+
+function goBack() {
+ if (typeof window.history.back() == "undefined")
+ window.location = "/index.html";
+}
diff --git a/components/downloadbutton.js b/components/downloadbutton.js
new file mode 100644
index 0000000..eb7f6b3
--- /dev/null
+++ b/components/downloadbutton.js
@@ -0,0 +1,31 @@
+customElements.define(
+ "download-button",
+ class extends HTMLElement {
+ constructor() {
+ super();
+ }
+ connectedCallback() {
+ if (!this.hasAttribute("game")) throw new Error("no game specified");
+ const game = this.getAttribute("game");
+ this.innerHTML = `
+<button class="button download_button" onclick="openDownloadPopup('${game}')">
+ <i class="fa-solid fa-download"></i> download
+</button>`;
+ }
+ }
+);
+
+function openDownloadPopup(game) {
+ const w = 680;
+ const h = 400;
+ const win = window.open(
+ `https://bendn.itch.io/${game}/purchase?popup=1`,
+ "purchase",
+ `scrollbars=1, resizable=no, width=${w}, height=${h}, top=${
+ (screen.height - h) / 2
+ }, left=${(screen.width - w) / 2}`
+ );
+ if (typeof win.focus === "function") {
+ win.focus();
+ }
+}
diff --git a/components/screenshotlist.js b/components/screenshotlist.js
new file mode 100644
index 0000000..2325e12
--- /dev/null
+++ b/components/screenshotlist.js
@@ -0,0 +1,37 @@
+customElements.define(
+ "screenshot-list",
+ class extends HTMLElement {
+ constructor() {
+ super();
+ }
+ connectedCallback() {
+ if (!this.hasAttribute("images")) throw new Error("no images supplied");
+ const images = this.getAttribute("images").split(" ");
+ let imgs = "";
+ images.forEach((image) => {
+ imgs += `<img class="screenshot" src="${image}"></img>`;
+ });
+ 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 {
+ text-align: center;
+ overflow-x: scroll;
+ }`;
+ const html = `
+ <style>${style}</style>
+ <div class=screenshot_list>${imgs}\n</div>`;
+ this.innerHTML = html;
+ console.log(html);
+ }
+ }
+);
diff --git a/img/chess/ss1.png b/img/chess/ss1.png
new file mode 100644
index 0000000..9b03959
--- /dev/null
+++ b/img/chess/ss1.png
Binary files differ
diff --git a/img/chess/ss2.png b/img/chess/ss2.png
new file mode 100644
index 0000000..3ab3476
--- /dev/null
+++ b/img/chess/ss2.png
Binary files differ
diff --git a/img/chess/ss3.png b/img/chess/ss3.png
new file mode 100644
index 0000000..6aeee91
--- /dev/null
+++ b/img/chess/ss3.png
Binary files differ
diff --git a/index.html b/index.html
index ee86e94..16c2426 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,30 @@
<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>Document</title>
+ <title>bendn</title>
+ <script
+ src="https://kit.fontawesome.com/be4f130556.js"
+ crossorigin="anonymous"
+ ></script>
+ <link rel="stylesheet" href="/style/index.css" />
+ <link rel="stylesheet" href="/style/styles.css" />
</head>
- <body></body>
+ <body>
+ <div id="wrapper">
+ <h1 class="header">Hello!</h1>
+ <div id="inner_column">
+ <div class="button_list">
+ <a href="projects.html" class="button projects_button">
+ <i class="fa-solid fa-folder"></i> projects
+ </a>
+ <a href="https://github.com/bend-n" class="button github_button">
+ <i class="fa-brands fa-github"></i> github
+ </a>
+ <a href="https://bendn.itch.io" class="button itch_button">
+ <i class="fa-brands fa-itch-io"></i> itch.io
+ </a>
+ </div>
+ </div>
+ </div>
+ </body>
</html>
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..c1d5480
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,30 @@
+<!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 - projects</title>
+ <script
+ src="https://kit.fontawesome.com/be4f130556.js"
+ crossorigin="anonymous"
+ ></script>
+ <script src="components/backbutton.js"></script>
+ <link rel="stylesheet" href="/style/projects.css" />
+ <link rel="stylesheet" href="/style/styles.css" />
+ </head>
+
+ <body>
+ <div id="wrapper">
+ <back-button></back-button>
+ <h1 class="header">Projects</h1>
+ <div id="inner_column">
+ <div class="button_list">
+ <a class="button chess_button" href="projects/chess.html">
+ <i class="fa-solid fa-chess-queen"></i> chess
+ </a>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/projects/chess.html b/projects/chess.html
new file mode 100644
index 0000000..8c0ab60
--- /dev/null
+++ b/projects/chess.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 - chess</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/chess.css" />
+ <link rel="stylesheet" href="/style/styles.css" />
+ </head>
+ <body>
+ <div id="wrapper">
+ <back-button></back-button>
+ <h1 class="header">Chess</h1>
+ <div id="inner_column">
+ <div class="button_list">
+ <download-button game="chess"></download-button>
+ <a class="button" href="https://bend-n.github.io/chess">
+ <i class="fa-solid fa-circle-play"></i> play
+ </a>
+ <a class="button" href="https://bendn.itch.io/chess">
+ <i class="fa-brands fa-itch-io"></i> view
+ </a>
+ </div>
+ <p>A simple chess project</p>
+ <screenshot-list
+ images="/img/chess/ss1.png /img/chess/ss2.png /img/chess/ss3.png"
+ ></screenshot-list>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/style/chess.css b/style/chess.css
new file mode 100644
index 0000000..6a7b6a5
--- /dev/null
+++ b/style/chess.css
@@ -0,0 +1,25 @@
+.header {
+ font-size: 2em;
+}
+
+#wrapper {
+ padding-bottom: 20px;
+ padding-top: 20px;
+ background-size: 30px 30px;
+ background: repeating-conic-gradient(#002b36 0% 25%, #073642 0% 50%) 50% /
+ 100px 100px;
+}
+
+.button_list {
+ padding: 15px;
+ text-align: center;
+}
+
+.screenshot {
+ border-radius: 15px;
+ border: 5px solid var(--background-color);
+}
+
+.screenshot_list {
+ padding: 20px 0;
+}
diff --git a/style/index.css b/style/index.css
new file mode 100644
index 0000000..3c7eb7a
--- /dev/null
+++ b/style/index.css
@@ -0,0 +1,12 @@
+.button_list {
+ padding: 15px;
+ text-align: center;
+}
+
+.button:hover {
+ margin: 0 2px;
+}
+
+.header {
+ font-size: 3em;
+}
diff --git a/style/projects.css b/style/projects.css
new file mode 100644
index 0000000..e308e06
--- /dev/null
+++ b/style/projects.css
@@ -0,0 +1,8 @@
+.header {
+ font-size: 2em;
+}
+
+.button_list {
+ padding: 15px;
+ text-align: center;
+}
diff --git a/style/styles.css b/style/styles.css
new file mode 100644
index 0000000..e39631f
--- /dev/null
+++ b/style/styles.css
@@ -0,0 +1,62 @@
+.header {
+ text-align: center;
+ font-weight: bold;
+ font-family: Verdana, Geneva, Tahoma, system-ui;
+ color: var(--highlight-text-color);
+}
+
+#wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ overflow: scroll;
+}
+
+:root {
+ --background-color: #002b36;
+ --background2-color: #073642;
+ --button-color: #268bd2;
+ --background-border-color: var(--button-color);
+ --text-color: #eee8d5;
+ --highlight-text-color: #fdf6e3;
+ --ease: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+ --transition-length: 0.25s;
+}
+
+button,
+.button {
+ border-radius: 5px;
+ background-color: var(--button-color);
+ padding: 0 10px;
+ font-size: 20px;
+ text-align: center;
+ font-weight: bold;
+ min-width: 45px;
+ line-height: 45px;
+ text-decoration: none;
+ display: inline-block;
+ border: none;
+ color: var(--text-color);
+ transition: var(--transition-length) var(--ease) all;
+}
+button:hover,
+.button:hover {
+ transform: scale(1.09);
+}
+
+#inner_column {
+ padding: 5px 20px;
+ background-color: var(--background2-color);
+ min-height: 300px;
+ height: 82%;
+ margin: 0 auto;
+ align-content: center;
+ width: 82%;
+ border: 5px solid var(--background-border-color);
+ border-radius: 10px;
+ overflow: scroll;
+}