al/pages
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

stash

Browse source
This commit is contained in:
Alexander 2025-06-22 11:14:02 -04:00
parent f3f4fe296f
commit 7537a968b7
8 changed files with 128 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

1
acl.cool/site/inclusions/footer.html Symbolic link
View file

@ -0,0 +1 @@
../../../inclusions/footer.html

13
acl.cool/site/index.html
View file

@ -1,9 +1,10 @@
<h1>
<a href="/resume.pdf" style="text-decoration: none; color: var(--darkest-color)">acl</a><a
href="https://en.wikipedia.org/wiki/Special:Random"
style="text-decoration: none; color: var(--darkest-color)">.</a><a href="https://git.acl.cool/al/pages"
style="text-decoration: none; color: var(--darkest-color)">cool</a>
<a href="/resume.pdf" style="text-decoration: none" class="est-color">acl</a><a
href="https://en.wikipedia.org/wiki/Special:Random" style="text-decoration: none" class="est-color">.</a><a
href="https://git.acl.cool/al/pages" style="text-decoration: none" class="est-color">cool</a>
</h1>
<div id="writings" style="color: var(--lighter-color); line-height: var(--ui-spacing);"></span>
<p style="font-weight: bold;">Welcome! Below are links to things I've made or just enjoy.</p>
<div id="writings" class="null-color" style="line-height: var(--ui-spacing);"></span>
<p style="font-weight: bold;">Welcome! Below are links to things I've made or just enjoy.</p>
<!-- soupault-metadata no_footer = true -->

4
css/fonts.css
View file

@ -174,6 +174,10 @@
--base-font-size: 16pt;
}
html {
font-size: var(--base-font-size);
}
/* Setting the line height here apparently stops "normal" from varying
across the course of <body>. */
body {

75
css/inverted_colors.css Normal file
View file

@ -0,0 +1,75 @@
:root {
--lightest-color: rgb(255, 250, 245);
--lighter-color: rgb(205, 200, 195);
--light-color: rgb(170, 165, 160);
--wide-gray-invert: rgb(10, 5, 5);
--narrow-gray-invert: rgb(15, 8, 8);
}
.invert .est-color {
color: var(--lightest-color) !important
}
.invert .er-color {
color: var(--lighter-color) !important
}
.invert .null-color {
color: var(--light-color) !important
}
.invert {
background-color: black;
color: var(--lighter-color);
}
.invert code:not(pre code) {
background-color: var(--wide-gray-invert);
color: white;
}
.invert pre {
color: white;
background-color: var(--wide-gray-invert);
border-color: var(--wide-gray-invert);
}
.invert body {
background-color: black;
color: var(--lighter-color);
}
.invert h1 {
color: var(--lightest-color);
}
.invert h2,
.invert h3,
.invert h4,
.invert h5,
.invert h6 {
color: var(--lighter-color);
}
.invert a:link,
.invert a:visited {
color: var(--lightest-color)
}
.invert table tr th,
.invert table tr td {
border-right: 2px solid var(--narrow-gray-invert);
border-bottom: 2px solid var(--narrow-gray-invert);
}
.invert table tr th:first-child,
.invert table tr td:first-child {
border-left: 2px solid var(--narrow-gray-invert);
}
/* top row a.k.a. table header */
.invert table tr th {
border-top: 2px solid var(--narrow-gray-invert);
}
.invert hr {
background-color: var(--narrow-gray-invert);
}

8
css/layout.css
View file

@ -2,5 +2,11 @@
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: 0.3rem;
padding-right: 0.3rem;
overflow: auto;
}
}
body {
margin: 0;
}

24
css/looks.css
View file

@ -1,13 +1,23 @@
:root {
--darkest-color: rgb(10, 5, 0);
--middle-color: rgb(60, 55, 50);
--lighter-color: rgb(95, 85, 80);
--darker-color: rgb(60, 55, 50);
--dark-color: rgb(95, 85, 80);
--ui-spacing: 1.25;
--read-spacing: 1.5;
--wide-gray: rgb(245, 240, 240);
--narrow-gray: rgb(240, 233, 233);
}
.est-color {
color: var(--darkest-color) !important
}
.er-color {
color: var(--darker-color) !important
}
.null-color {
color: var(--dark-color) !important
}
code {
font-variant-ligatures: no-contextual;
}
@ -44,7 +54,7 @@ pre {
body {
background-color: rgb(255, 255, 255);
color: var(--middle-color);
color: var(--darker-color);
}
h1 {
@ -58,7 +68,7 @@ h3,
h4,
h5,
h6 {
color: var(--middle-color);
color: var(--darker-color);
margin-bottom: 0;
margin-top: 1em;
}
@ -186,4 +196,8 @@ math[display="block"] {
left: 0;
right: auto;
text-align: left;
}
}
footer {
margin-top: 2rem;
}

5
inclusions/footer.html Normal file
View file

@ -0,0 +1,5 @@
<footer class="invert">
<span class="container" style="display: block; padding-top: 1rem; padding-bottom: 1rem;">
<a href="/">take me home</a>
</span>
</footer>

10
shared_templates/main.html
View file

@ -7,17 +7,27 @@
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/looks.css">
<link rel="stylesheet" href="/css/inverted_colors.css">
<link rel="stylesheet" href="/css/code.css">
<link rel="icon" type="image/png" href="/assets/favicon.png">
<script>
const class_ = `font-${window.devicePixelRatio >= 1.3 ? 'hidpi' : 'lodpi'}`;
document.documentElement.className = class_;
// document.documentElement.className += ' invert'; // 'invert' to swap colors
</script>
</head>
<body>
<main class="container">
</main>
<footer class="invert">
<span class="container"
style="display: block; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: space-between">
<span><a href="/" class="er-color">take
me home</a></span><span style="text-align: right; flex: 1">Alexander Lucas — <a
href="mailto:iam@acl.cool" class="er-color">iam@acl.cool</a></span>
</span>
</footer>
</body>
</html>