Merge pull request #1 from Netcentric/KAW-7678-set-up-style-guide

KAW-7678 Set up style guide
Netcentric · Jul 23, 2024 · 58c0ff7 · 58c0ff7
2 parents 1ff2dbf + 5a2dd2a
commit 58c0ff7
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 94 deletions.
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -19,11 +19,11 @@
   display: block;
 }
 
-@media (width >= 900px) {
+@media (width >= 960px) {
   .columns > div {
-    align-items: center;
+    align-items: flex-start;
     flex-direction: unset;
-    gap: 32px;
+    gap: 40px;
   }
 
   .columns > div > div {

diff --git a/blocks/text/text.css b/blocks/text/text.css
@@ -0,0 +1,7 @@
+.text > div {
+  max-width: 750px;
+}
+
+.text.center > div {
+  margin: auto;
+}
diff --git a/blocks/text/text.js b/blocks/text/text.js
@@ -0,0 +1 @@
+/* JS */
diff --git a/fonts/oxygen.woff2 b/fonts/oxygen.woff2
diff --git a/styles/fonts.css b/styles/fonts.css
@@ -1,18 +1,9 @@
 /* stylelint-disable max-line-length */
 @font-face {
-  font-family: roboto;
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('../fonts/roboto-bold.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: roboto;
+  font-family: Oxygen;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('../fonts/roboto-regular.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url("/fonts/oxygen.woff2") format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/styles/styles.css b/styles/styles.css
@@ -12,61 +12,33 @@
 
 :root {
   /* colors */
-  --link-color: #035fe6;
-  --link-hover-color: #136ff6;
-  --background-color: white;
+  --link-color: #f00;
+  --link-hover-color: #1d1d1b;
+  --c-primary-white: #fff;
+  --button-color: #f00;
   --light-color: #eee;
   --dark-color: #ccc;
-  --text-color: black;
+  --text-color: #1d1d1b;
 
   /* fonts */
-  --body-font-family: roboto, roboto-fallback;
+  --body-font-family: "Oxygen", sans-serif;
   --heading-font-family: var(--body-font-family);
-  --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;
-
-  /* body sizes */
-  --body-font-size-m: 22px;
-  --body-font-size-s: 18px;
-  --body-font-size-xs: 16px;
-
-  /* heading sizes */
-  --heading-font-size-xxl: 48px;
-  --heading-font-size-xl: 40px;
-  --heading-font-size-l: 32px;
-  --heading-font-size-m: 24px;
-  --heading-font-size-s: 20px;
-  --heading-font-size-xs: 18px;
+  --body-font-size: 16px;
 
   /* nav height */
   --nav-height: 64px;
 }
 
-@font-face {
-  font-family: roboto-fallback;
-  size-adjust: 100.06%;
-  ascent-override: 95%;
-  src: local('Arial');
-}
-
-@media (width >= 900px) {
-  :root {
-    --heading-font-size-xxl: 60px;
-    --heading-font-size-xl: 48px;
-    --heading-font-size-l: 36px;
-    --heading-font-size-m: 30px;
-    --heading-font-size-s: 24px;
-    --heading-font-size-xs: 22px;
-  }
-}
-
 body {
-  font-size: var(--body-font-size-m);
+  font-size: var(--body-font-size);
+  font-weight: 400;
   margin: 0;
   font-family: var(--body-font-family);
-  line-height: 1.6;
+  line-height: 1.5;
   color: var(--text-color);
-  background-color: var(--background-color);
+  background-color: var(--c-primary-white);
   display: none;
+  -webkit-font-smoothing: antialiased;
 }
 
 body.appear {
@@ -77,26 +49,54 @@ header {
   height: var(--nav-height);
 }
 
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: 20px;
+  margin-top: 0;
+}
+
 h1,
+.h1 {
+  font-size: 1.8063rem;
+  line-height: 1.2;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
 h2,
+.h2 {
+  font-size: 1.7rem;
+  line-height: 1.3;
+  font-weight: 400;
+}
+
 h3,
+.h3 {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
 h4,
+.h4 {
+  font-size: 1.25rem;
+  line-height: 1.4;
+  font-weight: 600;
+}
+
 h5,
-h6 {
-  font-family: var(--heading-font-family);
+.h5 {
+  font-size: 1rem;
+  line-height: 1.4;
   font-weight: 600;
-  line-height: 1.25;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  scroll-margin: calc(var(--nav-height) + 1em);
 }
 
-h1 { font-size: var(--heading-font-size-xxl); }
-h2 { font-size: var(--heading-font-size-xl); }
-h3 { font-size: var(--heading-font-size-l); }
-h4 { font-size: var(--heading-font-size-m); }
-h5 { font-size: var(--heading-font-size-s); }
-h6 { font-size: var(--heading-font-size-xs); }
+h6,
+.h6 {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  font-weight: 600;
+}
 
 p,
 dl,
@@ -108,10 +108,8 @@ blockquote {
   margin-bottom: 1em;
 }
 
-code,
-pre {
-  font-family: var(--fixed-font-family);
-  font-size: var(--body-font-size-s);
+address, dl, fieldset, figure, ol, p, pre, ul {
+  margin: 0 0 20px;
 }
 
 code {
@@ -145,45 +143,50 @@ a:hover {
 a.button:any-link,
 button {
   font-family: var(--body-font-family);
-  display: inline-block;
   box-sizing: border-box;
   text-decoration: none;
-  border: 2px solid transparent;
-  padding: 5px 30px;
-  text-align: center;
   font-style: normal;
-  font-weight: 600;
   cursor: pointer;
-  color: var(--background-color);
-  background-color: var(--link-color);
-  margin: 16px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-radius: 30px;
+  margin: 0;
+  padding: 0 30px;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 38px;
+  text-align: center;
+  display: inline-block;
+  transition: 0.1s ease-in-out;
+  transition-property: color, background-color, background-position,
+    background-size, border-color, box-shadow;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 0;
+  background-color: var(--button-color);
+  color: var(--c-primary-white);
+  border: 1px solid var(--button-color);
+}
+
+a.button:active {
+  background-color: #c00;
+  border-color: transparent;
 }
 
 a.button:hover,
 a.button:focus,
 button:hover,
 button:focus {
-  background-color: var(--link-hover-color);
-  cursor: pointer;
+  background-color: rgb(255 0 0 / 0%);
+  color: var(--link-hover-color);
+  border-color: var(--link-hover-color);
 }
 
 button:disabled,
 button:disabled:hover {
-  background-color: var(--light-color);
   cursor: unset;
 }
 
-a.button.secondary,
-button.secondary {
-  background-color: unset;
-  border: 2px solid currentcolor;
-  color: var(--text-color);
-}
-
 main img {
   max-width: 100%;
   width: auto;
@@ -201,22 +204,51 @@ main img {
   width: 100%;
 }
 
+/* blocks */
+div[class$="-wrapper"]:not(:first-child) {
+  padding-top: 30px;
+}
+
+@media (width >= 960px) {
+  div[class$="-wrapper"]:not(:first-child) {
+    padding-top: 40px;
+  }
+}
+
 /* sections */
 main .section {
-  padding: 64px 16px;
+  padding: 40px 15px;
 }
 
-@media (width >= 600px) {
+@media (width >= 768px) {
   main .section {
-    padding: 64px 32px;
+    padding: 40px 30px;
   }
 }
 
-@media (width >= 900px) {
+@media (width >= 960px) {
+  main .section {
+    padding: 70px 40px;
+  }
+
   .section > div {
     max-width: 1200px;
     margin: auto;
   }
+
+  .section > div.full-width {
+    max-width: 100vw;
+  }
+
+  h1,
+  .h1 {
+    font-size: 2.125rem;
+  }
+
+  h2,
+  .h2 {
+    font-size: 2rem;
+  }
 }
 
 /* section metadata */