Restyle backgrounds and header/footer

This commit is contained in:
gil 2024-05-25 19:14:37 -05:00
parent 5fd3d139cc
commit 083d274400
9 changed files with 36 additions and 15 deletions

View file

@ -1,5 +1,4 @@
<footer> <footer class="footer_main">
<hr>
Made with <a href="https://www.11ty.dev/">11ty</a>. Made with <a href="https://www.11ty.dev/">11ty</a>.
{% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %} {% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %}
</footer> </footer>

View file

@ -1,5 +1,4 @@
<header class="header_main"> <header class="header_main">
<a class="logo" href="/">{{ meta.siteName }}</a> <a class="logo" href="/">{{ meta.siteName }}</a>
<nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav> <nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav>
<hr>
</header> </header>

View file

@ -4,7 +4,7 @@ layout: base.njk
{% include "header.njk" %} {% include "header.njk" %}
<main> <main>
<header> <header>
<h2>{{ title }}</h2> <h1>{{ title }}</h1>
</header> </header>
{{ content | safe }} {{ content | safe }}
</main> </main>

View file

@ -38,8 +38,8 @@ Colors
====== ======
*/ */
body { body {
background-color: rgb(255, 252, 240); background-color: rgb(64, 62, 60);
color: #802659; color: rgb(255, 252, 240);
font-family: Alkhemikal; font-family: Alkhemikal;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -57,7 +57,14 @@ h2 {
} }
main, article { main, article {
padding: 0.5em; padding: 1em;
margin: 0 2em;
color: #802659;
border: 32px solid;
border-image: url(../img/nine-patch.png) 32 round;
-webkit-border-image: url(../img/nine-patch.png) 32 round;
background-color: rgb(255, 252, 240);
box-shadow: 0px 0px 20px rgb(16, 15, 15);
} }
main :where(ol, ul), article :where(ol, ul) { main :where(ol, ul), article :where(ol, ul) {
@ -97,4 +104,9 @@ ul, ol {
margin-bottom: 1em; margin-bottom: 1em;
} }
footer.footer_main {
margin: 2em 0 1em 0;
text-align: center;
}
/*# sourceMappingURL=global.css.map */ /*# sourceMappingURL=global.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFSM;EERN,OARG;EASH;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFDU;EEEV;;;AAGF;EACE,kBAzCS;;;AA4CX;EACE;EACA,OFHY;EEIZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"global.css"} {"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFkBS;EEjBT,OFQM;EEPN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFhBM;EEiBN;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFRU;EESV;;;AAGF;EACE,kBAhDS;;;AAmDX;EACE;EACA,OFVY;EEWZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA","file":"global.css"}

View file

@ -5,7 +5,7 @@
Colors Colors
====== ======
*/ */
$bg: colors.$paper; $bg: colors.$base-800;
$fg: scale-color(colors.$magenta-600, $lightness: -20%); $fg: scale-color(colors.$magenta-600, $lightness: -20%);
$fg-logo: colors.$magenta-600; $fg-logo: colors.$magenta-600;
$link: colors.$green-600; $link: colors.$green-600;
@ -13,8 +13,8 @@ $bg-hover: scale-color(colors.$green-400, $alpha: -75%);
$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%); $bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
body { body {
background-color: $bg; background-color: colors.$base-800;
color: $fg; color: colors.$paper;
font-family: Alkhemikal; font-family: Alkhemikal;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -32,7 +32,14 @@ h2 {
} }
main, article { main, article {
padding: 0.5em; padding: 1em;
margin: 0 2em;
color: $fg;
border: 32px solid;
border-image: url(../img/nine-patch.png) 32 round;
-webkit-border-image: url(../img/nine-patch.png) 32 round;
background-color: colors.$paper;
box-shadow: 0px 0px 20px colors.$black;
} }
main :where(ol, ul), article :where(ol, ul) { main :where(ol, ul), article :where(ol, ul) {
@ -71,3 +78,8 @@ p {
ul, ol { ul, ol {
margin-bottom: 1em; margin-bottom: 1em;
} }
footer.footer_main {
margin: 2em 0 1em 0;
text-align: center;
}

BIN
src/img/nine-patch.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 B

BIN
src/img/wood.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View file

@ -1,4 +1,5 @@
--- ---
title: About Me
layout: page.njk layout: page.njk
date: Last Modified date: Last Modified
--- ---
@ -7,8 +8,6 @@ date: Last Modified
<img src="img/gba_gil.png" width="192" height="168" /> <img src="img/gba_gil.png" width="192" height="168" />
</p> </p>
# About me
Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write &ndash; primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below. Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write &ndash; primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below.
## Ogra.ph Collective ## Ogra.ph Collective