Compare commits

..

No commits in common. "d7635bd6f1ab071582aec61d33f82eb2c747d868" and "a25850a1460c36cac3e6d03fa6b69e11693e8fcd" have entirely different histories.

20 changed files with 405 additions and 115 deletions

View file

@ -25,9 +25,3 @@
- Switch to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries - Switch to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
- Add blog/lib sections (empty for now) - Add blog/lib sections (empty for now)
- Partial reorganizing of SCSS files - Partial reorganizing of SCSS files
## 0.0.3
- Add pagination to blog
- Add `home` layout
- Refactored base template

View file

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

View file

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

View file

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

View file

@ -1,21 +0,0 @@
---
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>

View file

@ -0,0 +1,16 @@
<!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>

View file

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

View file

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

View file

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

View file

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

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. 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 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). 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).

View file

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

194
src/css/landing.css Normal file
View file

@ -0,0 +1,194 @@
/* 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 Normal file
View file

@ -0,0 +1 @@
{"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 Normal file
View file

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

View file

@ -1,8 +1,21 @@
--- ---
layout: layouts/home.njk layout: layouts/landing.njk
date: Last Modified date: Last Modified
eleventyNavigation: eleventyNavigation:
key: Home key: Landing
order: 200
--- ---
Custom blurb # 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)

View file

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

View file

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

82
src/scss/landing.scss Normal file
View file

@ -0,0 +1,82 @@
// 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;
}
}