gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Revamp landing

Browse source
This commit is contained in:
gil 2024-06-10 13:42:50 -05:00
parent f010260a96
commit 88f6485e3b
10 changed files with 172 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README
View file

@ -1,13 +1,20 @@
# Todo # Todo
- [ ] Add colophon and licensing info - [ ] 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.) - [ ] Do some i18n? (e.g., English, German, Tagalog, Bisaya, Spanish, etc.)
- [ ] Add more graphical stuff to site so it doesn't look so bland - [ ] Add more graphical stuff to site so it doesn't look so bland
- [ ] Banner image - [ ] Banner image
- [ ] Landing background - [ ] Landing background
- [ ] Landing link icons
- [ ] Global background - [ ] Global background
- [ ] Custom badge - [ ] Custom badge
- [ ] Make a webring with ringfairy and join webrings - [ ] Make a webring with ringfairy and join webrings
- [ ] Redo about page - [ ] Redo about page
- [ ] Add blog post - [ ] Add blog post
# Changelog
## 0.0.1
- Added landing page

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "gils-nexus", "name": "gils-nexus",
"version": "1.0.1", "version": "0.0.1",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

8
src/_includes/bmac.njk Normal file
View file

@ -0,0 +1,8 @@
<a href="https://www.buymeacoffee.com/gilcaley" target="_blank">
<img
src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png"
alt="Buy Me A Coffee"
title="Buy Me A Coffee"
style="height: 60px !important;width: 217px !important; display: inline;"
>
</a>

18
src/_includes/landing.njk
View file

@ -9,22 +9,10 @@
<link rel="stylesheet" href="/css/landing.css"> <link rel="stylesheet" href="/css/landing.css">
</head> </head>
<body> <body>
<main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main>
<aside> <aside>
<img <img src="../img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
src="../img/gba-gil.png" <div class="spacer"></div>
alt="A picture of Gil (me), taken with webgbcam"
title="A picture of Gil (me), taken with webgbcam"
>
</aside> </aside>
<main>
<article>{{ content | safe }}</article>
<a href="/about">
<img
src="../img/landing-button.png"
alt="Enter site"
title="Enter site"
>
</a>
</main>
</body> </body>
</html> </html>

112
src/css/landing.css
View file

@ -82,86 +82,102 @@ COLORS
:root { :root {
font-size: 14pt; font-size: 14pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif; font-family: "Linux Libertine", "Times New Roman", Times, serif;
line-height: 1.25; line-height: 1.5;
} }
body { body {
background-color: #141013; background-color: #141013;
width: 100vw;
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px; gap: 10px;
align-items: center;
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 768px) {
body { body {
flex-direction: row; flex-direction: row;
justify-content: center;
height: 100vh;
} }
} }
main article { main {
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
height: auto; gap: 10px;
max-height: 500px;
overflow: scroll;
padding: 10px;
border: solid white;
color: white; color: white;
font-size: 1rem; display: flex;
flex-direction: column;
} }
main article blockquote { main article {
background: #30272e; background: rgb(28, 27, 26);
border-bottom: solid white;
padding: 10px; padding: 10px;
font-size: 1.25em; padding-top: 0;
} font-size: 1rem;
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;
}
} }
main article :first-child { main article :first-child {
margin-top: 0; margin-top: 0;
} }
main article p { main article h1 {
margin-top: 10px; 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 ol,
main article ul { main article ul {
all: revert; all: revert;
margin-bottom: 0; margin: 10px 0;
padding-left: 1em; padding-left: 1em;
} }
main img { @media screen and (min-width: 768px) {
display: block; main article {
margin: auto; border: solid rgb(40, 39, 38);
margin-top: 10px; max-height: 400px;
image-rendering: pixelated; 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 { 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; 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 */ /*# sourceMappingURL=landing.css.map */

2
src/css/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":"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"} {"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"}

BIN
src/img/landing-button.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 590 B

BIN
src/img/landing-sigil.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

20
src/index.md
View file

@ -1,15 +1,19 @@
--- ---
layout: landing.njk layout: landing.njk
date: Last Modified date: Last Modified
entry: /about/
--- ---
> You've arrived at the edge of a clearing. # Gil [[he/they]](https://en.pronouns.page/@kalanggam)
>
> The air is thick with an energy, which seemingly converges on at this place.
>
> # Continue? (Y/N)
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) This landing page hosts links for where I can be found online. Use the button at the bottom to view my full website.
* Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
## 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)

138
src/scss/landing.scss
View file

@ -1,3 +1,4 @@
@use "sass:math";
@use "colors"; @use "colors";
@use "fonts"; @use "fonts";
@use "mixins" as *; @use "mixins" as *;
@ -11,8 +12,8 @@ VARIABLES
$gutter: 10px; $gutter: 10px;
$padding: $gutter; $padding: $gutter;
$max-width: 500px; $max-width: 500px;
$max-height: $max-width; $max-height: math.div($max-width, 2);
$avatar-width: 216px; $avatar-width: 256px;
/* /*
@ -21,103 +22,114 @@ COLORS
*/ */
$fg: white; $fg: white;
$fg-logo: colors.$magenta-600; $link-color: colors.$green-600;
$link: colors.$green-600; $link-color-hover: colors.$green-400;
$bg-hover: scale-color(colors.$green-400, $alpha: -75%);
$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
:root { :root {
font: { font: {
size: 14pt; size: 14pt;
family: "Linux Libertine", "Times New Roman", Times, serif; family: "Linux Libertine", "Times New Roman", Times, serif;
} }
line-height: 1.25; line-height: 1.5;
} }
body { body {
background-color: #{colors.$bg}; background-color: #{colors.$bg};
width: 100vw;
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
gap: $gutter; gap: $gutter;
@include breakpoint("sm") { align-items: center;
@include breakpoint("md") {
flex-direction: row; flex-direction: row;
justify-content: center;
height: 100vh;
} }
} }
main { main {
width: 100%;
max-width: $max-width;
gap: $gutter;
color: #{$fg};
display: flex;
flex-direction: column;
article { article {
width: 100%; background: #{colors.$base-950};
max-width: $max-width; padding: $gutter;
height: auto; padding-top: 0;
max-height: $max-height;
overflow: scroll;
padding: #{$padding};
border: solid #{$fg};
color: #{$fg};
font-size: 1rem; 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 { :first-child {
margin-top: 0; margin-top: 0;
} }
p { h1 {
margin-top: #{$gutter}; font-size: 2em;
a {
font-size: 0.5em;
}
}
h2 {
font-weight: bold;
}
*:not(li) + *:not(li) {
margin-top: 1em;
} }
ol, ol,
ul { ul {
all: revert; all: revert;
margin-bottom: 0; margin: #{$gutter} 0;
padding-left: 1em; padding-left: 1em;
} }
@include breakpoint("md") {
border: solid #{colors.$base-900};
max-height: 400px;
overflow: scroll;
}
} }
img { a {
display: block; color: #{$link-color};
margin: auto; text-decoration: underline #{$link-color} 2px;
margin-top: $gutter;
image-rendering: pixelated; &:hover {
color: #{$link-color-hover};
}
} }
} }
aside { aside {
max-width: $avatar-width; margin-top: #{$gutter * 2};
image-rendering: pixelated; 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;
}