Various fixes to theming

config/config.yml

@@ -6,3 +6,11 @@ rest:
 
 themes:
   - name: cottagelabs
+
+
+# Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with 'image' or 'video').
+# When "image: true", this enables a gallery viewer where you can zoom or page through images.
+# When "video: true", this enables embedded video streaming.  This embedded video streamer also supports audio files.
+mediaViewer:
+  image: true
+  video: true

src/themes/cottagelabs/app/header/header.component.html

@@ -8,8 +8,17 @@
       <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
         <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
-      <a class="d-block my-2" routerLink="https://or2024.openrepositories.org/">
-        <img id="or-logo" src="assets/cottagelabs/images/open_repositories.webp"/>
+      <a class="d-block my-2" href="https://or2024.openrepositories.org/">
+        <picture>
+          <source
+            media="(max-width: 1200px)"
+            srcset="assets/cottagelabs/images/or_logo.jpg">
+          <img src="assets/cottagelabs/images/open_repositories.webp"
+               id="or-logo"
+               alt="a cute kitten">
+        </picture>
+
+        <!--<img id="or-logo" src="assets/cottagelabs/images/open_repositories.webp"/>-->
       </a>
       <nav *ngIf="(isMobile$ | async) !== true" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
         <ds-navbar></ds-navbar>

src/themes/cottagelabs/app/home-page/home-news/home-news.component.html

@@ -3,18 +3,18 @@
     <div class="jumbotron jumbotron-fluid">
       <div class="d-flex flex-wrap">
         <div style="padding-top: 3em;">
-          <h3 class="display-5">Comparing three institutional repository software platforms at OR2024</h3>
-          <h1 class="display-3" style="padding: 2rem;">DSpace 8.x</h1>
+          <h3 class="display-5" class="cl">Comparing three institutional repository software platforms at OR2024</h3>
+          <h1 class="display-3" style="font-family: 'Manrope', SansSerif; font-weight: 500; padding: 2rem; text-transform: uppercase;">DSpace 8.x</h1>
           <!--<p class="lead">DSpace is the ! leading open source repository platform that enables
             organisations to:</p>-->
         </div>
       </div>
       <ol>
         <li style="font-size: 2em;">
-          <h3>INGESTION</h3>
+          <h3 class="cl">INGESTION</h3>
         </li>
         <li style="font-size: 2em;">
-          <h3>DISCOVERABILITY</h3>
+          <h3 class="cl">DISCOVERABILITY</h3>
         </li>
       </ol>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
@@ -33,8 +33,8 @@ <h3>DISCOVERABILITY</h3>
   <picture class="background-image">
     <!--<source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
     <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">-->
-    <source type="image/jpg" srcset="assets/cottagelabs/images/Clarion_Hotel_Post_(Gamla_posthuset),_Göteborg.jpg">
+    <source type="image/jpg" srcset="assets/cottagelabs/images/Clarion_Hotel_Post_(Gamla_posthuset),_Göteborg-min.jpg">
     <img alt="" [src]="'assets/cottagelabs/images/Clarion_Hotel_Post_2015_01.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
   </picture>
-  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">&#64;inspiredimages</a></small>
+  <!--<small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">&#64;inspiredimages</a></small>-->
 </div>

src/themes/cottagelabs/app/home-page/home-news/home-news.component.scss

@@ -68,6 +68,11 @@
       color: var(--ds-home-news-link-hover-color);
     }
   }
+
+  h3.cl {
+    font-weight: 600;
+    text-transform: uppercase;
+  }
 }
 
 

src/themes/cottagelabs/styles/_theme_sass_variable_overrides.scss

@@ -12,10 +12,13 @@
 
 /*** FONT FAMILIES ***/
 
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');
+//@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');
 
-$font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+//$font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+@import url('https://fonts.googleapis.com/css2?family=Montserrat');
+$font-family-sans-serif: 'Montserrat';
+@import url('https://fonts.googleapis.com/css2?family=Manrope');
 
 /*** SEMANTIC COLOR SCHEME ***/
 
@@ -51,7 +54,7 @@ $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI"
 $primary:   #43515f;  // Gray
 $secondary: #495057;  // As Bootstrap $gray-700
 $success:   #92c642;  // Lime
-$info:      #1e6f90;  // Light blue
+$info:      #005500;  // Light blue
 $warning:   #ec9433;  // Orange
 $danger:    #cf4444;  // Red
 $light:     #f8f9fa;  // As Bootstrap $gray-100
@@ -71,6 +74,7 @@ $yiq-contrasted-threshold: 170;
 $body-color: #343a40;       // As Bootstrap $gray-800
 
 $link-color: #1e6f90;       // Blue green, as DSpace $info
+$link-color: #5a3f40;       // Blue green, as DSpace $info
 $link-decoration: none;
 $link-hover-color: darken($link-color, 15%);
 $link-hover-decoration: underline;
@@ -84,7 +88,10 @@ $navbar-dark-color: #fff;
 /*** CUSTOM DSPACE VARIABLES ***/
 
 $ds-home-news-link-color: #92c642;
-$ds-header-navbar-border-bottom-color: #92c642;
+// $ds-header-navbar-border-bottom-color: #92c642;
+$ds-header-navbar-border-bottom-color: #940101;
 
 $ds-breadcrumb-link-color: #154E66 !default;
 $ds-breadcrumb-link-active-color: #040D11 !default;
+
+$ds-header-bg: #FFFCF8;