Compile CSS

web/themes/custom/geofresco/README.md

@@ -47,9 +47,17 @@ These can be updated at any time within the `package.json`.
 
 ### Run the following command from the theme directory
 
+#### Setup
+
 `ddev npm install`
 
-### Alternat non-DDEV
+#### Compile CSS
+
+```shell
+ddev npm run sass-dev
+```
+
+### Alternate non-DDEV
 
 Run the following command from the theme directory (that's the folder where this README is).
 

web/themes/custom/geofresco/src/global/global-old.scss

@@ -0,0 +1,37 @@
+// Set your brand colors
+$purple: #8a4d76;
+$pink: #fa7c91;
+$brown: #757763;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
+
+// Override global Sass variables from the /utilities folder
+@use "../../node_modules/bulma/sass/utilities" with (
+  $family-primary: '"Nunito", sans-serif',
+  $grey-dark: $brown,
+  $grey-light: $beige-light,
+  $primary: $purple,
+  $link: $pink,
+  $control-border-width: 2px
+);
+
+// Override Sass variables from the /form folder
+@use "../../node_modules/bulma/sass/form" with (
+  $input-shadow: none
+);
+
+// Import the components you need
+@forward "../../node_modules/bulma/sass/base";
+@forward "../../node_modules/bulma/sass/components/card";
+@forward "../../node_modules/bulma/sass/components/modal";
+@forward "../../node_modules/bulma/sass/components/navbar";
+@forward "../../node_modules/bulma/sass/elements/button";
+@forward "../../node_modules/bulma/sass/elements/icon";
+@forward "../../node_modules/bulma/sass/elements/content";
+@forward "../../node_modules/bulma/sass/elements/notification";
+@forward "../../node_modules/bulma/sass/elements/progress";
+@forward "../../node_modules/bulma/sass/elements/tag";
+@forward "../../node_modules/bulma/sass/layout/footer";
+
+// Import the themes so that all CSS variables have a value
+@forward "../../node_modules/bulma/sass/themes";

web/themes/custom/geofresco/src/global/global.scss

@@ -19,6 +19,9 @@ $navbar-breakpoint: calc($mini/2);
 @forward "../../node_modules/bulma/sass/layout/_index";
 @forward "layout";
 
+// Import the themes so that all CSS variables have a value
+@forward "../../node_modules/bulma/sass/themes";
+
 // Stylesheets below will have access to all Bulma variables and mixins.
 @forward "content";
 @forward "paint";