agaric/sass/agaric/_base.elements.scss

@@ -142,52 +142,3 @@ hr {
 iframe {
   width: 100%;
 }
-
-// No spacing on main heading to avoid gap at top of page
-
-a#main-content {
-  margin: 0;
-  padding: 0;
-}
-
-// Positioning witchcraft to allow editing in the presence of heroes
-
-@mixin localfloaters {
-  position: absolute;
-  z-index: 999;
-  padding-top: 1rem;
-  ul li a {
-    color: white;
-  }
-}
-
-// Logged in users need a nice view of the edit tabs
-
-.gin--horizontal-toolbar {
-
-  .section:has(#block-agarica-local-tasks) {
-    padding-block: 0;
-  }
-
-  &:has(.hero-project) {
-    #navbar {
-      background-color: transparent;
-    }
-    .hero {
-      margin-top: -8rem;
-    }
-
-    section:has(#block-agarica-local-tasks) {
-      @include localfloaters();
-    }
-  }
-
-  &:has([data-history-node-id]):has(.hero-main){
-    article[data-history-node-id] {
-      margin-top: 4rem;
-    }
-    .section:has(#block-agarica-local-tasks) {
-      @include localfloaters();
-    }
-  }
-}

agaric/sass/agaric/_component.hero.scss

@@ -17,7 +17,6 @@
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  margin-top: -4rem;
   &::before {
     position: absolute;
     display: block;
@@ -26,6 +25,8 @@
     left: 0;
     height: 11em;
     content: "";
+    background: -webkit-linear-gradient(top, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+    background: -moz-linear-gradient(top, rgba(13,30,52,1) 25%, rgba(13,30,52,0) 100%);
     background: linear-gradient(to bottom, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
   }
   a .icon {
@@ -134,64 +135,57 @@
   }
 }
 
-.hero-project,
-.hero-person {
-  margin-top: -6rem;
-}
-
 // Project
 
-.hero-project {
+.hero-project .container {
-  .container {
+  .hero-body {
+    .title {
+      color: currentColor;
+      font-size: $size-3;
+      line-height: 1em;
+    }
+    .subtitle {
+      color: currentColor;
+      font-family: $family-monospace;
+      font-size: $size-5;
+      line-height: 1.4em;
+    }
+    .title + .subtitle {
+      margin-top: 1em;
+    }
+  }
+  @include tablet {
+    display: flex;
+    flex-direction: row;
+    .hero-image {
+      width: 50%;
+      img {
+        display: block;
+      }
+    }
     .hero-body {
+      padding: 2rem 2rem 2rem 1rem;
+      z-index: +1;
+      width: 50%;
       .title {
-        color: currentColor;
+        margin-top: 0.25em;
-        font-size: $size-3;
+        margin-left: -1.25em;
-        line-height: 1em;
+        max-width: 12em;
       }
       .subtitle {
-        color: currentColor;
-        font-family: $family-monospace;
         font-size: $size-5;
-        line-height: 1.4em;
-      }
-      .title + .subtitle {
-        margin-top: 1em;
       }
     }
-    @include tablet {
+  }
-      display: flex;
+  @include desktop {
-      flex-direction: row;
+    .hero-body {
-      .hero-image {
+      padding: 3rem 3rem 3rem 1.5rem;
-        width: 50%;
+      .title {
-        img {
+        margin-top: 0.25em;
-          display: block;
+        font-size: $size-2;
-        }
       }
-      .hero-body {
+      .subtitle {
-        padding: 2rem 2rem 2rem 1rem;
+        font-size: $size-4;
-        z-index: +1;
-        width: 50%;
-        .title {
-          margin-top: 0.25em;
-          margin-left: -1.25em;
-          max-width: 12em;
-        }
-        .subtitle {
-          font-size: $size-5;
-        }
-      }
-    }
-    @include desktop {
-      .hero-body {
-        padding: 3rem 3rem 3rem 1.5rem;
-        .title {
-          margin-top: 0.25em;
-          font-size: $size-2;
-        }
-        .subtitle {
-          font-size: $size-4;
-        }
       }
     }
   }

agaric/sass/agaric/_component.navbar.scss

@@ -8,8 +8,8 @@
 // Fixed container
 
 .is-fixed {
-  position: sticky;
+  position: fixed;
-  top:  var(--gin-toolbar-height, 0px);
+  top: 0;
   left: 0;
   right: 0;
   z-index: +400;

agaric/sass/agaric/_variables.scss

@@ -48,14 +48,7 @@ $light: $white !default;
 $dark: $dark !default;
 
 // Bulma invert colors
-$orange-invert: $white !default;
+$orange-invert: $white !default $yellow-invert:$white !default $green-invert: $white !default $turquoise-invert:$white !default $blue-invert: $white !default $purple-invert:$white !default $red-invert: $white !default $primary-invert:$turquoise-invert !default;
-$yellow-invert: $white !default;
-$green-invert: $white !default;
-$turquoise-invert: $white !default;
-$blue-invert: $white !default;
-$purple-invert: $white !default;
-$red-invert: $white !default;
-$primary-invert: $turquoise-invert !default;
 $info-invert: $blue-invert !default;
 $success-invert: $green-invert !default;
 $warning-invert: $yellow-invert !default;
@@ -172,7 +165,7 @@ $desktop: 960px + (2 * $gap) !default; // 1152px container + 3rem
 $widescreen: 1152px + (2 * $gap) !default; // 1344px container + 3rem
 $fullhd: 1344px + (2 * $gap) !default;
 
-$navbar-breakpoint: $tablet !default;
+$navbar-breakpoint: $tablet !default
 
 
 // Animation

package.json

@@ -2,8 +2,16 @@
   "name": "agaric-bulma",
   "version": "1.0.0",
   "devDependencies": {
-    "sass": "^1.91.0",
+    "assemble": "^0.4.42",
-    "nodemon": "^3.1.10"
+    "grunt": "^1.0.4",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-connect": "^1.0.2",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-kss": "^5.0.1",
+    "grunt-sass": "^2.1.0",
+    "grunt-shell": "^2.1.0",
+    "kss": "^3.0.0-beta.25",
+    "node-sass": "^4.13.0"
   },
   "dependencies": {
     "bulma": "^0.7.5",
@@ -11,11 +19,5 @@
     "grunt-cli": "^1.3.2",
     "ionicons": "^4.6.3",
     "slick-carousel": "^1.8.1"
-  },
-  "scripts": {
-    "build": "npm run css",
-    "css-compile": "sass --source-map --embed-sources --no-error-css --load-path=node_modules agaric/sass/agaric.scss agaric/css/agaric.css",
-    "css": "npm-run-all css-compile",
-    "watch": "nodemon -e html,scss -x \"npm run css-compile\""
   }
 }