Adjust styles

This commit is contained in:
MeowcaTheoRange 2023-12-21 01:42:28 -06:00
parent 3b5c1700e0
commit da747f5bb4
10 changed files with 70 additions and 208 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -71,14 +71,19 @@
<ul> <ul>
<li> <li>
<code>--base-scale</code> - The defining em-size of the document, in <code>--base-scale</code> - The defining em-size of the document, in
anything but em. anything but em.<br />
Format: <code>[size]px (pt, in, cm, etc...)</code>
</li> </li>
<li> <li>
<code>--document-width</code> - The width of the document, in em. <code>--document-width</code> - The width of the document.<br />
Format: <code>[size]em</code>.
</li> </li>
<li> <li>
<code>--base-color</code> - The basic color of the page, used for <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. all values below. You can use this for a quick, single-color
theme.<br />
Format: <code>[hue]deg, [saturation]%</code>. Lightness is handled
by Normalize.
</li> </li>
<li><code>--font-family</code> - The font used in the document.</li> <li><code>--font-family</code> - The font used in the document.</li>
<li> <li>
@ -98,15 +103,38 @@
<code>--accent-color-fg</code> - The foreground accent color of the <code>--accent-color-fg</code> - The foreground accent color of the
page. page.
</li> </li>
<li>
<code>--border-width</code> - The width of the borders used on
certain elements. Format: <code>[width]em</code>
</li>
<li> <li>
<code>--border-style</code> - The style of the borders used on <code>--border-style</code> - The style of the borders used on
certain elements. certain elements. Format: <code>[border-style]</code>
</li>
<li>
<code>--border-color</code> - The color of the borders used on
certain elements. Format: <code>[color]</code>
</li> </li>
<li> <li>
<code>--border-radius</code> - The radius of the borders used on <code>--border-radius</code> - The radius of the borders used on
certain elements. certain elements.<br />
Format: <code>[radius]em</code>
</li> </li>
</ul> </ul>
<h3>Extra Theming</h3>
<p>Some more things you can do to style Normalize.</p>
<h4>Background Image</h4>
<pre>
:root {
background: url("/assets/image.jpg") repeat;
}</pre
>
<h4>Transparent (or translucent) background</h4>
<pre>
:root {
--background-color: hsla(var(--base-color), 15%, 0.25);
}</pre
>
</section> </section>
<section> <section>
<h2>Good Pairings</h2> <h2>Good Pairings</h2>

View file

@ -1,186 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/normal_print.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 125, 100%;
}
section.containsaside {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 1em;
}
section.containsaside aside {
min-width: 15em;
}
</style>
</head>
<body>
<header>
<section>
<h1>Iszac</h1>
</section>
<p><i>Note: Best printed on a Chrome-based browser.</i></p>
<section id="accessibility" hidden></section>
</header>
<main>
<section>
<p>
Iszac is a blah blah blah whatever such from such and such doing x y z
a b c.
</p>
</section>
<section class="containsaside">
<section>
<h2>Things I can do</h2>
<ul>
<li>
<p>
Apply and install applications on small-scale server
infrastructure
</p>
<p><b>Experience</b></p>
<ul>
<li>
<p>
Installing the Git-compatible respository store
<b>Gitea</b> on
<a href="https://git.abtmtr.link/">git.abtmtr.link</a><br />
<small>(November 18, 2023)</small>
</p>
</li>
<li>
<p>
Installing the federated microblogging software
<b>Akkoma</b> on
<a href="https://local.abtmtr.link/">local.abtmtr.link</a
><br />
<small>(November 10, 2023)</small>
</p>
</li>
<li>
<p>
Deploying the blogging software <b>WriteFreely</b> on
<a href="https://img.abtmtr.link/">img.abtmtr.link</a> and
<a href="https://blog.abtmtr.link/">blog.abtmtr.link</a>
</p>
</li>
<li>
<p>
Successfully moving the WriteFreely deployments from
<b>outsourced server infrastructure</b> to
<b>local server infrastructure</b><br />
<small>(November 23, 2023)</small>
</p>
</li>
<li>
<p>
Creating and deploying
<b>the TrollCall software and multiple other projects</b> on
<b>Vercel</b>
</p>
</li>
<li>
<p>
Managing applications under the
<a href="/about">abtmtr.link domain</a>
</p>
</li>
</ul>
</li>
<li>
<p>Creating website frontends (HTML, CSS, JS)</p>
<p><b>Experience</b></p>
<ul>
<li>
<p>
Installing the Git-compatible respository store
<b>Gitea</b> on
<a href="https://git.abtmtr.link/">git.abtmtr.link</a><br />
<small>(November 18, 2023)</small>
</p>
</li>
<li>
<p>
Installing the federated microblogging software
<b>Akkoma</b> on
<a href="https://local.abtmtr.link/">local.abtmtr.link</a
><br />
<small>(November 10, 2023)</small>
</p>
</li>
<li>
<p>
Deploying the blogging software <b>WriteFreely</b> on
<a href="https://img.abtmtr.link/">img.abtmtr.link</a> and
<a href="https://blog.abtmtr.link/">blog.abtmtr.link</a>
</p>
</li>
<li>
<p>
Successfully moving the WriteFreely deployments from
<b>outsourced server infrastructure</b> to
<b>local server infrastructure</b><br />
<small>(November 23, 2023)</small>
</p>
</li>
<li>
<p>
Creating and deploying
<b>the TrollCall software and multiple other projects</b> on
<b>Vercel</b>
</p>
</li>
<li>
<p>
Managing applications under the
<a href="/about">abtmtr.link domain</a>
</p>
</li>
</ul>
</li>
</ul>
<p></p>
</section>
<aside>
<h2>Contact me</h2>
<ul>
<li><a href="https://abtmtr.link/">https://abtmtr.link/</a></li>
<li><a href="mailto:me@abtmtr.link">me@abtmtr.link</a></li>
<li>
<p><b>Address:</b></p>
<p id="addressinfo">
Use the <code>address</code> query parameter to fill this
section.
</p>
</li>
<li>
<p><b>Phone number:</b></p>
<p id="phoneinfo">
Use the <code>phone</code> query parameter to fill this section.
</p>
</li>
</ul>
<h2>What I use</h2>
<h2>Technical skills</h2>
<h3>Platforms</h3>
<p>Linux-based and Android-based operating systems</p>
</aside>
</section>
</main>
<script src="/scripts/accessibility.js"></script>
<script>
const qp = new URLSearchParams(window.location.search);
document.getElementById("addressinfo").innerHTML = qp.get("address");
document.getElementById("phoneinfo").innerHTML = qp.get("phone");
</script>
</body>
</html>

View file

@ -61,8 +61,12 @@
/* The foreground accent color of the page. */ /* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%); --accent-color-fg: hsl(var(--base-color), 95%);
/* The width of the borders used on certain elements. */
--border-width: calc(1em / 16);
/* The style of the borders used on certain elements. */ /* The style of the borders used on certain elements. */
--border-style: calc(1em / 16) solid var(--color); --border-style: solid;
/* The color of the borders used on certain elements. */
--border-color: var(--color);
/* The radius of the borders used on certain elements. */ /* The radius of the borders used on certain elements. */
--border-radius: 0; --border-radius: 0;
} }
@ -79,7 +83,9 @@ html.base {
"Segoe UI Symbol" !important; "Segoe UI Symbol" !important;
--font-weight: normal; --font-weight: normal;
--border-style: calc(1em / 16) solid var(--color); --border-width: calc(1em / 16);
--border-style: solid;
--border-color: var(--color);
--border-radius: 0; --border-radius: 0;
transition: none; transition: none;
@ -127,14 +133,21 @@ h2 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1.25em; line-height: 1.25em;
margin: 0; margin: 0;
margin-block: 0.25em; margin-block: 0.5em;
} }
h3 { h3 {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.25em; line-height: 1.25em;
margin: 0; margin: 0;
margin-block: 0.25em; margin-block: 0.5em;
}
h4 {
font-size: 1em;
line-height: 1.25em;
margin: 0;
margin-block: 0.5em;
} }
p { p {
@ -189,7 +202,7 @@ pre {
hr { hr {
border: none; border: none;
border-top: var(--border-style); border-top: var(--border-width) var(--border-style) var(--border-color);
background-color: transparent; background-color: transparent;
margin-inline: 0; margin-inline: 0;
margin-block: 0.25em; margin-block: 0.25em;
@ -216,7 +229,7 @@ html {
} }
fieldset { fieldset {
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding-inline: 0.5em; padding-inline: 0.5em;
padding-block: 0.25em; padding-block: 0.25em;
@ -228,7 +241,7 @@ fieldset {
} }
iframe { iframe {
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
@ -238,6 +251,7 @@ iframe {
a { a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: underline;
} }
a:hover, a:hover,
@ -253,7 +267,7 @@ input,
select, select,
textarea { textarea {
font-family: inherit; font-family: inherit;
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding-inline: 0.5em; padding-inline: 0.5em;
padding-block: 0.25em; padding-block: 0.25em;
@ -272,7 +286,7 @@ button,
input[type="button"], input[type="button"],
input[type="submit"], input[type="submit"],
input[type="reset"] { input[type="reset"] {
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding-inline: 0.5em; padding-inline: 0.5em;
padding-block: 0.25em; padding-block: 0.25em;
@ -289,7 +303,7 @@ button[data-outlined],
input[type="button"][data-outlined], input[type="button"][data-outlined],
input[type="submit"][data-outlined], input[type="submit"][data-outlined],
input[type="reset"][data-outlined] { input[type="reset"][data-outlined] {
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--background-color); background-color: var(--background-color);
color: var(--accent-color); color: var(--accent-color);
@ -345,7 +359,7 @@ label.checkbox input[type="checkbox"] + span.checkbox {
padding-inline: 0.25em; padding-inline: 0.25em;
padding-block: 0.25em; padding-block: 0.25em;
box-sizing: content-box; box-sizing: content-box;
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: transparent; color: transparent;
text-align: center; text-align: center;
@ -358,7 +372,7 @@ label.checkbox input[type="checkbox"]:focus + span.checkbox {
label.checkbox input[type="checkbox"]:checked + span.checkbox { label.checkbox input[type="checkbox"]:checked + span.checkbox {
background-color: var(--accent-color); background-color: var(--accent-color);
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--accent-color-fg); color: var(--accent-color-fg);
} }

View file

@ -1,5 +1,11 @@
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap"); @font-face {
font-family: "Lexend Deca";
src: url("/assets/fonts/Lexend Deca/Variable.ttf");
}
@font-face {
font-family: "Minecraft";
src: url("/assets/fonts/Minecraft/Regular.otf");
}
:root { :root {
--font-family: "Lexend Deca"; --font-family: "Lexend Deca";
} }

View file

@ -25,7 +25,7 @@ div.window-object {
min-height: 2em; min-height: 2em;
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--accent-color-fg); color: var(--accent-color-fg);
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
resize: both; resize: both;
overflow: hidden; overflow: hidden;
padding: 0.25em; padding: 0.25em;
@ -130,7 +130,7 @@ div.window-object > div.window-manager > div > button {
margin: 0; margin: 0;
margin-inline-start: 0.25em; margin-inline-start: 0.25em;
box-sizing: border-box; box-sizing: border-box;
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
background-color: transparent; background-color: transparent;
color: currentColor; color: currentColor;
font-family: "Material Symbols Outlined"; font-family: "Material Symbols Outlined";
@ -144,7 +144,7 @@ div.window-object > iframe.window-content {
background-color: var(--background-color); background-color: var(--background-color);
height: 100%; height: 100%;
width: 100%; width: 100%;
border: var(--border-style); border: var(--border-width) var(--border-style) var(--border-color);
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
} }