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 61216f5..0000000 Binary files a/src/img/landing-button.png and /dev/null differ diff --git a/src/img/landing-sigil.png b/src/img/landing-sigil.png new file mode 100644 index 0000000..59f83ea Binary files /dev/null and b/src/img/landing-sigil.png differ diff --git a/src/index.md b/src/index.md index 5fcbe84..19d13c9 100644 --- a/src/index.md +++ b/src/index.md @@ -1,15 +1,19 @@ --- layout: landing.njk date: Last Modified +entry: /about/ --- -> 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