Compare commits

..

3 commits

Author SHA1 Message Date
gil 03672e452b Remove extra layout keys from frontmatter 2024-06-18 22:23:03 -05:00
gil 29ea00acb2 Tweaking grid ratios 2024-06-18 14:57:09 -05:00
gil 4281620c08 Use grid layout on landing 2024-06-18 13:47:06 -05:00
10 changed files with 88 additions and 144 deletions

View file

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

View file

@ -79,98 +79,62 @@ VARIABLES
=============================================================================== ===============================================================================
*/ */
* {
line-height: 1.7;
}
html { html {
font-size: 14pt; font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif; font-family: "Linux Libertine", "Times New Roman", Times, serif;
line-height: 1.5;
} }
body { body {
display: flex; display: grid;
flex-direction: column; padding: 2em;
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 {
width: 750px; grid-template-columns: 2fr 3fr 2fr;
gap: 1em;
height: 100%;
padding: 2em 0;
} }
} }
@media screen and (min-width: 992px) {
body {
height: 100vh;
width: 1006px;
}
}
a {
color: #9ec611;
text-decoration: underline #9ec611 2px;
}
a:hover {
color: #beec1f;
}
nav { nav {
align-self: flex-end; grid-row: 1;
margin-right: 1em; grid-column: 1;
text-align: right; justify-self: right;
align-self: end;
font-size: 1.5em;
font-weight: bold;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
nav { nav {
margin: 0; grid-column: 2;
} }
} }
nav .enter-link { nav a:hover {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
}
nav .enter-link:hover {
font-style: italic; font-style: italic;
} }
nav .enter-link::after { nav a::after {
content: " >>"; content: " >>";
font-style: normal; font-style: normal;
text-decoration: underline #141013 2px;
color: #525252;
} }
main { @media screen and (min-width: 768px) {
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 {
flex-direction: row-reverse; grid-row: 2;
align-items: flex-start; grid-column: 2;
max-height: 500px; justify-self: center;
} }
} }
main article { main article {
background: rgb(28, 27, 26);
border-top: solid rgb(40, 39, 38);
border-bottom: solid rgb(40, 39, 38);
font-size: 1rem;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.5; line-height: 1.5;
padding: 0 1.5em; padding: 0 1.5em;
} padding: 0;
@media screen and (min-width: 768px) { font-size: 1rem;
main article {
border: solid rgb(40, 39, 38);
max-height: 500px;
overflow: scroll;
max-width: 750px;
}
} }
main article p, main article p,
main article blockquote, main article blockquote,
@ -244,10 +208,22 @@ main article a {
main article a:hover { main article a:hover {
color: #beec1f; color: #beec1f;
} }
main aside img { main article h1 {
width: 100%; margin-top: 0;
}
aside {
grid-row: 1;
grid-column: 1;
max-width: 192px;
}
@media screen and (min-width: 768px) {
aside {
grid-column: 2;
}
}
aside img {
image-rendering: pixelated; image-rendering: pixelated;
max-width: 256px;
} }
/*# sourceMappingURL=landing.css.map */ /*# sourceMappingURL=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;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"} {"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;AAQA;EACE;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;;ACVA;EDQF;IAII;IACA,KAlBK;IAmBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ACzBA;EDmBF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;ACrCJ;ED0CF;IAEI;IACA;IACA;;;AAGF;EC3CD;EACA;EACA;ED2CG;EACA;;AC1CF;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;;ADvCF;EACE;;;AAKN;EACE;EACA;EACA;;AC/DA;ED4DF;IAKI;;;AAGF;EACE","file":"landing.css"}

View file

@ -1,6 +1,5 @@
--- ---
title: Extra title: Extra
layout: layouts/page.njk
date: Last Modified date: Last Modified
eleventyNavigation: eleventyNavigation:
key: Extra key: Extra

View file

@ -11,7 +11,7 @@ eleventyNavigation:
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. 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.
This landing page hosts links for where I can be found online. Use the button at the bottom to view my full website. This landing page hosts links for where I can be found online. Use the button at the top to view my full website.
## Links ## Links

View file

@ -1,6 +1,5 @@
--- ---
title: Ograph Collective title: Ograph Collective
layout: layouts/page.njk
date: Last Modified date: Last Modified
eleventyNavigation: eleventyNavigation:
key: Ograph key: Ograph

View file

@ -1,6 +1,5 @@
--- ---
title: Poetry title: Poetry
layout: layouts/page.njk
permalink: /poetry/ permalink: /poetry/
override:tags: [] override:tags: []
eleventyNavigation: eleventyNavigation:

View file

@ -9,61 +9,42 @@ VARIABLES
=============================================================================== ===============================================================================
*/ */
$gutter: 10px; $gutter: 1em;
$max-width: 750px;
$max-height: 500px; * {
$avatar-width: 256px; line-height: 1.7;
}
html { html {
font: { font: {
size: 14pt; size: 12pt;
family: "Linux Libertine", "Times New Roman", Times, serif; family: "Linux Libertine", "Times New Roman", Times, serif;
} }
line-height: 1.5;
} }
body { body {
display: flex; display: grid;
flex-direction: column; padding: $gutter * 2;
align-items: center;
justify-content: center;
gap: 5px;
margin: auto;
padding: 1em 0;
background-color: #{colors.$background};
@include breakpoint("md") { @include breakpoint("md") {
width: $max-width; grid-template-columns: 2fr 3fr 2fr;
} gap: $gutter;
height: 100%;
@include breakpoint("lg") { padding: ($gutter * 2) 0;
height: 100vh;
width: $max-width + $avatar-width;
}
}
a {
color: #{colors.$link};
text-decoration: underline #{colors.$link} 2px;
&:hover {
color: #{colors.$link-hover};
} }
} }
nav { nav {
align-self: flex-end; grid-row: 1;
margin-right: 1em; grid-column: 1;
text-align: right; justify-self: right;
align-self: end;
font-size: 1.5em;
font-weight: bold;
@include breakpoint("md") { @include breakpoint("md") {
margin: 0; grid-column: 2;
} }
.enter-link { a {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
&:hover { &:hover {
font-style: italic; font-style: italic;
} }
@ -71,47 +52,37 @@ nav {
&::after { &::after {
content: " >>"; content: " >>";
font-style: normal; font-style: normal;
text-decoration: underline #{colors.$background} 2px;
color: #{colors.$muted};
} }
} }
} }
main { main {
display: flex; @include breakpoint("md") {
flex-direction: column; grid-row: 2;
align-items: center; grid-column: 2;
gap: 2em; justify-self: center;
margin: 1em 0;
color: #{colors.$text};
@include breakpoint("lg") {
flex-direction: row-reverse;
align-items: flex-start;
max-height: $max-height;
} }
article { article {
background: #{colors.$base-950}; @include markup;
border-top: solid #{colors.$base-900}; padding: 0;
border-bottom: solid #{colors.$base-900};
font-size: 1rem; font-size: 1rem;
@include breakpoint("md") { h1 {
border: solid #{colors.$base-900}; margin-top: 0;
max-height: $max-height;
overflow: scroll;
max-width: $max-width;
}
@include markup;
}
aside {
img {
width: 100%;
image-rendering: pixelated;
max-width: #{$avatar-width};
} }
} }
} }
aside {
grid-row: 1;
grid-column: 1;
max-width: 192px;
@include breakpoint("md") {
grid-column: 2;
}
img {
image-rendering: pixelated;
}
}

View file

@ -1,3 +1,3 @@
{ {
"layout": "layouts/page.njk" "layout": "layouts/default.njk"
} }