diff --git a/src/_includes/layouts/landing.njk b/src/_includes/layouts/landing.njk index bebeb71..4ff2779 100644 --- a/src/_includes/layouts/landing.njk +++ b/src/_includes/layouts/landing.njk @@ -9,9 +9,12 @@ - -
{{ content | safe }}
Enter
+ +
+
{{ content | safe }}
+ +
diff --git a/src/about.md b/src/about.md new file mode 100644 index 0000000..753adcd --- /dev/null +++ b/src/about.md @@ -0,0 +1,28 @@ +--- +title: About +date: Last Modified +eleventyNavigation: + key: About +--- + +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: @gil@hol.ogra.ph +- 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 + +Buy Me A Coffee + +## 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). diff --git a/src/css/global.css b/src/css/global.css index e241e84..ca25d78 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -184,23 +184,6 @@ article h4, article h5, article h6 { 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 h2 + p, diff --git a/src/css/global.css.map b/src/css/global.css.map index 221ef5f..fa9d7b9 100644 --- a/src/css/global.css.map +++ b/src/css/global.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/src/css/landing.css b/src/css/landing.css index feb68f3..2ae79c7 100644 --- a/src/css/landing.css +++ b/src/css/landing.css @@ -86,30 +86,73 @@ html { } body { - background-color: #141013; display: flex; flex-direction: column; - gap: 10px; align-items: center; + justify-content: center; + gap: 5px; + margin: auto; + padding: 1em 0; + background-color: #141013; } @media screen and (min-width: 768px) { body { - flex-direction: row; - justify-content: center; - min-height: 100vh; + width: 750px; + } +} +@media screen and (min-width: 992px) { + body { + height: 100vh; + width: 1006px; } } -main { - width: 100%; - gap: 10px; - color: rgb(255, 252, 240); - display: flex; - flex-direction: column; +a { + color: #9ec611; + text-decoration: underline #9ec611 2px; +} +a:hover { + color: #beec1f; +} + +nav { + align-self: flex-end; + margin-right: 1em; + text-align: right; } @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 { - max-width: 600px; + flex-direction: row-reverse; + align-items: flex-start; + max-height: 500px; } } main article { @@ -124,8 +167,9 @@ main article { @media screen and (min-width: 768px) { main article { border: solid rgb(40, 39, 38); - max-height: 600px; + max-height: 500px; overflow: scroll; + max-width: 750px; } } main article p, @@ -167,17 +211,6 @@ main article h4, main article h5, main article h6 { 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 h2 + p, @@ -211,54 +244,10 @@ main article a { main article a:hover { color: #beec1f; } -main a { - 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 { +main aside img { width: 100%; image-rendering: pixelated; 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 */ diff --git a/src/css/landing.css.map b/src/css/landing.css.map index 2d12a6f..46250dc 100644 --- a/src/css/landing.css.map +++ b/src/css/landing.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/src/css/reset.css b/src/css/reset.css index fe01ec6..e2f5d18 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -169,23 +169,6 @@ 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. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 diff --git a/src/img/landing-sigil.png b/src/img/landing.png similarity index 100% rename from src/img/landing-sigil.png rename to src/img/landing.png diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 4aa4ca5..361d4db 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -71,10 +71,6 @@ $breakpoints: ( h5, h6 { margin: 0.5em 0 0.25em 0; - text-align: center; - @include breakpoint("md") { - text-align: left; - } } h1 + p, diff --git a/src/scss/landing.scss b/src/scss/landing.scss index 122756b..0fc41d7 100644 --- a/src/scss/landing.scss +++ b/src/scss/landing.scss @@ -10,8 +10,8 @@ VARIABLES */ $gutter: 10px; -$max-width: 600px; -$max-height: 600px; +$max-width: 750px; +$max-height: 500px; $avatar-width: 256px; html { @@ -23,28 +23,72 @@ html { } body { - background-color: #{colors.$background}; display: flex; flex-direction: column; - gap: $gutter; align-items: center; + justify-content: center; + gap: 5px; + margin: auto; + padding: 1em 0; + background-color: #{colors.$background}; @include breakpoint("md") { - flex-direction: row; - justify-content: center; - min-height: 100vh; + width: $max-width; + } + + @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 { - width: 100%; - gap: $gutter; - color: #{colors.$text}; display: flex; flex-direction: column; + align-items: center; + gap: 2em; + margin: 1em 0; + color: #{colors.$text}; - @include breakpoint("md") { - max-width: $max-width; + @include breakpoint("lg") { + flex-direction: row-reverse; + align-items: flex-start; + max-height: $max-height; } article { @@ -57,60 +101,17 @@ main { border: solid #{colors.$base-900}; max-height: $max-height; overflow: scroll; + max-width: $max-width; } @include markup; } - a { - color: #{colors.$link}; - text-decoration: underline #{colors.$link} 2px; - - &:hover { - color: #{colors.$link-hover}; + aside { + img { + width: 100%; + image-rendering: pixelated; + max-width: #{$avatar-width}; } } } - -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; - } -}