From 4018b3ae6ad465c5f0757f79111ff30bc6e463e4 Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Thu, 30 Nov 2023 22:48:59 -0600 Subject: [PATCH] Normalize project --- views/about/index.html | 2 +- views/blog/index.html | 2 +- views/blog/post/index.html | 2 +- views/branding/index.html | 2 +- views/index.html | 2 +- views/links/index.html | 2 +- views/projects/index.html | 2 +- views/projects/normalize/index.html | 347 ++++++++++++++++++++++++++++ views/projects/public/projects.json | 18 +- views/scripts/accessibility.js | 4 +- views/scripts/interface.js | 2 +- views/site/index.html | 2 +- views/styles/normal.css | 84 ++++++- views/styles/style.css | 17 ++ 14 files changed, 470 insertions(+), 18 deletions(-) create mode 100644 views/projects/normalize/index.html diff --git a/views/about/index.html b/views/about/index.html index f525360..a44b307 100644 --- a/views/about/index.html +++ b/views/about/index.html @@ -2,7 +2,7 @@ - MeowcaTheoRange + About - abtmtr.link diff --git a/views/blog/index.html b/views/blog/index.html index 7625105..b94d111 100755 --- a/views/blog/index.html +++ b/views/blog/index.html @@ -2,7 +2,7 @@ - Project Windows + Blog - abtmtr.link diff --git a/views/blog/post/index.html b/views/blog/post/index.html index fe66387..9290fb2 100755 --- a/views/blog/post/index.html +++ b/views/blog/post/index.html @@ -2,7 +2,7 @@ - Project Windows + Blog - abtmtr.link diff --git a/views/branding/index.html b/views/branding/index.html index e4e5ae2..6d4e42f 100644 --- a/views/branding/index.html +++ b/views/branding/index.html @@ -2,7 +2,7 @@ - MeowcaTheoRange + Branding - abtmtr.link diff --git a/views/index.html b/views/index.html index 2a33195..c1b04c8 100755 --- a/views/index.html +++ b/views/index.html @@ -2,7 +2,7 @@ - MeowcaTheoRange + abtmtr.link diff --git a/views/links/index.html b/views/links/index.html index fbfe98e..98d1fe0 100644 --- a/views/links/index.html +++ b/views/links/index.html @@ -2,7 +2,7 @@ - MeowcaTheoRange + Links - abtmtr.link diff --git a/views/projects/index.html b/views/projects/index.html index 9fffd57..a9323bb 100755 --- a/views/projects/index.html +++ b/views/projects/index.html @@ -2,7 +2,7 @@ - Project Windows + Projects - abtmtr.link diff --git a/views/projects/normalize/index.html b/views/projects/normalize/index.html new file mode 100644 index 0000000..1489846 --- /dev/null +++ b/views/projects/normalize/index.html @@ -0,0 +1,347 @@ + + + + + Normalize + + + + + + +
+
+

Normalize

+
+ +
+
+
+

+ Normalize is a simple CSS library made to provide good-looking + yet simple HTML element styles. +

+

+ It supports theming, natural HTML semantics, document width limiting, + and more, all while trying to stay true to the HTML spec. +

+

+ If you're interested, feel free to + import it or + download it for your site. +

+

Usage

+

To get started, it's recommended to use this boilerplate:

+ 
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>My Site</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="normal.css" />
+  </head>
+  <body>
+    <!-- Website content goes here. -->
+  </body>
+</html>
+
+

+ This is a good start for all Normalize-based pages. Make sure to use + good HTML practices. +

+

Theming

+

+ 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. +

+

In Normalize, the unit em is used for most values. You should also use this unit when defining your custom styles.

+

+ Normalize supports the following properties in :root: +

+
    +
  • + --base-scale - should be a px or + pt value. This is the em-scale for the entire page. + Therefore, + you should not use em for this property! +
    • +
  • + --document-width - The width of the whole document. +
    • +
  • + --background-color - The background color of the page. +
    • +
  • + --color - The text color of the page. Should contrast well with --background-color. +
    • +
  • + --accent-color - The main color of interactive elements, such as <button> or <input type="checkbox" />. +
    • +
  • + --accent-color-fg - The secondary color of interactive elements. Should contrast well with --accent-color. +
    • +
  • + --font-family - The font that the document will use. +
    • +
  • + --font-weight - The font weight that the document will use. +
    • +
  • + --border-style - The border style of special elements, such as <fieldset> or <input>. +
    • +
  • + --border-radius - The roundness of special elements. +
    • +
+

Example styles

+ 
+<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>
+ + 
+<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>
+
+ + 
+<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>
+
+ + 
+<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>
+
+ +

Keeping it Simple

+

If you want to keep it simple, simply apply the .base class to html.

+

This will override all custom styles, making it great for accessibility.

+ +
+
+ + + + diff --git a/views/projects/public/projects.json b/views/projects/public/projects.json index 8c7047f..773f5b8 100644 --- a/views/projects/public/projects.json +++ b/views/projects/public/projects.json @@ -1,12 +1,11 @@ [ { - "name": "HexFlagGen", - "date": 1700114400000, + "name": "Normalize", + "date": 1701404400000, "description": [ - "HexFlagGen is a flag generator inspired by how the Free Speech Flag 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 Free Speech Flag was made.", + "I dislike DRM and support trans rights." + ], + "url": "/projects/hex/" + }, { "name": "JellyBean's Mid-Sim", "date": 1651986000000, diff --git a/views/scripts/accessibility.js b/views/scripts/accessibility.js index 594724d..7a097e1 100755 --- a/views/scripts/accessibility.js +++ b/views/scripts/accessibility.js @@ -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 diff --git a/views/scripts/interface.js b/views/scripts/interface.js index a6a3e81..3a7e040 100755 --- a/views/scripts/interface.js +++ b/views/scripts/interface.js @@ -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)); }); diff --git a/views/site/index.html b/views/site/index.html index 8ae2085..c38f5a3 100644 --- a/views/site/index.html +++ b/views/site/index.html @@ -2,7 +2,7 @@ - MeowcaTheoRange + Site Information - abtmtr.link diff --git a/views/styles/normal.css b/views/styles/normal.css index 230eac9..507dcc2 100755 --- a/views/styles/normal.css +++ b/views/styles/normal.css @@ -1,20 +1,55 @@ +/* + * THE KARKAT PUBLIC LICENSE + * Version 1, November 2023 + * + * Copyright (C) 2023 MeowcaTheoRange + * + * 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 + * + * 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); } diff --git a/views/styles/style.css b/views/styles/style.css index 9b805e5..cfc4bee 100644 --- a/views/styles/style.css +++ b/views/styles/style.css @@ -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; +}