gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Redo landing css, move about to its own page

Browse source
This commit is contained in:
gil 2024-06-17 16:11:23 -05:00
parent 9f28e4d5a8
commit 67246cc3ce
10 changed files with 157 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/_includes/layouts/landing.njk
View file

@ -9,9 +9,12 @@
<link rel="stylesheet" href="/css/landing.css"> <link rel="stylesheet" href="/css/landing.css">
</head> </head>
<body> <body>
<aside> <nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
<img src="/img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing"> <main>
</aside> <article>{{ content | safe }}</article>
<main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main> <aside>
<img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
</aside>
</main>
</body> </body>
</html> </html>

28
src/about.md Normal file
View file

@ -0,0 +1,28 @@
---
title: About
date: Last Modified
eleventyNavigation:
key: About
---
<img class="gba-portrait" src="/img/gba-gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." />
Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software developer, game developer, and writer based in Texas. I'm one of the sysadmins for the [ogra.ph collective](https://ogra.ph/), an online collective of folk building an inclusive community centered around digital rights and liberation.
## Links
- Microblog: <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
- Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
- Matrix: [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org)
- Photos: [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam)
- Reading: [bookwyrm.social/user/kalanggam](https://bookwyrm.social/user/kalanggam)
## Support me
<a href="https://www.buymeacoffee.com/gilcaley" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important; display: inline;"></a>
## Colophon
I first started building this site in mid 2023, and I've been gradually tweaking it since then.
This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then built into plain HTML. I used [Sass](https://sass-lang.com/) to build the CSS. Source files are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).

17
src/css/global.css
View file

@ -184,23 +184,6 @@ article h4,
article h5, article h5,
article h6 { article h6 {
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
text-align: center;
}
@media screen and (min-width: 768px) {
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
text-align: left;
}
} }
main h1 + p, main h1 + p,
main h2 + p, main h2 + p,

2
src/css/global.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;ECnBD;EACA;EACA;;ADmBC;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;;ACjCF;EDuBF;AAAA;IAcI;IACA;IACA;IACA;;;AC9BF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAzDF;EAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASI;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;;ADnDN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACvEA;ED+DF;IAUI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE","file":"global.css"} {"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;ECnBD;EACA;EACA;;ADmBC;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;;ACjCF;EDuBF;AAAA;IAcI;IACA;IACA;IACA;;;AC9BF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;;AD/CN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACvEA;ED+DF;IAUI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE","file":"global.css"}

127
src/css/landing.css
View file

@ -86,30 +86,73 @@ html {
} }
body { body {
background-color: #141013;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
align-items: center; align-items: center;
justify-content: center;
gap: 5px;
margin: auto;
padding: 1em 0;
background-color: #141013;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
body { body {
flex-direction: row; width: 750px;
justify-content: center; }
min-height: 100vh; }
@media screen and (min-width: 992px) {
body {
height: 100vh;
width: 1006px;
} }
} }
main { a {
width: 100%; color: #9ec611;
gap: 10px; text-decoration: underline #9ec611 2px;
color: rgb(255, 252, 240); }
display: flex; a:hover {
flex-direction: column; color: #beec1f;
}
nav {
align-self: flex-end;
margin-right: 1em;
text-align: right;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
nav {
margin: 0;
}
}
nav .enter-link {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
}
nav .enter-link:hover {
font-style: italic;
}
nav .enter-link::after {
content: " >>";
font-style: normal;
text-decoration: underline #141013 2px;
color: #525252;
}
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
margin: 1em 0;
color: rgb(255, 252, 240);
}
@media screen and (min-width: 992px) {
main { main {
max-width: 600px; flex-direction: row-reverse;
align-items: flex-start;
max-height: 500px;
} }
} }
main article { main article {
@ -124,8 +167,9 @@ main article {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
main article { main article {
border: solid rgb(40, 39, 38); border: solid rgb(40, 39, 38);
max-height: 600px; max-height: 500px;
overflow: scroll; overflow: scroll;
max-width: 750px;
} }
} }
main article p, main article p,
@ -167,17 +211,6 @@ main article h4,
main article h5, main article h5,
main article h6 { main article h6 {
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
text-align: center;
}
@media screen and (min-width: 768px) {
main article h1,
main article h2,
main article h3,
main article h4,
main article h5,
main article h6 {
text-align: left;
}
} }
main article h1 + p, main article h1 + p,
main article h2 + p, main article h2 + p,
@ -211,54 +244,10 @@ main article a {
main article a:hover { main article a:hover {
color: #beec1f; color: #beec1f;
} }
main a { main aside img {
color: #9ec611;
text-decoration: underline #9ec611 2px;
}
main a:hover {
color: #beec1f;
}
aside {
margin-top: 20px;
margin-bottom: 20px;
width: 256px;
}
@media screen and (min-width: 768px) {
aside {
height: 600px;
margin-top: 0;
margin-right: 2em;
}
}
aside img {
width: 100%; width: 100%;
image-rendering: pixelated; image-rendering: pixelated;
max-width: 256px; max-width: 256px;
} }
.entry-button {
display: inline-block;
height: 2em;
margin: auto;
margin-bottom: 10px;
image-rendering: pixelated;
font-size: 1.5em;
font-weight: bold;
}
.entry-button:hover {
font-style: italic;
}
.entry-button::after {
content: " >>";
color: #525252;
font-style: normal;
text-decoration: underline #141013 2px;
}
@media screen and (min-width: 768px) {
.entry-button {
margin-right: 0;
}
}
/*# sourceMappingURL=landing.css.map */ /*# sourceMappingURL=landing.css.map */

2
src/css/landing.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KAjBO;EAkBP;;ACbA;EDQF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC3BA;EDsBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EC/BH;EACA;EACA;;AARC;EDiCA;IAOI;IACA,YA5CO;IA6CP;;;AChCJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAzDF;EAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;IASI;;;AAIJ;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADjDJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AC7DA;ED0DF;IAMI,QAnES;IAoET;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AC7FF;ED4EF;IAqBI","file":"landing.css"} {"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AChBA;EDQF;IAWI,OAvBQ;;;ACIV;EDQF;IAeI;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;;ACvCA;EDoCF;IAMI;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;ACrEA;ED+DF;IASI;IACA;IACA,YA7ES;;;AAgFX;EACE;EACA;EACA;EACA;EC3EH;EACA;EACA;;AARC;ED6EA;IAOI;IACA,YAxFO;IAyFP;IACA,WA3FM;;;ACcV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADCF;EACE;EACA;EACA","file":"landing.css"}

17
src/css/reset.css
View file

@ -169,23 +169,6 @@ button,
-webkit-appearance: button; -webkit-appearance: button;
} }
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/** /**
Remove the additional ':invalid' styles in Firefox. Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737

0
src/img/landing-sigil.png → src/img/landing.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

4
src/scss/_mixins.scss
View file

@ -71,10 +71,6 @@ $breakpoints: (
h5, h5,
h6 { h6 {
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
text-align: center;
@include breakpoint("md") {
text-align: left;
}
} }
h1 + p, h1 + p,

123
src/scss/landing.scss
View file

@ -10,8 +10,8 @@ VARIABLES
*/ */
$gutter: 10px; $gutter: 10px;
$max-width: 600px; $max-width: 750px;
$max-height: 600px; $max-height: 500px;
$avatar-width: 256px; $avatar-width: 256px;
html { html {
@ -23,28 +23,72 @@ html {
} }
body { body {
background-color: #{colors.$background};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $gutter;
align-items: center; align-items: center;
justify-content: center;
gap: 5px;
margin: auto;
padding: 1em 0;
background-color: #{colors.$background};
@include breakpoint("md") { @include breakpoint("md") {
flex-direction: row; width: $max-width;
justify-content: center; }
min-height: 100vh;
@include breakpoint("lg") {
height: 100vh;
width: $max-width + $avatar-width;
}
}
a {
color: #{colors.$link};
text-decoration: underline #{colors.$link} 2px;
&:hover {
color: #{colors.$link-hover};
}
}
nav {
align-self: flex-end;
margin-right: 1em;
text-align: right;
@include breakpoint("md") {
margin: 0;
}
.enter-link {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
&:hover {
font-style: italic;
}
&::after {
content: " >>";
font-style: normal;
text-decoration: underline #{colors.$background} 2px;
color: #{colors.$muted};
}
} }
} }
main { main {
width: 100%;
gap: $gutter;
color: #{colors.$text};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 2em;
margin: 1em 0;
color: #{colors.$text};
@include breakpoint("md") { @include breakpoint("lg") {
max-width: $max-width; flex-direction: row-reverse;
align-items: flex-start;
max-height: $max-height;
} }
article { article {
@ -57,60 +101,17 @@ main {
border: solid #{colors.$base-900}; border: solid #{colors.$base-900};
max-height: $max-height; max-height: $max-height;
overflow: scroll; overflow: scroll;
max-width: $max-width;
} }
@include markup; @include markup;
} }
a { aside {
color: #{colors.$link}; img {
text-decoration: underline #{colors.$link} 2px; width: 100%;
image-rendering: pixelated;
&:hover { max-width: #{$avatar-width};
color: #{colors.$link-hover};
} }
} }
} }
aside {
margin-top: #{$gutter * 2};
margin-bottom: #{$gutter * 2};
width: #{$avatar-width};
@include breakpoint("md") {
height: $max-height;
margin-top: 0;
margin-right: 2em;
}
img {
width: 100%;
image-rendering: pixelated;
max-width: #{$avatar-width};
}
}
.entry-button {
display: inline-block;
height: 2em;
margin: auto;
margin-bottom: #{$gutter};
image-rendering: pixelated;
font-size: 1.5em;
font-weight: bold;
&:hover {
font-style: italic;
}
&::after {
content: " >>";
color: #{colors.$muted};
font-style: normal;
text-decoration: underline #{colors.$background} 2px;
}
@include breakpoint("md") {
margin-right: 0;
}
}