From 4bcb5e0dc143e6eb8ba381a381454269d791a62b Mon Sep 17 00:00:00 2001 From: Jonathan Souter Date: Tue, 28 Feb 2023 18:39:40 +1030 Subject: [PATCH] do a full reorg to handle blog posts better --- .eleventy.js | 8 +- .../css/base/_bootstrap_overrides.scss | 3 - src/{ => _assets}/css/normalize.css | 0 src/_assets/css/styles.css | 204 ++++++++++----- src/_assets/css/vendor/_bootstrap.scss | 1 - src/{ => _assets}/img/cropped.png | Bin src/{ => _assets}/img/fav.gif | Bin src/{ => _assets}/img/fav.png | Bin src/{ => _assets}/img/fav.webp | Bin src/{ => _assets}/img/l_ash02_big.jpg | Bin src/_includes/layout/base.njk | 4 +- src/_includes/partials/navigation.njk | 5 +- src/blog/my-first-post.html | 5 - src/blog/my-second-post.html | 5 - src/blog/my-third-post.html | 5 - src/blog/three-albums-march-2023.md | 3 - src/css/styles.css | 235 ------------------ src/music/music.json | 4 + .../three-albums-february-2023.md | 0 .../three-albums-january-2023.md | 0 20 files changed, 152 insertions(+), 330 deletions(-) delete mode 100644 src/_assets/css/base/_bootstrap_overrides.scss rename src/{ => _assets}/css/normalize.css (100%) delete mode 100644 src/_assets/css/vendor/_bootstrap.scss rename src/{ => _assets}/img/cropped.png (100%) rename src/{ => _assets}/img/fav.gif (100%) rename src/{ => _assets}/img/fav.png (100%) rename src/{ => _assets}/img/fav.webp (100%) rename src/{ => _assets}/img/l_ash02_big.jpg (100%) delete mode 100644 src/blog/my-first-post.html delete mode 100644 src/blog/my-second-post.html delete mode 100644 src/blog/my-third-post.html delete mode 100644 src/blog/three-albums-march-2023.md delete mode 100644 src/css/styles.css create mode 100644 src/music/music.json rename src/{blog => music}/three-albums-february-2023.md (100%) rename src/{blog => music}/three-albums-january-2023.md (100%) diff --git a/.eleventy.js b/.eleventy.js index c605c5a..10409af 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,8 +1,8 @@ module.exports = function (eleventyConfig) { - eleventyConfig.addPassthroughCopy("./src/css"); - eleventyConfig.addPassthroughCopy("./src/img"); - eleventyConfig.addPassthroughCopy("./src/fonts"); - eleventyConfig.addPassthroughCopy("./src/js"); + eleventyConfig.addPassthroughCopy("./src/_assets/css"); + eleventyConfig.addPassthroughCopy("./src/_assets/img"); + eleventyConfig.addPassthroughCopy("./src/_assets/fonts"); + eleventyConfig.addPassthroughCopy("./src/_assets/js"); return { passthroughFileCopy: true, diff --git a/src/_assets/css/base/_bootstrap_overrides.scss b/src/_assets/css/base/_bootstrap_overrides.scss deleted file mode 100644 index 936139a..0000000 --- a/src/_assets/css/base/_bootstrap_overrides.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Override bootstraps variables here -// Reference node_modules/bootstrap/scss/_variables.scss for a full list of variables -// https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults \ No newline at end of file diff --git a/src/css/normalize.css b/src/_assets/css/normalize.css similarity index 100% rename from src/css/normalize.css rename to src/_assets/css/normalize.css diff --git a/src/_assets/css/styles.css b/src/_assets/css/styles.css index c56aa8b..cd7c843 100644 --- a/src/_assets/css/styles.css +++ b/src/_assets/css/styles.css @@ -4,6 +4,10 @@ // Bootstrap // @import './vendor/bootstrap'; */ +/* @import './reset.css'; */ + +/* / */ + /* Global variables. */ :root { /* Set sans-serif & mono fonts */ @@ -11,56 +15,160 @@ "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif; --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; - - /* Default (light) theme */ - --bg: #fff; - --accent-bg: #f5f7ff; - --text: #82945b; - --text-light: #585858; - --border: #d8dae1; - --accent: #0d47a1; + + --bg: #6a826a; + --container: #fffbef; + --accent-bg: #b99b6c; + --text: #6a826a; + --header-text: #b99b6c; + /* --text-light: #585858; */ + --border: #6a826a; + --accent: #aa5757; } -/* Dark theme */ -/*// @media (prefers-color-scheme: dark) { -// :root { -// --bg: #212121; -// --accent-bg: #2b2b2b; -// --text: #dcdcdc; -// --text-light: #ababab; -// --border: #666; -// --accent: #ffb300; -// } -// } - -// * { -// box-sizing: border-box; -// } */ - html { /* Set the font globally */ font-family: var(--sans-font); scroll-behavior: smooth; } -/* Make the body a nice central block */ + +/* Format headers */ + +h1 { + font-size: 2.5rem; + color: var(--header-text); +} + +h2 { + font-size: 2rem; + margin-top: 3rem; + color: var(--header-text); +} + +h3 { + color: var(--header-text); +} + +/* Format links */ +a, +a:visited { + color: var(--accent); +} + +a:hover { + text-decoration: none; +} + +hr { + border: 1px solid var(--border); +} + body { color: var(--text); background: var(--bg); - font-size: 1.15rem; - line-height: 1.5; - padding: 0 1em; + /* background-image: url("/img/l_ash02_big.jpg"); */ + background-size: cover; + background-attachment: fixed; + line-height: 1.3; display: flex; justify-content: center; - flex-wrap: wrap-reverse; + flex-wrap: wrap; + gap: 20px; + margin: 20px; + height: 100%; + /* padding: 0 1em; */ + /* font-size: 1.15rem; */ + /* align-items: flex-start; */ } main { /* // margin: 0 auto; */ - max-width: 40em; - min-width: 40em; + background: var(--container); + width: 750px; + padding: 15px; + height: min-content; + /* border: 2px solid var(--border); */ + border-radius: 15px; + box-sizing: border-box; } + +aside { + position: sticky; + height: min-content; + top: 20px; + width: 200px; + margin-top: 30px; + display:flex; + flex-direction: column; + align-items: center; + /* border: 2px solid var(--border); */ +} + +.profile-img { + width: 100px; + border-radius: 50px; + /* top: -70px; */ + z-index: 1; + position: relative; +} + +.sidebar-contents { + padding: 65px 15px 15px 15px; + border-radius: 15px; + background: var(--container); + box-sizing: border-box; + height: min-content; + width: 100%; + top: -50px; + position: relative; +} + +@media all and (max-width: 1100px) { + body { + flex-direction: column-reverse; + max-width: 100%; + /* this is a pretty bad solution */ + margin: -20px 20px 20px; + } + + main { + max-width: 100%; + } + + aside { + position: relative; + } + + /* nav { + display: flex; + flex-direction: row; + gap: 1rem; + } */ + + .sidebar-contents { + /* padding: 15px; */ + margin: 0 0 -25px 0; + /* width: min-content; */ + } + +} + +article>p { + margin-top: 0; + margin-bottom: 0; +} + +/* body > footer { + margin-top: 4rem; + padding: 2rem 1rem 1.5rem 1rem; + color: var(--text-light); + font-size: 0.9rem; + text-align: center; + border-top: 1px solid var(--border); +} */ + /* // body > header { // text-align: center; // padding: 0 0.5rem 2rem 0.5rem; @@ -115,30 +223,6 @@ main { // padding-top: 1.5rem; // } */ -body > footer { - margin-top: 4rem; - padding: 2rem 1rem 1.5rem 1rem; - color: var(--text-light); - font-size: 0.9rem; - text-align: center; - border-top: 1px solid var(--border); -} - -/* Format headers */ - -h1 { - font-size: 3rem; -} - -h2 { - font-size: 2.6rem; - margin-top: 3rem; -} - -aside { - position: sticky; -} - /* Reduce header size on mobile */ /* // @media only screen and (max-width: 720px) { // h1 { @@ -149,13 +233,3 @@ aside { // font-size: 2.1rem; // } // } */ - -/* Format links */ -a, -a:visited { - color: var(--accent); -} - -a:hover { - text-decoration: none; -} \ No newline at end of file diff --git a/src/_assets/css/vendor/_bootstrap.scss b/src/_assets/css/vendor/_bootstrap.scss deleted file mode 100644 index dc8e5c5..0000000 --- a/src/_assets/css/vendor/_bootstrap.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./../../../../node_modules/bootstrap/scss/bootstrap.scss"; \ No newline at end of file diff --git a/src/img/cropped.png b/src/_assets/img/cropped.png similarity index 100% rename from src/img/cropped.png rename to src/_assets/img/cropped.png diff --git a/src/img/fav.gif b/src/_assets/img/fav.gif similarity index 100% rename from src/img/fav.gif rename to src/_assets/img/fav.gif diff --git a/src/img/fav.png b/src/_assets/img/fav.png similarity index 100% rename from src/img/fav.png rename to src/_assets/img/fav.png diff --git a/src/img/fav.webp b/src/_assets/img/fav.webp similarity index 100% rename from src/img/fav.webp rename to src/_assets/img/fav.webp diff --git a/src/img/l_ash02_big.jpg b/src/_assets/img/l_ash02_big.jpg similarity index 100% rename from src/img/l_ash02_big.jpg rename to src/_assets/img/l_ash02_big.jpg diff --git a/src/_includes/layout/base.njk b/src/_includes/layout/base.njk index c382b33..62f6c97 100644 --- a/src/_includes/layout/base.njk +++ b/src/_includes/layout/base.njk @@ -4,8 +4,8 @@ - - + + {% if title %} {{ site.title }} - {{ title }} {% else %} diff --git a/src/_includes/partials/navigation.njk b/src/_includes/partials/navigation.njk index fe8e929..fd3e60e 100644 --- a/src/_includes/partials/navigation.njk +++ b/src/_includes/partials/navigation.njk @@ -1,8 +1,9 @@ {#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#} \ No newline at end of file diff --git a/src/blog/my-first-post.html b/src/blog/my-first-post.html deleted file mode 100644 index db6d1ef..0000000 --- a/src/blog/my-first-post.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: My First Blog Post ---- - -

This is my first blog post

\ No newline at end of file diff --git a/src/blog/my-second-post.html b/src/blog/my-second-post.html deleted file mode 100644 index 4a90497..0000000 --- a/src/blog/my-second-post.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: My Second Blog Post ---- - -

This is my second blog post

\ No newline at end of file diff --git a/src/blog/my-third-post.html b/src/blog/my-third-post.html deleted file mode 100644 index 7a4308e..0000000 --- a/src/blog/my-third-post.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: My Third Blog Post ---- - -

This is my third and final blog post

\ No newline at end of file diff --git a/src/blog/three-albums-march-2023.md b/src/blog/three-albums-march-2023.md deleted file mode 100644 index f306253..0000000 --- a/src/blog/three-albums-march-2023.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: three albums - january 2023 ---- diff --git a/src/css/styles.css b/src/css/styles.css deleted file mode 100644 index cd7c843..0000000 --- a/src/css/styles.css +++ /dev/null @@ -1,235 +0,0 @@ -/* // Bootstrap overrides -// @import './base/bootstrap_overrides'; - -// Bootstrap -// @import './vendor/bootstrap'; */ - -/* @import './reset.css'; */ - -/* / */ - -/* Global variables. */ -:root { - /* Set sans-serif & mono fonts */ - --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, - "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, - "Helvetica Neue", sans-serif; - --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; - - --bg: #6a826a; - --container: #fffbef; - --accent-bg: #b99b6c; - --text: #6a826a; - --header-text: #b99b6c; - /* --text-light: #585858; */ - --border: #6a826a; - --accent: #aa5757; -} - -html { - /* Set the font globally */ - font-family: var(--sans-font); - scroll-behavior: smooth; -} - - -/* Format headers */ - -h1 { - font-size: 2.5rem; - color: var(--header-text); -} - -h2 { - font-size: 2rem; - margin-top: 3rem; - color: var(--header-text); -} - -h3 { - color: var(--header-text); -} - -/* Format links */ -a, -a:visited { - color: var(--accent); -} - -a:hover { - text-decoration: none; -} - -hr { - border: 1px solid var(--border); -} - -body { - color: var(--text); - background: var(--bg); - /* background-image: url("/img/l_ash02_big.jpg"); */ - background-size: cover; - background-attachment: fixed; - line-height: 1.3; - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 20px; - margin: 20px; - height: 100%; - /* padding: 0 1em; */ - /* font-size: 1.15rem; */ - /* align-items: flex-start; */ -} - -main { - /* // margin: 0 auto; */ - background: var(--container); - width: 750px; - padding: 15px; - height: min-content; - /* border: 2px solid var(--border); */ - border-radius: 15px; - box-sizing: border-box; -} - - -aside { - position: sticky; - height: min-content; - top: 20px; - width: 200px; - margin-top: 30px; - display:flex; - flex-direction: column; - align-items: center; - /* border: 2px solid var(--border); */ -} - -.profile-img { - width: 100px; - border-radius: 50px; - /* top: -70px; */ - z-index: 1; - position: relative; -} - -.sidebar-contents { - padding: 65px 15px 15px 15px; - border-radius: 15px; - background: var(--container); - box-sizing: border-box; - height: min-content; - width: 100%; - top: -50px; - position: relative; -} - -@media all and (max-width: 1100px) { - body { - flex-direction: column-reverse; - max-width: 100%; - /* this is a pretty bad solution */ - margin: -20px 20px 20px; - } - - main { - max-width: 100%; - } - - aside { - position: relative; - } - - /* nav { - display: flex; - flex-direction: row; - gap: 1rem; - } */ - - .sidebar-contents { - /* padding: 15px; */ - margin: 0 0 -25px 0; - /* width: min-content; */ - } - -} - -article>p { - margin-top: 0; - margin-bottom: 0; -} - -/* body > footer { - margin-top: 4rem; - padding: 2rem 1rem 1.5rem 1rem; - color: var(--text-light); - font-size: 0.9rem; - text-align: center; - border-top: 1px solid var(--border); -} */ - -/* // body > header { -// text-align: center; -// padding: 0 0.5rem 2rem 0.5rem; -// box-sizing: border-box; -// } - -// body > header h1 { -// max-width: 100%; -// margin: 1rem auto; -// } */ - -/* Format navigation */ -/* // nav { -// border-bottom: 1px solid var(--border); -// font-size: 1rem; -// line-height: 2; -// padding: 1rem 0; -// display: flex; -// justify-content: center; -// align-items: center; -// width: 100%; -// padding-bottom: 2rem; -// } - -// nav a { -// margin: 1rem 1rem 0 0; -// color: var(--text) !important; -// padding: 0.1rem 1rem; -// } - -// nav a:hover { -// color: var(--accent) !important; -// } - -// nav a:last-child { -// margin-right: 0; -// } */ - -/* Reduce nav side on mobile */ -/* // @media only screen and (max-width: 750px) { -// nav a { -// border: none; -// padding: 0; -// color: var(--accent); -// text-decoration: underline; -// line-height: 1; -// } -// } */ - -/* Add a little padding to ensure spacing is correct between content and nav */ -/* // main { -// padding-top: 1.5rem; -// } */ - -/* Reduce header size on mobile */ -/* // @media only screen and (max-width: 720px) { -// h1 { -// font-size: 2.5rem; -// } - -// h2 { -// font-size: 2.1rem; -// } -// } */ diff --git a/src/music/music.json b/src/music/music.json new file mode 100644 index 0000000..6500393 --- /dev/null +++ b/src/music/music.json @@ -0,0 +1,4 @@ +{ + "layout": "layout/blog", + "tags": "music" +} \ No newline at end of file diff --git a/src/blog/three-albums-february-2023.md b/src/music/three-albums-february-2023.md similarity index 100% rename from src/blog/three-albums-february-2023.md rename to src/music/three-albums-february-2023.md diff --git a/src/blog/three-albums-january-2023.md b/src/music/three-albums-january-2023.md similarity index 100% rename from src/blog/three-albums-january-2023.md rename to src/music/three-albums-january-2023.md