Merge branch 'release/2.0.0'

getgrav · Apr 11, 2019 · a4de997 · a4de997
2 parents 3b33407 + d54e1fa
commit a4de997
Show file tree

Hide file tree

Showing 35 changed files with 1,213 additions and 381 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# v2.0.0
+## 04/11/2019
+
+1. [](#improved)
+    * Updated to use new `GRAV` core language prefix
+    * Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.8` version
+    * Support for 2FA panel styling
+    * Updated to Yarn 4.0 syntax
+    * Restructured SCSS to ensure easier Spectre updates in future
+1. [](#bugfix)
+    * Some checkboxes fixes for Forms 3.0
+    * More Twig 2.0 compatibility fixes
+    * Fixed a Twig 2.0 issue with assets rendering
+
 # v1.2.6
 ## 03/21/2019
 
@@ -11,7 +25,7 @@
 1. [](#improved)
     * Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.7` version
 1. [](#bugfix)
-    * Fixed missing `</html>` close tag in bae template [#76](https://github.com/getgrav/grav-theme-quark/pull/)
+    * Fixed missing `</html>` close tag in bae template [#76](https://github.com/getgrav/grav-theme-quark/pull/)    
 
 # v1.2.4
 ## 11/12/2018
@@ -26,6 +40,7 @@
     * Fixed `continue_link:` showing up as toggled [#65](https://github.com/getgrav/grav-theme-quark/issues/65)
     * Fixed issue with modular pages not hidden in on-page menu with `visible: false` [#71](https://github.com/getgrav/grav-theme-quark/issues/71)
 
+
 # v1.2.3
 ## 11/05/2018
 

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,5 +1,5 @@
 name: Quark
-version: 1.2.6
+version: 2.0.0
 description: New Grav Default Theme
 icon:  microchip
 author:
@@ -13,7 +13,7 @@ bugs: https://github.com/getgrav/grav-theme-quark/issues
 license: MIT
 
 dependencies:
-    - { name: grav, version: '>=1.5.10' }
+  - { name: grav, version: '>=1.6.0' }
 
 form:
   validation: loose

diff --git a/css-compiled/spectre-exp.css b/css-compiled/spectre-exp.css
diff --git a/css-compiled/spectre-exp.min.css b/css-compiled/spectre-exp.min.css
diff --git a/css-compiled/spectre-icons.css b/css-compiled/spectre-icons.css
diff --git a/css-compiled/spectre-icons.min.css b/css-compiled/spectre-icons.min.css
diff --git a/css-compiled/spectre.css b/css-compiled/spectre.css
diff --git a/css-compiled/spectre.min.css b/css-compiled/spectre.min.css
diff --git a/css-compiled/theme.css b/css-compiled/theme.css
diff --git a/css-compiled/theme.min.css b/css-compiled/theme.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -15,25 +15,29 @@ var paths = {
     source: src_dir
 };
 
-gulp.task('watch', function() {
-  gulp.watch(watch_dir, ['build']);
-});
+function watch() {
+  return gulp.watch(watch_dir, build);
+}
 
-gulp.task('build', function() {
-  gulp.src(paths.source)
-    .pipe(sourcemaps.init())
-    .pipe(sass({outputStyle: 'compact', precision: 10})
-      .on('error', sass.logError)
-    )
-    .pipe(sourcemaps.write())
-    .pipe(autoprefixer())       
-    .pipe(gulp.dest(dest_dir))
-    .pipe(csscomb())
-    .pipe(cleancss())
-    .pipe(rename({
-      suffix: '.min'
-    }))
-    .pipe(gulp.dest(dest_dir));
-});
+function build() {
+  return gulp.src(paths.source)
+      .pipe(sourcemaps.init())
+      .pipe(sass({
+            outputStyle: 'compact',
+            precision: 10
+          }).on('error', sass.logError)
+      )
+      .pipe(sourcemaps.write())
+      .pipe(autoprefixer())
+      .pipe(gulp.dest(dest_dir))
+      .pipe(csscomb())
+      .pipe(cleancss())
+      .pipe(rename({
+        suffix: '.min'
+      }))
+      .pipe(gulp.dest(dest_dir));
+}
 
-gulp.task('default', ['build']);
+exports.watch = watch;
+exports.build = build;
+exports.default = build;
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "url": "https://github.com/picturepan2/spectre/issues"
   },
   "devDependencies": {
-    "gulp": "latest",
+    "gulp": "^4.0.0",
     "gulp-autoprefixer": "latest",
     "gulp-clean-css": "^3.9.4",
     "gulp-csscomb": "^3.0.8",

diff --git a/scss/spectre-exp.scss b/scss/spectre-exp.scss
@@ -1,4 +1,5 @@
 // Variables and mixins
+@import "theme/variables";
 @import "spectre/variables";
 @import "spectre/mixins";
 

diff --git a/scss/spectre-icons.scss b/scss/spectre-icons.scss
@@ -1,4 +1,5 @@
 // Variables and mixins
+@import "theme/variables";
 @import "spectre/variables";
 @import "spectre/mixins";
 

diff --git a/scss/spectre.scss b/scss/spectre.scss
@@ -1,4 +1,5 @@
 // Variables and mixins
+@import "theme/variables";
 @import "spectre/variables";
 @import "spectre/mixins";
 
@@ -19,6 +20,7 @@
 
 // Layout
 @import "spectre/layout";
+@import "spectre/hero";
 @import "spectre/navbar";
 
 // Components

diff --git a/scss/spectre/_forms.scss b/scss/spectre/_forms.scss
@@ -203,7 +203,7 @@ textarea.form-input {
   display: block;
   line-height: $line-height;
   margin: ($control-size - $control-size-sm) / 2 0;
-  min-height: 1.2rem;
+  min-height: $control-size-sm;
   padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 

diff --git a/scss/spectre/_layout.scss b/scss/spectre/_layout.scss
@@ -76,7 +76,8 @@
   &.col-4,
   &.col-3,
   &.col-2,
-  &.col-1 {
+  &.col-1,
+  &.col-auto {
     flex: none;
   }
 }
@@ -143,7 +144,8 @@
   .col-xl-4,
   .col-xl-3,
   .col-xl-2,
-  .col-xl-1 {
+  .col-xl-1,
+  .col-xl-auto {
     flex: none;
   }
   .col-xl-12 {
@@ -182,6 +184,9 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .col-xl-auto {
+    width: auto;
+  }
   .hide-xl {
     display: none !important;
   }
@@ -201,7 +206,8 @@
   .col-lg-4,
   .col-lg-3,
   .col-lg-2,
-  .col-lg-1 {
+  .col-lg-1,
+  .col-lg-auto {
     flex: none;
   }
   .col-lg-12 {
@@ -240,6 +246,9 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .col-lg-auto {
+    width: auto;
+  }
   .hide-lg {
     display: none !important;
   }
@@ -259,7 +268,8 @@
   .col-md-4,
   .col-md-3,
   .col-md-2,
-  .col-md-1 {
+  .col-md-1,
+  .col-md-auto {
     flex: none;
   }
   .col-md-12 {
@@ -298,6 +308,9 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .col-md-auto {
+    width: auto;
+  }
   .hide-md {
     display: none !important;
   }
@@ -317,7 +330,8 @@
   .col-sm-4,
   .col-sm-3,
   .col-sm-2,
-  .col-sm-1 {
+  .col-sm-1,
+  .col-sm-auto {
     flex: none;
   }
   .col-sm-12 {
@@ -356,6 +370,9 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .col-sm-auto {
+    width: auto;
+  }
   .hide-sm {
     display: none !important;
   }
@@ -375,7 +392,8 @@
   .col-xs-4,
   .col-xs-3,
   .col-xs-2,
-  .col-xs-1 {
+  .col-xs-1,
+  .col-xs-auto {
     flex: none;
   }
   .col-xs-12 {
@@ -414,6 +432,9 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
+  .col-xs-auto {
+    width: auto;
+  }
   .hide-xs {
     display: none !important;
   }

diff --git a/scss/spectre/_menus.scss b/scss/spectre/_menus.scss
@@ -18,8 +18,8 @@
   .menu-item {
     margin-top: 0;
     padding: 0 $unit-2;
+    position: relative;
     text-decoration: none;
-    user-select: none;
 
     & > a {
       border-radius: $border-radius;
@@ -52,11 +52,15 @@
   }
 
   .menu-badge {
-    float: right;
-    padding: $unit-1 0;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
 
-    .btn {
-      margin-top: -$unit-h;
+    .label {
+      margin-right: $unit-2;
     }
   }
-}
+}
diff --git a/scss/spectre/_variables.scss b/scss/spectre/_variables.scss
@@ -1,27 +1,28 @@
 // Core variables
-$version: "0.5.7";
+$version: "0.5.8";
 
 // Core features
 $rtl: false !default;
 
 // Core colors
-$primary-color: #3085EE !default;
+$primary-color: #5755d9 !default;
 $primary-color-dark: darken($primary-color, 3%) !default;
 $primary-color-light: lighten($primary-color, 3%) !default;
 $secondary-color: lighten($primary-color, 37.5%) !default;
 $secondary-color-dark: darken($secondary-color, 3%) !default;
 $secondary-color-light: lighten($secondary-color, 3%) !default;
 
 // Gray colors
-$dark-color: #454d5d !default;
+$dark-color: #303742 !default;
 $light-color: #fff !default;
-$gray-color: lighten($dark-color, 40%) !default;
-$gray-color-dark: darken($gray-color, 25%) !default;
+$gray-color: lighten($dark-color, 55%) !default;
+$gray-color-dark: darken($gray-color, 30%) !default;
 $gray-color-light: lighten($gray-color, 20%) !default;
 
-$border-color: lighten($dark-color, 60%) !default;
+$border-color: lighten($dark-color, 65%) !default;
 $border-color-dark: darken($border-color, 10%) !default;
-$bg-color: lighten($dark-color, 66%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
+$bg-color: lighten($dark-color, 75%) !default;
 $bg-color-dark: darken($bg-color, 3%) !default;
 $bg-color-light: $light-color !default;
 

diff --git a/scss/spectre/_viewer-360.scss b/scss/spectre/_viewer-360.scss
@@ -1,19 +1,21 @@
 // 360 Degree Viewer
-// The number of images 
-$image-height: 9rem;
-$image-number: 36 !default;
-$image-width: 24rem;
 
-.viewer-360 {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
   @for $s from 1 through ($image-number) {
-    .viewer-slider[value='#{$s}'] + .viewer-image {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
       background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
     }
   }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
 
   .viewer-slider {
     cursor: ew-resize;
@@ -26,8 +28,7 @@ $image-width: 24rem;
     background-position-y: 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: $image-height;
+    max-width: 100%;
     order: 1;
-    width: $image-width;
   }
-}
+}
diff --git a/scss/spectre/mixins/_label.scss b/scss/spectre/mixins/_label.scss
@@ -1,7 +1,7 @@
 // Label base style
 @mixin label-base() {
   border-radius: $border-radius;
-  line-height: 1.2;
+  line-height: 1.25;
   padding: .1rem .2rem;
 }
 

diff --git a/scss/spectre/spectre-exp.scss b/scss/spectre/spectre-exp.scss
@@ -0,0 +1,18 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Experimentals
+@import "autocomplete";
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "off-canvas";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
+@import "viewer-360";