From abcc738ee465fd01d3ae90bf975037718e00d1ae Mon Sep 17 00:00:00 2001
From: Claudia Reynders <>
Date: Sat, 30 Apr 2022 18:41:54 +0200
Subject: [PATCH] Added Sass configuration and some basic theming
---
package.json | 11 +-
src/_includes/layouts/page.njk | 1 +
src/assets/theming/_article.scss | 29 ++++++
src/assets/theming/_base.scss | 157 +++++++++++++++++++++++++++++
src/assets/theming/_blog.scss | 5 +
src/assets/theming/_mixins.scss | 22 ++++
src/assets/theming/_variables.scss | 20 ++++
src/assets/theming/theme.scss | 6 ++
8 files changed, 248 insertions(+), 3 deletions(-)
create mode 100644 src/assets/theming/_article.scss
create mode 100644 src/assets/theming/_base.scss
create mode 100644 src/assets/theming/_blog.scss
create mode 100644 src/assets/theming/_mixins.scss
create mode 100644 src/assets/theming/_variables.scss
create mode 100644 src/assets/theming/theme.scss
diff --git a/package.json b/package.json
index d1ebeee..91dd636 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,13 @@
"description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.",
"main": "index.md",
"scripts": {
- "build": "npx eleventy",
- "watch": "npx eleventy --watch",
- "serve": "npx eleventy --serve",
+ "generate:sprite": "svg-icon-generate --folder=src/assets/icons --output=src/assets/sprite.svg",
+ "watch:eleventy": "eleventy --serve",
+ "watch:sass": "sass --watch src/assets/theming:_site/assets",
+ "build:eleventy": "eleventy",
+ "build:sass": "sass --no-source-map --style=compressed src/assets/theming:_site/assets",
+ "start": "npm-run-all build:sass generate:sprite --parallel watch:*",
+ "build": "npm-run-all build:*",
"debug": "DEBUG=* npx eleventy"
},
"author": {
@@ -26,3 +30,4 @@
"svg-icon-sprite": "^1.1.1"
}
}
+
diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
index 5970a76..d635fc7 100644
--- a/src/_includes/layouts/page.njk
+++ b/src/_includes/layouts/page.njk
@@ -6,6 +6,7 @@
{{ title or metadata.title }}
+
diff --git a/src/assets/theming/_article.scss b/src/assets/theming/_article.scss
new file mode 100644
index 0000000..88bdb53
--- /dev/null
+++ b/src/assets/theming/_article.scss
@@ -0,0 +1,29 @@
+article {
+ .category {
+ display: inline-block;
+ font-weight: 600;
+ text-decoration: none;
+ margin-left: 1rem;
+ padding: .4rem 1rem;
+ border: 1px solid $base-clr;
+ border-radius: 6px;
+ line-height: 1;
+
+ &:hover {
+ background-color: $base-clr;
+ color: $bg-clr;
+ transition: all 400ms ease-in;
+ }
+ }
+
+ small {
+ display: inline-block;
+ margin-bottom: 1em;
+ }
+
+ p {
+ + * {
+ margin-top: 1em;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/theming/_base.scss b/src/assets/theming/_base.scss
new file mode 100644
index 0000000..614ee28
--- /dev/null
+++ b/src/assets/theming/_base.scss
@@ -0,0 +1,157 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ background-color: $bg-clr;
+ color: $base-clr;
+ font-family: $main-font;
+ font-size: 50%;
+ scroll-behavior: smooth;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+
+ @include breakpoint-md {
+ font-size: 62.5%;
+ }
+}
+
+body {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-size: 2.25rem;
+ height: 100vh;
+ line-height: 140%;
+ min-width: 320px;
+ margin: 0 5em 0 1.5em;
+
+ @include breakpoint-md {
+ font-size: 1.8rem;
+ }
+
+ footer {
+ justify-self: flex-end;
+ }
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: $accent-font;
+ line-height: 140%;
+ margin: 0 0 0.7em 0;
+}
+
+h1 {
+ font-size: 4rem;
+}
+
+a {
+ color: $link-clr;
+ transition: color 400ms;
+
+ &:hover {
+ color: $link-hvr-clr;
+ }
+}
+
+p {
+ max-width: 600px;
+ + p {
+ margin-top: 1.5rem;
+ }
+}
+
+nav {
+ ul {
+ list-style: none;
+ }
+}
+
+main {
+ flex: 0 1 100%;
+ margin: 1em 0 2em 0;
+
+ &:not(nav) {
+ ul {
+ margin: .7em 0 .7em 1em;
+ }
+ }
+
+ nav {
+ span {
+ font-size: 2.2rem;
+ font-weight: 600;
+ }
+ }
+
+ nav ul {
+ margin: .2em 0 2em 0;
+ }
+}
+
+header,
+main,
+footer {
+ max-width: 1440px;
+}
+
+header,
+footer {
+ padding: 2em 0 .7em 0;
+}
+
+header {
+ display: flex;
+ justify-content: space-between;
+}
+
+footer span {
+ font-weight: 600;
+}
+
+nav ul li {
+ display: inline-block;
+ font-size: 2rem;
+
+ + li {
+ margin-left: 1.2rem;
+ }
+
+ &.active a {
+ font-weight: 600;
+ text-decoration: underline;
+ }
+
+ a {
+ display: inline-block;
+ text-decoration: none;
+ padding-bottom: 5px;
+ transition: color 400ms;
+ }
+}
+
+.sr-only {
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important;
+ height: 1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ width: 1px !important;
+ white-space: nowrap !important;
+}
+
+.logo {
+ font-family: $accent-font;
+ font-weight: 700;
+ font-size: 2rem;
+ margin-bottom: 1em;
+}
+
diff --git a/src/assets/theming/_blog.scss b/src/assets/theming/_blog.scss
new file mode 100644
index 0000000..1bbc7f6
--- /dev/null
+++ b/src/assets/theming/_blog.scss
@@ -0,0 +1,5 @@
+.article__item {
+ +.article__item {
+ margin-top: 1.5em;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/theming/_mixins.scss b/src/assets/theming/_mixins.scss
new file mode 100644
index 0000000..e1fb694
--- /dev/null
+++ b/src/assets/theming/_mixins.scss
@@ -0,0 +1,22 @@
+/*===============================*/
+/* breakpoints */
+/*===============================*/
+@mixin breakpoint-xs {
+ @media screen and (max-width: 599px) { @content };
+}
+
+@mixin breakpoint-sm {
+ @media screen and (min-width: 600px) { @content };
+}
+
+@mixin breakpoint-md {
+ @media screen and (min-width: 960px) { @content };
+}
+
+@mixin breakpoint-lg {
+ @media screen and (min-width: 1280px) { @content };
+}
+
+@mixin breakpoint-xl {
+ @media screen and (min-width: 1920px) { @content };
+}
\ No newline at end of file
diff --git a/src/assets/theming/_variables.scss b/src/assets/theming/_variables.scss
new file mode 100644
index 0000000..d5f3089
--- /dev/null
+++ b/src/assets/theming/_variables.scss
@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@400;700&display=swap');
+
+$main-font: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
+$accent-font: 'Montagu Slab', serif;
+
+/* Colours */
+$light-shade: #E9EFC0;
+$dark-shade: #4E944F;
+$darkest-shade: darken($dark-shade, 17%);
+$accent-shade:#FF8C32;
+
+/*========================================*/
+
+$base-clr: $darkest-shade;
+$bg-clr: lighten($light-shade, 7%);
+$link-clr: $darkest-shade;
+$link-hvr-clr: $accent-shade;
+$cat-clr: $darkest-shade;
+
+
diff --git a/src/assets/theming/theme.scss b/src/assets/theming/theme.scss
new file mode 100644
index 0000000..336a649
--- /dev/null
+++ b/src/assets/theming/theme.scss
@@ -0,0 +1,6 @@
+@import './variables';
+@import './mixins';
+@import './base';
+
+@import './blog';
+@import './article';
\ No newline at end of file