Merge pull request #1202 from israelcefrin/pkp_sfu_header_footer

Adding PKP/SFU brand to header and footer
pkp · Jun 7, 2024 · b905f69 · b905f69
2 parents 52ae5f8 + dca8d64
commit b905f69
Show file tree

Hide file tree

Showing 11 changed files with 457 additions and 31 deletions.
diff --git a/_includes/book/header.html b/_includes/book/header.html
@@ -7,7 +7,7 @@
 		</button>
 	{% endif %}
 	<a class="bookHeader__logo" href="/">
-		<img src="/img/docs-logo.png" alt="{{ site.data.site.logoAltText }}" class="bookHeader__logoImage">
+		<img src="/img/logo-on-white.png" alt="{{ site.data.site.logoAltText }}" class="bookHeader__logoImage">
 	</a>
 	<div class="bookHeaderTools">
 		{% assign versions = site.data.versions[page.book] %}

diff --git a/_includes/hub/footer.html b/_includes/hub/footer.html
@@ -1,39 +1,44 @@
 <div class="siteFooter">
 	<nav class="siteFooter__container">
-		<div class="siteFooter__logo">
-			<a href="https://pkp.sfu.ca">
-				<img src="/img/pkp-logo.png" alt="Public Knowledge Project">
-			</a>
-		</div>
-		{% if site.data.site.navContrib %}
+		<div class="siteFooter__top">
 			<div class="siteFooter__nav">
 				<div class="siteFooter__navHeader">
-					{{ site.data.site.navContrib.title }}
+					Contact Us
 				</div>
-				{% for nav in site.data.site.navContrib.items %}
-					{{ nav | markdownify }}
-				{% endfor %}
+				<p>Have a question or suggestion about PKP’s documentation and user guides? <a href="https://pkp.sfu.ca/documentation-feedback/">Use our documentation contact form</a>.</p>
+				<p>If your message is not about documentation, please use the general <a href="https://pkp.sfu.ca/contact-us/">contact form</a>.</p>
 			</div>
-		{% endif %}
-		{% if site.data.site.navAbout %}
-			<div class="siteFooter__nav">
-				<div class="siteFooter__navHeader">
-					{{ site.data.site.navAbout.title }}
+			{% if site.data.site.navContrib %}
+				<div class="siteFooter__nav">
+					<div class="siteFooter__navHeader">
+						{{ site.data.site.navContrib.title }}
+					</div>
+					{% for nav in site.data.site.navContrib.items %}
+						{{ nav | markdownify }}
+					{% endfor %}
 				</div>
-				{% for nav in site.data.site.navAbout.items %}
-					{{ nav | markdownify }}
-				{% endfor %}
-			</div>
-		{% endif %}
-		{% if site.data.site.navContact %}
-			<div class="siteFooter__nav">
-				<div class="siteFooter__navHeader">
-					{{ site.data.site.navContact.title }}
+			{% endif %}
+			{% if site.data.site.navAbout %}
+				<div class="siteFooter__nav">
+					<div class="siteFooter__navHeader">
+						{{ site.data.site.navAbout.title }}
+					</div>
+					{% for nav in site.data.site.navAbout.items %}
+						{{ nav | markdownify }}
+					{% endfor %}
 				</div>
-				{% for nav in site.data.site.navContact.items %}
-					{{ nav | markdownify }}
-				{% endfor %}
+			{% endif %}
+			<div class="siteFooter__logo">
+				<a href="https://pkp.sfu.ca">
+					<img src="/img/logo-on-grey.png" alt="Public Knowledge Project">
+				</a>
+				<p>The Public Knowledge Project is a Core Facility of Simon Fraser University</p>
+                <p>888 University Drive, Burnaby, B.C., Canada V5A 1S6</p>
+                <p>We respectfully acknowledge that SFU occupies the unceded traditional territories of the Coast Salish peoples of the Musqueam, Squamish, and Tsleil-Waututh Nations.</p>
 			</div>
-		{% endif %}
+		</div>
+		<div class="siteFooter__bottom">
+			<p class="footer-copyright"><span class="terms-text"><a href="https://www.sfu.ca/contact/terms-conditions.html" target="_blank">TERMS & CONDITIONS</a> &copy; SIMON FRASER UNIVERSITY.</span><span class="copyright-text"><img src="/img/creativecommons.svg" alt="Creative Commons logo" /><img src="/img/attribution.svg" alt="Attribution icon" /><a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC-BY 2.0</a></span><span class="footer-copyright-separator"> | </span><span class="ab-link">Website by <a target="_blank" href="https://www.affinitybridge.com">Affinity Bridge</a></span></p>
+		</div>
 	</div>
 </div>
diff --git a/_includes/hub/header.html b/_includes/hub/header.html
@@ -1,6 +1,6 @@
 <div class="siteHeader siteHeader--hub">
 	<a class="siteHeader__logo" href="/">
-		<img src="/img/docs-logo.png" alt="{{ site.data.site.logoAltText }}" class="siteHeader__logoImage">
+		<img src="/img/logo-on-white.png" alt="{{ site.data.site.logoAltText }}" class="siteHeader__logoImage">
 	</a>
 	<div class="siteHeader__about">{{ site.data.site.siteAbout | markdownify }}</div>
 </div>
diff --git a/_sass/components/bookHeader.scss b/_sass/components/bookHeader.scss
@@ -129,3 +129,118 @@ h6[id] {
 		}
 	}
 }
+
+/* New Book Header Styles */
+.bookHeader {
+    display: flex;
+    flex-direction: row;
+    padding: 24px;
+    justify-content: justify;
+    align-items: flex-end;
+    height: 144px;
+    .bookHeader__logo {
+        padding-top: 0px;
+        padding-bottom: 0px;
+        width: 300px;
+        height: auto;
+        .bookHeader__logoImage {
+            max-height: none;
+            width: 300px;
+        }
+    }
+    .bookHeaderTools {
+        text-align: right;
+        flex-grow: 1;
+        float: none;
+        color: #414042;
+        font-family: Roboto;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 140%;
+        letter-spacing: 0.4px;
+        position: relative;
+        bottom: -9px;
+        padding-left: 69px;
+        .version {
+            position: relative;
+            top: 4px;
+        }
+    }
+}
+.body--withSidebar .book__sidebar {
+    top: 144px !important;
+}
+@media (max-width: 900px) {
+    .bookHeader {
+
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        justify-content: justify;
+        align-items: flex-start;
+        background-color: #CC0633;
+        height: auto;
+		.gsc-input-box {
+			padding-top: 0px;
+			padding-bottom: 0px;
+		}
+        #sidebarControl {
+            color: #FFF;
+        }
+        .bookHeader__logo {
+            padding-top: 0px;
+            padding-bottom: 0px;
+            width: 150px;
+            height: 47.5px;
+            .bookHeader__logoImage {
+                max-height: none;
+                width: 150px;
+                height: 47.5px;
+                display: none;
+            }
+            background-image: url(/img/logo-on-red.png);
+            background-size: cover;
+        }
+        .bookHeaderTools {
+            text-align: right;
+            flex-grow: 1;
+            float: none;
+            color: #414042;
+            font-family: Roboto;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 140%;
+            letter-spacing: 0.4px;
+            position: relative;
+            bottom: 0px;
+            padding-left: 0px;
+            display: flex;
+            flex-direction: column;
+            table.gsc-search-box {
+                width: calc(100% - 50px);
+            }
+            .versions {
+                text-align: left;
+                margin-left: 0px;
+                .version {
+                    position: relative;
+                    top: 0px;
+                    color: #FFF;
+                    &.version--current {
+                        background-color: #FFF;
+                        border-color: #FFF;
+                        color: #CC0633;
+                    }
+                    &:hover {
+                        border-color: #FFF;
+                    }
+                }
+            }
+        }
+    }
+    .body--withSidebar .book__sidebar {
+        top: 190px !important;
+    }
+}