MeowcaTheoRange/abtmtr-v13
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new style + more buttons

Browse source
This commit is contained in:
MeowcaTheoRange 2024-08-27 02:58:49 -05:00
parent 1531175c6f
commit 13e00d8cd7
10 changed files with 153 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/components/header/style.css
View file

@ -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;

BIN
assets/fonts/Fixedsys Excelsior/FSEX302.ttf Normal file
View file

Binary file not shown.

21
assets/fonts/style.css
View file

@ -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;
}

77
assets/style.css
View file

@ -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: '<number>';
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;
}

8
index.js
View file

@ -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();
})

7
views/components/about-boxes.ejs
View file

@ -27,4 +27,11 @@
</div>
<img class="AboutboxElementImage" src="/assets/icons/links.png" />
</div>
<div class="AboutboxElement">
<div class="AboutboxElementText">
<h1><a href="/about/">ABOUT</a></h1>
<p>Who I am.</p>
</div>
<img class="AboutboxElementImage" src="/assets/icons/about.png" />
</div>
</div>

17
views/components/footer.ejs
View file

@ -1,13 +1,26 @@
<footer>
<section>
<h2>abtmtr.link v13</h2>
<p>&copy; <a href="mailto:me@abtmtr.link">MeowcaTheoRange</a> 2023-2024</p>
<p>&copy; <a href="/about">MeowcaTheoRange</a> 2023-2024</p>
<p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p>
<p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p>
</section>
<section style="text-align: center;">
<% buttons.forEach((button) => { %>
<a href="<%= button.href %>"><img class="web-button" src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
<% if (button.img != null) { %>
<a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
<% } else { %>
<a class="web-button" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
<% } %>
<% }) %>
</section>
<section style="text-align: center;">
<% following.forEach((button) => { %>
<% if (button.img != null) { %>
<a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
<% } else { %>
<a class="web-button" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
<% } %>
<% }) %>
</section>
</footer>

2
views/components/header.ejs
View file

@ -8,9 +8,9 @@
</div>
<div class="HeaderLinks">
<a class="HeaderLinksLink" href="/">Home</a>
<a class="HeaderLinksLink" href="/matkap/">matkap zone</a>
<a class="HeaderLinksLink" href="/services/">Services</a>
<a class="HeaderLinksLink" href="/computers/">Computers</a>
<a class="HeaderLinksLink" href="/links/">Links</a>
<a class="HeaderLinksLink" href="/about/">About</a>
</div>
</div>

20
views/pages/about/index.ejs
View file

@ -16,7 +16,25 @@
<main>
<p class="tagline">Who I am.</p>
<section>
<p>abtmtr.link is a website. that's for sure</p>
<h2>My h-card</h2>
<div class="h-card" style="padding: 1em;">
<h3 style="margin: 0;"><span class="p-name">Theo Range</span></h3>
<p>(<span class="p-honorific-prefix">Mx.</span>
<span class="p-given-name">Theo</span>
<span class="p-family-name">Range</span>)
(<span class="p-pronouns">they/them</span>, <span class="p-gender-identity">non-binary</span>)</p>
<p>a.k.a "<span class="p-nickname">MeowcaTheoRange</span>"</p>
<img class="u-photo" src="http://abtmtr.link/favicon.ico"/>
<p>
<a class="u-url" href="http://abtmtr.link/">website</a>,
<a class="u-email" href="mailto:me@abtmtr.link">email</a>
</p>
<p>born <time class="dt-bday">2007-08-07</time></p>
<p class="p-adr">
<span class="p-region">Minnesota</span>,
<span class="p-country-name">USA</span>
</p>
</div>
</section>
</main>
<div class="fakemain">

13
views/pages/matkap/index.ejs
View file

@ -58,6 +58,19 @@
</main>
<script src="/assets/script.js"></script>
<style>
:root {
--font-text-top: "Permanent Marker";
--font-text-mono: "VCR OSD Mono";
--font-text-legible: "Helvetica";
--font-text-header: "Comic Neue";
--font-text-generic: "Helvetica";
font-size: 16px;
}
h1, h2 {
font-weight: bold;
}
main {
width: 768px;
}