feat: updated styling of the demo theme

ESA-APEx · Dec 4, 2024 · c787ff5 · c787ff5
1 parent adf747e
commit c787ff5
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 6 deletions.
diff --git a/themes/demo/public/assets/img/logos/logo-esa.svg b/themes/demo/public/assets/img/logos/logo-esa.svg
diff --git a/themes/demo/public/index.html b/themes/demo/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta id="meta-description" name="description" content="">
+    <!-- <script defer="defer" src="/config.js"></script> -->
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but STAC Browser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <header class="top-header">
+      <div class="container d-flex justify-content-between align-items-center">
+        <div><a href="/" target="_blank" rel="noopener noreffer" class="esa-link">The European Space Agency</a> </div> <img src="/assets/img/logos/logo-esa.svg" alt="esa-logo">
+      </div>
+    </header>
+    <div id="stac-browser"></div>
+  </body>
+</html>
diff --git a/themes/demo/src/theme/assets/fonts/NotesEsaBol.otf b/themes/demo/src/theme/assets/fonts/NotesEsaBol.otf
diff --git a/themes/demo/src/theme/assets/fonts/NotesEsaBolIta.otf b/themes/demo/src/theme/assets/fonts/NotesEsaBolIta.otf
diff --git a/themes/demo/src/theme/assets/fonts/NotesEsaLogos.otf b/themes/demo/src/theme/assets/fonts/NotesEsaLogos.otf
diff --git a/themes/demo/src/theme/assets/fonts/NotesEsaReg.otf b/themes/demo/src/theme/assets/fonts/NotesEsaReg.otf
diff --git a/themes/demo/src/theme/assets/fonts/NotesEsaRegIta.otf b/themes/demo/src/theme/assets/fonts/NotesEsaRegIta.otf
diff --git a/themes/demo/src/theme/components/_browser.scss b/themes/demo/src/theme/components/_browser.scss
@@ -6,7 +6,7 @@ $border-radius: 10px;
 
   h1, h2, h3, h4, h5, h6 {
     &:not(.popover-header) {
-      color: var(--white);
+      color: var(--darkblue);
     }
   }
 
@@ -24,6 +24,10 @@ $border-radius: 10px;
     h1 {
       display: none;
     }
+
+    .lead {
+      color:  var(--darkblue);
+    }
   }
 
 
@@ -78,7 +82,7 @@ $border-radius: 10px;
 
   .expandable-card {
     .card-body {
-      background-color: var(--greylight) !important;
+      background-color: var(--white) !important;
     }
   }
 

diff --git a/themes/demo/src/theme/components/_header.scss b/themes/demo/src/theme/components/_header.scss
@@ -0,0 +1,14 @@
+.top-header {
+  background-color: var(--darkblue);
+  height: 70px;
+  > * {
+    height: 100%;
+  }
+
+  .esa-link {
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+}
diff --git a/themes/demo/src/theme/components/_page.scss b/themes/demo/src/theme/components/_page.scss
@@ -0,0 +1,4 @@
+body, h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family);
+}
+
diff --git a/themes/demo/src/theme/custom.scss b/themes/demo/src/theme/custom.scss
@@ -1 +1,3 @@
 @import "components/browser";
+@import "components/header";
+@import "components/page";
diff --git a/themes/demo/src/theme/variables.scss b/themes/demo/src/theme/variables.scss
@@ -50,12 +50,12 @@ $logo-image: 'https://raw.githubusercontent.com/radiantearth/stac-site/master/im
 $logo-image-height: 100px;
 
 // Background and text default colors
-$body-bg: #264653;
-$body-color: #ffffff;
+$body-bg: var(--greylight);
+$body-color: var(--darkblue);
 
 // Colors
 $theme-colors: (
-  "primary":      #2a9d8f,
+  "primary":       #003247,
   "secondary":     #FFFFFF,
   "success":       #28a745,
   "info":          #09B3AD,
@@ -92,7 +92,7 @@ $h3-font-size: 1.4rem;
 $h4-font-size: 1.2rem;
 
 // Heading color
-$headings-color: null;
+$headings-color: var(--darkblue);
 
 // Links
 $link-color: map-get($theme-colors, "primary");
@@ -111,3 +111,19 @@ $border-radius: 0.25rem;
 
 // Max. icon size
 $max-icon-size: 32px;
+
+@font-face {
+  font-display: swap;
+  font-family: "ESANotes";
+  font-style: normal;
+  font-weight: 400;
+  src: url("@/theme/assets/fonts/NotesEsaReg.otf")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "ESANotes";
+  font-style: normal;
+  font-weight: 800;
+  src: url("@/theme/assets/fonts/NotesEsaBol.otf")
+}