Major refactor, redoing entire layout system with flexbox

This commit is contained in:
gil 2024-06-23 23:01:58 -05:00
parent 239b9d9a9b
commit fb0719db65
25 changed files with 416 additions and 189 deletions

View file

@ -21,14 +21,15 @@
## 0.0.2
- Change to layout based on CSS grid
- Switch to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
- Add blog/lib sections (empty for now)
- Partial reorganizing of SCSS files
- Changed to layout based on CSS grid
- Switched to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
- Added blog/lib sections (empty for now)
- Partially reorganized of SCSS files
## 0.0.3
- Add pagination to blog
- Add `home` layout
- Added pagination to blog
- Added `home` layout
- Refactored base template
- Switch layout back to CSS flex
- Switched layout back to CSS flex
- Created `theme-default`, which provides default theming based on browser preference

10
src/404.md Normal file
View file

@ -0,0 +1,10 @@
---
title: Not found
permalink: 404.html
---
# 404 - Not found
There's nothing here.
<a href="/"><- Home page</a>

View file

@ -0,0 +1,19 @@
---
layout: layouts/base.njk
---
<main>
<article>
<header>
{% if page.date -%}
<time datetime="{{ page.date | formatDate }}">
{{ page.date | formatDate }}
</time>
{%- endif %}
{% if title -%}
<h1>{{ title }}</h1>
{%- endif %}
</header>
{{ content | safe }}
</article>
</main>

View file

@ -1,12 +1,8 @@
<!doctype html>
<html lang="en">
{% include "partials/meta.njk" %}
<body>
<div class="site">
{% include "partials/header.njk" %}
{% include "partials/navbar.njk" %}
{{ content | safe }}
{% include "partials/footer.njk" %}
</div>
</body>
</html>
---
layout: layouts/blank.njk
---
{% include "partials/header.njk" %}
{% include "partials/nav.njk" %}
{{ content | safe }}
{% include "partials/footer.njk" %}

View file

@ -0,0 +1,9 @@
<!doctype html>
<html lang="en">
{% include "partials/meta.njk" %}
<body class="theme-default">
<div class="site">
{{ content | safe }}
</div>
</body>
</html>

View file

@ -2,6 +2,8 @@
layout: layouts/base.njk
---
<main>
<article class="markup">{{ content | safe }}</article>
<main class="site-main">
<article class="page-article">
{{ content | safe }}
</article>
</main>

View file

@ -1,21 +1,9 @@
---
layout: layouts/base.njk
---
<main>
<article class="markup box flex-auto width-2/3">
<main class="site-main">
<article class="page-article">
{{ content | safe }}
</article>
<aside class="markup box flex-initial width-1/6 order-first">
<h2>Status</h2>
<p>Writing posts</p>
</aside>
<aside class="markup box flex-initial width-1/6 order-last">
<h2>Latest posts</h2>
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
</ul>
<p><a href="/rss.xml">Feed</a></p>
</aside>
</main>

View file

@ -1,6 +1,14 @@
<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>.
</i>{% endif -%}</p>
<footer class="site-footer">
<!-- TODO add social links -->
<section>
<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>.
</i>
{% endif -%}
</p>
</section>
</footer>

View file

@ -1,3 +1,3 @@
<header class="banner">
<header class="site-header">
<a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a>
</header>

View file

@ -2,7 +2,9 @@
<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>
<title>
{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}
</title>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/global.css">
</head>

View file

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

View file

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

View file

@ -23,6 +23,4 @@ Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software de
## Colophon
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).
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).

View file

@ -47,64 +47,85 @@ Full license texts:
}
/* ============================================================================
COMPONENTS
----------
-------------------------------------------------------------------------------
Reusable components for use across my site
============================================================================ */
.markup {
.markup, .page-article {
word-wrap: break-word;
line-height: 1.7;
padding: 0;
}
.markup p,
.markup > :first-child, .page-article > :first-child {
margin-top: 0;
}
.markup > :last-child, .page-article > :last-child {
margin-bottom: 0;
}
.markup p, .page-article p,
.markup blockquote,
.page-article blockquote,
.markup ul,
.page-article ul,
.markup ol,
.page-article ol,
.markup dl,
.page-article dl,
.markup table,
.markup pre {
.page-article table,
.markup pre,
.page-article pre {
margin: 1em 0;
}
.markup ul,
.markup ol {
.markup ul, .page-article ul,
.markup ol,
.page-article ol {
list-style-type: revert;
padding-left: 30px;
}
.markup h1 {
.markup h1, .page-article h1 {
font-size: 2.5em;
}
.markup h2 {
.markup h2, .page-article h2 {
font-size: 2em;
}
.markup h3 {
.markup h3, .page-article h3 {
font-size: 1.5em;
}
.markup h4 {
.markup h4, .page-article h4 {
font-size: 1.2em;
}
.markup h5 {
.markup h5, .page-article h5 {
font-size: 1em;
}
.markup h6 {
.markup h6, .page-article h6 {
font-size: 1em;
}
.markup h1,
.markup h1, .page-article h1,
.markup h2,
.page-article h2,
.markup h3,
.page-article h3,
.markup h4,
.page-article h4,
.markup h5,
.markup h6 {
.page-article h5,
.markup h6,
.page-article h6 {
margin: 0.5em 0 0.25em 0;
}
.markup h1 + p,
.markup h1 + p, .page-article h1 + p,
.markup h2 + p,
.markup h3 + p {
.page-article h2 + p,
.markup h3 + p,
.page-article h3 + p {
margin-top: 0.5em;
}
.markup img {
.markup img, .page-article img {
max-width: 100%;
}
.markup code,
.markup pre {
.markup code, .page-article code,
.markup pre,
.page-article pre {
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
@ -114,84 +135,149 @@ Reusable components for use across my site
padding: 0 5px;
white-space: pre;
}
.markup pre code {
.markup pre code, .page-article pre code {
border: none;
margin: 0;
padding: 0;
white-space: pre;
}
/* ============================================================================
DEFAULT THEME
-------------------------------------------------------------------------------
This is the default theme for my website, which uses the prefer-color-scheme
query to provide the appropriate styles for light mode or dark mode. The other
themes can be selected with a dropdown which is only shown when JavaScript is
enabled.
============================================================================ */
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.theme-default body {
background: url("/img/background2.png");
}
.theme-default .site-header {
border: solid black 2px;
background: white;
}
.theme-default .site-main {
border: solid black 2px;
background: white;
}
.theme-default .site-navigation {
background: white;
border: solid black 2px;
border-top: none;
}
}
@media (prefers-color-scheme: light) and (min-width: 641px) {
.theme-default .site-navigation {
border-top: solid black 2px;
}
}
@media (prefers-color-scheme: light) {
.theme-default .site-footer {
border: solid black 2px;
background: white;
}
}
@media (prefers-color-scheme: dark) {
.theme-default body {
background: black;
}
.theme-default .site-header {
border: solid white 2px;
background: black;
}
.theme-default .site-main {
border: solid white 2px;
background: black;
}
.theme-default .site-navigation {
border: solid white 2px;
background: black;
border-top: none;
}
}
@media (prefers-color-scheme: dark) and (min-width: 641px) {
.theme-default .site-navigation {
border-top: solid white 2px;
}
}
@media (prefers-color-scheme: dark) {
.theme-default .site-footer {
border: solid white 2px;
background: black;
}
}
/* ============================================================================
GLOBAL VARIABLES
============================================================================ */
/* Media breakpoints ------------------------------------------------------- */
/* Sizing ------------------------------------------------------------------ */
/* Spacing ----------------------------------------------------------------- */
/* Typography -------------------------------------------------------------- */
/* -- Font ----------------------------------------------------------------- */
:root {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
color-scheme: light dark;
}
body {
background: url("/img/background2.png");
}
.site > .banner,
.site > .navbar,
.site > .footer {
text-align: center;
}
.site {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: 60em;
margin: 1em auto 1em;
}
.site > .navbar {
border: solid black 1px;
}
.site > .navbar li {
display: inline-flex;
.site-header {
flex: 0 0 100%;
box-sizing: border-box;
padding: 1em;
}
@media (min-width: 641px) {
.site > main {
display: flex;
flex-direction: row;
gap: 1em;
.site-header {
margin-bottom: 1em;
}
}
.box {
border: solid black 1px;
padding: 0 1em;
.site-main {
flex: 1 0 50%;
box-sizing: border-box;
padding: 1em;
height: min-content;
}
@media (min-width: 769px) {
.width-1\/6 {
width: 16.66666667%;
.site-navigation {
flex: 0 0 100%;
box-sizing: border-box;
margin-bottom: 1em;
padding: 1em;
height: min-content;
}
@media (min-width: 641px) {
.site-navigation {
flex: 0 1 10em;
margin-right: 1em;
margin-bottom: 0;
}
}
.site-navigation li {
display: inline-block;
}
@media (min-width: 641px) {
.site-navigation li {
display: block;
}
}
@media (min-width: 769px) {
.width-2\/3 {
width: 66.66666667%;
}
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.order-first {
order: -999;
}
.order-last {
order: 999;
.site-footer {
flex: 0 0 100%;
box-sizing: border-box;
margin-top: 1em;
padding: 1em;
}
/*# sourceMappingURL=global.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_vars.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACDA;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;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;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;;;ACvFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;AHHA;EAEI,WGEa;EHDb,aGEe;EHAjB;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EACE;;;AAGF;EACE;EACA;;AASE;EACE;;AAEA;EACE;;AI0jBJ;EJrjBE;IACE;IACA;IACA,KGzCC;;;;AH+CT;EACE;EACA;;;AI0iBE;EJviBJ;IAEI;;;;AIqiBA;EJjiBJ;IAEI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEF;EACE","file":"global.css"}
{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_themes.scss","../scss/modules/_include-media.scss","../scss/_vars.scss"],"names":[],"mappings":"AAEA;ACDA;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;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAGE;EACE;;AAEF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AChGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAIA;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACikBF;EDpkBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACmiBF;EDtiBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;;AExEN;AAAA;AAAA;AAIA;AAKA;AAKA;AAGA;ALNA;EAEI,WKKa;ELJb,aKKe;;;ALDnB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AIukBE;EJ1kBJ;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AIqjBE;EJ1jBJ;IAOI;IACA;IACA;;;AAGF;EACE;;AI6iBA;EJ9iBF;IAGI;;;;AAKN;EACE;EACA;EACA;EACA","file":"global.css"}

View file

@ -252,16 +252,31 @@ More resets/normalizations courtesy of https://mattbrictson.com/blog/css-normali
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, figure, p, ol, ul {
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
ol,
ul {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
ol, ul {
ol,
ul {
list-style: none;
padding-inline: 0;
}
@ -274,3 +289,12 @@ img {
blockquote {
margin: 0;
}
section,
article,
aside,
footer,
header,
nav {
display: block;
}

View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/theme-default.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAMF;IACE","file":"theme-default.css"}

View file

@ -5,4 +5,8 @@ eleventyNavigation:
key: Home
---
Custom blurb
# Welcome
Welcome to my website! Gil's Nexus launched on October 12, 2023. Until June 2024, it was mostly just a placeholder and hosted my social media links. With time and effort, I hope to make it into a cute website reminiscent of the late 1990s and 2000s internet, with more recent design considerations like accessibility and responsiveness.
To learn more about me, see my [About page](/about).

View file

@ -1,6 +1,7 @@
---
title: Hey Girl
date: Last Modified
date: 2023-05-31T12:00:00-5
excerpt: test
---
Hey girl,

View file

@ -2,6 +2,11 @@
title: Poetry
permalink: /poetry/
override:tags: []
pagination:
data: collections.poems
size: 5
reverse: true
generatePageOnEmptyData: true
eleventyNavigation:
key: Poetry
order: 2
@ -10,8 +15,8 @@ eleventyNavigation:
# Poetry
<ul>
{%- for poem in collections.poems reversed -%}
<li><a href="{{ poem.url }}">{{ poem.data.title }}</a>
&mdash; <i>updated <time datetime="{{ poem.date | formatDate }}">{{ poem.date | formatDate }}</time></i></li>
{%- endfor -%}
{%- for post in pagination.items %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a>
&mdash; <i>updated <time datetime="{{ post.date | formatDate }}">{{ post.date | formatDate }}</time></i></li>
{% endfor -%}
</ul>

View file

@ -1,6 +1,6 @@
---
title: Self-Effacing
date: Last Modified
date: 2022-12-01T12:00:00-5
---
i was born beneath the rocks of a single-minded destiny: cutting cords.

View file

@ -1,7 +1,7 @@
// _components.scss
/* ============================================================================
COMPONENTS
----------
-------------------------------------------------------------------------------
Reusable components for use across my site
============================================================================ */
@ -11,6 +11,15 @@ Reusable components for use across my site
line-height: 1.7;
padding: 0;
> {
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
}
p,
blockquote,
ul,

77
src/scss/_themes.scss Normal file
View file

@ -0,0 +1,77 @@
// theme-default.scss
/* ============================================================================
DEFAULT THEME
-------------------------------------------------------------------------------
This is the default theme for my website, which uses the prefer-color-scheme
query to provide the appropriate styles for light mode or dark mode. The other
themes can be selected with a dropdown which is only shown when JavaScript is
enabled.
============================================================================ */
@use "modules/include-media" as *;
:root {
color-scheme: light dark;
}
.theme-default {
@media (prefers-color-scheme: light) {
body {
background: url("/img/background2.png");
}
.site-header {
border: solid black 2px;
background: white;
}
.site-main {
border: solid black 2px;
background: white;
}
.site-navigation {
background: white;
border: solid black 2px;
border-top: none;
@include media(">sm") {
border-top: solid black 2px;
}
}
.site-footer {
border: solid black 2px;
background: white;
}
}
@media (prefers-color-scheme: dark) {
body {
background: black;
}
.site-header {
border: solid white 2px;
background: black;
}
.site-main {
border: solid white 2px;
background: black;
}
.site-navigation {
border: solid white 2px;
background: black;
border-top: none;
@include media(">sm") {
border-top: solid white 2px;
}
}
.site-footer {
border: solid white 2px;
background: black;
}
}
}

View file

@ -3,11 +3,15 @@
GLOBAL VARIABLES
============================================================================ */
/* Media breakpoints ------------------------------------------------------- */
/* Sizing ------------------------------------------------------------------ */
$site-width: 60em;
$site-nav-width: 10em;
$site-main-min-width: 50%;
/* Spacing ----------------------------------------------------------------- */
$gutter: 1em;
$site-top: 1em;
$site-bottom: 1em;
$site-gutter: 1em;
/* Typography -------------------------------------------------------------- */
$leading: 1.7;

View file

@ -7,6 +7,7 @@
@use "modules/include-media" as *;
@use "components";
@use "themes";
@use "vars" as *;
:root {
@ -14,76 +15,58 @@
size: $font-base-size;
family: $font-stack-serif;
}
color-scheme: light dark;
}
body {
background: url("/img/background2.png");
}
%text-center {
text-align: center;
}
.site {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: #{$site-width};
margin: #{$site-top} auto #{$site-bottom};
}
> {
.banner,
.navbar,
.footer {
@extend %text-center;
}
.site-header {
flex: 0 0 100%;
box-sizing: border-box;
padding: 1em;
@include media(">sm") {
margin-bottom: #{$site-gutter};
}
}
.navbar {
border: solid black 1px;
.site-main {
flex: 1 0 #{$site-main-min-width};
box-sizing: border-box;
padding: 1em;
height: min-content;
}
li {
display: inline-flex;
}
}
.site-navigation {
flex: 0 0 100%;
box-sizing: border-box;
margin-bottom: #{$site-gutter};
padding: 1em;
height: min-content;
@include media(">sm") {
flex: 0 1 #{$site-nav-width};
margin-right: #{$site-gutter};
margin-bottom: 0;
}
li {
display: inline-block;
@include media(">sm") {
main {
display: flex;
flex-direction: row;
gap: $gutter;
}
display: block;
}
}
}
.box {
border: solid black 1px;
padding: 0 1em;
.site-footer {
flex: 0 0 100%;
box-sizing: border-box;
margin-top: #{$site-gutter};
padding: 1em;
}
.width-1\/6 {
@include media(">md") {
width: 16.66666667%;
}
}
.width-2\/3 {
@include media(">md") {
width: 66.66666667%;
}
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.order- {
&first {
order: -999;
}
&last {
order: 999;
}
.page-article {
@extend .markup;
}