Site rework
This commit is contained in:
parent
16e38ad4b2
commit
6e1bff0abb
25 changed files with 123 additions and 578 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -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,3 +1,4 @@
|
||||||
|
<!-- Put this template in all pages that require JavaScript! -->
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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
3
views/blog/post/scripts/showdown.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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("")}
|
|
||||||
`;
|
|
||||||
});
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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>`,
|
|
||||||
""
|
|
||||||
)}`,
|
|
||||||
""
|
""
|
||||||
);
|
);
|
||||||
});
|
});
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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><button></code> or <code><input type="checkbox" /></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><fieldset></code> or <code><input></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>
|
||||||
<style>
|
<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
|
||||||
</style></pre
|
certain elements.
|
||||||
>
|
</li>
|
||||||
<iframe srcdoc="
|
</ul>
|
||||||
<!DOCTYPE html>
|
</section>
|
||||||
<html>
|
<section>
|
||||||
<head>
|
<h2>Good Pairings</h2>
|
||||||
<meta charset="utf-8" />
|
<p>
|
||||||
<title>Normalize</title>
|
Just like a fine wine, Normalize can also be paired with different
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
libraries to make amazingly functional (yet lightweight!) webpages.
|
||||||
<link rel="stylesheet" href="/styles/normal.css" />
|
</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>
|
|
||||||
<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>
|
|
||||||
</pre>
|
|
||||||
<iframe srcdoc="
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Normalize</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="stylesheet" href="/styles/normal.css" />
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</pre>
|
|
||||||
<iframe srcdoc="
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Normalize</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="stylesheet" href="/styles/normal.css" />
|
|
||||||
<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>
|
|
||||||
<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: 32px;
|
|
||||||
--document-width: 100%;
|
|
||||||
|
|
||||||
--background-color: #fff;
|
|
||||||
--color: #000;
|
|
||||||
|
|
||||||
--accent-color: #000;
|
|
||||||
--accent-color-fg: #fff;
|
|
||||||
|
|
||||||
--font-family: "Lexend Deca";
|
|
||||||
|
|
||||||
--border-style: 0.25em solid var(--accent-color);
|
|
||||||
--border-radius: 2em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</pre>
|
|
||||||
<iframe srcdoc="
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Normalize</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="stylesheet" href="/styles/normal.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: 32px;
|
|
||||||
--document-width: 100%;
|
|
||||||
|
|
||||||
--background-color: #fff;
|
|
||||||
--color: #000;
|
|
||||||
|
|
||||||
--accent-color: #000;
|
|
||||||
--accent-color-fg: #fff;
|
|
||||||
|
|
||||||
--font-family: "Lexend Deca";
|
|
||||||
|
|
||||||
--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="base">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Normalize</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="stylesheet" href="/styles/normal.css" />
|
|
||||||
</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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue