Update initial global styles

Author: timwlee

blocks/footer/footer.css

@@ -1,20 +1,30 @@
 footer {
-  background-color: var(--light-color);
+  background-color: #000;
   font-size: var(--body-font-size-xs);
+  color: #fff;
 }
 
 footer .footer > div {
   margin: auto;
   max-width: 1200px;
-  padding: 40px 24px 24px;
+  padding: 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
 
+footer .default-content-wrapper span.icon {
+  width: 90px;
+  height: auto;
+}
+
+footer .default-content-wrapper span.icon img {
+  filter: invert(1);
+}
+
 @media (width >= 900px) {
   footer .footer > div {
-    padding: 40px 32px 24px;
+    padding: 32px 24px;
   }
-}
+}

blocks/header/header.css

@@ -47,7 +47,8 @@ header nav[aria-expanded='true'] {
 
 header nav p {
   margin: 0;
-  line-height: 1;
+  
+  /* line-height: 1; BOILERPLATE DOESN'T HAVE a P tag in header, */
 }
 
 header nav a:any-link {
@@ -145,7 +146,7 @@ header .nav-brand {
 }
 
 header nav .nav-brand img {
-  width: 128px;
+  width: 88px;
   height: auto;
 }
 
@@ -220,6 +221,7 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections ul {
     display: flex;
+    align-items: center;
     gap: 24px;
     margin: 0;
   }
@@ -243,6 +245,7 @@ header nav .nav-sections ul > li > ul > li {
     padding: 16px;
     background-color: var(--light-color);
     white-space: initial;
+    z-index: 1;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
@@ -266,3 +269,56 @@ header nav .nav-sections ul > li > ul > li {
 header nav .nav-tools {
   grid-area: tools;
 }
+
+header nav .nav-tools .button {
+  margin: 0;
+  border: none;
+  padding: 0.5em;
+  background: none;
+  line-height: 0;
+}
+
+/* breadcrumbs */
+header .breadcrumbs {
+  display: none;
+  margin: auto;
+  max-width: 1248px;
+  height: var(--breadcrumbs-height);
+  padding: 0 24px;
+  font-size: var(--body-font-size-xs);
+  overflow: hidden;
+}
+
+header .breadcrumbs ol {
+  display: flex;
+  flex-flow: wrap;
+  list-style: none;
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  gap: 1ch;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+header .breadcrumbs ol li {
+  padding: 0;
+  color: var(--dark-color);
+}
+
+header .breadcrumbs ol li:not(:last-child)::after {
+  content: '/';
+  padding-left: 1ch;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+header .breadcrumbs ol li[aria-current] {
+  color: var(--text-color);
+}
+
+@media (width >= 900px) {
+  header .breadcrumbs {
+    display: block;
+    max-width: 1264px;
+    padding: 0 32px;
+  }
+}

icons/logo.svg

@@ -64,7 +64,7 @@ function buildAutoBlocks(main) {
       });
     }
 
-    buildHeroBlock(main);
+    // buildHeroBlock(main);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

scripts/scripts.js

@@ -36,8 +36,10 @@
   --heading-font-size-s: 24px;
   --heading-font-size-xs: 22px;
 
-  /* nav height */
-  --nav-height: 64px;
+  /* nav heights */
+  --nav-height: 80px;
+  --breadcrumbs-height: 34px;
+  --header-height: var(--nav-height);
 }
 
 /* fallback fonts */
@@ -71,21 +73,29 @@
 }
 
 body {
-  display: none;
+  /* display: none; */
   margin: 0;
   background-color: var(--background-color);
   color: var(--text-color);
   font-family: var(--body-font-family);
   font-size: var(--body-font-size-m);
   line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
-body.appear {
+/* body.appear {
   display: block;
+} */
+
+main {
+ flex: 1;
 }
 
 header {
-  height: var(--nav-height);
+  height: var(--header-height);
+  border-bottom: 1px solid #ccc;
 }
 
 header .header,
@@ -98,6 +108,12 @@ footer .footer[data-block-status="loaded"] {
   visibility: visible;
 }
 
+@media (width >= 900px) {
+  body[data-breadcrumbs] {
+    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
+  }
+}
+
 h1,
 h2,
 h3,
@@ -157,7 +173,7 @@ button {
 a:any-link {
   color: var(--link-color);
   text-decoration: none;
-  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 a:hover {
@@ -184,7 +200,6 @@ button {
   background-color: var(--link-color);
   color: var(--background-color);
   cursor: pointer;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }