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

Major refactor, redoing entire layout system with flexbox

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
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>

19
src/_includes/layouts/article.njk Normal file
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>

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

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

9
src/_includes/layouts/blank.njk Normal file
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>

6
src/_includes/layouts/default.njk
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>

18
src/_includes/layouts/home.njk
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>

18
src/_includes/partials/footer.njk
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>

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

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

4
src/_includes/partials/meta.njk
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>

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

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

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

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

4
src/about.md
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).

220
src/css/global.css
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 */

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

30
src/css/reset.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;
}

1
src/css/theme-default.css.map Normal file
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"}

6
src/index.md
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).

3
src/poems/hey-girl.md
View file

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

13
src/poems/index.md
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>

2
src/poems/self-effacing.md
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.

11
src/scss/_components.scss
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;
}
}
}

10
src/scss/_vars.scss
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;

97
src/scss/global.scss
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;
> {
.banner,
.navbar,
.footer {
@extend %text-center;
flex-wrap: wrap;
max-width: #{$site-width};
margin: #{$site-top} auto #{$site-bottom};
}
.navbar {
border: solid black 1px;
.site-header {
flex: 0 0 100%;
box-sizing: border-box;
padding: 1em;
@include media(">sm") {
margin-bottom: #{$site-gutter};
}
}
.site-main {
flex: 1 0 #{$site-main-min-width};
box-sizing: border-box;
padding: 1em;
height: min-content;
}
.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-flex;
}
}
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;
}