Bump lodash from 4.17.21 to 4.17.23

package.json

@@ -15,19 +15,19 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@cityssm/bulma-sticky-table": "^2.1.0",
+    "@cityssm/bulma-sticky-table": "^3.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.1.2",
     "@unhead/vue": "^1.11.20",
     "axios": "^1.13.2",
-    "bulma": "^0.9.4",
+    "buefy": "^3.0.3",
+    "bulma": "^1.0.4",
     "bulma-timeline": "^3.0.5",
     "leaflet": "^1.9.4",
-    "lodash": "^4.17.21",
-    "node-sass": "^9.0.0",
+    "lodash": "^4.17.23",
     "pinia": "^2.3.1",
     "vue": "^3.3.11",
     "vue-gtag": "^2.1.2",

src/App.vue

@@ -74,6 +74,11 @@ export default {
 
 <style lang="scss">
 
+@use 'bulmaCveCustomizations';
+@use 'bulma-timeline';
+@use 'globals';
+@use 'routerLink';
+
 #cve-skip-link {
   background-color: white;
   text-decoration: underline;

src/assets/style/bulma-timeline.sass

@@ -0,0 +1,203 @@
+@use 'sass:list';
+@use "derived-variables" as *;
+@use "initial-variables" as *;
+
+$timeline-marker-size: 12px !default
+$timeline-marker-color: $grey-lighter !default
+$timeline-marker-icon-size: 24px !default
+$timeline-marker-border-size: 1px !default
+$timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default
+$timeline-line-color: $grey-lighter !default
+$timeline-line-width: 1px !default
+$timeline-line-style: solid !default
+$timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default
+$timeline-content-padding: 1em 0 0 2em !default
+$timeline-rtl-content-padding: 1em 2em 0 0 !default
+$timeline-icon-size: .75rem !default
+$timeline-header-width: 4em !default
+$timeline-item-padding-left: $timeline-header-width * 0.5 !default
+$timeline-item-padding-bottom: 2em !default
+$dimensions: 16 24 32 48 64 96 128 !default
+
+.timeline
+  display: flex
+  flex-direction: column
+  .timeline-header
+    width: $timeline-header-width
+    min-width: $timeline-header-width
+    max-width: $timeline-header-width * 2
+    word-wrap: normal
+    text-align: center
+    display: flex
+    justify-content: center
+  .timeline-item
+    display: flex
+    display: -ms-flexbox
+    display: -webkit-flex
+    position: relative
+    margin-left: $timeline-item-padding-left
+    padding-bottom: $timeline-item-padding-bottom
+    &::before
+      content: ""
+      background-color: $timeline-line-color
+      display: block
+      width: $timeline-line-width
+      height: 100%
+      position: absolute
+      left: -($timeline-line-width * 0.5)
+      top: 0
+
+    .timeline-marker
+      position: absolute
+      background: $timeline-marker-color
+      border: $timeline-marker-border
+      border-radius: 100%
+      content: ""
+      display: block
+      height: $timeline-marker-size
+      transform: translateX(-50%)
+      top: 1.2rem
+      width: $timeline-marker-size
+      &.is-image
+        @each $dimension in $dimensions
+          &.is-#{$dimension}x#{$dimension}
+            height: $dimension * 1px
+            width: $dimension * 1px
+        background: $timeline-marker-color
+        border: $timeline-marker-border
+        border-radius: 100%
+        display: block
+        overflow: hidden
+      &.is-icon
+        display: flex
+        align-items: center
+        justify-content: center
+        height: $timeline-marker-icon-size
+        width: $timeline-marker-icon-size
+        background: $timeline-marker-color
+        border: $timeline-marker-border
+        border-radius: 100%
+        padding: .5rem
+        > *
+          font-size: $timeline-icon-size !important
+      &.is-outlined
+        .image
+          background: $white
+        &.is-icon
+          background: $white
+          > *
+            color: $timeline-marker-color
+      @each $name, $pair in $colors
+        $color: list.nth($pair, 1)
+        $color-invert: list.nth($pair, 1)
+        @if list.length($pair) == 2
+          $color-invert: list.nth($pair, 2)
+        &.is-#{$name}
+          background-color: $color !important
+          border-color: $color !important
+          .image
+            border-color: $color !important
+
+          &.is-icon
+            background-color: $color !important
+            border-color: $color !important
+            > *
+              color: $color-invert !important
+          &.is-outlined
+            background-color: $white !important
+            border-color: $color !important
+            .image
+              background-color: $white !important
+            &.is-icon
+              background-color: $white !important
+              > *
+                color: $color !important
+    .timeline-content
+      padding: $timeline-content-padding
+      .heading
+        font-weight: $weight-semibold
+
+    @each $name, $pair in $colors
+      $color: list.nth($pair, 1)
+      $color-invert: list.nth($pair, 1)
+      @if list.length($pair) == 2
+        $color-invert: list.nth($pair, 2)
+      &.is-#{$name}
+        &::before
+          background-color: $color
+
+  &.is-centered
+    .timeline-header
+      display: flex
+      width: 100%
+      align-self: center
+    .timeline-item
+      width: 50%
+      align-self: flex-end
+      flex-direction: row
+      &:nth-of-type(2n)
+        align-self: flex-start
+        flex-direction: row-reverse
+        margin-left: 0
+        margin-right: $timeline-item-padding-left
+        &::before
+          right: -($timeline-line-width * 0.5)
+          left: auto
+        .timeline-marker
+          transform: translateX(50%)
+        .timeline-content
+          padding: $timeline-rtl-content-padding
+          text-align: right
+          display: flex
+          flex-direction: column
+          align-items: flex-end
+          flex-basis: 100%
+      &:nth-of-type(2n+1)
+        &::before
+          content: ""
+          background-color: $timeline-line-color
+          display: block
+          width: $timeline-line-width
+          height: 100%
+          position: absolute
+          top: 0
+      @each $name, $pair in $colors
+        $color: list.nth($pair, 1)
+        $color-invert: list.nth($pair, 1)
+        @if list.length($pair) == 2
+          $color-invert: list.nth($pair, 2)
+        &.is-#{$name}
+          &::before
+            background-color: $color
+
+  &.is-rtl
+    justify-content: flex-end
+    align-items: flex-end
+    .timeline-item
+      justify-content: flex-end
+      flex-direction: row
+      border-left: none
+      &::before
+        right: 0
+        left: auto
+      margin-left: 0
+      margin-right: $timeline-header-width * 0.5
+      .timeline-marker
+        transform: translateX(50%)
+        &.is-image
+          @each $dimension in $dimensions
+            &.is-#{$dimension}x#{$dimension}
+              transform: translateX(50%)
+      .timeline-content
+        padding: $timeline-rtl-content-padding
+        text-align: right
+
+  &.no-headers
+    .timeline-item
+      &.is-first
+        &::before
+          height: calc(100% - 1.2rem)
+          top: 1.2rem
+      &.is-last
+        &::before
+          height: 1.2rem

src/assets/style/bulmaCveCustomizations.scss

@@ -1,49 +1,80 @@
 @use 'variables' as *;
 
-/** Override Bulma's generic variables **/
-$body-family: "Source Sans Pro", "Public Sans Web", sans-serif;
-
-/** Override Bulma's derived variables **/
-$text: black; // primary navbar text & body text color
-$body-background-color: $cve-theme-page-background;
-$body-font-size: 1rem;
-$link: $theme-color-primary;
-$link-visited: $theme-color-violet-vivid;
-$family-primary: "Source Sans Pro", "Public Sans Web", sans-serif;
-$family-secondary: "Source Sans Pro", "Public Sans Web", sans-serif;
-$family-code: sans-serif;
-$size-small: 0.77rem;
-
-/** Override Bulma's element variables **/
-$icon-dimensions-large: 4rem;
-
-
-/** Override Bulma's Element - Table variables **/
-$table-striped-row-even-background-color: $theme-color-base-lightest;
-
-
-/** Override Bulma's form variables **/
-$input-placeholder-color: $theme-color-base;
-
-/** Override Bulma's Components - message variables **/
-$message-background-color: white;
-$message-header-radius: $cve-border-radius;
-
-/** Override Bulma's Layout - footer variables **/
-$footer-background-color: $theme-color-base-lightest;
-
-/** Override Bulma's navbar variables **/
-$navbar-background-color: $theme-color-primary-darker; // background for application size below desktop 
-$navbar-item-hover-background-color: unset; // submenu background color for touchscreen
-$navbar-item-color: white;
-$navbar-item-hover-color: white; // sets submenu item for selected page & active link color
-$navbar-burger-color: $theme-color-accent-warm;
-$navbar-tab-hover-border-bottom-color: white;
-$navbar-tab-active-color: white;
-$navbar-dropdown-radius: $cve-border-radius;	
-$navbar-dropdown-background-color: $theme-color-primary-darker;
-$navbar-dropdown-item-active-color: $theme-color-accent-cool-light; // desktop
-$navbar-dropdown-item-hover-color: white;
-
-/** Override Bulma's pagination variables **/
-$pagination-margin: 0;
+// Keeping the same order as bulma/sass, which is:
+//
+// @forward "utilities";
+// @forward "themes";
+// @forward "base";
+// @forward "elements";
+// @forward "form";
+// @forward "components";
+// @forward "grid";
+// @forward "layout";
+// @forward "base/skeleton";
+// @forward "helpers";
+
+@forward 'bulma/sass/utilities' with (
+  /** Override Bulma's variables **/
+  // $primary: $theme-color-primary-darker,
+  $text: black, // primary navbar text & body text color
+  $family-sans-serif: '"Source Sans Pro", "Public Sans Web", sans-serif',
+  $family-primary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
+  $family-secondary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
+  $family-code: sans-serif,
+  $size-small: 0.77rem,
+);
+
+@use 'initial-variables' as *;
+
+@forward "bulma/sass/themes";
+
+@forward 'bulma/sass/base' with (
+  $body-background-color: $cve-theme-page-background,
+  $body-font-size: 1rem,
+);
+
+@forward 'bulma/sass/elements' with (
+  $content-heading-weight: $weight-semibold,
+  $icon-dimensions-large: 4rem,
+  $table-striped-row-even-background-color: $theme-color-base-lightest,
+  $title-weight: $weight-semibold,
+);
+
+@forward 'bulma/sass/form' with (
+  $input-placeholder-color: $theme-color-base,
+
+);
+
+// Commented-out settings were used before Bulma 1.0, but are now not available.
+// They're kept here in case we need to investigate if the UI look & feel
+// changes in some way.
+
+@forward 'bulma/sass/components' with (
+//   $message-background-color: white,
+  $message-header-radius: $cve-border-radius,
+  $navbar-background-color: $theme-color-primary-darker, // background for application size below desktop
+//   $navbar-item-hover-background-color: unset, // submenu background color for touchscreen
+  $navbar-item-color: white,
+//   $navbar-item-hover-color: white, // sets submenu item for selected page & active link color
+  $navbar-burger-color: $theme-color-accent-warm,
+  $navbar-tab-hover-border-bottom-color: white,
+  $navbar-tab-active-color: white,
+  $navbar-dropdown-radius: $cve-border-radius,
+  $navbar-dropdown-background-color: $theme-color-primary-darker,
+//   $navbar-dropdown-item-active-color: $theme-color-accent-cool-light, // desktop
+//   $navbar-dropdown-item-hover-color: white,
+  $pagination-margin: 0,
+);
+
+@forward "bulma/sass/grid";
+
+@forward "bulma/sass/layout" with (
+  $footer-background-color: $theme-color-base-lightest
+);
+
+@forward "bulma/sass/base/skeleton";
+@forward "bulma/sass/helpers";
+
+@use 'buefy/src/scss/buefy' with (
+  $icon-svg-width: 1em
+);

src/assets/style/cveRecord.scss

@@ -1,4 +1,5 @@
-@import '@/assets/style/globals.scss';
+@use 'mixins' as *;
+@use 'variables' as *;
 
 .level-item {
   @include touch {

src/assets/style/elements/cveTableStacked.scss

@@ -1,3 +1,6 @@
+@use 'initial-variables' as *;
+@use 'variables' as *;
+
 @media only screen and (max-width: $desktop) {
   td {
     border-color: $theme-color-primary-darker !important;