Who I am.
+abtmtr.link is a website. that's for sure
+diff --git a/assets/components/about-boxes/style.css b/assets/components/about-boxes/style.css index 14e103f..6a1d47c 100644 --- a/assets/components/about-boxes/style.css +++ b/assets/components/about-boxes/style.css @@ -1,7 +1,7 @@ .Aboutbox { display: flex; flex-direction: column; - align-items: center; + align-items: stretch; justify-content: start; gap: 8px; width: 100%; @@ -9,14 +9,17 @@ border: 1px solid currentColor; padding: 8px; - background: var(--background) var(--tiles-diag-black); + background: var(--background) var(--tiles-last-black); + box-shadow: inset var(--inset) var(--inset) 0 var(--foreground); .AboutboxElement { + --height: 150px; width: 100%; - height: 200px; + height: var(--height); display: grid; box-sizing: border-box; - grid-template-columns: 1fr calc(200px - 2px); + grid-template-columns: 1fr calc(var(--height) - 2px); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); border: 1px solid currentColor; background: var(--background); diff --git a/assets/components/computer-boxes/style.css b/assets/components/computer-boxes/style.css new file mode 100644 index 0000000..4ee0262 --- /dev/null +++ b/assets/components/computer-boxes/style.css @@ -0,0 +1,27 @@ +.Computerbox { + border: 1px solid currentColor; + padding: 8px; + background-color: var(--background); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); + + .ComputerboxDesc { + h2 { + font-family: var(--font-text-top); + } + + h2, p { + margin: 0; + } + + div:first-child { + text-align: start; + } + div:last-child { + text-align: end; + } + } + + p { + margin: 0; + } +} \ No newline at end of file diff --git a/assets/components/header/style.css b/assets/components/header/style.css index 8d4ef1e..2b95645 100644 --- a/assets/components/header/style.css +++ b/assets/components/header/style.css @@ -7,6 +7,8 @@ padding: 8px; gap: 8px; font-size: 16px; + background: transparent var(--tiles-last-black); + box-shadow: inset var(--inset) var(--inset) 0 var(--foreground); .HeaderTop { display: grid; @@ -16,6 +18,9 @@ box-sizing: border-box; border: 1px solid currentColor; font-family: var(--font-text-top); + font-weight: bold; + background: var(--background); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); .HeaderTopImage { width: 100%; @@ -32,18 +37,22 @@ align-items: center; justify-content: center; box-sizing: border-box; - background: linear-gradient(to right, white, transparent, transparent), - var(--tiles-diag-black); h1, p { margin: 0; } + p { + /* letter-spacing: 0.2em; */ + line-height: 0.8em; + } + h1 { font-weight: normal; font-size: 2.5em; line-height: 1em; + /* letter-spacing: 0.1em; */ } } } @@ -65,7 +74,8 @@ border: 1px solid currentColor; color: currentColor; text-decoration: inherit; - background: transparent var(--tiles-diag-black); + background: var(--background); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); } } } diff --git a/assets/components/link-boxes/style.css b/assets/components/link-boxes/style.css new file mode 100644 index 0000000..bb395f5 --- /dev/null +++ b/assets/components/link-boxes/style.css @@ -0,0 +1,19 @@ +.Linkbox { + border: 1px solid currentColor; + padding: 8px; + background-color: var(--background); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); + + h2 { + margin: 0; + font-family: var(--font-text-top); + } + + p { + margin: 0.5em 0; + } + + :last-child { + margin: 0; + } +} \ No newline at end of file diff --git a/assets/components/service-boxes/style.css b/assets/components/service-boxes/style.css new file mode 100644 index 0000000..5bef73e --- /dev/null +++ b/assets/components/service-boxes/style.css @@ -0,0 +1,21 @@ +.Servicebox { + border: 1px solid currentColor; + padding: 8px; + background-color: var(--background); + box-shadow: var(--inset) var(--inset) 0 var(--foreground); + + h2 { + font-family: var(--font-text-top); + } + + h2, p { + margin: 0; + } + + div:first-child { + text-align: start; + } + div:last-child { + text-align: end; + } +} \ No newline at end of file diff --git a/assets/components/style.css b/assets/components/style.css index 9f266e9..6445ba1 100644 --- a/assets/components/style.css +++ b/assets/components/style.css @@ -1,2 +1,5 @@ @import url("./header/style.css"); @import url("./about-boxes/style.css"); +@import url("./computer-boxes/style.css"); +@import url("./service-boxes/style.css"); +@import url("./link-boxes/style.css"); \ No newline at end of file diff --git a/assets/favicon.ico b/assets/favicon.ico deleted file mode 100644 index 2ccb4c9..0000000 Binary files a/assets/favicon.ico and /dev/null differ diff --git a/assets/icons/about.png b/assets/icons/about.png new file mode 100644 index 0000000..4af646f Binary files /dev/null and b/assets/icons/about.png differ diff --git a/assets/icons/computers.png b/assets/icons/computers.png new file mode 100644 index 0000000..1f8d812 Binary files /dev/null and b/assets/icons/computers.png differ diff --git a/assets/icons/friends.png b/assets/icons/friends.png new file mode 100644 index 0000000..ff96cc7 Binary files /dev/null and b/assets/icons/friends.png differ diff --git a/assets/icons/links.png b/assets/icons/links.png new file mode 100644 index 0000000..43e7652 Binary files /dev/null and b/assets/icons/links.png differ diff --git a/assets/icons/matkap_zone.png b/assets/icons/matkap_zone.png new file mode 100644 index 0000000..47ce0cc Binary files /dev/null and b/assets/icons/matkap_zone.png differ diff --git a/assets/icons/projects.png b/assets/icons/projects.png new file mode 100644 index 0000000..9407af7 Binary files /dev/null and b/assets/icons/projects.png differ diff --git a/assets/icons/services.png b/assets/icons/services.png new file mode 100644 index 0000000..847691e Binary files /dev/null and b/assets/icons/services.png differ diff --git a/assets/matkap/me.jpg b/assets/matkap/me.jpg new file mode 100644 index 0000000..ae16c4c Binary files /dev/null and b/assets/matkap/me.jpg differ diff --git a/assets/style.css b/assets/style.css index 9945c16..1ddb3b9 100644 --- a/assets/style.css +++ b/assets/style.css @@ -4,13 +4,33 @@ :root { --background: #fff; --red: #f00; - --grey: #ccc; + --grey: #888; --foreground: #000; - --tiles-diag-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVQImWNgYGBwYEAAB0ZkDgMaxwErBwA4twHCVgI5sAAAAABJRU5ErkJggg=="); - --tiles-diag-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQImWP4//+/AwMU/P//34ERmcOAzIELoHAYGBgAAxcWrY397t4AAAAASUVORK5CYII="); - --tiles-last-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC"); - --tiles-last-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg=="); + --inset: 2px; + + --image-filter: none; + + --tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg=="); + --tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC"); + --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC"); + --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg=="); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #000; + --red: #0ff; + --grey: #888; + --foreground: #fff; + + --image-filter: invert(1); + + --tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg=="); + --tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC"); + --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC"); + --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg=="); + } } html { @@ -20,11 +40,11 @@ html { body { margin: 0; - padding: 8px; + padding: 16px; box-sizing: border-box; min-height: 100%; width: 100%; - background: var(--background) var(--tiles-diag-black); + background: var(--background) var(--tiles-last-black); text-align: center; font-family: var(--font-text-legible); } @@ -32,6 +52,7 @@ body { main { text-align: start; display: inline-block; + width: 100%; max-width: 768px; box-sizing: border-box; background-color: var(--background); @@ -39,6 +60,7 @@ main { color: var(--foreground); min-height: 100%; padding: 8px; + box-shadow: 4px 4px 0 var(--foreground); } section { @@ -46,5 +68,42 @@ section { } a { - color: black; + color: var(--foreground); } + +img[src^="/assets"], +img[src^="/favicon.ico"] { + filter: var(--image-filter); +} + +.tagline { + text-align: center; +} + +hr { + border: none; + border-top: 1px solid currentColor; + color: inherit; + background-color: transparent; +} + +.boxThing { + padding: 1rem; + margin: 16px 8px; + border: 1px solid currentColor; + background: var(--background); + box-sizing: border-box; + box-shadow: var(--inset) var(--inset) 0 var(--foreground); + + h1 { + margin-bottom: 0.5em; + font-family: var(--font-text-top); + } + + :first-child { + margin-top: 0; + } + :last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/index.js b/index.js index 5aeff68..5104e69 100644 --- a/index.js +++ b/index.js @@ -2,17 +2,76 @@ import express from "express"; import { config } from "dotenv"; import path from "path"; +const __dirname = import.meta.dirname; + const app = express(); app.set('view engine', 'ejs'); app.use('/assets', express.static('assets')); +app.set('views', path.join(__dirname, "views", "pages")); + +app.locals = { + visibility: [ + "Backend", + "Personal", + "Friends-only", + "Login-only", + "Public" + ] +} config(); -app.get('/', (req, res) => { - res.render(path.join("pages", "index.ejs"), { +app.use(async (req, res, next) => { + const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()); + app.locals.buttons = buttonsJson; + next(); +}) +app.get('/', async (req, res) => { + const statusesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/statuses.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()); + + res.render('index', { + statuses: statusesJson }); +}) + +app.get('/services', async (req, res) => { + const servicesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/services.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()); + + res.render('services/index', { services: servicesJson }); +}); + +app.get('/computers', async (req, res) => { + const computersJson = await fetch("https://cdn.abtmtr.link/site_content/v13/computers.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()); + + res.render('computers/index', { computers: computersJson }); +}); + +app.get('/links', async (req, res) => { + const linksJson = await fetch("https://cdn.abtmtr.link/site_content/v13/links.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()); + + res.render('links/index', { + links: linksJson + }); +}); + +app.get('/matkap', (req, res) => { + res.render('matkap/index'); +}); + +app.get('/about', (req, res) => { + res.render('about/index'); }); app.get("/favicon.ico", (req, res) => { diff --git a/views/components/about-boxes.ejs b/views/components/about-boxes.ejs index 69dd9b2..e12b836 100644 --- a/views/components/about-boxes.ejs +++ b/views/components/about-boxes.ejs @@ -1,30 +1,37 @@
\ No newline at end of file diff --git a/views/components/computer-boxes.ejs b/views/components/computer-boxes.ejs new file mode 100644 index 0000000..a436869 --- /dev/null +++ b/views/components/computer-boxes.ejs @@ -0,0 +1,14 @@ +<%= whenGot.month %> <%= whenGot.year %>
+<%= model %>
+<%= description %>
+<%= subtitle %>
+<%= when.month %> <%= when.year %>
+<%= software %>
+<%= arr[visibility] %>
+Who I am.
+abtmtr.link is a website. that's for sure
+Computers I own, use, and host stuff on.
+abtmtr.link is a domain for a suite of services, from web search to live-streaming.
-<%= status.description %>
+<%= status.when.month %> <%= status.when.year %>
+abtmtr.link is a domain for all kinds of services, from web search to live-streaming.
<%- include("../components/about-boxes.ejs") %> <%- include("../components/footer.ejs") %>Where I am on the Internet.
+welcome to ...
+THE MATKAP ZONE!!!
+a cool friend made this header tysm!!
+this website is best viewed on a computer
+you can call me mat but some call me matkap
+ABOUT ME
+thanks for visiting!!!!!!!!
+ +this is my website! i sure hope you like it.
+ +this is me
im not very good at this website stuff someone help me
+ +Stuff I host here on abtmtr.link.
+