merge: #686 from ginger/brand-tweaks

NaturalHistoryMuseum · Jul 19, 2023 · cb264fc · cb264fc
2 parents 3c3cdaa + 9abded7
commit cb264fc
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 57 deletions.
diff --git a/ckanext/nhm/theme/assets/less/fonts.less b/ckanext/nhm/theme/assets/less/fonts.less
@@ -236,7 +236,7 @@
  }
 }
 
-@font-title: 'NHM Wallop Headline', 'Open Sans', sans-serif;
+@font-title: 'NHM Wallop Headline', Arial, sans-serif;
 
 .mixin-font-symbol(@weight) {
  font-family: 'FontAwesome', sans-serif;
@@ -247,7 +247,7 @@
 }
 
 .mixin-font-body() {
- font-family: 'NHM Wallop Text', Helvetica, Arial, sans-serif;
+ font-family: 'NHM Wallop Text', Arial, sans-serif;
 }
 
 // FONT SIZES

diff --git a/ckanext/nhm/theme/assets/less/nhm.less b/ckanext/nhm/theme/assets/less/nhm.less
@@ -496,15 +496,8 @@ span.caret {
  }
 }
 
-.logo svg {
- mask-image: url('@{images}/nhm_logo.svg');
- mask-size: contain;
- mask-repeat: no-repeat;
- -webkit-mask-image: url('@{images}/nhm_logo.svg');
- -webkit-mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- background: @grey10;
- //.prideBg(@transFlag);
+.nhm-logo,
+.nhm-logo svg {
  .extended-masthead & {
  @media (min-width: @sm) and (max-width: @lg - 1) {
  height: 90px !important;
@@ -522,6 +515,17 @@ span.caret {
  width: 160px;
 }
 
+.logo svg {
+ mask-image: url('@{images}/nhm_logo.svg');
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url('@{images}/nhm_logo.svg');
+ -webkit-mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ background: @grey10;
+ //.prideBg(@transFlag);
+}
+
 // LAYOUT/CONTAINERS -------------------------------------------------------------------------------
 
 .box {
@@ -622,7 +626,6 @@ iframe {
 
  & .logo {
  padding-left: 0;
- margin-bottom: 2px;
  }
 
  & .navigation {
@@ -885,7 +888,7 @@ iframe {
  @margin: 40px;
  min-height: @footer-size;
  .palette-footer();
- padding: 0 0 30px;
+ padding: 30px 0;
  position: relative;
  bottom: 0;
  width: 100%;
@@ -932,7 +935,7 @@ iframe {
  }
 
  .dev-info {
- margin-top: @margin;
+ margin-top: 10px;
  }
 
  p {
@@ -942,7 +945,11 @@ iframe {
  .attribution {
  .mixin-flex-container();
  .mixin-flex-smallwrap();
+ gap: 1em;
 
+ @media (min-width: @md) {
+ margin-right: 2em;
+ }
  @media (min-width: @sm) {
  .mixin-flex-column();
  }
@@ -954,12 +961,6 @@ iframe {
  margin: 0 !important;
  }
  }
- margin-top: @margin - 10;
-
- & li {
- margin-top: 10px;
- margin-bottom: 20px;
- }
 
  & strong {
  font-weight: normal;
@@ -1929,49 +1930,30 @@ select,
 
 // HOMEPAGE ----------------------------------------------------------------------------------------
 
+// when the subtitle starts to wrap
+@wrap-width: 935px;
+
 .logo-block {
  display: grid;
  grid-template-columns: auto 1fr;
- grid-gap: 5px 20px;
+ grid-template-areas: 'logo title';
  align-items: center;
 
  .logo {
- grid-column: 1;
-
- @media (min-width: @md) {
- .extended-masthead & {
- grid-row: 1 / span 2;
- }
- }
-
- @media (max-width: @sm - 1) {
- height: 80px;
- }
+ grid-area: logo;
  }
 
  .site-title {
- grid-row: 1;
- grid-column: 2;
- margin: -5px 0 0 0;
+ grid-area: title;
+ margin: 0;
  font-size: @font-size-head-title;
  letter-spacing: 1px;
  line-height: 0.8;
  white-space: nowrap;
-
- @media (min-width: @md) {
- .extended-masthead & {
- align-self: end;
- }
- }
-
- @media (max-width: @sm - 1) {
- font-size: @font-size-head-l;
- }
  }
 
  .welcome {
- grid-row: 2;
- grid-column: 2;
+ grid-area: subtitle;
  margin: 0 !important;
  line-height: 1.2;
  color: @grey9;
@@ -1980,26 +1962,60 @@ select,
  font-size: @font-size-head-xxs - 2;
  align-self: start;
 
- @media (max-width: @lg - 1) {
- font-size: @font-size-head-xxs - 4;
- }
-
  .extended-masthead & {
  display: block;
  }
  }
 
- @media (max-width: @md - 1) {
- .logo {
- grid-row: 1;
+ // small version only
+ @media (max-width: @wrap-width - 1) {
+ & {
+ grid-gap: 5px 20px;
+ }
+
+ .extended-masthead & {
+ grid-template-areas:
+ 'logo title'
+ 'subtitle subtitle';
  }
 
  .welcome {
- grid-column: 1 / span 2;
+ padding-left: 5px;
+ }
+ }
+
+ // wide version only
+ @media (min-width: @wrap-width) {
+ & {
+ grid-gap: 5px 40px;
  }
 
+ .extended-masthead & {
+ grid-template-areas:
+ 'logo title'
+ 'logo subtitle';
+
+ .site-title {
+ align-self: end;
+ margin-top: 2px;
+ }
+ }
+ }
+
+ @media (min-width: @lg) {
+ & {
+ margin: 20px 0 10px;
+ }
+ }
+
+ @media (max-width: @sm - 1) {
  .site-title {
- align-self: center;
+ font-size: @font-size-head-l;
+ white-space: unset;
+ }
+
+ .welcome {
+ font-size: 1em;
  }
  }
 }

diff --git a/ckanext/nhm/theme/templates/footer.html b/ckanext/nhm/theme/templates/footer.html
@@ -1,7 +1,7 @@
 {% ckan_extends %}
 
 {% block footer_content %}
-<div class="row flex-container gaps">
+<div class="row flex-container gaps flex-top">
  <div>
  <ul class="attribution list-unstyled">
  <li>