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

Add home layout

Browse source
This commit is contained in:
gil 2024-06-20 20:34:06 -05:00
parent a25850a146
commit 94338fbab6
19 changed files with 109 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_data/meta.js
View file

@ -2,5 +2,5 @@ module.exports = {
siteName: "Gil's Nexus",
siteDescription: "",
authorName: "Gil",
homepage: "/home/",
homepage: "/",
};

12
src/_includes/layouts/base.njk
View file

@ -1,10 +1,12 @@
<!doctype html>
<html lang="en">
<head>
{% include "partials/meta.njk" %}
<link rel="stylesheet" href="/css/global.css">
</head>
{% include "partials/meta.njk" %}
<body>
{{ content | safe }}
<div class="site">
{% include "partials/header.njk" %}
{% include "partials/navbar.njk" %}
{{ content | safe }}
{% include "partials/footer.njk" %}
</div>
</body>
</html>

5
src/_includes/layouts/default.njk
View file

@ -1,8 +1,7 @@
---
layout: layouts/base.njk
---
{% include "partials/header.njk" %}
<main class="page markup">
{{ content | safe }}
</main>
{% include "partials/footer.njk" %}
</main>

21
src/_includes/layouts/home.njk Normal file
View file

@ -0,0 +1,21 @@
---
layout: layouts/base.njk
---
<main class="page markup">
<h1>Blurb</h1>
{{ content | safe }}
</main>
<aside class="markup">
<h1>Status</h1>
<p>Writing posts</p>
</aside>
<aside class="markup">
<h1>Latest posts</h1>
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
</ul>
<p><a href="/rss.xml">Feed</a></p>
</aside>

16
src/_includes/layouts/landing.njk
View file

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
{% include "partials/meta.njk" %}
<link rel="stylesheet" href="/css/landing.css">
</head>
<body>
<nav><a href="{{ meta.homepage }}" class="enter-link">Enter</a></nav>
<main>
<article class="markup">{{ content | safe }}</article>
</main>
<aside>
<img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
</aside>
</body>
</html>

2
src/_includes/partials/footer.njk
View file

@ -1,4 +1,4 @@
<footer class="footer-main"><p>
<footer class="footer"><p>
Made with <a href="https://www.11ty.dev/">11ty</a>.
{% if page.date %}<i>
Last updated on <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.

1
src/_includes/partials/header.njk
View file

@ -1,4 +1,3 @@
<header class="banner">
<a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a>
<nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav>
</header>

13
src/_includes/partials/meta.njk
View file

@ -1,5 +1,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="{{ eleventy.generator }}">
<title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
<link rel="stylesheet" href="/css/reset.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="{{ eleventy.generator }}">
<title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/global.css">
</head>

3
src/_includes/partials/navbar.njk Normal file
View file

@ -0,0 +1,3 @@
<nav class="navbar">
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
</nav>

2
src/about.md
View file

@ -25,4 +25,4 @@ Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software de
I first started building this site in mid 2023, and I've been gradually tweaking it since then.
This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then built into plain HTML. I used [Sass](https://sass-lang.com/) to build the CSS. Source files are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).
This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then parsed into plain HTML, using templates I created for Eleventy. I used [Sass](https://sass-lang.com/) to create some stylesheets. The source files for this website are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).

62
src/css/global.css
View file

@ -129,74 +129,70 @@ Full license texts:
color-scheme: light dark;
}
body {
.site {
display: grid;
padding: 2em;
}
.site > .banner {
text-align: center;
}
.site > .navbar {
text-align: center;
}
.site > .navbar li {
display: inline-flex;
}
@media (min-width: 769px) {
body {
.site {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 3;
column-gap: 1em;
height: 100%;
padding: 2em 0;
}
body > header {
.site > .banner {
grid-row: 1;
grid-column: 1/-1;
}
body > footer {
grid-row: 3;
.site > .navbar {
grid-row: 2;
grid-column: 1/-1;
}
.site > .footer {
grid-row: 4;
grid-column: 1/-1;
margin: 1em;
text-align: center;
}
}
@media (min-width: 1025px) {
body {
.site {
grid-template-columns: repeat(12, 1fr);
}
}
main,
article {
.page {
font-size: 1rem;
margin: 0 1em;
}
@media (min-width: 769px) {
main,
article {
.page {
display: grid;
grid-template-columns: subgrid;
grid-row: 2;
grid-row: 3;
grid-column: 2/span 8;
margin: 0;
}
main *,
article * {
.page * {
grid-column: 2/span 6;
}
}
@media (min-width: 1025px) {
main,
article {
.page {
grid-column: 2/span 10;
}
main *,
article * {
.page * {
grid-column: 4/span 4;
}
}
header.banner {
text-align: center;
}
header.banner nav {
margin-bottom: 1em;
}
header.banner nav li {
display: inline-flex;
}
footer {
margin: 1em;
text-align: center;
}
/*# sourceMappingURL=global.css.map */

2
src/css/global.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;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;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AHvCF;EAEI,WEPa;EFQb,aEPe;EFSjB;;;AAGF;EACE;EACA;;AIskBE;EJxkBJ;IAII;IACA;IACA,YEzBK;IF0BL;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;AIujBF;EJxkBJ;IAsBI;;;;AAIJ;AAAA;EAEE;;AI4iBE;EJ9iBJ;AAAA;IAKI;IACA;IACA;IACA;;EAEA;AAAA;IACE;;;AImiBF;EJ9iBJ;AAAA;IAgBI;;EAEA;AAAA;IACE;;;;AAKN;EACE;;AACA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA","file":"global.css"}
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;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;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AHvCF;EAEI,WEPa;EFQb,aEPe;EFSjB;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AI6jBF;EJxkBJ;IAgBI;IACA;IACA,YErCK;IFsCL;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AIoiBF;EJxkBJ;IAyCI;;;;AAIJ;EACE;EACA;;AIyhBE;EJ3hBJ;IAKI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AI+gBF;EJ3hBJ;IAiBI;;EAEA;IACE","file":"global.css"}

194
src/css/landing.css
View file

@ -1,194 +0,0 @@
/* IMPORTS ================================================================= */
.markup {
word-wrap: break-word;
line-height: 1.7;
padding: 0;
}
.markup p,
.markup blockquote,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
margin: 1em 0;
}
.markup ul,
.markup ol {
list-style-type: revert;
padding-left: 30px;
}
.markup h1 {
font-size: 2.5em;
}
.markup h2 {
font-size: 2em;
}
.markup h3 {
font-size: 1.5em;
}
.markup h4 {
font-size: 1.2em;
}
.markup h5 {
font-size: 1em;
}
.markup h6 {
font-size: 1em;
}
.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
margin: 0.5em 0 0.25em 0;
}
.markup h1 + p,
.markup h2 + p,
.markup h3 + p {
margin-top: 0.5em;
}
.markup img {
max-width: 100%;
}
.markup code,
.markup pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin: 0 2px;
padding: 0 5px;
white-space: pre;
}
.markup pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
/* ============================================================================
GLOBAL VARIABLES
============================================================================ */
/* Media breakpoints ------------------------------------------------------- */
/* Spacing ----------------------------------------------------------------- */
/* Typography -------------------------------------------------------------- */
/* -- Font ----------------------------------------------------------------- */
/* ============================================================================
FONT SOURCES
============================================================================ */
/* Linux Libertine ------------------------------------------------------------
Licensed under GPL and OFL 1.1
Full license texts:
- https://gils.nexus/font/GPL.txt
- https://gils.nexus/font/OFL-1.1.txt
---------------------------------------------------------------------------- */
@font-face {
font-family: "Linux Libertine";
font-style: normal;
src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 600;
src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: normal;
font-weight: 700;
src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 600;
src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf");
}
@font-face {
font-family: "Linux Libertine";
font-style: italic;
font-weight: 700;
src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
}
html {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
}
body {
display: grid;
padding: 2em;
}
@media (min-width: 769px) {
body {
grid-template-columns: 2fr 3fr 2fr;
gap: 1em;
height: 100%;
padding: 2em 0;
}
}
nav {
grid-row: 1;
grid-column: 1;
justify-self: right;
align-self: end;
font-size: 1.5em;
font-weight: bold;
}
@media (min-width: 769px) {
nav {
grid-column: 2;
}
}
nav a:hover {
font-style: italic;
}
nav a::after {
content: " >>";
font-style: normal;
}
@media (min-width: 769px) {
main {
grid-row: 2;
grid-column: 2;
justify-self: center;
}
}
main article {
padding: 0;
font-size: 1rem;
}
main article h1 {
margin-top: 0;
}
aside {
grid-row: 1;
grid-column: 1;
max-width: 192px;
}
@media (min-width: 769px) {
aside {
grid-column: 2;
}
}
aside img {
image-rendering: pixelated;
}
/*# sourceMappingURL=landing.css.map */

1
src/css/landing.css.map
View file

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;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;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AH/CF;EAEI,WECa;EFAb,aECe;;;AFGnB;EACE;EACA;;AI+kBE;EJjlBJ;IAII;IACA,KEfK;IFgBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AIgkBE;EJtkBJ;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AIojBF;EJ/iBJ;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AI2hBE;EJ9hBJ;IAKI;;;AAGF;EACE","file":"landing.css"}

19
src/home.md
View file

@ -1,19 +0,0 @@
---
date: Last Modified
eleventyNavigation:
key: Home
---
# Home
## Status
Latest status here...
## Blog
- Post 1
- Post 2
- Post 3
[feed](/rss) (not actual yet)

19
src/index.md
View file

@ -1,21 +1,8 @@
---
layout: layouts/landing.njk
layout: layouts/home.njk
date: Last Modified
eleventyNavigation:
key: Landing
order: 200
key: Home
---
# Gil's Nexus
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 top to view my full website.
## Links
- Microblog: <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
- 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)
Custom blurb

6
src/poems/index.md
View file

@ -7,9 +7,11 @@ eleventyNavigation:
order: 2
---
# Poetry
<ul>
{%- for poem in collections.poems reversed -%}
{% if forloop.first == true %}<ul>{% endif %}
<li><a href="{{ poem.url }}">{{ poem.data.title }}</a>
&mdash; <i>updated <time datetime="{{ poem.date | formatDate }}">{{ poem.date | formatDate }}</time></i></li>
{% if forloop.last == true %}</ul>{% endif %}
{%- endfor -%}
</ul>

52
src/scss/global.scss
View file

@ -26,9 +26,21 @@
color-scheme: light dark;
}
body {
.site {
display: grid;
padding: $gutter * 2;
& > .banner {
text-align: center;
}
& > .navbar {
text-align: center;
li {
display: inline-flex;
}
}
@include media(">md") {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 3;
@ -36,15 +48,22 @@ body {
height: 100%;
padding: ($gutter * 2) 0;
& > header {
& > .banner {
grid-row: 1;
grid-column: 1 / -1;
}
& > footer {
grid-row: 3;
& > .navbar {
grid-row: 2;
grid-column: 1 / -1;
}
& > .footer {
grid-row: 4;
grid-column: 1 / -1;
margin: 1em;
text-align: center;
}
}
@include media(">lg") {
@ -52,15 +71,16 @@ body {
}
}
main,
article {
.page {
font-size: 1rem;
margin: 0 $gutter;
@include media(">md") {
display: grid;
grid-template-columns: subgrid;
grid-row: 2;
grid-row: 3;
grid-column: 2 / span 8;
margin: 0;
* {
grid-column: 2 / span 6;
@ -75,19 +95,3 @@ article {
}
}
}
header.banner {
text-align: center;
nav {
margin-bottom: 1em;
li {
display: inline-flex;
}
}
}
footer {
margin: 1em;
text-align: center;
}

82
src/scss/landing.scss
View file

@ -1,82 +0,0 @@
// landing.scss
/* IMPORTS ================================================================= */
@use "sass:math";
@use "modules/include-media" as *;
@use "markup" as *;
@use "vars" as *;
@use "colors";
@use "fonts";
html {
font: {
size: $font-base-size;
family: $font-stack-serif;
}
}
body {
display: grid;
padding: $gutter * 2;
@include media(">md") {
grid-template-columns: 2fr 3fr 2fr;
gap: $gutter;
height: 100%;
padding: ($gutter * 2) 0;
}
}
nav {
grid-row: 1;
grid-column: 1;
justify-self: right;
align-self: end;
font-size: 1.5em;
font-weight: bold;
@include media(">md") {
grid-column: 2;
}
a {
&:hover {
font-style: italic;
}
&::after {
content: " >>";
font-style: normal;
}
}
}
main {
@include media(">md") {
grid-row: 2;
grid-column: 2;
justify-self: center;
}
article {
padding: 0;
font-size: 1rem;
h1 {
margin-top: 0;
}
}
}
aside {
grid-row: 1;
grid-column: 1;
max-width: 192px;
@include media(">md") {
grid-column: 2;
}
img {
image-rendering: pixelated;
}
}