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

Normalize project

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-30 22:48:59 -06:00
parent b37943ff12
commit 4018b3ae6a
14 changed files with 470 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
views/about/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<title>About - 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/style.css" />

2
views/blog/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>Project Windows</title>
<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" />

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

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>Project Windows</title>
<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" />

2
views/branding/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<title>Branding - 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/style.css" />

2
views/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<title>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" />

2
views/links/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<title>Links - 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/style.css" />

2
views/projects/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>Project Windows</title>
<title>Projects - 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" />

347
views/projects/normalize/index.html Normal file
View file

@ -0,0 +1,347 @@
<!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" />
<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(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>
</head>
<body>
<header>
<section>
<h1>Normalize</h1>
</section>
<section id="accessibility" hidden></section>
</header>
<main>
<section>
<p>
Normalize is a simple CSS library made to provide good-looking
yet simple HTML element styles.
</p>
<p>
It supports theming, natural HTML semantics, document width limiting,
and more, all while trying to stay true to the HTML spec.
</p>
<p>
If you're interested, feel free to
<a href="/styles/normal.css">import it</a> or
<a href="/styles/normal.css" download>download it</a> for your site.
</p>
<h2>Usage</h2>
<p>To get started, it's recommended to use this boilerplate:</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;title&gt;My Site&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;normal.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Website content goes here. --&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
This is a good start for all Normalize-based pages. Make sure to use
good HTML practices.
</p>
<h2>Theming</h2>
<p>
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.
</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>
Normalize supports the following properties in <code>:root</code>:
</p>
<ul>
<li>
<code>--base-scale</code> - should be a <code>px</code> or
<code>pt</code> value. This is the em-scale for the entire page.
Therefore,
<b>you should not use <code>em</code> for this property!</b>
</li>
<li>
<code>--document-width</code> - The width of the whole document.</b>
</li>
<li>
<code>--background-color</code> - The background color of the page.</b>
</li>
<li>
<code>--color</code> - The text color of the page. Should contrast well with <code>--background-color</code>.</b>
</li>
<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>
</ul>
<h3>Example styles</h3>
<pre>
&lt;style&gt;
:root {
--base-scale: 14px;
--document-width: 40em;
--background-color: #111;
--color: #0F0;
--accent-color: #0f0;
--accent-color-fg: #111;
--font-family: monospace;
--border-style: 0.0625em solid var(--color);
--border-radius: 0 0 0.5em 0;
}
&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: 14px;
--document-width: 40em;
--background-color: #111;
--color: #0F0;
--accent-color: #0f0;
--accent-color-fg: #111;
--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>
</main>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
</body>
</html>

18
views/projects/public/projects.json
View file

@ -1,12 +1,11 @@
[
{
"name": "HexFlagGen",
"date": 1700114400000,
"name": "Normalize",
"date": 1701404400000,
"description": [
"HexFlagGen is a flag generator inspired by how the <a href=\"https://en.wikipedia.org/wiki/Free_Speech_Flag\" target=\"_blank\">Free Speech Flag</a> was made.",
"I dislike DRM and support trans rights."
"Normalize is a simple CSS library made to provide good-looking yet simple HTML element styles."
],
"url": "/projects/hex/"
"url": "/projects/normalize/"
},
{
"name": "WozSteamGen",
@ -17,6 +16,15 @@
],
"url": "/projects/woz/"
},
{
"name": "HexFlagGen",
"date": 1700114400000,
"description": [
"HexFlagGen is a flag generator inspired by how the <a href=\"https://en.wikipedia.org/wiki/Free_Speech_Flag\" target=\"_blank\">Free Speech Flag</a> was made.",
"I dislike DRM and support trans rights."
],
"url": "/projects/hex/"
},
{
"name": "JellyBean's Mid-Sim",
"date": 1651986000000,

4
views/scripts/accessibility.js
View file

@ -53,10 +53,10 @@ function createAccessibilityNodes() {
});
}
window.addEventListener("load", (e) => initializeChanges(e, true));
window.addEventListener("DOMContentLoaded", (e) => initializeChanges(e, true));
// on localStorage change
window.addEventListener("storage", initializeChanges);
window.addEventListener("storage", (e) => initializeChanges(e, false));
let prevBase; // previous base, for reload check

2
views/scripts/interface.js
View file

@ -17,6 +17,6 @@ function propagateStyles(rootStyles, parent) {
wfParent.style.setProperty("--border-style", "0.0625em solid var(--color)");
}
window.addEventListener("load", () => {
window.addEventListener("DOMContentLoaded", () => {
propagateStyles(getComputedStyle(document.documentElement));
});

2
views/site/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<title>Site Information - 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/style.css" />

84
views/styles/normal.css
View file

@ -1,20 +1,55 @@
/*
* THE KARKAT PUBLIC LICENSE
* Version 1, November 2023
*
* Copyright (C) 2023 MeowcaTheoRange <me@abtmtr.link>
*
* EVERYONE IS FREE TO MODIFY, USE, AND DISTRIBUTE
* THE INCLUDED PROGRAM CODE AS LONG AS THE KARKAT
* PUBLIC LICENSE'S CONTENTS PERSIST WITHIN.
*
* BY DOING SO, YOU AGREE TO BE BOUND BY THIS
* LICENSE'S TERMS AND CONDITIONS:
*
* 0. YOU AGREE NOT TO BE A WUSS ABOUT IT.
* 1. YOU AGREE THAT THIS SHITTY PROGRAM COMES
* WITH NO WARRANTY.
* 2. YOU FROND PROMISE THAT YOU WON'T SUE IF
* YOUR COMPUTER EXPLODES BECAUSE OF THIS
* PROGRAM.
* 3. YOU AGREE THAT KARKAT IS THE BEST HACKER ON
* ALTERNIA.
*
* WRITE YOUR PROGRAM NAME HERE:
* Normalize (normal.css)
* WRITE THE NAME(S) OF THE PROGRAM CODE AUTHOR(S)
* HERE:
* MeowcaTheoRange <me@abtmtr.link>
*
* GREAT, NOW FUCK OFF.
*/
/* Import the true normalize.css library for consistency across browsers */
@import url("https://necolas.github.io/normalize.css/8.0.1/normalize.css");
/* Document form */
:root {
--base-scale: 16px;
--document-width: 40em;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: #808080;
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--document-width: 40em;
--font-weight: normal;
--border-style: calc(1em / 16) solid var(--color);
--border-radius: 0;
}
body {
@ -25,20 +60,40 @@ body {
padding-block: 1em;
}
/* html {
/* Flexbox
height: 100vh;
width: 100vw;
display: flex;
justify-content: safe center;
align-items: safe center;
flex-direction: column;
} */
html.base {
--background-color: #fff !important;
--color: #000 !important;
--accent-color: #000 !important;
--accent-color-fg: #fff !important;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--document-width: 40em;
--font-weight: normal;
--border-style: calc(1em / 16) solid var(--color);
--border-radius: 0;
transition: none;
}
/* html.base {
/* Flexbox
display: block;
height: auto;
width: auto;
} */
html.base body {
margin: 0;
}
@ -116,6 +171,17 @@ code {
font-family: monospace;
}
pre {
display: inline-block;
width: 100%;
overflow-x: auto;
font-size: 1em;
line-height: 1.25em;
padding: 0.5em;
margin-block: 0.5em;
box-sizing: border-box;
}
hr {
border: none;
border-top: var(--border-style);
@ -133,6 +199,7 @@ blockquote {
html {
font-family: var(--font-family);
font-weight: var(--font-weight);
}
* {
@ -145,6 +212,7 @@ html {
fieldset {
border: var(--border-style);
border-radius: var(--border-radius);
padding-inline: 0.5em;
padding-block: 0.25em;
margin-inline: 0;
@ -154,6 +222,13 @@ fieldset {
color: var(--color);
}
iframe {
border: var(--border-style);
border-radius: var(--border-radius);
width: 100%;
aspect-ratio: 16/9;
}
/* Interactive normalize */
a {
@ -174,6 +249,7 @@ select,
textarea {
font-family: inherit;
border: var(--border-style);
border-radius: var(--border-radius);
padding-inline: 0.5em;
padding-block: 0.25em;
margin-inline: 0;
@ -192,6 +268,7 @@ input[type="button"],
input[type="submit"],
input[type="reset"] {
border: var(--border-style);
border-radius: var(--border-radius);
padding-inline: 0.5em;
padding-block: 0.25em;
margin-inline: 0;
@ -208,6 +285,7 @@ input[type="button"][data-outlined],
input[type="submit"][data-outlined],
input[type="reset"][data-outlined] {
border: var(--border-style);
border-radius: var(--border-radius);
background-color: var(--background-color);
color: var(--accent-color);
}
@ -263,6 +341,7 @@ label.checkbox input[type="checkbox"] + span.checkbox {
padding-block: 0.25em;
box-sizing: content-box;
border: var(--border-style);
border-radius: var(--border-radius);
color: transparent;
text-align: center;
user-select: none;
@ -275,5 +354,6 @@ label.checkbox input[type="checkbox"]:focus + span.checkbox {
label.checkbox input[type="checkbox"]:checked + span.checkbox {
background-color: var(--accent-color);
border: var(--border-style);
border-radius: var(--border-radius);
color: var(--accent-color-fg);
}

17
views/styles/style.css
View file

@ -24,8 +24,25 @@ img {
max-width: 100%;
}
.nav {
max-width: 38em;
margin: auto;
}
.nav p {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
.nav p a {
text-align: center;
}
html.base .nav {
margin: 0;
}
html.base .nav p a {
text-align: start;
}