Added the HTML and CSS for the UW buttons, including Bothell

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

@@ -11,27 +11,24 @@ <h1 class="display-3">
         </p>
       </div>
     </div>
-    <!-- <ul>
-      <li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core metadata
-      </li>
-      <li>open up this content to local and global audiences, thanks to the OAI-PMH interface and Google Scholar optimizations
-      </li>
-      <li>issue permanent urls and trustworthy identifiers, including optional integrations with handle.net and DataCite DOI</li>
-    </ul> !-->
     <p>
       ResearchWorks is the University of Washington's digital repository
       (also known as "institutional repository") for disseminating scholarly
-      work. More information about ResearchWorks can be found on the
-      <a
-        href="https://lib.washington.edu/scholpub/scholarly-publishing-services/researchworks"
-        >Scholarly Publishing Services page</a
-      >.
+      work. 
     </p>
     <p>
       Looking to deposit a dataset? UW has a membership with the generalist data
       repository Dryad. Use
       <a href="https://guides.lib.washington.edu/dryad">our guide</a> to see if
       Dryad is the right place for you to deposit your data.
     </p>
+    <div class="d-sm-flex justify-content-end">
+      <a href="https://lib.uw.edu/scholpub/scholarly-publishing-services/researchworks/" class="uw-btn">
+        <span>About ResearchWorks</span><span class="uw-arrow-box"><span class="arrow"></span></span>
+      </a> 
+      <a href="https://digital.lib.washington.edu/handle/1773/16363" class="uw-btn">
+        <span>UW Bothell ResearchWorks</span><span class="uw-arrow-box"><span class="arrow"></span></span>
+      </a>
+    </div>
   </div>
 </div>

src/themes/uwlib/styles/_theme_css_variable_overrides.scss

@@ -11,7 +11,8 @@
 }
 
 a {
-  color: #607890;
+  //color: #607890;
+  color: #4b2e83;
   text-decoration: none;
   background-color: transparent;
 }
@@ -22,9 +23,61 @@ a {
   //--ds-header-icon-color: #{$link-color};
   //--ds-header-icon-color-hover: #{darken($link-color, 15%)};
   --ds-header-bg: #4B2E83;
-  --ds-navbar-bg: #AAB8C6;
+  //--ds-navbar-bg: #AAB8C6;
+  --ds-navbar-bg: #ECE9E2;
+  --ds-navbar-link-color: #4B2E83;
   --ds-header-icon-color: WHITE;
   --ds-header-icon-color-hover: WHITE;
-  --ds-home-news-link-color: #607890;
+  //--ds-home-news-link-color: #607890;
+  --ds-home-news-link-color: #4B2E83;
   --ds-footer-bg: #4B2E83;
  }
+
+.uw-btn   {    
+    border-radius: 0;
+    padding-right: 0;
+    text-align: left;
+    transition: none;
+    display: inline-flex;
+    align-items: stretch;
+    padding: 0;
+    margin: 0.5rem 1rem;
+    font-size: 1rem;
+}
+
+.uw-btn span {
+    color: #4b2e83;
+    background-color: #fff;
+    border: 1px solid #e8e3d3;
+    text-transform: uppercase;
+    font-family: "Encode Sans Compressed", sans-serif;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px 20px;
+    font-size: 1rem;
+}
+
+.uw-btn span.uw-arrow-box {
+    background-color: #4b2e83;
+    padding: 10px 18px 10px 10px;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+}
+
+.uw-btn span.uw-arrow-box .arrow {
+    border-color: #fff;
+    background-color: #4b2e83;
+    border-width: 0 1px 1px 0;
+    padding: 6px;
+    transform: rotate(-45deg);
+}
+
+.uw-btn:hover {text-decoration: none;}
+
+.uw-btn:hover span.uw-arrow-box, .uw-btn:hover span.uw-arrow-box .arrow  {
+    background-color: #b7a57a;
+    border-color: white;
+    text-decoration:none;
+    underline:none;
+} 

src/themes/uwlib/styles/_theme_sass_variable_overrides.scss

@@ -3,27 +3,31 @@
 // still uses Sass variables internally. So if you want to override bootstrap (or other sass
 // variables) you can do so here. Their CSS counterparts will include the changes you make here
 
-// $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 //
-// $gray-700: #495057 !default;  // Bootstrap $gray-700
-// $gray-100: #f8f9fa !default;  //           $gray-100
-//
-// $blue:   #2B4E72 !default;
-// $green:  #94BA65 !default;
-// $cyan:   #006666 !default;
-// $yellow: #ec9433 !default;
-// $red:    #CF4444 !default;
-// $dark:   darken($blue, 17%) !default;
-//
-// $theme-colors: (
-//   primary: $blue,
-//   secondary: $gray-700,
-//   success: $green,
-//   info: $cyan,
-//   warning: $yellow,
-//   danger: $red,
-//   light: $gray-100,
-//   dark: $dark
-// ) !default;
-//
-// $link-color: map-get($theme-colors, info) !default;
+
+$gray-700: #495057 !default;  // Bootstrap $gray-700
+$gray-100: #f8f9fa !default;  //           $gray-100
+
+$blue:   #2B4E72 !default;
+$green:  #94BA65 !default;
+$cyan:   #006666 !default;
+$yellow: #ec9433 !default;
+$red:    #CF4444 !default;
+$dark:   darken($blue, 17%) !default;
+$purple: #4B2E83 !default;
+$dark:   darken($purple, 17%) !default;
+
+
+$theme-colors: (
+  primary: $purple,
+  secondary: #85754D,
+  success: $green,
+  info: $purple,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $dark
+) !default;
+
+$link-color: $purple !default;