diff --git a/.eleventy.js b/.eleventy.js new file mode 100644 index 0000000..890feaa --- /dev/null +++ b/.eleventy.js @@ -0,0 +1,13 @@ +module.exports = config => { + config.setUseGitIgnore(false); + + return { + markdownTemplateEngine: 'njk', + dataTemplateEngine: 'njk', + htmlTemplateEngine: 'njk', + dir: { + input: 'src', + output: 'dist' + } + }; +}; \ No newline at end of file diff --git a/.eleventyignore b/.eleventyignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.eleventyignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9de76cf --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +# Misc +*.log +npm-debug.* +*.scssc +*.swp +.DS_Store +Thumbs.db +.sass-cache +.env +.cache + +# Node modules and output +node_modules +dist +src/_includes/css \ No newline at end of file diff --git a/gulp-tasks/sass.js b/gulp-tasks/sass.js new file mode 100644 index 0000000..5f758ed --- /dev/null +++ b/gulp-tasks/sass.js @@ -0,0 +1,51 @@ +const {dest, src} = require('gulp'); +const cleanCSS = require('gulp-clean-css'); +const sassProcessor = require('gulp-sass')(require('sass')); + +// We want to be using canonical Sass, rather than node-sass +sassProcessor.compiler = require('sass'); + +// Flags whether we compress the output etc +const isProduction = process.env.NODE_ENV === 'production'; + +// An array of outputs that should be sent over to includes +const criticalStyles = ['critical.scss']; + +// Takes the arguments passed by `dest` and determines where the output file goes +const calculateOutput = ({history}) => { + // By default, we want a CSS file in our dist directory, so the + // HTML can grab it with a + let response = './dist/css'; + + // Get everything after the last slash + const sourceFileName = /[^(/|\\)]*$/.exec(history[0])[0]; + + // If this is critical CSS though, we want it to go + // to the _includes directory, so nunjucks can include it + // directly in a + + +
{% block content %}{% endblock %}
+ {% include "partials/footer.html" %} + + diff --git a/src/_includes/layouts/home.html b/src/_includes/layouts/home.html new file mode 100644 index 0000000..d059ae8 --- /dev/null +++ b/src/_includes/layouts/home.html @@ -0,0 +1,7 @@ +{% extends "layouts/base.html" %} +{% block content %} +
+

{{ title }}

+ {{ content | safe }} +
+{% endblock %} \ No newline at end of file diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html new file mode 100644 index 0000000..b1302df --- /dev/null +++ b/src/_includes/partials/footer.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/_includes/partials/meta-info.html b/src/_includes/partials/meta-info.html new file mode 100644 index 0000000..8979e76 --- /dev/null +++ b/src/_includes/partials/meta-info.html @@ -0,0 +1,42 @@ +{% set pageTitle = title + ' - ' + site.name %} + +{# We don't want any duplication. This is likely for the home page. #} +{% if site.name === title %} + {% set pageTitle = title %} +{% endif %} + +{% set siteTitle = site.name %} +{% set currentUrl = site.url + page.url %} + +{# If the page’s Front Matter has specific metaTitle and/or metaDesc items, switch + them into the mix. #} +{% if metaTitle %} + {% set pageTitle = metaTitle %} +{% endif %} + +{% if not metaDesc %} + {% set metaDesc = summary %} +{% endif %} + + +{{ pageTitle }} + + + + + + + +{% if socialImage %} + + + + + +{% endif %} + +{% if metaDesc %} + + + +{% endif %} \ No newline at end of file diff --git a/src/index.md b/src/index.md new file mode 100644 index 0000000..8b6c9a1 --- /dev/null +++ b/src/index.md @@ -0,0 +1,6 @@ +--- +title: 'Hello world' +layout: 'layouts/home.html' +--- + +This is pretty _rad_, right? \ No newline at end of file diff --git a/src/scss/_reset.scss b/src/scss/_reset.scss new file mode 100644 index 0000000..66de3ac --- /dev/null +++ b/src/scss/_reset.scss @@ -0,0 +1,77 @@ +// A modified version of my "modern reset" https://github.com/hankchizljaw/modern-css-reset + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default padding */ +ul[class], +ol[class] { + padding: 0; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +ul[class], +ol[class], +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Set core root defaults */ +html { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* Remove list styles on ul, ol elements with a class attribute */ +ul[class], +ol[class] { + list-style: none; +} + +/* A elements that don’t have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations and transitions for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01s !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01s !important; + scroll-behavior: auto !important; + } +} diff --git a/src/scss/critical.scss b/src/scss/critical.scss new file mode 100644 index 0000000..f7fde5f --- /dev/null +++ b/src/scss/critical.scss @@ -0,0 +1,42 @@ +@import 'reset'; + + +html, body { + background-color: rgb(54, 54, 54); + color: whitesmoke; + height: 100vh; + font-family: sans-serif; +} + +main { + height: 100%; + display: grid; + place-content: center; + text-align: center; + + h1 { + font-size: clamp(2.8rem, 8vw, 6.5rem); + } + + p { + font-size: clamp(1.2rem, 4vw, 1.8rem); + } +} + +footer { + position: absolute; + bottom: 0; left: 0; right: 0; + text-align: center; + padding: 1rem 0; + background-color: rgb(34, 34, 34); + + a { + color: white; + font-weight: bold; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} \ No newline at end of file