Some terrible witchcraft for allowing editing with heroes

agaric/sass/agaric/_base.elements.scss

@@ -142,3 +142,52 @@ 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,6 +17,7 @@
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+  margin-top: -4rem;
   &::before {
     position: absolute;
     display: block;
@@ -25,8 +26,6 @@
     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 {
@@ -135,57 +134,64 @@
   }
 }
 
+.hero-project,
+.hero-person {
+  margin-top: -6rem;
+}
+
 // Project
 
-.hero-project .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-project {
+  .container {
     .hero-body {
-      padding: 2rem 2rem 2rem 1rem;
-      z-index: +1;
-      width: 50%;
       .title {
-        margin-top: 0.25em;
-        margin-left: -1.25em;
-        max-width: 12em;
+        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 desktop {
-    .hero-body {
-      padding: 3rem 3rem 3rem 1.5rem;
-      .title {
-        margin-top: 0.25em;
-        font-size: $size-2;
+    @include tablet {
+      display: flex;
+      flex-direction: row;
+      .hero-image {
+        width: 50%;
+        img {
+          display: block;
+        }
       }
-      .subtitle {
-        font-size: $size-4;
+      .hero-body {
+        padding: 2rem 2rem 2rem 1rem;
+        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: fixed;
-  top: 0;
+  position: sticky;
+  top:  var(--gin-toolbar-height, 0px);
   left: 0;
   right: 0;
   z-index: +400;

agaric/sass/agaric/_variables.scss

@@ -48,7 +48,14 @@ $light: $white !default;
 $dark: $dark !default;
 
 // Bulma invert colors
-$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;
+$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;
 $info-invert: $blue-invert !default;
 $success-invert: $green-invert !default;
 $warning-invert: $yellow-invert !default;
@@ -165,7 +172,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,16 +2,8 @@
   "name": "agaric-bulma",
   "version": "1.0.0",
   "devDependencies": {
-    "assemble": "^0.4.42",
-    "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"
+    "sass": "^1.91.0",
+    "nodemon": "^3.1.10"
   },
   "dependencies": {
     "bulma": "^0.7.5",
@@ -19,5 +11,11 @@
     "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\""
   }
 }