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

Site rework

Browse source
This commit is contained in:
MeowcaTheoRange 2023-12-21 00:23:50 -06:00
parent 16e38ad4b2
commit 6e1bff0abb
25 changed files with 123 additions and 578 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -2,3 +2,6 @@ node_modules/
package-lock.json package-lock.json
output/ output/
.vercel .vercel
# the world isn't ready yet
views/projects/item/wavetapper

1
embeds/loader.html
View file

@ -1,3 +1,4 @@
<!-- Put this template in all pages that require JavaScript! -->
<div <div
style=" style="
position: absolute; position: absolute;

9
embeds/nav.html
View file

@ -4,13 +4,8 @@
<a href="/site/">Site Information</a> <a href="/site/">Site Information</a>
</p> </p>
<p> <p>
<a href="/blog/?blog=mtr">Blog</a>
<a href="/blog/?blog=stories">Stories</a>
<a href="/blog/?src=img">Images</a>
</p>
<p>
<a href="/links/">Links</a>
<a href="/projects/">Projects</a> <a href="/projects/">Projects</a>
<a href="/about/">About</a> <a href="/domain/">Domain</a>
<a href="/links/">Links</a>
</p> </p>
</section> </section>

49
views/blog/index.html
View file

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Blog - abtmtr.link</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--base-scale: 16px;
--background-color: hsl(15, 100%, 15%);
--color: hsl(15, 100%, 85%);
--accent-color: hsl(15, 100%, 50%);
--accent-color-fg: hsl(15, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
}
</style>
</head>
<body>
<$ loader.html $>
<header>
<section>
<h1>Blog</h1>
<p>A place where I post unhinged ramblings (blog posts).</p>
</section>
<$ nav.html $>
<section id="accessibility" hidden></section>
</header>
<section id="data_get">
<h1>Getting blogs...</h1>
</section>
<div id="WindowHolder"></div>
<section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_blog.js"></script>
<script>
window.manager = new WindowManager(
document.getElementById("WindowHolder")
);
</script>
</body>
</html>

35
views/blog/post/index.html
View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Blog - abtmtr.link</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--base-scale: 16px;
--background-color: hsl(15, 100%, 15%);
--color: hsl(15, 100%, 85%);
--accent-color: hsl(15, 100%, 50%);
--accent-color-fg: hsl(15, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
}
</style>
</head>
<body>
<$ loader.html $>
<section id="data_get">
<h1>Getting post...</h1>
</section>
<section id="accessibility" hidden></section>
<script src="/scripts/accessibility.js"></script>
<script src="./scripts/showdown.min.js"></script>
<script src="./scripts/data_get_blog_post.js"></script>
</body>
</html>

24
views/blog/post/scripts/data_get_blog_post.js
View file

@ -1,24 +0,0 @@
const data_get = document.getElementById("data_get");
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get("src") || "blog";
const blog = urlParams.get("blog") || "mtr";
const conv = new showdown.Converter({
simplifiedAutoLink: true,
simpleLineBreaks: true,
requireSpaceBeforeHeadingText: true,
encodeEmails: true,
excludeTrailingPunctuationFromURLs: true,
omitExtraWLInCodeBlocks: true,
});
fetch(
`https://${source}.abtmtr.link/api/collections/${blog}/posts/${urlParams.get(
"slug"
)}?body=html`
)
.then((x) => x.json())
.then(({ data }) => {
data_get.innerHTML = `<h1>${data.title}</h1>
<section>${conv.makeHtml(data.body.replace(/#\w+/gim, ""))}</section>`;
});

3
views/blog/post/scripts/showdown.min.js vendored
View file

File diff suppressed because one or more lines are too long

34
views/blog/scripts/data_get_blog.js
View file

@ -1,34 +0,0 @@
const data_get = document.getElementById("data_get");
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get("src") || "blog";
const blog = urlParams.get("blog") || "mtr";
fetch(
`https://${source}.abtmtr.link/api/collections/${blog}/posts?body=html&page=${
urlParams.get("page") || 1
}`
)
.then((x) => x.json())
.then(({ data }) => {
data_get.innerHTML = `<style>${data.style_sheet}</style>
${data.posts
.map(
(post) => `
<h1><a href="/blog/post/?blog=${data.alias}&slug=${
post.slug
}&src=${source}" target="_blank">${post.title}</a></h1>
<p>
<button
onclick="window.manager.createWindow('/blog/post/?blog=${
data.alias
}&slug=${post.slug}&src=${source}', false)"
>
Open in Window
</button>
</p>
<p>Posted ${new Date(post.created).toLocaleDateString()}</p>
${source == "img" ? `<p><img src="${post.images[0]}" /></p>` : ""}`
)
.join("")}
`;
});

13
views/branding/index.html
View file

@ -7,17 +7,8 @@
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 0, 0%;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: hsl(0, 0%, 65%);
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
.chip { .chip {
@ -131,8 +122,6 @@
</section> </section>
</main> </main>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_member.js"></script>
</body> </body>
</html> </html>

17
views/about/index.html → views/domain/index.html
View file

@ -2,22 +2,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>About - abtmtr.link</title> <title>Domain - abtmtr.link</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 15, 100%;
--background-color: hsl(15, 100%, 15%);
--color: hsl(15, 100%, 85%);
--accent-color: hsl(15, 100%, 50%);
--accent-color-fg: hsl(15, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>
@ -25,8 +16,8 @@
<$ loader.html $> <$ loader.html $>
<header> <header>
<section> <section>
<h1>About</h1> <h1>Domain</h1>
<p>More about this domain.</p> <p>What's on this domain.</p>
</section> </section>
<$ nav.html $> <$ nav.html $>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>

10
views/about/scripts/data_get_domain.js → views/domain/scripts/data_get_domain.js
View file

@ -6,13 +6,9 @@ fetch("https://blog.abtmtr.link/api/collections/paste/posts/domain")
data_get.innerHTML = data.reduce( data_get.innerHTML = data.reduce(
(html, subdomain) => (html, subdomain) =>
html + html +
`<h1><a href="${subdomain.url}" target="_blank">${ `<h1><a href="${subdomain.url}" target="_blank">${subdomain.name}</a></h1>
subdomain.name ${subdomain.description.map((x) => `<p>${x}</p>`).join("")}
}</a></h1> <img src="${subdomain.src}" alt="${subdomain.name}" title="${subdomain.name}" />`,
${subdomain.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`,
""
)}`,
"" ""
); );
}); });

11
views/index.html
View file

@ -8,17 +8,8 @@
<link rel="stylesheet" href="/styles/windows.css" /> <link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 195, 100%;
--background-color: hsl(195, 100%, 15%);
--color: hsl(195, 100%, 85%);
--accent-color: hsl(195, 100%, 50%);
--accent-color-fg: hsl(195, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>

11
views/links/index.html
View file

@ -7,17 +7,8 @@
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 270, 100%;
--background-color: hsl(270, 100%, 15%);
--color: hsl(270, 100%, 85%);
--accent-color: hsl(270, 100%, 65%);
--accent-color-fg: hsl(270, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>

11
views/projects/index.html
View file

@ -8,17 +8,8 @@
<link rel="stylesheet" href="/styles/windows.css" /> <link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 15, 100%;
--background-color: hsl(15, 100%, 15%);
--color: hsl(15, 100%, 85%);
--accent-color: hsl(15, 100%, 50%);
--accent-color-fg: hsl(15, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>

13
views/projects/item/hex/index.html
View file

@ -8,19 +8,8 @@
<link rel="stylesheet" href="/styles/windows.css" /> <link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 0, 0%;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
--border-style: 0.0625em solid var(--color);
} }
</style> </style>
</head> </head>

326
views/projects/item/normalize/index.html
View file

@ -7,19 +7,8 @@
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 0, 0%;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
--border-style: 0.0625em solid var(--color);
} }
</style> </style>
</head> </head>
@ -33,8 +22,8 @@
<main> <main>
<section> <section>
<p> <p>
Normalize is a simple CSS library made to provide good-looking Normalize is a simple CSS library made to provide good-looking yet
yet simple HTML element styles. simple HTML element styles.
</p> </p>
<p> <p>
It supports theming, natural HTML semantics, document width limiting, It supports theming, natural HTML semantics, document width limiting,
@ -65,280 +54,77 @@
This is a good start for all Normalize-based pages. Make sure to use This is a good start for all Normalize-based pages. Make sure to use
good HTML practices. good HTML practices.
</p> </p>
</section>
<section>
<h2>Theming</h2> <h2>Theming</h2>
<p> <p>
If you want a custom style for your page, you can use a stylesheet If you want a custom style for your page, you can use a stylesheet
definition at the top of your page or in a stylesheet file. definition at the top of your page or in a stylesheet file.
</p> </p>
<p>In Normalize, the unit <code>em</code> is used for most values. You should also use this unit when defining your custom styles.</p> <p>
In Normalize, the unit <code>em</code> is used for most values. You
should also use this unit when defining your custom styles.
</p>
<p> <p>
Normalize supports the following properties in <code>:root</code>: Normalize supports the following properties in <code>:root</code>:
</p> </p>
<ul> <ul>
<li> <li>
<code>--base-scale</code> - should be a <code>px</code> or <code>--base-scale</code> - The defining em-size of the document, in
<code>pt</code> value. This is the em-scale for the entire page. anything but em.
Therefore,
<b>you should not use <code>em</code> for this property!</b>
</li> </li>
<li> <li>
<code>--document-width</code> - The width of the whole document.</b> <code>--document-width</code> - The width of the document, in em.
</li> </li>
<li> <li>
<code>--background-color</code> - The background color of the page.</b> <code>--base-color</code> - The basic color of the page, used for
all values below. You can use this for a quick, single-color theme.
</li> </li>
<li><code>--font-family</code> - The font used in the document.</li>
<li> <li>
<code>--color</code> - The text color of the page. Should contrast well with <code>--background-color</code>.</b> <code>--font-weight</code> - The weight of the font used in the
</li> document.
<li>
<code>--accent-color</code> - The main color of interactive elements, such as <code>&lt;button&gt;</code> or <code>&lt;input type="checkbox" /&gt;</code>.</b>
</li>
<li>
<code>--accent-color-fg</code> - The secondary color of interactive elements. Should contrast well with <code>--accent-color</code>.</b>
</li>
<li>
<code>--font-family</code> - The font that the document will use.</b>
</li>
<li>
<code>--font-weight</code> - The font weight that the document will use.</b>
</li>
<li>
<code>--border-style</code> - The border style of special elements, such as <code>&lt;fieldset&gt;</code> or <code>&lt;input&gt;</code>.</b>
</li>
<li>
<code>--border-radius</code> - The roundness of special elements.</b>
</li> </li>
</ul> </ul>
<h3>Example styles</h3> <h3>Advanced Theming</h3>
<pre> <ul>
&lt;style&gt; <li>
:root { <code>--underlay-color</code> - The underlay color of the document.
--base-scale: 14px; </li>
--document-width: 40em; <li><code>--background-color</code> - The page color.</li>
<li><code>--color</code> - The foreground color of the page.</li>
--background-color: #111; <li><code>--accent-color</code> - The accent color of the page.</li>
--color: #0F0; <li>
<code>--accent-color-fg</code> - The foreground accent color of the
--accent-color: #0f0; page.
--accent-color-fg: #111; </li>
<li>
--font-family: monospace; <code>--border-style</code> - The style of the borders used on
certain elements.
--border-style: 0.0625em solid var(--color); </li>
--border-radius: 0 0 0.5em 0; <li>
} <code>--border-radius</code> - The radius of the borders used on
&lt;/style&gt;</pre certain elements.
> </li>
<iframe srcdoc=" </ul>
<!DOCTYPE html> </section>
<html> <section>
<head> <h2>Good Pairings</h2>
<meta charset=&quot;utf-8&quot; /> <p>
<title>Normalize</title> Just like a fine wine, Normalize can also be paired with different
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /> libraries to make amazingly functional (yet lightweight!) webpages.
<link rel=&quot;stylesheet&quot; href=&quot;/styles/normal.css&quot; /> </p>
<style> <h3><a href="https://htmx.org/">htmx</a></h3>
:root { <p>
--base-scale: 14px; htmx is an HTML hypertext enhancer. It can be used to create powerful
--document-width: 40em; websites, and replace JavaScript scripts with simple functions, all in
HTML.
--background-color: #111; </p>
--color: #0F0; <p>
It's an amazing Normalize pairing because it aims to improve the
--accent-color: #0f0; spirit of HTML - just keeping it vanilla, but extending it in a way
--accent-color-fg: #111; that is infinitely useful.
</p>
--font-family: monospace;
--border-style: 0.0625em solid var(--color);
--border-radius: 0 0 0.5em 0;
}
</style>
</head>
<body>
<h1>The Hecker Den</h1>
<p>pwn'd Normalize</p>
<button>Heck the Bank</button>
</body>
</html>
" loading="lazy"></iframe>
<pre>
&lt;style&gt;
:root {
--base-scale: 18px;
--document-width: 40em;
--background-color: #fed;
--color: #000;
--accent-color: transparent;
--accent-color-fg: #000;
--font-family: cursive;
--border-style: 0.1em solid var(--color);
--border-radius: 2em;
}
&lt;/style&gt;
</pre>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<meta charset=&quot;utf-8&quot; />
<title>Normalize</title>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; />
<link rel=&quot;stylesheet&quot; href=&quot;/styles/normal.css&quot; />
<style>
:root {
--base-scale: 18px;
--document-width: 40em;
--background-color: #fed;
--color: #000;
--accent-color: transparent;
--accent-color-fg: #000;
--font-family: cursive;
--border-style: 0.1em solid var(--color);
--border-radius: 2em;
}
</style>
</head>
<body>
<h1>And as such, a test is born.</h1>
<p>Greetings, Normalize!</p>
<button>Wee snaw</button>
</body>
</html>
" loading="lazy"></iframe>
<pre>
&lt;style&gt;
:root {
--base-scale: 1rem;
--document-width: 100%;
--background-color: #fff;
--color: #000;
--accent-color: #808080;
--accent-color-fg: #fff;
--font-family: serif;
--border-style: 0.125em solid var(--color);
--border-radius: 0.25em;
}
&lt;/style&gt;
</pre>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<meta charset=&quot;utf-8&quot; />
<title>Normalize</title>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; />
<link rel=&quot;stylesheet&quot; href=&quot;/styles/normal.css&quot; />
<style>
:root {
--base-scale: 1rem;
--document-width: 100%;
--background-color: #fff;
--color: #000;
--accent-color: #808080;
--accent-color-fg: #fff;
--font-family: serif;
--border-style: 0.125em solid var(--color);
--border-radius: 0.25em;
}
</style>
</head>
<body>
<h1>my first website</h1>
<p>1337 normalize</p>
<button>Wee snaw</button>
</body>
</html>
" loading="lazy"></iframe>
<pre>
&lt;style&gt;
@import url(&quot;https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap&quot;);
:root {
--base-scale: 32px;
--document-width: 100%;
--background-color: #fff;
--color: #000;
--accent-color: #000;
--accent-color-fg: #fff;
--font-family: &quot;Lexend Deca&quot;;
--border-style: 0.25em solid var(--accent-color);
--border-radius: 2em;
}
&lt;/style&gt;
</pre>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<meta charset=&quot;utf-8&quot; />
<title>Normalize</title>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; />
<link rel=&quot;stylesheet&quot; href=&quot;/styles/normal.css&quot; />
<style>
@import url(&quot;https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap&quot;);
:root {
--base-scale: 32px;
--document-width: 100%;
--background-color: #fff;
--color: #000;
--accent-color: #000;
--accent-color-fg: #fff;
--font-family: &quot;Lexend Deca&quot;;
--border-style: 0.25em solid var(--accent-color);
--border-radius: 2em;
}
</style>
</head>
<body>
<h1>National Association of the Visually Impaired</h1>
<p>Bonjour, Normalize!</p>
<button>Wee snaw</button>
</body>
</html>
" loading="lazy"></iframe>
<h2>Keeping it Simple</h2>
<p>If you want to keep it simple, simply apply the <code>.base</code> class to <code>html</code>.</p>
<p>This will override all custom styles, making it great for accessibility.</p>
<iframe srcdoc="
<!DOCTYPE html>
<html class=&quot;base&quot;>
<head>
<meta charset=&quot;utf-8&quot; />
<title>Normalize</title>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; />
<link rel=&quot;stylesheet&quot; href=&quot;/styles/normal.css&quot; />
</head>
<body>
<h1>Just a Website</h1>
<p>Nothing to see here.</p>
<button>Wee snaw</button>
</body>
</html>
" loading="lazy"></iframe>
</section> </section>
</main> </main>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>

11
views/projects/item/wm/index.html
View file

@ -8,17 +8,8 @@
<link rel="stylesheet" href="/styles/windows.css" /> <link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="./styles/endplorer.css" /> <link rel="stylesheet" href="./styles/endplorer.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 0, 0%;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: hsl(0, 0%, 50%);
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>

13
views/projects/item/woz/index.html
View file

@ -8,19 +8,8 @@
<link rel="stylesheet" href="/styles/windows.css" /> <link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 232, 95%;
--background-color: hsl(232, 95%, 15%);
--color: hsl(232, 95%, 85%);
--accent-color: #3a55fa;
--accent-color-fg: hsl(232, 95%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
--border-style: 0.0625em solid var(--color);
} }
</style> </style>
</head> </head>

11
views/real/resume/index.html
View file

@ -8,17 +8,8 @@
<link rel="stylesheet" href="/styles/normal_print.css" /> <link rel="stylesheet" href="/styles/normal_print.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 125, 100%;
--background-color: hsl(125, 100%, 15%);
--color: hsl(125, 100%, 85%);
--accent-color: hsl(125, 100%, 50%);
--accent-color-fg: hsl(125, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 50em;
} }
section.containsaside { section.containsaside {

3
views/scripts/accessibility.js
View file

@ -21,8 +21,7 @@ function createAccessibilityNodes() {
type="number" type="number"
style="width: 8ch" style="width: 8ch"
min="30" min="30"
max="100" value="50"
value="40"
/> />
Page width</label><br /> Page width</label><br />
<label for="acc-base" class="checkbox"> <label for="acc-base" class="checkbox">

2
views/scripts/data_get_whoami.js
View file

@ -13,7 +13,7 @@ fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
user.names[0].value user.names[0].value
}</b></a>, also better known online as <b>${ }</b></a>, also better known online as <b>${
user.name user.name
}</b>. <small>(${user.pronouns }</b>. <small>(${user.pronouns.filter((pronoun) => pronoun.status == "okay")
.map((pronoun) => pronoun.pronouns.split("/")[0]) .map((pronoun) => pronoun.pronouns.split("/")[0])
.join("/")})</small></p>`; .join("/")})</small></p>`;
const curTime = new Date(); const curTime = new Date();

8
views/scripts/windows.js
View file

@ -283,12 +283,12 @@ class WindowObject {
set x(x) { set x(x) {
this.windowObject.style.left = x + "px"; this.windowObject.style.left = x + "px";
this.dispatchEvent("windowmove", { detail: this, mouse: e }); this.dispatchEvent("windowmove", { detail: this });
} }
set y(y) { set y(y) {
this.windowObject.style.top = y = "px"; this.windowObject.style.top = y + "px";
this.dispatchEvent("windowmove", { detail: this, mouse: e }); this.dispatchEvent("windowmove", { detail: this });
} }
set width(w) { set width(w) {
@ -296,7 +296,7 @@ class WindowObject {
} }
set height(h) { set height(h) {
this.windowObject.style.height = h = "px"; this.windowObject.style.height = h + "px";
} }
// raiseWindow() { // raiseWindow() {

12
views/site/index.html
View file

@ -7,17 +7,8 @@
<link rel="stylesheet" href="/styles/normal.css" /> <link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root { :root {
--base-scale: 16px; --base-color: 125, 100%;
--background-color: hsl(125, 100%, 15%);
--color: hsl(125, 100%, 85%);
--accent-color: hsl(125, 100%, 50%);
--accent-color-fg: hsl(125, 100%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
} }
</style> </style>
</head> </head>
@ -58,7 +49,6 @@
</p> </p>
</section> </section>
</main> </main>
<script src="/scripts/windows.js"></script>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
</body> </body>
</html> </html>

65
views/styles/normal.css
View file

@ -35,43 +35,41 @@
/* Document form */ /* Document form */
:root { :root {
/* The defining em-size of the document, in anything but em. */
--base-scale: 16px; --base-scale: 16px;
--document-width: 40em; /* The width of the document, in em. */
--document-width: 50em;
--background-color: hsl(0, 0%, 15%); /* The basic color of the page, used for all values below. You can use this for a quick, single-color theme. */
--color: hsl(0, 0%, 85%); --base-color: 0, 0%;
--accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%);
/* The font used in the document. */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol"; "Segoe UI Symbol";
/* The weight of the font used in the document. */
--font-weight: normal; --font-weight: normal;
/* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 10%);
/* The page color. */
--background-color: hsl(var(--base-color), 15%);
/* The foreground color of the page. */
--color: hsl(var(--base-color), 85%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 50%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%);
/* The style of the borders used on certain elements. */
--border-style: calc(1em / 16) solid var(--color); --border-style: calc(1em / 16) solid var(--color);
/* The radius of the borders used on certain elements. */
--border-radius: 0; --border-radius: 0;
} }
body {
width: 100vw;
max-width: var(--document-width);
margin: auto;
padding-inline: 1em;
padding-block: 1em;
}
/* html {
/* Flexbox
height: 100vh;
width: 100vw;
display: flex;
justify-content: safe center;
align-items: safe center;
flex-direction: column;
} */
html.base { html.base {
--background-color: #fff !important; --underlay-color: #fff !important;
--background-color: transparent !important;
--color: #000 !important; --color: #000 !important;
--accent-color: #000 !important; --accent-color: #000 !important;
--accent-color-fg: #fff !important; --accent-color-fg: #fff !important;
@ -87,13 +85,6 @@ html.base {
transition: none; transition: none;
} }
/* html.base {
/* Flexbox
display: block;
height: auto;
width: auto;
} */
html.base body { html.base body {
margin: 0; margin: 0;
} }
@ -107,10 +98,20 @@ html.base * {
html { html {
font-size: var(--base-scale); font-size: var(--base-scale);
line-height: 1em; line-height: 1em;
background-color: var(--background-color); background-color: var(--underlay-color);
color: var(--color); color: var(--color);
} }
body {
width: 100vw;
background-color: var(--background-color);
max-width: var(--document-width);
min-height: 100vh;
margin: auto;
padding-inline: 2em;
padding-block: 1em;
}
main { main {
margin-block: 1em; margin-block: 1em;
} }

6
views/styles/style.css
View file

@ -1,3 +1,9 @@
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--font-family: "Lexend Deca";
}
#accessibility { #accessibility {
/* position: sticky; /* position: sticky;
bottom: 1em; bottom: 1em;