From 7c955e980946eeee3cb89209405a1b12f26cb9d7 Mon Sep 17 00:00:00 2001 From: Jonathan Souter Date: Fri, 24 Feb 2023 16:47:41 +1030 Subject: [PATCH] shitcan bootstrap and use flexbox and breakpoints instead --- package.json | 8 +- package.json.bak | 25 ++ .../base/_bootstrap_overrides.scss | 0 src/_assets/css/styles.css | 161 +++++++++++++ .../{sass => css}/vendor/_bootstrap.scss | 0 src/_assets/sass/styles.scss | 150 ------------ src/_includes/layout/base.njk | 16 +- src/_includes/partials/sidebar.njk | 3 + src/css/styles.css | 219 ++++++++++++++++++ 9 files changed, 421 insertions(+), 161 deletions(-) create mode 100644 package.json.bak rename src/_assets/{sass => css}/base/_bootstrap_overrides.scss (100%) create mode 100644 src/_assets/css/styles.css rename src/_assets/{sass => css}/vendor/_bootstrap.scss (100%) delete mode 100644 src/_assets/sass/styles.scss create mode 100644 src/_includes/partials/sidebar.njk create mode 100644 src/css/styles.css diff --git a/package.json b/package.json index 1b72618..e2a4fa6 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "watch:eleventy": "eleventy --serve", - "build:eleventy": "eleventy", - "watch:sass": "sass --watch src/_assets/sass:public/css --style compressed", - "build:sass": "sass src/_assets/sass:public/css --style compressed", - "start": "npm-run-all build:sass --parallel watch:*", - "build": "npm-run-all build:*" + "start": "eleventy --serve", + "build": "eleventy" }, "keywords": [], "author": "", diff --git a/package.json.bak b/package.json.bak new file mode 100644 index 0000000..97b8f02 --- /dev/null +++ b/package.json.bak @@ -0,0 +1,25 @@ +{ + "name": "11ty-neocities", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + // "watch:eleventy": "eleventy --serve", + // "build:eleventy": "eleventy", + // "watch:sass": "sass --watch src/_assets/sass:public/css --style compressed", + // "build:sass": "sass src/_assets/sass:public/css --style compressed", + // "start": "npm-run-all build:sass --parallel watch:*", + // "build": "npm-run-all build:*" + "start": "eleventy --serve", + "build": "eleventy" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "@11ty/eleventy": "^2.0.0", + "bootstrap": "^5.2.3", + "npm-run-all": "^4.1.5", + "sass": "^1.58.3" + } +} diff --git a/src/_assets/sass/base/_bootstrap_overrides.scss b/src/_assets/css/base/_bootstrap_overrides.scss similarity index 100% rename from src/_assets/sass/base/_bootstrap_overrides.scss rename to src/_assets/css/base/_bootstrap_overrides.scss diff --git a/src/_assets/css/styles.css b/src/_assets/css/styles.css new file mode 100644 index 0000000..c56aa8b --- /dev/null +++ b/src/_assets/css/styles.css @@ -0,0 +1,161 @@ +/* // Bootstrap overrides +// @import './base/bootstrap_overrides'; + +// Bootstrap +// @import './vendor/bootstrap'; */ + +/* 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; + + /* Default (light) theme */ + --bg: #fff; + --accent-bg: #f5f7ff; + --text: #82945b; + --text-light: #585858; + --border: #d8dae1; + --accent: #0d47a1; +} + +/* 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 */ +body { + color: var(--text); + background: var(--bg); + font-size: 1.15rem; + line-height: 1.5; + padding: 0 1em; + display: flex; + justify-content: center; + flex-wrap: wrap-reverse; +} + +main { + /* // margin: 0 auto; */ + max-width: 40em; + min-width: 40em; +} + +/* // 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; +// } */ + +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 { +// font-size: 2.5rem; +// } + +// h2 { +// 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/sass/vendor/_bootstrap.scss b/src/_assets/css/vendor/_bootstrap.scss similarity index 100% rename from src/_assets/sass/vendor/_bootstrap.scss rename to src/_assets/css/vendor/_bootstrap.scss diff --git a/src/_assets/sass/styles.scss b/src/_assets/sass/styles.scss deleted file mode 100644 index 952a16e..0000000 --- a/src/_assets/sass/styles.scss +++ /dev/null @@ -1,150 +0,0 @@ -// Bootstrap overrides -@import './base/bootstrap_overrides'; - -// Bootstrap -@import './vendor/bootstrap'; - -/* 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; - - /* Default (light) theme */ - --bg: #fff; - --accent-bg: #f5f7ff; - --text: #333; - --text-light: #585858; - --border: #d8dae1; - --accent: #0d47a1; -} - -/* 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 */ -body { - color: var(--text); - background: var(--bg); - font-size: 1.15rem; - line-height: 1.5; - margin: 0 auto; - max-width: 40em; - padding: 0 1em; -} - -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; -} - -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; -} - -/* Reduce header size on mobile */ -@media only screen and (max-width: 720px) { - h1 { - font-size: 2.5rem; - } - - h2 { - 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/_includes/layout/base.njk b/src/_includes/layout/base.njk index 997372c..a8f6d0f 100644 --- a/src/_includes/layout/base.njk +++ b/src/_includes/layout/base.njk @@ -16,13 +16,19 @@ {% endif %} -
{% include 'partials/header.njk' %}
-
-

{{ title }}

- {{ content | safe }} +
{% include 'partials/header.njk' %} + +
+
+

{{ title }}

+ {{ content | safe }} +
+
{% include 'partials/footer.njk' %}
- +
{% include 'partials/sidebar.njk' %}
+ + diff --git a/src/_includes/partials/sidebar.njk b/src/_includes/partials/sidebar.njk new file mode 100644 index 0000000..859868c --- /dev/null +++ b/src/_includes/partials/sidebar.njk @@ -0,0 +1,3 @@ +
+ sidebar +
\ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..8777015 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,219 @@ +/* // Bootstrap overrides +// @import './base/bootstrap_overrides'; + +// Bootstrap +// @import './vendor/bootstrap'; */ + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* 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; + + /* Default (light) theme */ + --bg: #fff; + --accent-bg: #f5f7ff; + --text: #82945b; + --text-light: #585858; + --border: #d8dae1; + --accent: #0d47a1; +} + +/* 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 */ +body { + color: var(--text); + background: var(--bg); + font-size: 1.15rem; + line-height: 1.5; + /* padding: 0 1em; */ + display: flex; + justify-content: center; + flex-wrap: wrap; + /* align-items: flex-start; */ +} + +main { + /* // margin: 0 auto; */ + width: 750px; +} + +@media all and (max-width: 1000px) { + body { + flex-direction: column-reverse; + } +} + +/* // 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; +// } */ + +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; + height: min-content; + top: 20px; + width: 200px; +} + +/* Reduce header size on mobile */ +/* // @media only screen and (max-width: 720px) { +// h1 { +// font-size: 2.5rem; +// } + +// h2 { +// font-size: 2.1rem; +// } +// } */ + +/* Format links */ +a, +a:visited { + color: var(--accent); +} + +a:hover { + text-decoration: none; +} \ No newline at end of file