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

Adjust styles

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
views/assets/fonts/Lexend Deca/Variable.ttf Normal file
View file

Binary file not shown.

BIN
views/assets/fonts/Minecraft/Bold.otf Normal file
View file

Binary file not shown.

BIN
views/assets/fonts/Minecraft/BoldItalic.otf Normal file
View file

Binary file not shown.

BIN
views/assets/fonts/Minecraft/Italic.otf Normal file
View file

Binary file not shown.

BIN
views/assets/fonts/Minecraft/Regular.otf Normal file
View file

Binary file not shown.

38
views/projects/item/normalize/index.html
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>

186
views/real/resume/index.html
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>

38
views/styles/normal.css
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);
} }

10
views/styles/style.css
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";
} }

6
views/styles/windows.css
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;
} }