diff --git a/assets/components/header/style.css b/assets/components/header/style.css index 3a38124..73557ff 100644 --- a/assets/components/header/style.css +++ b/assets/components/header/style.css @@ -6,7 +6,7 @@ box-sizing: border-box; border: 1px solid currentColor; gap: 8px; - font-size: 16px; + /* font-size: 16px; */ background: transparent var(--tiles-last-black); box-shadow: inset var(--inset) var(--inset) 0 var(--foreground); @@ -20,7 +20,6 @@ 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); @@ -49,13 +48,17 @@ p { /* letter-spacing: 0.2em; */ line-height: 0.8em; + font-size: 1em; + font-family: var(--font-text-header); } h1 { font-weight: normal; - font-size: 2.5em; + font-family: var(--font-text-top); + /* looks weird on Firefox Windows */ + font-size: 2em; line-height: 1em; - /* letter-spacing: 0.1em; */ + /* letter-spacing: 0.0625em; */ } } } @@ -65,7 +68,6 @@ align-items: center; justify-content: safe center; font-family: var(--font-text-header); - font-weight: bold; font-size: 1em; overflow: auto; max-width: 100%; @@ -77,7 +79,7 @@ width: 100%; min-width: max-content; text-align: center; - padding: 0.5em; + padding: 0.25em; border: 1px solid currentColor; color: currentColor; text-decoration: inherit; diff --git a/assets/fonts/Fixedsys Excelsior/FSEX302.ttf b/assets/fonts/Fixedsys Excelsior/FSEX302.ttf new file mode 100644 index 0000000..4e019c8 Binary files /dev/null and b/assets/fonts/Fixedsys Excelsior/FSEX302.ttf differ diff --git a/assets/fonts/style.css b/assets/fonts/style.css index 0cc77d9..66195e4 100644 --- a/assets/fonts/style.css +++ b/assets/fonts/style.css @@ -35,10 +35,19 @@ font-weight: normal; } -:root { - --font-text-top: "Permanent Marker"; - --font-text-mono: "VCR OSD Mono"; - --font-text-legible: "Lexend"; - --font-text-header: "Comic Neue"; - --font-text-generic: "Helvetica"; +@font-face { + font-family: "Fixedsys"; + src: url("./Fixedsys%20Excelsior/FSEX302.ttf"); + font-weight: normal; +} + +:root { + --font-text-top: "Fixedsys"; + --font-text-mono: "Fixedsys"; + --font-text-legible: "Fixedsys"; + --font-text-header: "Fixedsys"; + --font-text-generic: "Fixedsys"; + font-size: 16px; + font-smooth: never; + -webkit-font-smoothing : none; } diff --git a/assets/style.css b/assets/style.css index 6a0dc46..6653966 100644 --- a/assets/style.css +++ b/assets/style.css @@ -17,7 +17,8 @@ --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg=="); } -@media (prefers-color-scheme: dark) { +/* i never liked this */ +/* @media (prefers-color-scheme: dark) { :root { --background: #000; --red: #0ff; @@ -31,7 +32,7 @@ --tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC"); --tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg=="); } -} +} */ html { height: 100%; @@ -40,12 +41,11 @@ html { body { margin: 0; - padding: 8px 16px; + padding: 0.5em 1em; box-sizing: border-box; min-height: 100%; width: 100%; background: var(--background) var(--tiles-last-black); - text-align: center; font-family: var(--font-text-legible); } @@ -58,11 +58,17 @@ main, div.fakemain { background-color: var(--background); border: 1px solid currentColor; color: var(--foreground); - padding: 8px; - margin: 8px auto; + padding: 0.5em; + margin: 1em auto; + margin-left: 4em; box-shadow: 4px 4px 0 var(--foreground); } +h1, h2, h3 { + font-size: 2em; + font-weight: normal; +} + section { margin: 1em; } @@ -71,6 +77,10 @@ a { color: var(--foreground); } +a:hover { + opacity: 0.75; +} + img[src^="/assets"], img[src^="/favicon.ico"] { filter: var(--image-filter); @@ -89,7 +99,7 @@ hr { .boxThing { padding: 1rem; - margin: 16px 8px; + margin: 1em 0.5em; border: 1px solid currentColor; background: var(--background); box-sizing: border-box; @@ -100,6 +110,12 @@ hr { font-family: var(--font-text-top); } + h1::before { + content: ">>"; + margin-inline-end: 0.25em; + opacity: 0.5; + } + :first-child { margin-top: 0; } @@ -108,12 +124,45 @@ hr { } } +@property --hue { + syntax: ''; + initial-value: 0; + inherits: false; +} + +@keyframes hue-shift { + 0% { + --hue: 0; + } + + 50% { + --hue: 180; + } + + 100% { + --hue: 360; + } +} + .web-button { position: relative; filter: grayscale(1); left: 0; top: 0; - transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: all 0.0625s ease-out; + opacity: 1 !important; + display: inline-block; + width: 88px; + height: 31px; + line-height: 31px; + border: 1px solid black; + vertical-align: middle; + margin: 4px 0; + text-decoration: none; + /* text-overflow: ellipsis; + overflow: hidden; + padding: 0 8px; + box-sizing: border-box; */ } .web-button:hover { @@ -121,5 +170,15 @@ hr { top: -4px; z-index: 999; filter: grayscale(0); - box-shadow: 4px 4px 16px #0008; + animation: hue-shift 1s linear infinite; + --shadow: hsl(var(--hue), 50%, 75%); + box-shadow: + 4px 4px 0 -1px var(--shadow), + 3px 3px 0 -1px var(--shadow), + 2px 2px 0 -1px var(--shadow), + 1px 1px 0 -1px var(--shadow), + 4px 4px 0 0px black, + 3px 3px 0 0px black, + 2px 2px 0 0px black, + 1px 1px 0 0px black; } \ No newline at end of file diff --git a/index.js b/index.js index 5104e69..4f4f3dd 100644 --- a/index.js +++ b/index.js @@ -25,8 +25,14 @@ config(); 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()); + .then((res) => res.json()) + .catch(() => res.status(500).send()); + const followingJson = await fetch("https://cdn.abtmtr.link/site_content/following.json") + .catch(() => res.status(500).send()) + .then((res) => res.json()) + .catch(() => res.status(500).send()); app.locals.buttons = buttonsJson; + app.locals.following = followingJson; next(); }) diff --git a/views/components/about-boxes.ejs b/views/components/about-boxes.ejs index bdb2a66..e12b836 100644 --- a/views/components/about-boxes.ejs +++ b/views/components/about-boxes.ejs @@ -27,4 +27,11 @@ +
+
+

ABOUT

+

Who I am.

+
+ +
\ No newline at end of file diff --git a/views/components/footer.ejs b/views/components/footer.ejs index 31d2d47..9fd37d2 100644 --- a/views/components/footer.ejs +++ b/views/components/footer.ejs @@ -1,13 +1,26 @@ \ No newline at end of file diff --git a/views/components/header.ejs b/views/components/header.ejs index 94d2ded..22f14e4 100644 --- a/views/components/header.ejs +++ b/views/components/header.ejs @@ -8,9 +8,9 @@
Home - matkap zone Services Computers Links + About
\ No newline at end of file diff --git a/views/pages/about/index.ejs b/views/pages/about/index.ejs index f4ea9ae..032cc90 100644 --- a/views/pages/about/index.ejs +++ b/views/pages/about/index.ejs @@ -16,7 +16,25 @@

Who I am.

-

abtmtr.link is a website. that's for sure

+

My h-card

+
+

Theo Range

+

(Mx. + Theo + Range) + (they/them, non-binary)

+

a.k.a "MeowcaTheoRange"

+ +

+ website, + email +

+

born

+

+ Minnesota, + USA +

+
diff --git a/views/pages/matkap/index.ejs b/views/pages/matkap/index.ejs index baa1753..95f5fe0 100644 --- a/views/pages/matkap/index.ejs +++ b/views/pages/matkap/index.ejs @@ -58,6 +58,19 @@