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

Move blog to new folder, add background images

Browse source
This commit is contained in:
gil 2024-06-22 09:27:50 -05:00
parent d7635bd6f1
commit 239b9d9a9b
17 changed files with 190 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -31,3 +31,4 @@
- Add pagination to blog
- Add `home` layout
- Refactored base template
- Switch layout back to CSS flex

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

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

34
src/_includes/layouts/home.njk
View file

@ -1,21 +1,21 @@
---
layout: layouts/base.njk
---
<main class="page markup">
<h1>Blurb</h1>
{{ content | safe }}
<main>
<article class="markup box flex-auto width-2/3">
{{ 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>
<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>

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

@ -1,6 +1,6 @@
<footer class="footer"><p>
Made with <a href="https://www.11ty.dev/">11ty</a>.
{% if page.date %}<i>
<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>
</i>{% endif -%}</p>
</footer>

0
src/posts/posts.json → src/blog/blog.json
View file

1
src/posts/index.md → src/blog/index.md
View file

@ -1,6 +1,5 @@
---
title: Blog
permalink: /blog/
override:tags: []
pagination:
data: collections.blog

187
src/css/global.css
View file

@ -1,4 +1,55 @@
/* IMPORTS ================================================================= */
/* ============================================================================
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");
}
/* ============================================================================
COMPONENTS
----------
Reusable components for use across my site
============================================================================ */
.markup {
word-wrap: break-word;
line-height: 1.7;
@ -77,122 +128,70 @@ GLOBAL VARIABLES
/* 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");
}
:root {
font-size: 12pt;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
color-scheme: light dark;
}
.site {
display: grid;
body {
background: url("/img/background2.png");
}
.site > .banner {
.site > .banner,
.site > .navbar,
.site > .footer {
text-align: center;
}
.site {
display: flex;
flex-direction: column;
}
.site > .navbar {
text-align: center;
border: solid black 1px;
}
.site > .navbar li {
display: inline-flex;
}
@media (min-width: 769px) {
.site {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 3;
column-gap: 1em;
height: 100%;
padding: 2em 0;
}
.site > .banner {
grid-row: 1;
grid-column: 1/-1;
}
.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) {
.site {
grid-template-columns: repeat(12, 1fr);
@media (min-width: 641px) {
.site > main {
display: flex;
flex-direction: row;
gap: 1em;
}
}
.page {
font-size: 1rem;
margin: 0 1em;
.box {
border: solid black 1px;
padding: 0 1em;
}
@media (min-width: 769px) {
.page {
display: grid;
grid-template-columns: subgrid;
grid-row: 3;
grid-column: 2/span 8;
margin: 0;
}
.page * {
grid-column: 2/span 6;
.width-1\/6 {
width: 16.66666667%;
}
}
@media (min-width: 1025px) {
.page {
grid-column: 2/span 10;
}
.page * {
grid-column: 4/span 4;
@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;
}
/*# 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;;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/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"}

BIN
src/img/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/img/background2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/img/landing.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/img/nine-patch.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 199 B

BIN
src/img/objects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/img/sigils.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

8
src/scss/_markup.scss → src/scss/_components.scss
View file

@ -1,5 +1,11 @@
@use "modules/include-media" as *;
// _components.scss
/* ============================================================================
COMPONENTS
----------
Reusable components for use across my site
============================================================================ */
// A component providing default styles for Markdown content
.markup {
word-wrap: break-word;
line-height: 1.7;

136
src/scss/global.scss
View file

@ -3,20 +3,11 @@
/* IMPORTS ================================================================= */
@use "sass:math";
@use "modules/include-media" as * with (
$breakpoints: (
xs: 0,
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px,
)
);
@use "modules/fonts";
@use "modules/include-media" as *;
@use "markup";
@use "components";
@use "vars" as *;
@use "fonts";
:root {
font: {
@ -26,72 +17,73 @@
color-scheme: light dark;
}
body {
background: url("/img/background2.png");
}
%text-center {
text-align: center;
}
.site {
display: grid;
display: flex;
flex-direction: column;
& > .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;
column-gap: $gutter;
height: 100%;
padding: ($gutter * 2) 0;
& > .banner {
grid-row: 1;
grid-column: 1 / -1;
> {
.banner,
.navbar,
.footer {
@extend %text-center;
}
& > .navbar {
grid-row: 2;
grid-column: 1 / -1;
.navbar {
border: solid black 1px;
li {
display: inline-flex;
}
}
& > .footer {
grid-row: 4;
grid-column: 1 / -1;
margin: 1em;
text-align: center;
}
}
@include media(">lg") {
grid-template-columns: repeat(12, 1fr);
}
}
.page {
font-size: 1rem;
margin: 0 $gutter;
@include media(">md") {
display: grid;
grid-template-columns: subgrid;
grid-row: 3;
grid-column: 2 / span 8;
margin: 0;
* {
grid-column: 2 / span 6;
}
}
@include media(">lg") {
grid-column: 2 / span 10;
* {
grid-column: 4 / span 4;
@include media(">sm") {
main {
display: flex;
flex-direction: row;
gap: $gutter;
}
}
}
}
.box {
border: solid black 1px;
padding: 0 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;
}
}

0
src/scss/_fonts.scss → src/scss/modules/_fonts.scss
View file