diff --git a/package-lock.json b/package-lock.json index f6c4aa6..d8fe8ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,12 +7,25 @@ "": { "name": "website", "version": "0.0.0", + "dependencies": { + "@fortawesome/fontawesome-free": "^6.1.1", + "bulma": "^0.9.4" + }, "devDependencies": { "esbuild": "^0.14.43", "npm-run-all": "^4.1.5", "sass": "^1.52.3" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -75,6 +88,11 @@ "node": ">=8" } }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "node_modules/call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", @@ -1545,6 +1563,11 @@ } }, "dependencies": { + "@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==" + }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -1595,6 +1618,11 @@ "fill-range": "^7.0.1" } }, + "bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", diff --git a/package.json b/package.json index 2100027..0626700 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build:js": "esbuild static/src/js/*.js --bundle --outdir=static/build/js --minify --sourcemap", - "build:css": "sass --style=compressed static/src/scss:static/build/css", + "build:css": "sass --style=compressed --load-path=$PWD/node_modules static/src/scss:static/build/css", + "build:contrib": "./scripts/copy-npm-contrib.sh", "build": "npm-run-all build:*" }, "author": "Jake Howard", @@ -14,5 +15,9 @@ "esbuild": "^0.14.43", "npm-run-all": "^4.1.5", "sass": "^1.52.3" + }, + "dependencies": { + "@fortawesome/fontawesome-free": "^6.1.1", + "bulma": "^0.9.4" } } diff --git a/scripts/copy-npm-contrib.sh b/scripts/copy-npm-contrib.sh new file mode 100755 index 0000000..4a5d8c6 --- /dev/null +++ b/scripts/copy-npm-contrib.sh @@ -0,0 +1,18 @@ +#!/usr/bin/env bash + +set -e + +# Make sure we're in the root of the project +cd $(dirname $0)/.. + +CONTRIB_DIR=$PWD/static/build/contrib + +rm -r $CONTRIB_DIR +mkdir -p $CONTRIB_DIR + +mkcontrib() { + mkdir -p $CONTRIB_DIR/$1 + cp -r "${@:2}" $CONTRIB_DIR/$1/ +} + +mkcontrib fontawesome node_modules/@fortawesome/fontawesome-free/{css,webfonts} diff --git a/static/src/js/base.js b/static/src/js/base.js new file mode 100644 index 0000000..7649418 --- /dev/null +++ b/static/src/js/base.js @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", () => { + const navbarBurger = document.getElementById("navbar-burger"); + const navbar = document.getElementById("navbar"); + + navbarBurger.addEventListener("click", () => { + console.log("click"); + navbarBurger.classList.toggle('is-active'); + navbar.classList.toggle('is-active'); + }) +}); diff --git a/static/src/scss/_navbar.scss b/static/src/scss/_navbar.scss new file mode 100644 index 0000000..f1a0291 --- /dev/null +++ b/static/src/scss/_navbar.scss @@ -0,0 +1,5 @@ +.navbar-item { + &:hover { + background-color: black !important; + } +} diff --git a/static/src/js/index.js b/static/src/scss/_variables.scss similarity index 100% rename from static/src/js/index.js rename to static/src/scss/_variables.scss diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss new file mode 100644 index 0000000..68b89ab --- /dev/null +++ b/static/src/scss/base.scss @@ -0,0 +1,20 @@ +@import "variables"; + +@import "bulma/sass/utilities/_all"; +@import "bulma/sass/base/_all"; +@import "bulma/sass/helpers/_all"; +@import "bulma/sass/grid/_all"; +@import "bulma/sass/components/navbar"; + +@import "navbar"; + +body { + display: flex; + flex-direction: column; +} + +html, +body { + height: 100%; + overflow-y: auto; +} diff --git a/static/src/scss/font-awesome.scss b/static/src/scss/font-awesome.scss new file mode 100644 index 0000000..338c0f1 --- /dev/null +++ b/static/src/scss/font-awesome.scss @@ -0,0 +1 @@ +@import "@fortawesome/fontawesome-free/css/all.min"; diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/templates/base.html b/templates/base.html index 4a8e2dc..0fb10ef 100644 --- a/templates/base.html +++ b/templates/base.html @@ -14,7 +14,8 @@ - + + {% block extra_css %}{% endblock %} @@ -22,9 +23,11 @@ {% wagtailuserbar %} + {% include "navbar.html" %} + {% block content %}{% endblock %} - + {% block extra_js %}{% endblock %} diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..08b730d --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,35 @@ +