diff --git a/README.md b/README.md index e800f02..f189a8e 100644 --- a/README.md +++ b/README.md @@ -31,3 +31,4 @@ - Add pagination to blog - Add `home` layout - Refactored base template +- Switch layout back to CSS flex diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk index 4abea22..2e8ef8a 100644 --- a/src/_includes/layouts/default.njk +++ b/src/_includes/layouts/default.njk @@ -2,6 +2,6 @@ layout: layouts/base.njk --- -
- {{ content | safe }} +
+
{{ content | safe }}
\ No newline at end of file diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk index d885687..2a2379d 100644 --- a/src/_includes/layouts/home.njk +++ b/src/_includes/layouts/home.njk @@ -1,21 +1,21 @@ --- layout: layouts/base.njk --- - -
-

Blurb

- {{ content | safe }} +
+
+ {{ content | safe }} +
+ +
- - \ No newline at end of file diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk index 0663ca0..700978c 100644 --- a/src/_includes/partials/footer.njk +++ b/src/_includes/partials/footer.njk @@ -1,6 +1,6 @@ - \ No newline at end of file diff --git a/src/posts/posts.json b/src/blog/blog.json similarity index 100% rename from src/posts/posts.json rename to src/blog/blog.json diff --git a/src/posts/index.md b/src/blog/index.md similarity index 95% rename from src/posts/index.md rename to src/blog/index.md index 8bf472d..8c7bac7 100644 --- a/src/posts/index.md +++ b/src/blog/index.md @@ -1,6 +1,5 @@ --- title: Blog -permalink: /blog/ override:tags: [] pagination: data: collections.blog diff --git a/src/css/global.css b/src/css/global.css index e370b12..550403e 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -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 */ diff --git a/src/css/global.css.map b/src/css/global.css.map index cd3ee58..8d8480d 100644 --- a/src/css/global.css.map +++ b/src/css/global.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/src/img/background.png b/src/img/background.png new file mode 100644 index 0000000..1506df5 Binary files /dev/null and b/src/img/background.png differ diff --git a/src/img/background2.png b/src/img/background2.png new file mode 100644 index 0000000..152ce11 Binary files /dev/null and b/src/img/background2.png differ diff --git a/src/img/landing.png b/src/img/landing.png deleted file mode 100644 index 59f83ea..0000000 Binary files a/src/img/landing.png and /dev/null differ diff --git a/src/img/nine-patch.png b/src/img/nine-patch.png deleted file mode 100644 index c1a9791..0000000 Binary files a/src/img/nine-patch.png and /dev/null differ diff --git a/src/img/objects.png b/src/img/objects.png new file mode 100644 index 0000000..24a59ed Binary files /dev/null and b/src/img/objects.png differ diff --git a/src/img/sigils.png b/src/img/sigils.png deleted file mode 100644 index f2a4921..0000000 Binary files a/src/img/sigils.png and /dev/null differ diff --git a/src/scss/_markup.scss b/src/scss/_components.scss similarity index 74% rename from src/scss/_markup.scss rename to src/scss/_components.scss index eb55dcf..f9f38c0 100644 --- a/src/scss/_markup.scss +++ b/src/scss/_components.scss @@ -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; diff --git a/src/scss/global.scss b/src/scss/global.scss index b876a74..e9557bd 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/scss/_fonts.scss b/src/scss/modules/_fonts.scss similarity index 100% rename from src/scss/_fonts.scss rename to src/scss/modules/_fonts.scss