New Colour Scheme (#78)

* feat: add SGB online colour scheme * feat: add custom colour codes * feat: add custom css * feat: style buttons according to colour scheme * feat: improve footer styling * feat: layout tweaks * fix: align text in button group * fix: font weight set to regular
Stadt-Geschichte-Basel · Mar 11, 2024 · 4ec9db7 · 4ec9db7
1 parent 0eed54a
commit 4ec9db7
Show file tree

Hide file tree

Showing 17 changed files with 123 additions and 83 deletions.
diff --git a/_data/config-theme-colors.csv b/_data/config-theme-colors.csv
@@ -1,9 +1,9 @@
 color_class,color
-primary,
-secondary,
-success,
-info,
-warning,
-danger,
-light,
-dark,
+primary,#3a1e3e
+secondary,#ffe880
+success,#dbfe87
+info,#86bbd8
+warning,#f6ae2d
+danger,#f63e02
+light,#ffe880
+dark,#3a1e3e
diff --git a/_data/theme.yml b/_data/theme.yml
@@ -112,7 +112,7 @@ bootswatch: # leave blank or comment out for plain bootstrap
 # THEME FONTS [optional!]
 base-font-size: 1em
 text-color: "#191919"
-link-color: "#0d6efd"
+link-color: "#507082"
 base-font-family: "'Euclid Circular B', sans-serif;" # comment out for bootstrap defaults. e.g. Roboto
 font-cdn: "<link rel='preload' href='/assets/fonts/EuclidCircularB-Regular-WebS.woff2' as='font' type='font/woff2' crossorigin><link rel='preload' href='/assets/fonts/EuclidCircularB-Medium-WebS.woff2' as='font' type='font/woff2' crossorigin><link rel='preload' href='/assets/fonts/EuclidCircularB-Semibold-WebS.woff2' as='font' type='font/woff2' crossorigin>
 " # add font stylesheet, e.g. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

diff --git a/_includes/data-download-modal.html b/_includes/data-download-modal.html
@@ -6,7 +6,7 @@
 {%- endcomment -%}
 
 {%- assign stubs = site.data.config-nav | map: 'stub' | join: ';' -%}
-<button type="button" class="btn btn-primary btn-lg float-md-end" data-bs-toggle="modal" data-bs-target="#dataModal">{{ site.data.translations['_includes']['data-download-modal.html']['download-data'][site.lang] | default: 'Download Data' }}</button>
+<button type="button" class="btn btn-outline-primary btn-lg float-md-end" data-bs-toggle="modal" data-bs-target="#dataModal">{{ site.data.translations['_includes']['data-download-modal.html']['download-data'][site.lang] | default: 'Download Data' }}</button>
 <!-- Modal -->
 <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">

diff --git a/_includes/footer-sgb.html b/_includes/footer-sgb.html
@@ -4,29 +4,29 @@
 
         <div class="col-md-7 px-4 mt-3">
             <p class="text-white"><small>{{ site.description }}</small></p>
-            <p class="text-white"><small>{{
-                    site.data.translations['_includes']['footer.html']['last-updated'][site.lang] |
-                    default: 'Last updated' }} {{ site.time | date: '%Y' }}</small></p>
         </div>
 
-        <div class="col-md-5 mt-3 text-center">
-            {% if site.organization-logo-nav %} <p class="text-md-end">
+        <div class="col-md-12 mt-3 text-center">
+            <p class="text-white" id="footer-credits">
+                {% if site.organization-logo-nav %}
                 <a href="{{ site.organization-link }}" target="_blank" rel="noopener">
                     <img id="footer-logo" class="img-fluid" src="{{ site.organization-logo-nav | relative_url }}"
                         alt="{{ site.organization-name | escape }} home">
                 </a>
-            </p>
             {% endif %}
-            <p class="text-white text-md-end" id="footer-credits">
-                <small><em>{{ site.data.translations['_includes']['footer.html']['built-with'][site.lang] | default:
+
+                <small><em><span aria-hidden="true">&#x2E31; </span>{{ site.data.translations['_includes']['footer.html']['built-with'][site.lang] | default:
                         'built with' }}</em>
                     <a href="https://collectionbuilder.github.io/" target="_blank" rel="noopener"
                         title="CollectionBuilder">
-                        <img src="{{ '/assets/img/collectionbuilder-logo.png' | relative_url }}" class="img-fluid"
+                        <img src="{{ '/assets/img/collectionbuilder-logo.png' | relative_url }}" class="img-fluid mx-1"
                             alt="CollectionBuilder">
                     </a>
                 </small>
             </p>
+            <p class="text-white"><small>{{
+                site.data.translations['_includes']['footer.html']['last-updated'][site.lang] |
+                default: 'Last updated' }} {{ site.time | date: '%Y' }}</small></p>
         </div>
     </div>
 </footer>
diff --git a/_includes/index/carousel.html b/_includes/index/carousel.html
@@ -19,7 +19,7 @@
 {%- endcomment -%}
 
 {%- assign carousel-max = include.max | default: 9 -%}
-{%- assign btn-color = include.btn-color | default: "primary" -%}
+{%- assign btn-color = include.btn-color | default: "secondary" -%}
 {%- assign btn-text = include.btn-text | site.data.translations['_includes']['index']['carousel.html']['view-item'][site.lang] | default: "View Item" -%}
 {% if site.data.theme.carousel-child-objects == true %}
 {%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid' | where_exp: "item","item.image_small != nil or item.image_thumb != nil"-%}

diff --git a/_includes/item/browse-buttons.html b/_includes/item/browse-buttons.html
@@ -6,14 +6,14 @@
 
 {%- endcomment -%}
 <div class="text-center">
-  <a class="btn btn-secondary" href="{{ page.previous_item | relative_url }}" id="prev-page-button">&laquo; {{ site.data.translations['_includes']['item']['browse-buttons.html']['previous'][site.lang] | default: "Previous" }}</a>
-  <a class="btn btn-secondary" href="{{ '/browse.html' | relative_url }}">{{ site.data.translations['_includes']['item']['browse-buttons.html']['back-to-browse'][site.lang] | default: "Back to Browse" }}</a>
-  <a class="btn btn-secondary" href="{{ page.next_item | relative_url }}" id="next-page-button">{{ site.data.translations['_includes']['item']['browse-buttons.html']['next'][site.lang] | default: "Next" }} &raquo;</a>
+  <a class="btn btn-outline-primary" href="{{ page.previous_item | relative_url }}" id="prev-page-button">&laquo; {{ site.data.translations['_includes']['item']['browse-buttons.html']['previous'][site.lang] | default: "Previous" }}</a>
+  <a class="btn btn-outline-primary" href="{{ '/browse.html' | relative_url }}">{{ site.data.translations['_includes']['item']['browse-buttons.html']['back-to-browse'][site.lang] | default: "Back to Browse" }}</a>
+  <a class="btn btn-outline-primary" href="{{ page.next_item | relative_url }}" id="next-page-button">{{ site.data.translations['_includes']['item']['browse-buttons.html']['next'][site.lang] | default: "Next" }} &raquo;</a>
 </div>
 <div id="item-nav">
   <div class="d-none d-md-block">
-    <a class="previous btn btn-lg btn-secondary" href="{{ page.previous_item | relative_url }}">&laquo;</a>
-    <a class="next btn btn-lg btn-secondary" href="{{ page.next_item | relative_url }}">&raquo;</a>
+    <a class="previous btn btn-lg btn-outline-primary" href="{{ page.previous_item | relative_url }}">&laquo;</a>
+    <a class="next btn btn-lg btn-outline-primary" href="{{ page.next_item | relative_url }}">&raquo;</a>
   </div>
 </div>
 <script>

diff --git a/_includes/item/download-buttons.html b/_includes/item/download-buttons.html
@@ -12,13 +12,13 @@
     {% if page.object_transcript %}<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript" aria-expanded="false" aria-controls="collapseExample">{{ site.data.translations['_includes']['item']['download-buttons.html']['transcript'][site.lang] | default: "View Transcript" }}</button>{% endif %}
     {% if page.date %}{% assign regex = '[\dX]{4}' %}{%- assign matches = page.date | regex_match: regex -%}
     {%- capture url -%}{%- for match in matches -%}{% capture queryParam %}y{{ match }}{% endcapture %}{% assign years = years | append: queryParam %}{% assign url = url | append: queryParam %}{%- endfor %}{%- endcapture %}{% assign url = url | append: '#y' | append: matches[0] %}{% assign url = '?' | append: years | append: '#y' | append: matches[0] %}   
-    <a href="{{ url | strip | prepend: '/timeline.html' | relative_url | escape}}" class="btn btn-outline-primary">{{ site.data.translations['_includes']['item']['download-buttons.html']['timeline'][site.lang] | default: "View on Timeline" }}</a>{% endif %}
+    <a href="{{ url | strip | prepend: '/timeline.html' | relative_url | escape}}" class="btn btn-outline-primary d-flex align-items-center">{{ site.data.translations['_includes']['item']['download-buttons.html']['timeline'][site.lang] | default: "View on Timeline" }}</a>{% endif %}
     {% if page.latitude and page.longitude %}
     <a href="{{ '/map.html?location=' | append: page.latitude  | append: ',' | append: page.longitude | append: '&marker=' | append: page.objectid | relative_url }}" class="btn btn-outline-primary">{{ site.data.translations['_includes']['item']['download-buttons.html']['map'][site.lang] | default: "View on Map" }}</a>{% endif %}
-    {% if page.object_location %}<a target="_blank" rel="noopener" href="{{ page.object_location | relative_url }}" class="btn btn-outline-primary">
+    {% if page.object_location %}<a target="_blank" rel="noopener" href="{{ page.object_location | relative_url }}" class="btn btn-outline-primary d-flex align-items-center">
         {% if page.display_template == 'video' and page.object_location contains 'vimeo' %}{{ site.data.translations['_includes']['item']['download-buttons.html']['vimeo'][site.lang] | default: "View on Vimeo"}}{% elsif page.display_template == 'video' and page.object_location contains 'youtu' %}{{ site.data.translations['_includes']['item']['download-buttons.html']['youtube'][site.lang] | default: "View on YouTube"}}{% elsif page.display_template == 'record'%}{{ site.data.translations['_includes']['item']['download-buttons.html']['link-to-object'][site.lang] | default: "Link to Object"}}{% else %}{{ site.data.translations['_includes']['item']['download-buttons.html']['download'][site.lang] | default: "Download" }} {{ page.format | split: '/' | last | default: page.display_template | upcase }}{% endif %}
     </a>{% endif %}
-    <a class="btn btn-outline-secondary" href="mailto:{{ site.report-email }}?subject={{ site.data.translations['_includes']['item']['download-buttons.html']['subject'][site.lang] | default: 'Report faulty metadata for'}} {{ page.title | escape }}&body={{ site.data.translations['_includes']['item']['download-buttons.html']['body'][site.lang] | default: 'Please describe the issue with the metadata for'}} {{ page.title | escape }}.%0D%0A%0D%0A- URL: {{ site.url | append: page.url | url_encode }}%0D%0A- ID: {{ page.objectid | escape }}">{{ site.data.translations['_includes']['item']['download-buttons.html']['report'][site.lang] | default: "Report faulty metadata" }}</a>
+    <a class="btn btn-outline-primary text-danger d-flex align-items-center" href="mailto:{{ site.report-email }}?subject={{ site.data.translations['_includes']['item']['download-buttons.html']['subject'][site.lang] | default: 'Report faulty metadata for'}} {{ page.title | escape }}&body={{ site.data.translations['_includes']['item']['download-buttons.html']['body'][site.lang] | default: 'Please describe the issue with the metadata for'}} {{ page.title | escape }}.%0D%0A%0D%0A- URL: {{ site.url | append: page.url | url_encode }}%0D%0A- ID: {{ page.objectid | escape }}">{{ site.data.translations['_includes']['item']['download-buttons.html']['report'][site.lang] | default: "Report faulty metadata" }}</a>
 </div>
 {% if page.object_transcript %}
 <div class="collapse mt-3" id="collapseTranscript">

diff --git a/_includes/js/browse-js.html b/_includes/js/browse-js.html
@@ -72,11 +72,11 @@
     // media type
     if(obj.template && obj.template != "") {
         mediaIcon = getIcon(obj.template,obj.format,"hidden");
-        card += '<p class="card-text"><small><a class="btn btn-sm btn-outline-secondary" href="{{ page.url | relative_url }}#' + encodeURIComponent(obj.template) + '">' + 
+        card += '<p class="card-text"><small><a class="btn btn-sm btn-outline-primary" href="{{ page.url | relative_url }}#' + encodeURIComponent(obj.template) + '">' + 
         obj.template.toUpperCase() + ' ' + mediaIcon + '</a></small></p>';
     }
     // view button
-    card += '<hr><a href="' + itemHref + '" class="btn btn-sm btn-light" title="link to ' + obj.title + '">' + "{{ site.data.translations['_includes']['js']['browse-js.html']['view-full-record'][site.lang] | default: 'View Full Record' }}" + '</a>';
+    card += '<hr><a href="' + itemHref + '" class="btn btn-sm btn-outline-primary" title="link to ' + obj.title + '">' + "{{ site.data.translations['_includes']['js']['browse-js.html']['view-full-record'][site.lang] | default: 'View Full Record' }}" + '</a>';
     // close divs
     card += '</div></div></div>';
     // send back big string

diff --git a/_includes/nav-search-lunr.html b/_includes/nav-search-lunr.html
@@ -7,8 +7,8 @@
 <form class="form-inline my-2 my-lg-0" role="search" id="search" onsubmit="site_search(); return false;">
     <div class="input-group">
         <input id="site-search" class="form-control " type="text" placeholder="{{ site.data.translations['_includes']['nav-search-lunr.html']['search'][site.lang] | default: 'Search' }}" aria-label="Search box">
-        <button class="btn btn-light" type="submit">
-            <span id="search-icon"><svg viewBox="0 0 1024 974" height="16px" width="20px"><path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"/></svg></span>
+        <button class="btn btn-dark" type="submit">
+            <span id="search-icon"><svg viewBox="0 0 1024 974" fill="white" height="16px" width="20px"><path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"/></svg></span>
             <span class="visually-hidden">{{ site.data.translations['_includes']['nav-search-lunr.html']['search'][site.lang] | default: 'Search' }}</span>
         </button>
     </div>

diff --git a/_includes/scroll-to-top.html b/_includes/scroll-to-top.html
@@ -17,7 +17,7 @@
     }
 </script>
 <button id="scroll-to-top" type="button" class="btn btn-link" onclick="scrollToTop();" title="{{ site.data.translations['_includes']['scroll-to-top.html']['back-to-top'][site.lang] | default: 'Back to Top' }}" aria-label="{{ site.data.translations['_includes']['scroll-to-top.html']['back-to-top'][site.lang] | default: 'Back to Top' }}">
-    <svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
+    <svg class="bi icon-sprite text-dark" role="img" aria-label="Up Arrow">
         <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
     </svg>
 </button>
diff --git a/_layouts/browse.html b/_layouts/browse.html
@@ -18,19 +18,19 @@
         <form role="search" id="lunrSearch" onsubmit="submitFilter(); return false;">
             <div class="input-group input-group-lg">
                 <input type="text" class="form-control" id="filterTextBox" placeholder="{{ site.data.translations['_layouts']['browse.html']['filter'][site.lang] | default: 'Filter' }} ..." aria-label="{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}"> 
-                <button class="btn btn-success" type="submit" title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}" id="filterButton" >{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}</button>
-                <button class="btn btn-outline-secondary filter" onclick="resetFilter(); return false;" data-filter="">{{ site.data.translations['_layouts']['browse.html']['reset'][site.lang] | default: 'Reset' }}</button>
+                <button class="btn btn-secondary" type="submit" title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}" id="filterButton" >{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}</button>
+                <button class="btn btn-outline-secondary text-dark filter" onclick="resetFilter(); return false;" data-filter="">{{ site.data.translations['_layouts']['browse.html']['reset'][site.lang] | default: 'Reset' }}</button>
             </div>
         </form>
         <div class="h2" id="numberOf"></div>
     </div>
     <div class="col-md-2">
         <div class="dropdown">
-            <button class="btn btn-secondary mt-1 dropdown-toggle" type="button" id="browseSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-outline-primary mt-1 dropdown-toggle" type="button" id="browseSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 {{ site.data.translations['_layouts']['browse.html']['sort-by'][site.lang] | default: 'Sort by' }} <span id="sortFilter">{{ site.data.translations['_layouts']['browse.html']['random'][site.lang] | default: 'Random' }}</span>
             </button>
             <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
-                <button class="dropdown-item browse-sort-item active" data-filter="random">{{ site.data.translations['_layouts']['browse.html']['random'][site.lang] | default: 'Random' }}</button>
+                <button class="dropdown-item browse-sort-item" data-filter="random">{{ site.data.translations['_layouts']['browse.html']['random'][site.lang] | default: 'Random' }}</button>
                 <button class="dropdown-item browse-sort-item" data-filter="title">{{ site.data.translations['_layouts']['browse.html']['title'][site.lang] | default: 'Title' }}</button>
                 {% assign sort_options = site.data.config-browse | where_exp: 'i','i.sort_name != nil' %}
                 {% for o in sort_options %}

diff --git a/_layouts/item/item-page-base.html b/_layouts/item/item-page-base.html
@@ -11,11 +11,13 @@
     {% include item/trigger-warning.html %}
     <div class="my-0 h5 small">{{ page.display_template | replace: "_", " " | upcase }} {% if page.display_template == "compound_object" or page.display_template == "multiple" %}{% assign children = site.data[site.metadata] | where_exp: 'item','item.parentid == page.objectid' %} ({{ children | size }} {{ site.data.translations['_layouts']['item']['item-page-base.html']['items'][site.lang] | default: 'Items'}}){% endif %}</div>
     <h2 class="mb-3">{{ page.title }} 
-        {% unless page.display_template == 'record' %}<a href="#metadata" class="ms-5 btn btn-sm btn-outline-dark small">{{ site.data.translations['_layouts']['item']['item-page-base.html']['item-info'][site.lang] | default: 'Item Info'}} 
+        {% unless page.display_template == 'record' %}
+        <div class="d-flex justify-content-center mt-2"><a href="#metadata" class="ms-5 btn btn-sm btn-outline-dark small">{{ site.data.translations['_layouts']['item']['item-page-base.html']['item-info'][site.lang] | default: 'Item Info'}} 
             <svg class="bi icon-sprite" role="img" aria-label="{{ site.data.translations['_layouts']['item']['item-page-base.html']['jump-to'][site.lang] | default: 'Jump to item info'}}">
                 <use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#arrow-down"/>
             </svg>
-        </a>{% endunless %}
+            </a>
+        </div>{% endunless %}
     </h2>
 
     <div class="row justify-content-center">

diff --git a/_layouts/list.html b/_layouts/list.html
@@ -37,5 +37,5 @@
         <button class="dropdown-item list-sort-item" data-filter='term'>{{ site.data.translations['_layouts']['list.html']['term'][site.lang] | default: 'Term' }}</button>
     </div>
 </div>
-<div id="{{ list_id }}" class="text-center my-4 bg-{{ page.background | default: 'light' }} border rounded p-2"></div>
+<div id="{{ list_id }}" class="text-center my-4 bg-{{ page.background | default: 'light' }} border rounded p-1"></div>
 {% include js/list-js.html id=list_id fields=fields min=min stopwords=stopwords %}