Update theme to Bulma 1.0 so that CSS compiles if not look precisely right
This commit is contained in:
parent
66fea3dc4b
commit
151b411797
12 changed files with 74 additions and 113 deletions
web/themes/custom/geofresco
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -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.
|
||||
//=======================================================
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@use "variables" as *;
|
||||
|
||||
// Set our custom font for all headers and menus
|
||||
.title,
|
||||
.subtitle,
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
28
web/themes/custom/geofresco/src/global/_variables.scss
Normal file
28
web/themes/custom/geofresco/src/global/_variables.scss
Normal file
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue