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,9 +134,15 @@
   }
 }
 
+.hero-project,
+.hero-person {
+  margin-top: -6rem;
+}
+
 // Project
 
-.hero-project .container {
+.hero-project {
+  .container {
     .hero-body {
       .title {
         color: currentColor;
@@ -190,6 +195,7 @@
       }
     }
   }
+}
 
 // Initiative
 

agaric/sass/agaric/_component.navbar.scss

@@ -8,8 +8,8 @@
 // Fixed container
 
 .is-fixed {
-  position: fixed;
+  position: sticky;
-  top: 0;
+  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",
+    "sass": "^1.91.0",
-    "grunt": "^1.0.4",
+    "nodemon": "^3.1.10"
-    "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",
@@ -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\""
   }
 }