Updated branding for Dev Portal context (WIP).

AuDigitalHealth · Sep 26, 2024 · 0b34b1e · 0b34b1e
1 parent b135ccd
commit 0b34b1e
Show file tree

Hide file tree

Showing 10 changed files with 389 additions and 33 deletions.
diff --git a/content/assets/css/ADHA.css b/content/assets/css/ADHA.css
@@ -3,15 +3,15 @@
   --full-black: #000000; /* Black colour */
   --full-white: #FFFFFF; /* White colour */
   --body-hyperlink-color: #005ba6; /* Link colour */
-  --btn-active-color: #0079db; /* Button active colour */
-  --btn-hover-color: #0079db; /* Button hover colour */
+  --btn-active-color: #25abe0; /* Button active colour */
+  --btn-hover-color: #25abe0; /* Button hover colour */
   --ig-header-container-color: #f5f5f5; /* Header background colour */
-  --navbar-background-color: #005ba6; /* Navbar background colour */
+  --navbar-background-color: #212529; /* Navbar background colour */
   --publish-box-bg-color: gold; /* Version box background colour */
   --publish-box-border: maroon; /* Version box border colour */
   --publish-box-past-bg-color: #ffaaaa; /* Version box past background colour */
-  --footer-background-color: #005ba6; /* Footer background colour */
-  --footer-bg-color: #005ba6; /* Footer background colour */
+  --footer-background-color: #212529; /* Footer background colour */
+  --footer-bg-color: #212529; /* Footer background colour */
   --footer-hyperlink-text-color: #b8dcf9; /* Footer links */
 }
 
@@ -64,14 +64,11 @@ h6,
   display: block;
 }
 
-/* Site heading */
 #ig-status {
-  line-height: 1.5;
-  margin: auto 0 25px 0;
-  color: var(--full-black);
-  text-align: center;
-  flex: 1 1 auto;
-  padding: 0 20px;
+  line-height: 1;
+  margin: 0;
+  color: var(--full-white);
+  text-align: left;
   height: auto;
 }
 
@@ -206,5 +203,179 @@ h6,
 
 /* Footer segment container inner wrapper */
 #segment-footer > .container .inner-wrapper {
-  padding: 20px 0;
+  padding: 25px 0;
+}
+
+/* Styles for Developer Portal context */
+
+html {
+  font-size: 100%;
+}
+
+body {
+  font-size: 16px;
+}
+
+.dev-portal * {
+  font-family: Inter, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif !important;
+}
+
+.dev-portal p, .dev-portal li {
+  font-size: 1rem;
+  line-height: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.dev-portal .section-inner {
+  padding: 0 1.25rem;
+}
+
+.dev-portal .section-container {
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+#dev-portal-banner {
+  background-color: #212529;
+}
+
+.dev-portal #banner-inner {
+  background-color: rgba(0, 0, 0, 0);
+  background-image: radial-gradient(rgba(37, 171, 224, 0.9), rgba(13, 18, 31, 0));
+  background-size: 130% 220%;
+}
+
+.dev-portal #banner-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: start;
+  align-items: start;
+  padding: 1.5rem 0;
+}
+
+@media(min-width: 700px) {
+  .dev-portal #banner-container {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.dev-portal #brand-banner {
+  padding: 0 1.5rem 0 0;
+}
+
+.dev-portal #dev-portal-logo {
+  padding-bottom: 1rem;
+}
+
+.dev-portal #dev-portal-sitename {
+  padding-bottom: 0.75rem;
+}
+
+@media(min-width: 700px) {
+  .dev-portal #dev-portal-sitename {
+    padding-bottom: 0;
+  }
+}
+
+#dev-portal-sitename h1 {
+  color: var(--full-white);
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.25;
+  margin: 0;
+  border-bottom: 0 none transparent;
+  padding-bottom: 0;
+}
+
+.dev-portal #subtitle {
+  font-size: 1.25rem;
+  color: var(--full-white);
+  padding: 0.75rem 0 0 0;
+}
+
+.dev-portal #subtitle img {
+  margin: 0 0 0 0.5rem;
+}
+
+.dev-portal #menu-banner ul {
+  padding-left: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dev-portal #menu-banner li {
+  list-style: none;
+  text-wrap: nowrap;
+  padding: 0.25rem 0;
+}
+
+@media(min-width: 1160px) {
+  .dev-portal #menu-banner ul {
+    flex-direction: row;
+  }
+
+  .dev-portal #menu-banner li {
+    padding: 0 1rem;
+  }
+}
+
+.dev-portal #menu-banner a {
+  color: var(--full-white);
+  text-decoration: none;
+}
+
+#dev-portal-brand-ribbon {
+  height: 1rem;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+#brand-ribbon-band-blue-dark {
+  background-color: #1f4388;
+  width: 25%;
+}
+
+#brand-ribbon-band-blue-light {
+  background-color: #33a3dc;
+  width: 25%;
+}
+
+#brand-ribbon-band-orange {
+  background-color: #ef4123;
+  width: 7.5%;
+}
+
+#brand-ribbon-band-red {
+  background-color: #b10f1f;
+  width: 7.5%;
+}
+
+#brand-ribbon-band-yellow {
+  background-color: #faa61a;
+  width: 35%;
+}
+
+#dev-portal-footer {
+  background-color: var(--footer-background-color);
+  color: var(--full-white);
+}
+
+#dev-portal-footer * {
+  font-size: 14px !important;
+}
+
+.dev-portal #brand-footer {
+  padding: 2rem 0;
+}
+
+.dev-portal #footer-acknowledgement {
+  padding: 1rem 0 2rem 0;
 }
diff --git a/content/assets/images/adha-logo-light.svg b/content/assets/images/adha-logo-light.svg
diff --git a/includes/_append.fragment-css.html b/includes/_append.fragment-css.html
@@ -1 +1 @@
-	    <link href="{{site.data.info.assets}}assets/css/ADHA.css" rel="stylesheet"/>
+<link href="{{site.data.info.assets}}assets/css/ADHA.css" rel="stylesheet"/>
diff --git a/includes/_append.fragment-footer.html b/includes/_append.fragment-footer.html
diff --git a/includes/_append.fragment-header.html b/includes/_append.fragment-header.html
diff --git a/includes/fragment-footer.html b/includes/fragment-footer.html
@@ -0,0 +1,3 @@
+<p><span style="white-space: pre-line">Links:</span> <a style="color: var(--footer-hyperlink-text-color)" href="{{site.data.info.assets}}toc.html">Table of Contents</a> | <a style="color: var(--footer-hyperlink-text-color)" href="qa.html">QA Report</a>{% for feedbacklink in site.data.features.feedback %}{% if feedbacklink.dashboard %} | <a style="color: var(--footer-hyperlink-text-color)" target="_blank" href="{{feedbacklink.dashboard.url}}">{{feedbacklink.dashboard.label}}</a>{% endif %}{% endfor %} | {% include version_history_link.md %} | {% include report_issue_link.md %}</p>
+
+<p class="footer-hide"><span style="white-space: pre-line">Publisher:</span> <a style="color: var(--footer-hyperlink-text-color)" href="https://www.digitalhealth.gov.au">Australian Digital Health Agency</a> | ABN: 84 425 496 912, Level 25, 175 Liverpool Street, Sydney, NSW 2000 | Phone: <a style="color: var(--footer-hyperlink-text-color)" href="tel:1300901001">1300 901 001</a> |  Email: <a style="color: var(--footer-hyperlink-text-color)" href="mailto:[email protected]">[email protected]</a> | <a style="color: var(--footer-hyperlink-text-color)" href="https://www.digitalhealth.gov.au">https://www.digitalhealth.gov.au</a> | <a style="color: var(--footer-hyperlink-text-color)" href="https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/privacy-policy">Privacy policy</a> | <a style="color: var(--footer-hyperlink-text-color)" href="https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/terms-of-use">Terms of Use</a></p>
diff --git a/includes/fragment-header.html b/includes/fragment-header.html
@@ -0,0 +1,5 @@
+<div id="dev-portal-logo">
+  <a no-external="true" href="https://developer.digitalhealth.gov.au/">
+    <img alt="Australian Digital Health Agency Developer Portal" src="{{site.data.info.assets}}assets/images/adha-logo-light.svg" width="275px">
+  </a>
+</div>
diff --git a/includes/fragment-pagebegin.html b/includes/fragment-pagebegin.html
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE HTML>
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+    <title>{{site.data.pages[page.path].title | escape_once}} - {{site.data.fhir.ig.title | escape_once}} v{{site.data.fhir.ig.version | escape_once}}</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="author" content="http://hl7.org/fhir"/>
+
+    <link href="{{site.data.info.assets}}fhir.css" rel="stylesheet"/>
+
+    <!-- Bootstrap core CSS -->
+    <link href="{{site.data.info.assets}}assets/css/bootstrap-fhir.css" rel="stylesheet"/>
+
+    <!-- Project extras -->
+    <link href="{{site.data.info.assets}}assets/css/project.css" rel="stylesheet"/>
+    <link href="{{site.data.info.assets}}assets/css/pygments-manni.css" rel="stylesheet"/>
+    <link href="{{site.data.info.assets}}assets/css/jquery-ui.css" rel="stylesheet"/>
+    <link href="{{site.data.info.assets}}assets/css/prism.css" rel="stylesheet" />
+    {% include fragment-css.html %}
+
+    <script type="text/javascript" src="fhir-table-scripts.js"> </script>
+
+    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="assets/js/html5shiv.js"></script>
+    <script src="assets/js/respond.min.js"></script>
+    <![endif]-->
+
+    <!-- Favicons -->
+    <link rel="fhir-logo" sizes="144x144" href="{{site.data.info.assets}}assets/ico/icon-fhir-144.png"/>
+    <link rel="fhir-logo" sizes="114x114" href="{{site.data.info.assets}}assets/ico/icon-fhir-114.png"/>
+    <link rel="fhir-logo" sizes="72x72" href="{{site.data.info.assets}}assets/ico/icon-fhir-72.png"/>
+    <link rel="fhir-logo" href="{{site.data.info.assets}}assets/ico/icon-fhir-57.png"/>
+    <link rel="shortcut icon" href="{{site.data.info.assets}}assets/ico/favicon.png"/>
+  </head>
+  <body onload="document.body.style.opacity='1'">
+    {% assign label = {{site.data.pages[page.path].label}} | split: '.0' %}
+	  <script src="{{site.data.info.assets}}assets/js/prism.js"> </script>
+    <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid.js"> </script>
+    <script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid-init.js"> </script>
+    <style type="text/css">h2{--heading-prefix:"{{site.data.info.headingOffset}}{{label}}"}h3,h4,h5,h6{--heading-prefix:"{{site.data.info.headingOffset}}{{site.data.pages[page.path].label}}"}</style>
+    <div id="dev-portal-banner" class="dev-portal">
+      <div id="banner-inner" class="section-inner">
+        <div id="banner-container" class="section-container">
+          <div id="brand-banner">
+            {% include fragment-header.html %}
+            <div id="dev-portal-sitename">
+              <div id="ig-status">
+                <h1>{{site.data.fhir.ig.title | escape_once}}</h1>
+                <div id="subtitle">
+                  {% if site.data.info.releaselabel != '' %}
+                    {% assign status = site.data.info.releaselabel %}
+                  {% else %}
+                    {% assign status = site.data.fhir.ig.status %}
+                  {% endif %}
+                  {{site.data.fhir.ig.version}} - {{status}}
+                  {% assign igId = site.data.fhir.ig.id | prepend: "ImplementationGuide/" %}
+                  {% for jurisdiction in site.data.resources[igId].jurisdictions %}
+                    {% if jurisdiction.flag %}
+                      <img alt="{{jurisdiction.name}} flag" src="assets/images/{{jurisdiction.flag}}.svg" height="16" title="{{jurisdiction.name}}"/>
+                    {% elsif jurisdiction.code %}
+                      <span title="{{jurisdiction.name}}">{{jurisdiction.code}}</span>
+                    {% else %}
+                      {{jurisdiction.name}}
+                    {% endif %}
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="menu-banner">
+            <ul>
+              <li>
+                <a href="https://developer.digitalhealth.gov.au/fhir" title="View our other FHIR IGs">FHIR IGs</a>
+              </li>
+              <li>
+                <a href="https://developer.digitalhealth.gov.au" title="View our Developer Portal">Developer Portal</a>
+              </li>
+              <li>
+                <a href="https://www.digitalhealth.gov.au" title="View our Agency website">Agency site</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="segment-navbar" class="segment">  <!-- segment-navbar -->
+      <div class="container">  <!-- container -->
+        <!-- HEADER CONTENT -->
+        <nav class="navbar navbar-inverse">
+          <!--status-bar-->
+          <div class="container">
+            <button data-target=".navbar-inverse-collapse" class="navbar-toggle" data-toggle="collapse" type="button">
+              <span class="icon-bar"> </span>
+              <span class="icon-bar"> </span>
+              <span class="icon-bar"> </span>
+            </button>
+            <a class="navbar-brand hidden" href="{{site.data.fhir.path}}index.html">FHIR</a>
+            <div class="nav-collapse collapse navbar-inverse-collapse">
+              {% include menu.xml %}
+            </div>  <!-- /.nav-collapse -->
+          </div>  <!-- /.container -->
+        </nav>  <!-- /.navbar -->
+      <!-- /HEADER CONTENT -->
+      </div>  <!-- /container -->
+    </div>  <!-- /segment-navbar -->
+    <!--status-bar-->
+    {% assign shownav = site.data.info.shownav | downcase | slice: 0 %}
+    <div id="segment-breadcrumb" class="segment">  <!-- segment-breadcrumb -->
+      <div class="container">  <!-- container -->
+        <ul class="breadcrumb">
+          {{site.data.pages[page.path].breadcrumb}}
+          {% if shownav == 'y' %}<span style="float:right;">{% if site.data.pages[page.path].previous %}<a href="{{site.data.pages[page.path].previous}}">&lt;prev</a> | {% endif %}<a href="#bottom">bottom</a>{% if site.data.pages[page.path].next %} | <a href="{{site.data.pages[page.path].next}}">next&gt;</a>{% endif %}</span>{% endif %}
+        </ul>
+      </div>  <!-- /container -->
+    </div>  <!-- /segment-breadcrumb -->
+    <a name="top"> </a>
+    <div id="segment-content" class="segment">  <!-- segment-content -->
+      <div class="container">  <!-- container -->
+        <div class="row">
+          <div class="inner-wrapper">