diff --git a/.eleventy.js b/.eleventy.js index b53ad6f..632349d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,16 +1,20 @@ +const path = require("node:path"); + const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); const pluginRss = require('@11ty/eleventy-plugin-rss'); const timeToRead = require('eleventy-plugin-time-to-read'); const safeLinks = require('@sardine/eleventy-plugin-external-links'); -const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss"); const related = require("eleventy-plugin-related"); const markdownIt = require("markdown-it"); const markdownItAnchor = require("markdown-it-anchor"); +const sass = require("sass"); const figure = require('./src/_includes/components/figure.js'); const bounce = require('./src/_includes/components/bounce.js'); module.exports = function (eleventyConfig) { + const isDev = (process.env.ELEVENTY_ENV || "dev") == "dev"; + const parseDate = (str) => { if (str instanceof Date) { return str; @@ -33,19 +37,27 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight); eleventyConfig.addPlugin(timeToRead); eleventyConfig.addPlugin(safeLinks); - eleventyConfig.addPlugin(eleventySass); eleventyConfig.addShortcode('figure', figure(md)); eleventyConfig.addShortcode('bounce', bounce); eleventyConfig.addPassthroughCopy({ "src/static": "/" }); + eleventyConfig.addPassthroughCopy({ "node_modules/reveal.js/dist/reveal.css": "reveal.js/reveal.css" }); + eleventyConfig.addPassthroughCopy({ "node_modules/reveal.js/dist/reveal.esm.js": "reveal.js/reveal.esm.js" }); + eleventyConfig.addPassthroughCopy({ "node_modules/reveal.js/plugin/markdown/markdown.esm.js": "reveal.js/plugin/markdown/markdown.esm.js" }); eleventyConfig.addFilter("date_to_datetime", async (obj) => { + if (!obj) { + return ""; + } const date = parseDate(obj); return date.toISOString(); }); eleventyConfig.addFilter("date_formatted", async (obj) => { + if (!obj) { + return ""; + } const date = parseDate(obj); const month = formatPart({ month: "short" }, date); @@ -93,6 +105,38 @@ module.exports = function (eleventyConfig) { return collection.getFilteredByGlob('src/posts/*.md').reverse() }); + eleventyConfig.addCollection('decks', collection => { + return collection.getFilteredByGlob('src/decks/*.md') + // append the raw content + .map(item => { + const content = item.template.frontMatter.content; + item.data.rawMarkdown = content || ""; + return item; + }); + }); + + eleventyConfig.addTemplateFormats("scss"); + eleventyConfig.addExtension("scss", { + outputFileExtension: "css", + + compile: function (inputContent, inputPath) { + let parsed = path.parse(inputPath); + + let result = sass.compileString(inputContent, { + style: isDev ? "expanded" : "compressed", + loadPaths: [ + parsed.dir || "." + ] + }); + + this.addDependencies(inputPath, result.loadedUrls); + + return async (data) => { + return result.css; + }; + } + }) + return { templateFormats: ["njk", "md", "html"], dir: { diff --git a/package-lock.json b/package-lock.json index f79b4da..275c0e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,13 @@ "@11ty/eleventy": "^v2.0.1", "@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", - "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.1.0", "@sardine/eleventy-plugin-external-links": "^1.4.0", "eleventy-plugin-related": "^1.0.6", "eleventy-plugin-time-to-read": "^1.3.0", "markdown-it": "^13.0.2", - "markdown-it-anchor": "^8.6.7" + "markdown-it-anchor": "^8.6.7", + "reveal.js": "^5.0.1", + "sass": "^1.69.5" } }, "node_modules/@11ty/dependency-tree": { @@ -160,16 +161,6 @@ "url": "https://opencollective.com/11ty" } }, - "node_modules/@11tyrocks/eleventy-plugin-sass-lightningcss": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@11tyrocks/eleventy-plugin-sass-lightningcss/-/eleventy-plugin-sass-lightningcss-1.1.0.tgz", - "integrity": "sha512-drewdlN7+ySz+wBuxSajSQauE8v8QcnfiXBDBEG2+GsnJhUOgNQvxZQDcLPoovFecLknZWGheRoA1zVNK+W5yg==", - "dependencies": { - "browserslist": "^4.22.1", - "lightningcss": "^1.22.0", - "sass": "^1.68.0" - } - }, "node_modules/@babel/helper-string-parser": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", @@ -530,37 +521,6 @@ "node": ">=8" } }, - "node_modules/browserslist": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", - "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/browserslist" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - } - }, "node_modules/call-bind": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz", @@ -574,25 +534,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/caniuse-lite": { - "version": "1.0.30001555", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz", - "integrity": "sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ] - }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -761,17 +702,6 @@ "node": ">= 0.6.0" } }, - "node_modules/detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", - "bin": { - "detect-libc": "bin/detect-libc.js" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/dev-ip": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", @@ -858,11 +788,6 @@ "node": ">=0.10.0" } }, - "node_modules/electron-to-chromium": { - "version": "1.4.569", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.569.tgz", - "integrity": "sha512-LsrJjZ0IbVy12ApW3gpYpcmHS3iRxH4bkKOW98y1/D+3cvDUWGcbzbsFinfUS8knpcZk/PG/2p/RnkMCYN7PVg==" - }, "node_modules/eleventy-plugin-related": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/eleventy-plugin-related/-/eleventy-plugin-related-1.0.6.tgz", @@ -924,14 +849,6 @@ "errno": "cli.js" } }, - "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "engines": { - "node": ">=6" - } - }, "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -1516,203 +1433,6 @@ "node": ">=6" } }, - "node_modules/lightningcss": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.22.0.tgz", - "integrity": "sha512-+z0qvwRVzs4XGRXelnWRNwqsXUx8k3bSkbP8vD42kYKSk3z9OM2P3e/gagT7ei/gwh8DTS80LZOFZV6lm8Z8Fg==", - "dependencies": { - "detect-libc": "^1.0.3" - }, - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - }, - "optionalDependencies": { - "lightningcss-darwin-arm64": "1.22.0", - "lightningcss-darwin-x64": "1.22.0", - "lightningcss-freebsd-x64": "1.22.0", - "lightningcss-linux-arm-gnueabihf": "1.22.0", - "lightningcss-linux-arm64-gnu": "1.22.0", - "lightningcss-linux-arm64-musl": "1.22.0", - "lightningcss-linux-x64-gnu": "1.22.0", - "lightningcss-linux-x64-musl": "1.22.0", - "lightningcss-win32-x64-msvc": "1.22.0" - } - }, - "node_modules/lightningcss-darwin-arm64": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.22.0.tgz", - "integrity": "sha512-aH2be3nNny+It5YEVm8tBSSdRlBVWQV8m2oJ7dESiYRzyY/E/bQUe2xlw5caaMuhlM9aoTMtOH25yzMhir0qPg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-x64": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.22.0.tgz", - "integrity": "sha512-9KHRFA0Y6mNxRHeoQMp0YaI0R0O2kOgUlYPRjuasU4d+pI8NRhVn9bt0yX9VPs5ibWX1RbDViSPtGJvYYrfVAQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-freebsd-x64": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.22.0.tgz", - "integrity": "sha512-xaYL3xperGwD85rQioDb52ozF3NAJb+9wrge3jD9lxGffplu0Mn35rXMptB8Uc2N9Mw1i3Bvl7+z1evlqVl7ww==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.22.0.tgz", - "integrity": "sha512-epQGvXIjOuxrZpMpMnRjK54ZqzhiHhCPLtHvw2fb6NeK2kK9YtF0wqmeTBiQ1AkbWfnnXGTstYaFNiadNK+StQ==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.22.0.tgz", - "integrity": "sha512-AArGtKSY4DGTA8xP8SDyNyKtpsUl1Rzq6FW4JomeyUQ4nBrR71uPChksTpj3gmWuGhZeRKLeCUI1DBid/zhChg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.22.0.tgz", - "integrity": "sha512-RRraNgP8hnBPhInTTUdlFm+z16C/ghbxBG51Sw00hd7HUyKmEUKRozyc5od+/N6pOrX/bIh5vIbtMXIxsos0lg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.22.0.tgz", - "integrity": "sha512-grdrhYGRi2KrR+bsXJVI0myRADqyA7ekprGxiuK5QRNkv7kj3Yq1fERDNyzZvjisHwKUi29sYMClscbtl+/Zpw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-musl": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.22.0.tgz", - "integrity": "sha512-t5f90X+iQUtIyR56oXIHMBUyQFX/zwmPt72E6Dane3P8KNGlkijTg2I75XVQS860gNoEFzV7Mm5ArRRA7u5CAQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-x64-msvc": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.22.0.tgz", - "integrity": "sha512-64HTDtOOZE9PUCZJiZZQpyqXBbdby1lnztBccnqh+NtbKxjnGzP92R2ngcgeuqMPecMNqNWxgoWgTGpC+yN5Sw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/linkedom": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.13.7.tgz", @@ -2006,11 +1726,6 @@ "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, - "node_modules/node-releases": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", - "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==" - }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -2128,11 +1843,6 @@ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==" }, - "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", @@ -2439,6 +2149,14 @@ "node": ">=0.10.0" } }, + "node_modules/reveal.js": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-5.0.1.tgz", + "integrity": "sha512-cgbEasV/Yh8QIRyCCiOHRtio6uxAwmOAhyr80vegX2P69/iwE1FX77EXJ9NAPvcODxoIyYrgvxAaPxR5TKcsFw==", + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", @@ -2713,35 +2431,6 @@ "node": ">= 0.8" } }, - "node_modules/update-browserslist-db": { - "version": "1.0.13", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", - "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/browserslist" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" - }, - "bin": { - "update-browserslist-db": "cli.js" - }, - "peerDependencies": { - "browserslist": ">= 4.21.0" - } - }, "node_modules/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", diff --git a/package.json b/package.json index 4d7ddcf..901aab2 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,12 @@ "@11ty/eleventy": "^v2.0.1", "@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", - "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.1.0", "@sardine/eleventy-plugin-external-links": "^1.4.0", "eleventy-plugin-related": "^1.0.6", "eleventy-plugin-time-to-read": "^1.3.0", "markdown-it": "^13.0.2", - "markdown-it-anchor": "^8.6.7" + "markdown-it-anchor": "^8.6.7", + "reveal.js": "^5.0.1", + "sass": "^1.69.5" } } diff --git a/src/_includes/layouts/deck.njk b/src/_includes/layouts/deck.njk new file mode 100644 index 0000000..2f5d408 --- /dev/null +++ b/src/_includes/layouts/deck.njk @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/scss/colors.scss b/src/_includes/scss/colors.scss new file mode 100644 index 0000000..78c1163 --- /dev/null +++ b/src/_includes/scss/colors.scss @@ -0,0 +1,6 @@ +$bg: rgb(254, 175, 214); +$text: rgb(92, 53, 124); +$accent: rgb(146, 0, 80); +$active-links: rgb(124, 6, 160); +$divider: rgb(219, 103, 167); +$semi-bg: rgba(221, 116, 174, 0.211); \ No newline at end of file diff --git a/src/_includes/scss/exposer.scss b/src/_includes/scss/exposer.scss new file mode 100644 index 0000000..2e9288d --- /dev/null +++ b/src/_includes/scss/exposer.scss @@ -0,0 +1,30 @@ +// Exposes theme's variables for easy re-use in CSS for plugin authors + +:root { + --r-background-color: #{$backgroundColor}; + --r-main-font: #{$mainFont}; + --r-main-font-size: #{$mainFontSize}; + --r-main-color: #{$mainColor}; + --r-block-margin: #{$blockMargin}; + --r-heading-margin: #{$headingMargin}; + --r-heading-font: #{$headingFont}; + --r-heading-color: #{$headingColor}; + --r-heading-line-height: #{$headingLineHeight}; + --r-heading-letter-spacing: #{$headingLetterSpacing}; + --r-heading-text-transform: #{$headingTextTransform}; + --r-heading-text-shadow: #{$headingTextShadow}; + --r-heading-font-weight: #{$headingFontWeight}; + --r-heading1-text-shadow: #{$heading1TextShadow}; + --r-heading1-size: #{$heading1Size}; + --r-heading2-size: #{$heading2Size}; + --r-heading3-size: #{$heading3Size}; + --r-heading4-size: #{$heading4Size}; + --r-code-font: #{$codeFont}; + --r-link-color: #{$linkColor}; + --r-link-color-dark: #{darken($linkColor , 15% )}; + --r-link-color-hover: #{$linkColorHover}; + --r-selection-background-color: #{$selectionBackgroundColor}; + --r-selection-color: #{$selectionColor}; + --r-overlay-element-bg-color: #{$overlayElementBgColor}; + --r-overlay-element-fg-color: #{$overlayElementFgColor}; +} diff --git a/src/_includes/scss/mixins.scss b/src/_includes/scss/mixins.scss new file mode 100644 index 0000000..17a3db5 --- /dev/null +++ b/src/_includes/scss/mixins.scss @@ -0,0 +1,45 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $outer; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} + +@mixin light-bg-text-color( $color ) { + section.has-light-background { + &, h1, h2, h3, h4, h5, h6 { + color: $color; + } + } +} + +@mixin dark-bg-text-color( $color ) { + section.has-dark-background { + &, h1, h2, h3, h4, h5, h6 { + color: $color; + } + } +} \ No newline at end of file diff --git a/src/_includes/scss/settings.scss b/src/_includes/scss/settings.scss new file mode 100644 index 0000000..3d54ac8 --- /dev/null +++ b/src/_includes/scss/settings.scss @@ -0,0 +1,50 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Lato', sans-serif; +$mainFontSize: 40px; +$mainColor: #eee; + +// Vertical spacing between blocks of text +$blockMargin: 20px; + +// Headings +$headingMargin: 0 0 $blockMargin 0; +$headingFont: 'League Gothic', Impact, sans-serif; +$headingColor: #eee; +$headingLineHeight: 1.2; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingTextShadow: none; +$headingFontWeight: normal; +$heading1TextShadow: $headingTextShadow; + +$heading1Size: 3.77em; +$heading2Size: 2.11em; +$heading3Size: 1.55em; +$heading4Size: 1.00em; + +$codeFont: monospace; + +// Links and actions +$linkColor: #13DAEC; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: #FF5E99; +$selectionColor: #fff; + +// Colors used for UI elements that are overlaid on top of +// the presentation +$overlayElementBgColor: 240, 240, 240; +$overlayElementFgColor: 0, 0, 0; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} diff --git a/src/_includes/scss/theme.scss b/src/_includes/scss/theme.scss new file mode 100644 index 0000000..bc377d3 --- /dev/null +++ b/src/_includes/scss/theme.scss @@ -0,0 +1,331 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +@import "./exposer"; + +.reveal-viewport { + @include bodyBackground(); + background-color: var(--r-background-color); +} + +.reveal { + font-family: var(--r-main-font); + font-size: var(--r-main-font-size); + font-weight: normal; + color: var(--r-main-color); +} + +.reveal ::selection { + color: var(--r-selection-color); + background: var(--r-selection-background-color); + text-shadow: none; +} + +.reveal ::-moz-selection { + color: var(--r-selection-color); + background: var(--r-selection-background-color); + text-shadow: none; +} + +.reveal .slides section, +.reveal .slides section>section { + line-height: 1.3; + font-weight: inherit; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: var(--r-heading-margin); + color: var(--r-heading-color); + + font-family: var(--r-heading-font); + font-weight: var(--r-heading-font-weight); + line-height: var(--r-heading-line-height); + letter-spacing: var(--r-heading-letter-spacing); + + text-transform: var(--r-heading-text-transform); + text-shadow: var(--r-heading-text-shadow); + + word-wrap: break-word; +} + +.reveal h1 {font-size: var(--r-heading1-size); } +.reveal h2 {font-size: var(--r-heading2-size); } +.reveal h3 {font-size: var(--r-heading3-size); } +.reveal h4 {font-size: var(--r-heading4-size); } + +.reveal h1 { + text-shadow: var(--r-heading1-text-shadow); +} + + +/********************************************* + * OTHER + *********************************************/ + +.reveal p { + margin: var(--r-block-margin) 0; + line-height: 1.3; +} + +/* Remove trailing margins after titles */ +.reveal h1:last-child, +.reveal h2:last-child, +.reveal h3:last-child, +.reveal h4:last-child, +.reveal h5:last-child, +.reveal h6:last-child { + margin-bottom: 0; +} + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, +.reveal video, +.reveal iframe { + max-width: 95%; + max-height: 95%; +} +.reveal strong, +.reveal b { + font-weight: bold; +} + +.reveal em { + font-style: italic; +} + +.reveal ol, +.reveal dl, +.reveal ul { + display: inline-block; + + text-align: left; + margin: 0 0 0 1em; +} + +.reveal ol { + list-style-type: decimal; +} + +.reveal ul { + list-style-type: disc; +} + +.reveal ul ul { + list-style-type: square; +} + +.reveal ul ul ul { + list-style-type: circle; +} + +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { + display: block; + margin-left: 40px; +} + +.reveal dt { + font-weight: bold; +} + +.reveal dd { + margin-left: 40px; +} + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: var(--r-block-margin) auto; + padding: 5px; + + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0,0,0,0.2); +} + .reveal blockquote p:first-child, + .reveal blockquote p:last-child { + display: inline-block; + } + +.reveal q { + font-style: italic; +} + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: var(--r-block-margin) auto; + + text-align: left; + font-size: 0.55em; + font-family: var(--r-code-font); + line-height: 1.2em; + + word-wrap: break-word; + + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); +} + +.reveal code { + font-family: var(--r-code-font); + text-transform: none; + tab-size: 2; +} + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; +} + +.reveal .code-wrapper { + white-space: normal; +} + +.reveal .code-wrapper code { + white-space: pre; +} + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th { + font-weight: bold; +} + +.reveal table th, +.reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; +} + +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; +} + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; +} + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { + border-bottom: none; +} + +.reveal sup { + vertical-align: super; + font-size: smaller; +} +.reveal sub { + vertical-align: sub; + font-size: smaller; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + +.reveal img { + margin: var(--r-block-margin) 0; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a { + color: var(--r-link-color); + text-decoration: none; + transition: color .15s ease; +} + .reveal a:hover { + color: var(--r-link-color-hover); + text-shadow: none; + border: none; + } + +.reveal .roll span:after { + color: #fff; + // background: darken( var(--r-link-color), 15% ); + background: var(--r-link-color-dark); + +} + + +/********************************************* + * Frame helper + *********************************************/ + +.reveal .r-frame { + border: 4px solid var(--r-main-color); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); +} + +.reveal a .r-frame { + transition: all .15s linear; +} + +.reveal a:hover .r-frame { + border-color: var(--r-link-color); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls { + color: var(--r-link-color); +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); + color: var(--r-link-color); +} + +/********************************************* + * PRINT BACKGROUND + *********************************************/ + @media print { + .backgrounds { + background-color: var(--r-background-color); + } +} diff --git a/src/css/reveal-maia.scss b/src/css/reveal-maia.scss new file mode 100644 index 0000000..692512a --- /dev/null +++ b/src/css/reveal-maia.scss @@ -0,0 +1,40 @@ +/** + * maia site theme for reveal.js. + */ + +@import "../_includes/scss/mixins"; +@import "../_includes/scss/settings"; +@import "../_includes/scss/colors.scss"; + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: $bg; + +$mainColor: $text; +$headingColor: $text; + +$mainFontSize: 30px; +$mainFont: monospace, serif, sans-serif; +$headingFont: monospace, serif, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: normal; +$headingFontWeight: 600; +$linkColor: $accent; +$linkColorHover: $active-links; +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../_includes/scss/theme"; +// --------------------------------------------- diff --git a/src/css/style.scss b/src/css/style.scss index f531a01..1b19cb0 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -1,9 +1,4 @@ -$bg: rgb(254, 175, 214); -$text: rgb(92, 53, 124); -$accent: rgb(146, 0, 80); -$active-links: rgb(124, 6, 160); -$divider: rgb(219, 103, 167); -$semi-bg: rgba(221, 116, 174, 0.211); +@import "../_includes/scss/colors.scss"; html { background-color: $bg; diff --git a/src/decks.njk b/src/decks.njk new file mode 100644 index 0000000..f61e939 --- /dev/null +++ b/src/decks.njk @@ -0,0 +1,54 @@ +--- +pagination: + data: collections.decks + size: 1 +permalink: /decks/{{ pagination.items[0].fileSlug }}/index.html +--- +{% for deck in pagination.items %} + + + + + + {{ deck.data.title if deck.data.title else site.title }} + + {% bounce { path: '/css/style.css', check_path: 'src/css' } %} + + + + + + + + {% if env.environment.isProd %} + + {% endif %} + + {% bounce { path: '/reveal.js/reveal.css', check_path: 'node_modules/reveal.js/dist/reveal.css' } %} + {% bounce { path: '/css/reveal-maia.css', check_path: 'src/css' } %} + + + + +
+
+
+ +
+
+
+ + +{% endfor %} diff --git a/src/decks/decks.json b/src/decks/decks.json new file mode 100644 index 0000000..e9654f0 --- /dev/null +++ b/src/decks/decks.json @@ -0,0 +1,4 @@ +{ + "layout": "layouts/deck", + "permalink": "decks/{{ page.fileSlug }}/blank.html" +} \ No newline at end of file diff --git a/src/decks/test.md b/src/decks/test.md new file mode 100644 index 0000000..26fdeb8 --- /dev/null +++ b/src/decks/test.md @@ -0,0 +1,9 @@ +--- +title: slide deck test +--- +## slide 1 +a paragraph with some text and a [link](https://hakim.se). +--- +## slide 2 +--- +## slide 3 \ No newline at end of file