From 151b411797b48d39b88360f05a5d4cdedd692742 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Fri, 28 Mar 2025 15:35:47 -0400
Subject: [PATCH] Update theme to Bulma 1.0 so that CSS compiles if not look
precisely right
---
.../custom/geofresco/gulp-tasks/compile.js | 5 --
.../custom/geofresco/gulp-tasks/styleguide.js | 48 --------------
web/themes/custom/geofresco/gulpfile.js | 8 ---
web/themes/custom/geofresco/package.json | 10 ++-
.../custom/geofresco/src/global/_base.scss | 2 +
.../geofresco/src/global/_components.scss | 4 ++
.../geofresco/src/global/_elements.scss | 10 +--
.../custom/geofresco/src/global/_fonts.scss | 2 -
.../custom/geofresco/src/global/_layout.scss | 4 ++
.../custom/geofresco/src/global/_paint.scss | 4 ++
.../geofresco/src/global/_variables.scss | 28 +++++++++
.../custom/geofresco/src/global/global.scss | 62 ++++++-------------
12 files changed, 74 insertions(+), 113 deletions(-)
delete mode 100644 web/themes/custom/geofresco/gulp-tasks/styleguide.js
create mode 100644 web/themes/custom/geofresco/src/global/_variables.scss
diff --git a/web/themes/custom/geofresco/gulp-tasks/compile.js b/web/themes/custom/geofresco/gulp-tasks/compile.js
index 5c84b99..7be9ecd 100644
--- a/web/themes/custom/geofresco/gulp-tasks/compile.js
+++ b/web/themes/custom/geofresco/gulp-tasks/compile.js
@@ -13,7 +13,6 @@ var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var sync = require('browser-sync');
-var babel = require('gulp-babel');
var rename = require('gulp-rename');
// Small error handler helper function.
@@ -49,10 +48,6 @@ module.exports = {
'./src/{global,layout,components}/**/*.es6.js'
], { base: './' })
.pipe(sourcemaps.init())
- .pipe(
- babel()
- .on('error', handleError)
- )
.pipe(rename(function (path) {
// Currently not using ES6 modules so for now
// es6 files are compiled into individual JS files.
diff --git a/web/themes/custom/geofresco/gulp-tasks/styleguide.js b/web/themes/custom/geofresco/gulp-tasks/styleguide.js
deleted file mode 100644
index b68586c..0000000
--- a/web/themes/custom/geofresco/gulp-tasks/styleguide.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*eslint strict: ["error", "global"]*/
-'use strict';
-
-//=======================================================
-// Include kss
-//=======================================================
-var kss = require('kss');
-
-//=======================================================
-// Include Our Plugins
-//=======================================================
-var path = require('path');
-
-// Export our tasks.
-module.exports = {
-
- // Generate the style guide using the top level
- // directory name passed in as a parameter.
- generate: function(dirname) {
-
- return kss({
- source: [
- dirname + '/src/global',
- dirname + '/src/components',
- dirname + '/src/layout'
- ],
- destination: dirname + '/dist/style-guide',
- builder: dirname + '/src/style-guide/builder',
- namespace: 'octavia:' + dirname + '/src/components/',
- 'extend-drupal8': true,
- // The css and js paths are URLs, like '/misc/jquery.js'.
- // The following paths are relative to the generated style guide.
- // The all.css file is for the style guide ONLY so you don't have to
- // keep adding the file here everytime you add a new component.
- // Drupal libraries should be leveraged for adding CSS per component.
- css: [
- path.relative(
- dirname + '/style-guide/',
- dirname + '/all/all.css'
- )
- ],
- js: [
- ],
- homepage: 'style-guide.md',
- title: 'Style Guide'
- });
- }
-};
diff --git a/web/themes/custom/geofresco/gulpfile.js b/web/themes/custom/geofresco/gulpfile.js
index dd816d4..c0e44b8 100644
--- a/web/themes/custom/geofresco/gulpfile.js
+++ b/web/themes/custom/geofresco/gulpfile.js
@@ -24,7 +24,6 @@ var taskLint = require('./gulp-tasks/lint.js');
var taskCompress = require('./gulp-tasks/compress.js');
var taskClean = require('./gulp-tasks/clean.js');
-var taskStyleGuide = require('./gulp-tasks/styleguide.js');
var taskConcat = require('./gulp-tasks/concat.js');
//=======================================================
@@ -73,13 +72,6 @@ gulp.task('compress', function() {
return taskCompress.assets();
});
-//=======================================================
-// Generate style guide
-//=======================================================
-gulp.task('styleguide', function() {
- return taskStyleGuide.generate(__dirname);
-});
-
//=======================================================
// Concat all CSS files into a master bundle.
//=======================================================
diff --git a/web/themes/custom/geofresco/package.json b/web/themes/custom/geofresco/package.json
index acde94e..878d89a 100644
--- a/web/themes/custom/geofresco/package.json
+++ b/web/themes/custom/geofresco/package.json
@@ -1,6 +1,10 @@
{
"name": "geofresco",
- "version": "1.0.0",
+ "version": "1.1.0",
+ "scripts": {
+ "sass-dev": "sass --watch --update --style=expanded src/global:dist/css",
+ "sass-prod": "sass --no-source-map --style=compressed src/global:dist/css"
+ },
"browserslist": [
"IE >= 9",
"last 3 versions"
@@ -11,7 +15,7 @@
"postcss-cli": "latest"
},
"dependencies": {
- "bulma": "^0.7.2",
- "bulma-extensions": "^1.0.4"
+ "bulma": "^1.0.2",
+ "sass": "^1.86.0"
}
}
diff --git a/web/themes/custom/geofresco/src/global/_base.scss b/web/themes/custom/geofresco/src/global/_base.scss
index 85a6668..2398d02 100644
--- a/web/themes/custom/geofresco/src/global/_base.scss
+++ b/web/themes/custom/geofresco/src/global/_base.scss
@@ -1,5 +1,7 @@
@charset "utf-8";
+@use "variables" as *;
+
// Set our custom font for all headers and menus
.title,
.subtitle,
diff --git a/web/themes/custom/geofresco/src/global/_components.scss b/web/themes/custom/geofresco/src/global/_components.scss
index 8beff9e..5f9c2af 100644
--- a/web/themes/custom/geofresco/src/global/_components.scss
+++ b/web/themes/custom/geofresco/src/global/_components.scss
@@ -4,6 +4,10 @@
* ../../node_modules/bulma/sass/components
*/
+@use "variables" as *;
+@use "../../node_modules/bulma/sass/utilities/mixins" as *;
+@use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
+
/**
* Make menu items slightly less far apart so we never entirely lose
* 'Community' on mid-size screens.
diff --git a/web/themes/custom/geofresco/src/global/_elements.scss b/web/themes/custom/geofresco/src/global/_elements.scss
index 26ce5f5..8e99088 100644
--- a/web/themes/custom/geofresco/src/global/_elements.scss
+++ b/web/themes/custom/geofresco/src/global/_elements.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
/* Extend or override Bulma's elements ../../node_modules/bulma/sass/elements */
+@use "../../node_modules/bulma/sass/utilities/derived-variables" as *;
+@use "variables" as *;
.site-title {
display: inline-block;
@@ -19,12 +21,12 @@
.header,
.sitename {
background: linear-gradient(
- $body-background-color,
- $body-background-color 74px,
+ $background,
+ $background 74px,
$light-green 74px,
$green 120px,
- $body-background-color 120px,
- $body-background-color
+ $background 120px,
+ $background
);
}
diff --git a/web/themes/custom/geofresco/src/global/_fonts.scss b/web/themes/custom/geofresco/src/global/_fonts.scss
index 4f51972..5c21fba 100644
--- a/web/themes/custom/geofresco/src/global/_fonts.scss
+++ b/web/themes/custom/geofresco/src/global/_fonts.scss
@@ -1,5 +1,3 @@
-$family-geo: "Ocan", "Ubuntu", "Arial Narrow", "Helvetica", "Arial", "Lucida", sans-serif !default
-
@font-face {
font-family: 'Ocan';
src: url('../../fonts/OcanSansStd-Book.woff') format('woff');
diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss
index 8b91de6..443ec0e 100644
--- a/web/themes/custom/geofresco/src/global/_layout.scss
+++ b/web/themes/custom/geofresco/src/global/_layout.scss
@@ -1,6 +1,10 @@
@charset "UTF-8";
// Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
+@use "variables" as *;
+@use "../../node_modules/bulma/sass/utilities/mixins" as *;
+@use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
+
// Center logo & sitename when they stack on tiny screens.
@include until($mini) {
.sitename.column,
diff --git a/web/themes/custom/geofresco/src/global/_paint.scss b/web/themes/custom/geofresco/src/global/_paint.scss
index 9dea5f3..6601345 100644
--- a/web/themes/custom/geofresco/src/global/_paint.scss
+++ b/web/themes/custom/geofresco/src/global/_paint.scss
@@ -1,5 +1,9 @@
/* All classes that are mostly about adding color. */
+@use "variables" as *;
+@use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
+@use "../../node_modules/bulma/sass/utilities/derived-variables" as *;
+
.background-replacement-for-no-image {
background-color: cadetblue;
}
diff --git a/web/themes/custom/geofresco/src/global/_variables.scss b/web/themes/custom/geofresco/src/global/_variables.scss
new file mode 100644
index 0000000..95e6662
--- /dev/null
+++ b/web/themes/custom/geofresco/src/global/_variables.scss
@@ -0,0 +1,28 @@
+
+// Set brand colors.
+$blue: #4391E0;
+$red: #a70c20;
+$light-green: #65AB1F;
+$green: #478D00;
+$green-gray: #8FB489;
+$offwhite: #F8F8F8;
+
+$brown: #AD7442;
+// No idea where this yellow came from, apparently Bulma, but we never set it
+// yet it is the right color. Anyway i'm past trying to figure things out.
+// Re-setting it here, just so that we can assign it to Gleanings, below.
+$yellow: #ffdd57;
+
+// A color for each content type
+$article: $green;
+$blog: $blue;
+$collection: $brown;
+$gleaning: $yellow;
+
+// Update Bulma's global variables.
+$primary: $green;
+
+$mini: 363px;
+
+// Font family
+$family-geo: "Ocan", "Ubuntu", "Arial Narrow", "Helvetica", "Arial", "Lucida", sans-serif !default;
diff --git a/web/themes/custom/geofresco/src/global/global.scss b/web/themes/custom/geofresco/src/global/global.scss
index 9fc036d..6ed762d 100644
--- a/web/themes/custom/geofresco/src/global/global.scss
+++ b/web/themes/custom/geofresco/src/global/global.scss
@@ -1,50 +1,26 @@
// Bring in Bulma allowing us to extend and override it.
-// Set brand colors.
-$blue: #4391E0;
-$red: #a70c20;
-$light-green: #65AB1F;
-$green: #478D00;
-$green-gray: #8FB489;
-$offwhite: #F8F8F8;
-
-$brown: #AD7442;
-// No idea where this yellow came from, apparently Bulma, but we never set it
-// yet it is the right color. Anyway i'm past trying to figure things out.
-// Re-setting it here, just so that we can assign it to Gleanings, below.
-$yellow: #ffdd57;
-
-// A color for each content type
-$article: $green;
-$blog: $blue;
-$collection: $brown;
-$gleaning: $yellow;
-
-// Update Bulma's global variables.
-$primary: $green;
-
-$mini: 363px;
-
+@use "variables" as *;
// Import each part of Bulma separately so we can layer in our styles.
// Extend or override Bulam's base styles in this themes base.scss etc.
-@import "../../node_modules/bulma/sass/utilities/_all";
-@import "fonts";
-@import "../../node_modules/bulma/sass/base/_all";
-@import "base";
-@import "../../node_modules/bulma/sass/elements/_all";
-@import "elements";
-@import "../../node_modules/bulma/sass/form/_all";
-@import "form";
-$navbar-breakpoint: $mini/2;
-@import "../../node_modules/bulma/sass/components/_all";
-@import "components";
-@import "../../node_modules/bulma/sass/grid/_all";
-@import "grid";
-@import "../../node_modules/bulma/sass/layout/_all";
-@import "layout";
+@forward "../../node_modules/bulma/sass/utilities/_index";
+@forward "fonts";
+@forward "../../node_modules/bulma/sass/base/_index";
+@forward "base";
+@forward "../../node_modules/bulma/sass/elements/_index";
+@forward "elements";
+@forward "../../node_modules/bulma/sass/form/_index";
+@forward "form";
+$navbar-breakpoint: calc($mini/2);
+@forward "../../node_modules/bulma/sass/components/_index";
+@forward "components";
+@forward "../../node_modules/bulma/sass/grid/_index";
+@forward "grid";
+@forward "../../node_modules/bulma/sass/layout/_index";
+@forward "layout";
// Stylesheets below will have access to all Bulma variables and mixins.
-@import "content";
-@import "paint";
+@forward "content";
+@forward "paint";
-// @import '../../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';
+// @forward '../../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';