diff --git a/.env b/.env new file mode 100644 index 00000000..daf906ac --- /dev/null +++ b/.env @@ -0,0 +1 @@ +HUGO_VERSION=0.139.4 diff --git a/.nvmrc b/.nvmrc index 7d41c735..fa12cf29 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -22.14.0 +v23.3.0 \ No newline at end of file diff --git a/README.md b/README.md index dd0c37c6..20f0f401 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,38 @@ Run hugo development server from the `grass-website` root directory: View the website running at http://localhost:1313 +### Run Hugo locally with Docker + +We are using the 'hugo:dart-sass` Docker container from [hugomods.com](https://docker.hugomods.com/docs/tags/). +The container contains the following core features: + +* Extended Hugo +* Go +* Node.js +* Git +* Dart Sass + +```sh +docker pull hugomods/hugo:dart-sass +``` + +### Install Node depencies before running Hugo. + +```sh +docker compose run server npm i +``` + +### Run the Hugo server container using Docker compose + +```sh +docker compose up server +``` + +### Lauch interactive shell + +```sh +docker compose run server /bin/sh +``` ## How to add content diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..680f90d4 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,9 @@ +services: + server: + image: hugomods/hugo:dart-sass-${HUGO_VERSION} + command: server -D -p 1313 --noBuildLock + volumes: + - ./:/src + - ~/hugo_cache:/tmp/hugo_cache + ports: + - 1313:1313 diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..f7f0c051 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,42 @@ +{ + "name": "src", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "bootstrap": "^5.3.7" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/bootstrap": { + "version": "5.3.7", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz", + "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..79d52496 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "bootstrap": "^5.3.7" + } +} diff --git a/themes/grass/assets/sass/_colors.scss b/themes/grass/assets/sass/_colors.scss new file mode 100644 index 00000000..e69de29b diff --git a/themes/grass/assets/sass/main.scss b/themes/grass/assets/sass/main.scss new file mode 100644 index 00000000..7a02f90c --- /dev/null +++ b/themes/grass/assets/sass/main.scss @@ -0,0 +1,188 @@ +//-- scss:defaults --*/ +// GRASS Theme +/* GRASS Variables +Use these variables to customize the GRASS theme. +----------------------------------------------------------------------------- */ +/* GRASS Font */ +$gs-grass-font: 'Fira Sans Regular', sans-serif; +$gs-grass-font--medium: 'Fira Sans Medium', sans-serif; +$gs-grass-font--bold: 'Fira Sans Bold', sans-serif; +$gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif; +$gs-grass-font--mono: 'Fira Mono', monospace; + +/* Primary Color */ +$gs-primary-color: rgb(76, 176, 91); +$gs-primary-color--light: rgba(76, 176, 91, 0.541); +$gs-primary-color--lighter: rgba(76, 176, 91, 0.322); +$gs-primary-color--lightest: rgba(76, 176, 91, 0.071); + +/* Primary Alt Color */ +$gs-primary-alt-color: rgb(110, 208, 121); +$gs-primary-alt-color--light: rgba(110, 208, 121, 0.541); +$gs-primary-alt-color--lighter: rgba(110, 208, 121, 0.322); +$gs-primary-alt-color--lightest: rgba(110, 208, 121, 0.071); + +/* Primary Light Color */ +$gs-primary-light-color: rgb(135, 233, 145); +$gs-primary-light-color--light: rgba(135, 233, 145, 0.541); +$gs-primary-light-color--lighter: rgba(138, 233, 145, 0.322); +$gs-primary-light-color--lightest: rgba(138, 233, 145, 0.071); + +/* Primary Dark Color */ +$gs-primary-dark-color: rgb(8, 139, 54); +$gs-primary-dark-color--light: rgba(8, 139, 54, 0.541); +$gs-primary-dark-color--lighter: rgba(8, 139, 54, 0.322); +$gs-primary-dark-color--lightest: rgba(8, 139, 54, 0.071); + +/* Secondary Color */ +$gs-secondary-color: rgb(0, 57, 63); +$gs-secondary-color--light: rgba(0, 57, 63, 0.541); +$gs-secondary-color--lighter: rgba(0, 57, 63, 0.322); +$gs-secondary-color--lightest: rgba(0, 57, 63, 0.071); + +/* Secondary Alt Color */ +$gs-secondary-alt-color: rgb(39, 87, 92); +$gs-secondary-alt-color--light: rgba(39, 87, 92, 0.541); +$gs-secondary-alt-color--lighter: rgba(39, 87, 92, 0.322); +$gs-secondary-alt-color--lightest: rgba(39, 87, 92, 0.071); + +/* Secondary Light Color */ +$gs-secondary-light-color: rgb(74, 120, 125); +$gs-secondary-light-color--light: rgba(74, 121, 127, 0.541); +$gs-secondary-light-color--lighter: rgba(74, 121, 127, 0.322); +$gs-secondary-light-color--lightest: rgba(74, 121, 127, 0.071); + +/* Secondary Dark Color */ +$gs-secondary-dark-color: rgb(0, 32, 36); +$gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541); +$gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322); +$gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071); + +/* White */ +$gs-white-base-color: rgb(255, 255, 255); +$gs-white-color: rgb(247, 247, 247); +$gs-white-color--light: rgba(247, 247, 247, 0.541); +$gs-white-color--lighter: rgba(247, 247, 247, 0.322); +$gs-white-color--lightest: rgba(247, 247, 247, 0.071); + +/* Black */ +$gs-black-base-color: rgb(0, 0, 0); +$gs-black-color: rgb(2, 25, 5); +$gs-black-color--light: rgba(2, 25, 5, 0.541); +$gs-black-color--lighter: rgba(2, 25, 5, 0.322); +$gs-black-color--lightest: rgba(2, 25, 5, 0.071); + +/* Grey */ +$gs-grey-color: rgb(145, 144, 143); +$gs-grey-color--light: rgba(145, 144, 143, 0.541); +$gs-grey-color--lighter: rgba(145, 144, 143, 0.322); +$gs-grey-color--lightest: rgba(145, 144, 143, 0.071); + +/* Grey Alt */ +$gs-grey-alt-color: rgb(216, 216, 216); +$gs-grey-alt-color--light: rgba(216, 216, 216, 0.541); +$gs-grey-alt-color--lighter: rgba(216, 216, 216, 0.322); +$gs-grey-alt-color--lightest: rgba(216, 216, 216, 0.071); + +/* Grey Light */ +$gs-grey-light-color: rgb(240, 240, 241); +$gs-grey-light-color--light: rgba(240, 240, 241, 0.541); +$gs-grey-light-color--lighter: rgba(240, 240, 241, 0.322); +$gs-grey-light-color--lightest: rgba(240, 240, 241, 0.071); + +/* Grey Dark */ +$gs-grey-dark-color: rgb(78, 77, 76); +$gs-grey-dark-color--light: rgba(78, 77, 76, 0.541); +$gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322); +$gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071); + +/* Special Colors */ +$gs-support-color: rgb(243, 57, 138); +$gs-support-color--dark: rgba(243, 57, 138, 0.541); +$gs-support-color--light: rgba(243, 57, 138, 0.322); +$gs-yard-sign-color: rgb(116, 93, 2); + +/* Bootstrap Mapping Colors */ +// $gs-primary-color: $gs-primary-color; Defined above +// $gs-secondonary-color: $gs-secondary-color; Defined above +$gs-danger-color: rgb(176, 76, 76); +$gs-warning-color: rgb(176, 154, 76); +$gs-success-color: $gs-primary-alt-color; +$gs-info-color: $gs-secondary-alt-color; +$gs-light-color: $gs-grey-light-color; + +/* Images */ +$gs-images-base-path: 'images'; +$gs-images-logos-small-path: $gs-images-base-path + '/logos/small'; +$gs-svg-logos-base-path: $gs-images-base-path + '/logos/large'; +$gs-icons-base-path: $gs-images-base-path + '/icons'; + +$gs-grass-background-image: url("/images/logos/banner.jpg"); + +/* Icons */ +$gs-grass-logo-white-simple: url($gs-images-logos-small-path + '/grass-logo-green-simple@05x.png'); +$gs-grass-logo-simple-svg: url($gs-svg-logos-base-path + '/grass-green-no-text.svg'); +$gs-grass-icon: url($gs-icons-base-path + '/grass-icon.svg'); + +// Description: This file defines Bootstrap theme variables by mapping them +// to custom color variables. These variables are used to +// customize the appearance of the Bootstrap framework. +// Bootstrap Variables: https: //github.com/twbs/bootstrap/blob/main/scss/_variables.scss +// Variables: +// - $primary: Primary theme color, mapped to $gs-primary-color. +// - $secondary: Secondary theme color, mapped to $gs-secondary-color. +// - $success: Success state color, mapped to $gs-success-color. +// - $info: Informational state color, mapped to $gs-info-color. +// - $warning: Warning state color, mapped to $gs-warning-color. +// - $danger: Danger/error state color, mapped to $gs-danger-color. +// - $light: Light theme color, mapped to $gs-grey-light-color. +// - $dark: Dark theme color, mapped to $gs-grey-dark-color. +// Bootstrap Variables +/*---------------------------------------------------------------------------*/ +$primary: $gs-primary-color; +$secondary: $gs-secondary-color; +$success: $gs-success-color; +$info: $gs-info-color; +$warning: $gs-warning-color; +$danger: $gs-danger-color; +$light: $gs-grey-light-color; +$dark: $gs-grey-dark-color; + +// Control the color of the active tab in a tabset +$nav-tabs-link-active-color: $gs-secondary-alt-color; + +// Control listing card title color +$card-title-color: $gs-grey-dark-color; + +$primary-rgb: $gs-primary-color; +$secondary-rgb: $gs-secondary-color; +$success-rgb: $gs-success-color; +$info-rgb: $gs-info-color; +$warning-rgb: $gs-warning-color; +$danger-rgb: $gs-danger-color; +$light-rgb: $gs-grey-light-color; +$dark-rgb: $gs-grey-dark-color; + +// Variable overrides first +@import "bootstrap/scss/bootstrap"; + +body { + line-height: 1.8; + font-family: $gs-grass-font; + -webkit-font-smoothing: antialiased; + font-size: 16px; + color: $gs-black-color; + background-color: $gs-white-color--lightest; + background-color: $gs-white-color; +} + +.grass-bg-image { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-image: linear-gradient(to bottom, + $gs-secondary-color--light 0%, + $gs-secondary-color--light 100% + ), + $gs-grass-background-image; +} \ No newline at end of file diff --git a/themes/grass/layouts/partials/head.html b/themes/grass/layouts/partials/head.html index e69f338b..7c73da8c 100644 --- a/themes/grass/layouts/partials/head.html +++ b/themes/grass/layouts/partials/head.html @@ -26,7 +26,26 @@ - + {{ with resources.Get "sass/main.scss" }} + {{ $opts := dict + "enableSourceMap" false + "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") + "silenceDeprecations" true + "targetPath" "css/main.css" + "transpiler" "dartsass" + "vars" site.Params.styles + "includePaths" (slice "node_modules") + }} + {{ with . | toCSS $opts }} + {{ if hugo.IsDevelopment }} + + {{ else }} + {{ with . | fingerprint }} + + {{ end }} + {{ end }} + {{ end }} + {{ end }} @@ -34,8 +53,6 @@ - {{ $styles := resources.Get "css/style.css" | minify}} - diff --git a/themes/grass/layouts/partials/navigation.html b/themes/grass/layouts/partials/navigation.html index a5cff5fc..a1acd5a6 100644 --- a/themes/grass/layouts/partials/navigation.html +++ b/themes/grass/layouts/partials/navigation.html @@ -1,6 +1,7 @@ -