From 88f6485e3b6b9808792d8040e957058b590d70a2 Mon Sep 17 00:00:00 2001 From: gil Date: Mon, 10 Jun 2024 13:42:50 -0500 Subject: [PATCH] Revamp landing --- README | 9 ++- package.json | 2 +- src/_includes/bmac.njk | 8 +++ src/_includes/landing.njk | 18 +---- src/css/landing.css | 112 +++++++++++++++++------------- src/css/landing.css.map | 2 +- src/img/landing-button.png | Bin 590 -> 0 bytes src/img/landing-sigil.png | Bin 0 -> 3455 bytes src/index.md | 20 +++--- src/scss/landing.scss | 138 ++++++++++++++++++++----------------- 10 files changed, 172 insertions(+), 137 deletions(-) create mode 100644 src/_includes/bmac.njk delete mode 100644 src/img/landing-button.png create mode 100644 src/img/landing-sigil.png diff --git a/README b/README index 7fae50f..b775823 100644 --- a/README +++ b/README @@ -1,13 +1,20 @@ # Todo - [ ] Add colophon and licensing info -- [ ] Clean up and polish landing page +- [x] Clean up and polish landing page - [ ] Do some i18n? (e.g., English, German, Tagalog, Bisaya, Spanish, etc.) - [ ] Add more graphical stuff to site so it doesn't look so bland - [ ] Banner image - [ ] Landing background + - [ ] Landing link icons - [ ] Global background - [ ] Custom badge - [ ] Make a webring with ringfairy and join webrings - [ ] Redo about page - [ ] Add blog post + +# Changelog + +## 0.0.1 + +- Added landing page \ No newline at end of file diff --git a/package.json b/package.json index c453e55..5626fb4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gils-nexus", - "version": "1.0.1", + "version": "0.0.1", "description": "", "main": "index.js", "scripts": { diff --git a/src/_includes/bmac.njk b/src/_includes/bmac.njk new file mode 100644 index 0000000..8264cb5 --- /dev/null +++ b/src/_includes/bmac.njk @@ -0,0 +1,8 @@ + + Buy Me A Coffee + \ No newline at end of file diff --git a/src/_includes/landing.njk b/src/_includes/landing.njk index cdebf85..3466d7e 100644 --- a/src/_includes/landing.njk +++ b/src/_includes/landing.njk @@ -9,22 +9,10 @@ +
{{ content | safe }}
Enter
-
-
{{ content | safe }}
- - Enter site - -
diff --git a/src/css/landing.css b/src/css/landing.css index b01194a..91a9d31 100644 --- a/src/css/landing.css +++ b/src/css/landing.css @@ -82,86 +82,102 @@ COLORS :root { font-size: 14pt; font-family: "Linux Libertine", "Times New Roman", Times, serif; - line-height: 1.25; + line-height: 1.5; } body { background-color: #141013; - width: 100vw; - height: 100vh; display: flex; flex-direction: column; - align-items: center; - justify-content: center; gap: 10px; + align-items: center; } -@media screen and (min-width: 600px) { +@media screen and (min-width: 768px) { body { flex-direction: row; + justify-content: center; + height: 100vh; } } -main article { +main { width: 100%; max-width: 500px; - height: auto; - max-height: 500px; - overflow: scroll; - padding: 10px; - border: solid white; + gap: 10px; color: white; - font-size: 1rem; + display: flex; + flex-direction: column; } -main article blockquote { - background: #30272e; - border-bottom: solid white; +main article { + background: rgb(28, 27, 26); padding: 10px; - font-size: 1.25em; -} -main article blockquote h1 { - margin-top: 10px; - font-weight: bold; -} -main article blockquote h1::after { - content: ""; - margin-left: 10px; - width: 10px; - height: 24px; - background: white; - display: inline-block; - vertical-align: bottom; - animation: cursor-blink 1.5s steps(1) infinite; -} -@keyframes cursor-blink { - 0% { - background: transparent; - } - 50% { - background: white; - } + padding-top: 0; + font-size: 1rem; } main article :first-child { margin-top: 0; } -main article p { - margin-top: 10px; +main article h1 { + font-size: 2em; +} +main article h1 a { + font-size: 0.5em; +} +main article h2 { + font-weight: bold; +} +main article *:not(li) + *:not(li) { + margin-top: 1em; } main article ol, main article ul { all: revert; - margin-bottom: 0; + margin: 10px 0; padding-left: 1em; } -main img { - display: block; - margin: auto; - margin-top: 10px; - image-rendering: pixelated; +@media screen and (min-width: 768px) { + main article { + border: solid rgb(40, 39, 38); + max-height: 400px; + overflow: scroll; + } +} +main a { + color: rgb(102, 128, 11); + text-decoration: underline rgb(102, 128, 11) 2px; +} +main a:hover { + color: rgb(135, 154, 57); } aside { - max-width: 216px; + margin-top: 20px; + width: 256px; +} +@media screen and (min-width: 768px) { + aside { + margin-top: 0; + margin-left: 10px; + } +} +aside img { + width: 100%; image-rendering: pixelated; + max-width: 256px; +} + +.spacer { + height: 2em; +} + +.entry-button { + font-size: 1.5em; + margin: auto; + margin-bottom: 10px; +} + +.entry-button:hover { + font-style: italic; } /*# sourceMappingURL=landing.css.map */ diff --git a/src/css/landing.css.map b/src/css/landing.css.map index dd3b600..1065241 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":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;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;AAYA;;AAAA;AAAA;;AAAA;AAYA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,KAlCO;;ACGP;EDuBF;IAUI;;;;AAKF;EACE;EACA,WAzCQ;EA0CR;EACA,YA3CQ;EA4CR;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA,SAzDG;EA0DH;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EASA;;AARA;EACE;IACE;;EAEF;IACE;;;AAOR;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;EACA,YAxGK;EAyGL;;;AAIJ;EACE,WA1Ga;EA2Gb","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":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;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;AAYA;;AAAA;AAAA;;AAAA;AAUA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KA5BO;EA6BP;;AC3BA;EDsBF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,WAtCU;EAuCV,KAzCO;EA0CP;EACA;EACA;;AAEA;EACE;EACA,SAhDK;EAiDL;EACA;;AAEA;EACE;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;ACzEJ;ED4CA;IAiCI;IACA;IACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;AC/FA;ED6FF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"landing.css"} \ No newline at end of file diff --git a/src/img/landing-button.png b/src/img/landing-button.png deleted file mode 100644 index 61216f54cc86c48626ccfcd0ecb0076a332cf075..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 590 zcmV-U0Px%2uVaiRA_uv+SJcCUC8Adu$+W0C+aacVrL`3vj;Ud^dN-6AK_*8Obj7RPp$vR7C?%GB=A)QKV z)xyeT5ve-V)>-BA`B&qu@+AMX=aOD;d`r|e(y1R()pD-twDpqJT6L)1<-GQI@ybE( zq?&))b97v?s|eIbI%x#gdUaXX-PO-QGp!eCeXHJxxLNv0)=b3z<|m6kM>B<%VKjS2 z!Rm(=KS{2p*E$Z}`Am1D=(~h=g3-Iq=%9Yg=zpz`(akzDV{ z%5&>FYriSVo>ox#s2^xw$0{G~>q+(e@>~6glHa<%Ht%yI zdB661zv)=zSjW+MURv$wy}tK&abB08&-P>fR@ez$#_vyhUbfeX;xDsSk0Er~NGqMh c5-a-u13u&vNjYQ;RR91007*qoM6N<$g20U`lmGw# diff --git a/src/img/landing-sigil.png b/src/img/landing-sigil.png new file mode 100644 index 0000000000000000000000000000000000000000..59f83ea1c45ba4bef2f966a864ec2a219064d1ef GIT binary patch literal 3455 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 You've arrived at the edge of a clearing. -> -> The air is thick with an energy, which seemingly converges on at this place. -> -> # Continue? (Y/N) +# Gil [[he/they]](https://en.pronouns.page/@kalanggam) -My name is Gil (he/they), and I'm a software/game developer and writer. You can find me online at: +Hey. I'm Gil. 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. -* Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil) -* Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil) +This landing page hosts links for where I can be found online. Use the button at the bottom to view my full website. + +## Links + +- Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil) +- 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) diff --git a/src/scss/landing.scss b/src/scss/landing.scss index 7b8fe35..71c6376 100644 --- a/src/scss/landing.scss +++ b/src/scss/landing.scss @@ -1,3 +1,4 @@ +@use "sass:math"; @use "colors"; @use "fonts"; @use "mixins" as *; @@ -11,8 +12,8 @@ VARIABLES $gutter: 10px; $padding: $gutter; $max-width: 500px; -$max-height: $max-width; -$avatar-width: 216px; +$max-height: math.div($max-width, 2); +$avatar-width: 256px; /* @@ -21,103 +22,114 @@ COLORS */ $fg: white; -$fg-logo: colors.$magenta-600; -$link: colors.$green-600; -$bg-hover: scale-color(colors.$green-400, $alpha: -75%); -$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%); +$link-color: colors.$green-600; +$link-color-hover: colors.$green-400; :root { font: { size: 14pt; family: "Linux Libertine", "Times New Roman", Times, serif; } - line-height: 1.25; + line-height: 1.5; } body { background-color: #{colors.$bg}; - width: 100vw; - height: 100vh; display: flex; flex-direction: column; - align-items: center; - justify-content: center; gap: $gutter; - @include breakpoint("sm") { + align-items: center; + + @include breakpoint("md") { flex-direction: row; + justify-content: center; + height: 100vh; } } main { + width: 100%; + max-width: $max-width; + gap: $gutter; + color: #{$fg}; + display: flex; + flex-direction: column; + article { - width: 100%; - max-width: $max-width; - height: auto; - max-height: $max-height; - overflow: scroll; - padding: #{$padding}; - - border: solid #{$fg}; - color: #{$fg}; - + background: #{colors.$base-950}; + padding: $gutter; + padding-top: 0; font-size: 1rem; - blockquote { - background: lighten(colors.$bg, $amount: 10%); - border-bottom: solid white; - padding: $gutter; - font-size: 1.25em; - - h1 { - margin-top: #{$gutter}; - font-weight: bold; - } - - h1::after { - content: ""; - margin-left: #{$gutter}; - width: 10px; - height: 24px; - background: #{$fg}; - display: inline-block; - vertical-align: bottom; - @keyframes cursor-blink { - 0% { - background: transparent; - } - 50% { - background: #{$fg}; - } - } - animation: cursor-blink 1.5s steps(1) infinite; - } - } - :first-child { margin-top: 0; } - p { - margin-top: #{$gutter}; + h1 { + font-size: 2em; + a { + font-size: 0.5em; + } + } + + h2 { + font-weight: bold; + } + + *:not(li) + *:not(li) { + margin-top: 1em; } ol, ul { all: revert; - margin-bottom: 0; + margin: #{$gutter} 0; padding-left: 1em; } + + @include breakpoint("md") { + border: solid #{colors.$base-900}; + max-height: 400px; + overflow: scroll; + } } - img { - display: block; - margin: auto; - margin-top: $gutter; - image-rendering: pixelated; + a { + color: #{$link-color}; + text-decoration: underline #{$link-color} 2px; + + &:hover { + color: #{$link-color-hover}; + } } } aside { - max-width: $avatar-width; - image-rendering: pixelated; + margin-top: #{$gutter * 2}; + width: #{$avatar-width}; + + @include breakpoint("md") { + margin-top: 0; + margin-left: #{$gutter}; + } + + img { + width: 100%; + image-rendering: pixelated; + max-width: #{$avatar-width}; + } } + +.spacer { + height: 2em; +} + +.entry-button { + font-size: 1.5em; + margin: auto; + margin-bottom: #{$gutter}; +} + +.entry-button:hover { + font-style: italic; +} \ No newline at end of file