diff --git a/src/_includes/layouts/landing.njk b/src/_includes/layouts/landing.njk index 4ff2779..cf62b6c 100644 --- a/src/_includes/layouts/landing.njk +++ b/src/_includes/layouts/landing.njk @@ -12,9 +12,9 @@
{{ content | safe }}
-
+ diff --git a/src/css/landing.css b/src/css/landing.css index 2ae79c7..fc15b77 100644 --- a/src/css/landing.css +++ b/src/css/landing.css @@ -79,31 +79,26 @@ VARIABLES =============================================================================== */ +* { + line-height: 1.7; + border: dotted red 1px; +} + html { - font-size: 14pt; - font-family: "Linux Libertine", "Times New Roman", Times, serif; - line-height: 1.5; + font-size: 12pt; + font-family: sans-serif; } body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 5px; + display: grid; margin: auto; - padding: 1em 0; - background-color: #141013; -} -@media screen and (min-width: 768px) { - body { - width: 750px; - } + padding: 2em 0; } @media screen and (min-width: 992px) { body { - height: 100vh; - width: 1006px; + grid-template-columns: 1fr 2fr 1fr; + gap: 1em; + height: 100%; } } @@ -116,61 +111,42 @@ a:hover { } nav { - align-self: flex-end; - margin-right: 1em; - text-align: right; + grid-row: 1; + grid-column: 1; + justify-self: right; + align-self: end; } -@media screen and (min-width: 768px) { - nav { - margin: 0; - } -} -nav .enter-link { +nav a { font-size: 1.5em; font-weight: bold; image-rendering: pixelated; } -nav .enter-link:hover { +nav a:hover { font-style: italic; } -nav .enter-link::after { +nav a::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) { + nav { + grid-column: 2; + } +} + @media screen and (min-width: 992px) { main { - flex-direction: row-reverse; - align-items: flex-start; - max-height: 500px; + grid-row: 2; + grid-column: 2; + justify-self: center; } } 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; line-height: 1.5; padding: 0 1.5em; -} -@media screen and (min-width: 768px) { - main article { - border: solid rgb(40, 39, 38); - max-height: 500px; - overflow: scroll; - max-width: 750px; - } + padding: 0; } main article p, main article blockquote, @@ -244,10 +220,24 @@ main article a { main article a:hover { color: #beec1f; } -main aside img { - width: 100%; +main article h1 { + margin-top: 0; +} + +aside { + grid-row: 1; + grid-column: 1; + justify-self: left; + max-width: 192px; +} +aside img { image-rendering: pixelated; - max-width: 256px; +} +@media screen and (min-width: 992px) { + aside { + grid-column: 2; + justify-self: start; + } } /*# sourceMappingURL=landing.css.map */ diff --git a/src/css/landing.css.map b/src/css/landing.css.map index 46250dc..65469bb 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;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 +{"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;EACE;EACA;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;EACA;;ACfA;EDYF;IAMI;IACA;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;ACjDJ;EDgCF;IAsBI;;;;ACtDF;ED0DF;IAEI;IACA;IACA;;;AAGF;EACE;EC5DH;EACA;EACA;ED8DG;;AC5DF;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;;ADrBF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;ACrFF;ED8EF;IAWI;IACA","file":"landing.css"} \ No newline at end of file diff --git a/src/index.md b/src/index.md index 2b05f0c..7affed3 100644 --- a/src/index.md +++ b/src/index.md @@ -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. -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 diff --git a/src/scss/landing.scss b/src/scss/landing.scss index 0fc41d7..31ca968 100644 --- a/src/scss/landing.scss +++ b/src/scss/landing.scss @@ -14,31 +14,27 @@ $max-width: 750px; $max-height: 500px; $avatar-width: 256px; +* { + line-height: 1.7; + border: dotted red 1px; +} + html { font: { - size: 14pt; - family: "Linux Libertine", "Times New Roman", Times, serif; + size: 12pt; + family: sans-serif; } - line-height: 1.5; } body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 5px; + display: grid; margin: auto; - padding: 1em 0; - background-color: #{colors.$background}; - - @include breakpoint("md") { - width: $max-width; - } + padding: 2em 0; @include breakpoint("lg") { - height: 100vh; - width: $max-width + $avatar-width; + grid-template-columns: 1fr 2fr 1fr; + gap: 1em; + height: 100%; } } @@ -51,15 +47,12 @@ a { } nav { - align-self: flex-end; - margin-right: 1em; - text-align: right; + grid-row: 1; + grid-column: 1; + justify-self: right; + align-self: end; - @include breakpoint("md") { - margin: 0; - } - - .enter-link { + a { font-size: 1.5em; font-weight: bold; image-rendering: pixelated; @@ -71,47 +64,46 @@ nav { &::after { content: " >>"; font-style: normal; - text-decoration: underline #{colors.$background} 2px; - color: #{colors.$muted}; } } + + @include breakpoint("lg") { + grid-column: 2; + } } main { - display: flex; - flex-direction: column; - align-items: center; - gap: 2em; - margin: 1em 0; - color: #{colors.$text}; - @include breakpoint("lg") { - flex-direction: row-reverse; - align-items: flex-start; - max-height: $max-height; + grid-row: 2; + grid-column: 2; + justify-self: center; } article { - background: #{colors.$base-950}; - border-top: solid #{colors.$base-900}; - border-bottom: solid #{colors.$base-900}; font-size: 1rem; - @include breakpoint("md") { - border: solid #{colors.$base-900}; - max-height: $max-height; - overflow: scroll; - max-width: $max-width; - } - @include markup; - } - aside { - img { - width: 100%; - image-rendering: pixelated; - max-width: #{$avatar-width}; + padding: 0; + + h1 { + margin-top: 0; } } } + +aside { + grid-row: 1; + grid-column: 1; + justify-self: left; + max-width: 192px; + + img { + image-rendering: pixelated; + } + + @include breakpoint("lg") { + grid-column: 2; + justify-self: start; + } +}