feat: integrated demo theme

.github/workflows/build_demo.yml

@@ -0,0 +1,14 @@
+name: Build Demo Theme
+
+on:
+  push:
+    paths:
+      - 'themes/demo/**'
+  workflow_dispatch:
+
+jobs:
+  call-build-theme:
+    uses: ./.github/workflows/build_theme.yml
+    with:
+      theme: demo
+    secrets: inherit

themes/demo/src/theme/components/_browser.scss

@@ -0,0 +1,197 @@
+$callout-bg: rgba(255, 255, 255, 0.16);
+$border-radius: 10px;
+
+#stac-browser {
+  padding-top: 2.5rem;
+
+  h1, h2, h3, h4, h5, h6 {
+    &:not(.popover-header) {
+      color: var(--white);
+    }
+  }
+
+  h1 {
+    .title {
+      font-weight: normal;
+    }
+  }
+
+  h2 {
+    font-weight: normal !important;
+  }
+
+  header {
+    h1 {
+      display: none;
+    }
+  }
+
+
+  .metadata-card {
+    background-color: var(--greylight) !important;
+    color: var(--darkblue) !important;
+    box-shadow: none !important;
+    border: none !important;;
+    border-spacing: 0 !important;
+    border-collapse: separate !important;
+
+    .card-title {
+      color: var(--darkblue);
+      margin-bottom: 0px;
+    }
+
+    section.metadata-rows, .card-title {
+      padding: 0.5rem;
+    }
+    section {
+      background-color: var(--white) !important;
+    }
+
+    &:hover {
+      box-shadow: none !important;
+    }
+
+    .border {
+      border: none !important;
+    }
+
+    .row {
+      background-color: transparent !important;
+      border-top-color: var(--greylight) !important;
+    }
+
+    .metadata-table {
+      th {
+        background-color: var(--greylight) !important;
+        border: none !important;
+      }
+
+      tr:nth-of-type(odd) {
+        background-color: transparent;
+      }
+
+      th, td {
+        color: var(--darkblue) !important;
+      }
+    }
+  }
+
+  .expandable-card {
+    .card-body {
+      background-color: var(--greylight) !important;
+    }
+  }
+
+  .card {
+    background-color: var(--white);
+    color: var(--darkblue);
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+    height: 100%;
+
+    .intro {
+      opacity: 0.5 !important;
+    }
+
+    &:hover {
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+
+      h4 {
+        a {
+          text-decoration: none;
+        }
+      }
+
+    }
+
+    h4 {
+      a {
+        color: var(--darkblue)
+      }
+    }
+
+    .datetime {
+      color: white;
+      font-style: italic;
+    }
+
+    .text-muted {
+      color: lightgray !important;
+      font-size: small;
+    }
+  }
+
+  .btn {
+    background-color: var(--lightgreen);
+
+    &:not(.btn-block) {
+      color: var(--white);
+    }
+    &.btn-block {
+      color: var(--darkblue);
+    }
+    padding: 0.5rem 1rem;
+    line-height: 1.2;
+    border: none !important;
+    font-family: var(--font-family);
+
+    &.btn-danger {
+      color: var(--white);
+      background-color: #dc3545;
+
+      &:hover {
+        background-color: initial;
+        color: initial;
+      }
+    }
+
+    &:hover {
+      background-color: var(--green);
+    }
+
+    &.active {
+      font-weight: 700;
+    }
+    &.disabled {
+      background-color: var(--white);
+      color: gray;
+    }
+  }
+
+  .btn-outline-primary, .btn-group .btn {
+    border-color: var(--greylight);
+  }
+
+  .badge {
+    padding: 0.25rem 0.5rem;
+  }
+
+  .b-sidebar-body {
+    .btn {
+      background-color: transparent;
+      color: var(--lightgreen);
+    }
+  }
+
+  .tabs {
+    .card-header {
+      border-bottom: none;
+      margin-bottom: -1px;
+    }
+    .nav-tabs .nav-link.active {
+      background-color: var(--white) !important;
+      border: none !important;
+    }
+
+
+    .tab-content {
+      color: var(--darkblue) !important;
+
+
+      h2, h4 {
+        color: var(--darkblue) !important;
+      }
+    }
+  }
+}

themes/demo/src/theme/custom.scss

@@ -0,0 +1 @@
+@import "components/browser";

themes/demo/src/theme/variables.scss

@@ -0,0 +1,113 @@
+// Default Theme for STAC Browser
+
+// Most of the variables below are Bootstrap variables, see https://getbootstrap.com/docs/4.0/getting-started/theming/ for details.
+// For simplicity we just provide some common options as default, but you can override all Bootstrap Sass variables.
+
+
+:root {
+  // colors
+  --darkblue: #003247;
+  --lightblue: #00619E;
+  --green: #008E7A;
+  --lightgreen: #00AE9D;
+  --yellow: #FBAB18;
+  --orange: #F47920;
+  --body-bg: #043346;
+
+  --white: #fff;
+  --black: #000;
+  --light: #e7e7e7;
+  --greylight: #F3F7F8;
+  --stroke: #dcdcdc;
+
+  --underline: #CCD6DA;
+
+  // Colors in rgb
+  --darkblue-rgb: 0, 50, 71;
+  --lightblue-rgb: 0, 97, 158;
+  --green-rgb: 0, 142, 122;
+  --lightgreen-rgb: 0, 174, 157;
+  --yellow-rgb: 251, 171, 24;
+  --orange-rgb: 244, 121, 32;
+  --light-rgb: 231, 231, 231;
+
+  --text-4xl: 3.1875rem;
+  --text-3xl: 2.375rem;
+  --text-2xl: 1.75rem;
+  --text-xl: 1.5rem;
+  --text-lg: 1.25rem;
+  --text-base: 1rem;
+  --text-sm: 0.875rem;
+  --text-xs: 0.75rem;
+  --font-family: 'ESANotes', Arial, sans-serif;
+}
+
+
+// Header / Logo, either image (see below), text (shows CATALOG_TITLE) or none
+$logo: 'none';
+// If 'image' has been chosen above
+$logo-image: 'https://raw.githubusercontent.com/radiantearth/stac-site/master/images/logo/stac-030-long.png';
+$logo-image-height: 100px;
+
+// Background and text default colors
+$body-bg: #264653;
+$body-color: #ffffff;
+
+// Colors
+$theme-colors: (
+  "primary":      #2a9d8f,
+  "secondary":     #FFFFFF,
+  "success":       #28a745,
+  "info":          #09B3AD,
+  "warning":       #ffc107,
+  "danger":        #dc3545,
+  "light":         #f8f9fa,
+  "dark":          #343a40
+);
+
+// Breakpoints for responsive design
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1100px,
+  xxl: 1600px,
+  xxxl: 2500px
+);
+
+// Font size
+$font-size-base: 1rem;
+// Fonts for normal text
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+// Fonts for headings
+$headings-font-family: $font-family-sans-serif;
+// Fonts for code
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+// Heading sizes
+$h1-font-size: 2.2rem;
+$h2-font-size: 1.6rem;
+$h3-font-size: 1.4rem;
+$h4-font-size: 1.2rem;
+
+// Heading color
+$headings-color: null;
+
+// Links
+$link-color: map-get($theme-colors, "primary");
+$link-decoration: none;
+$link-hover-color: darken($link-color, 15%);
+$link-hover-decoration: underline;
+
+// Margin between the main sections of the page (header, content, footer)
+$block-margin: 1rem;
+
+// Margin at the top of the page (for a custom header)
+$header-margin: 0px;
+
+// Border radius
+$border-radius: 0.25rem;
+
+// Max. icon size
+$max-icon-size: 32px;

themes/demo/version.txt

@@ -0,0 +1 @@
+1.0.0