2.8.0

Author: gabrielakhanna

dist/saratoga.css

@@ -18,7 +18,9 @@
   --space-lg: calc(var(--space)*3);
   --grid-row-gap: var(--space);
   --grid-column-gap: var(--space);
+  --container-gap: calc(var(--space)*2);
   --page-padding: var(--space);
+  --content-width: 1360px;
   --section-width: 1140px;
   --story-width: 728px;
   --menu-width: 390px;
@@ -730,6 +732,7 @@ section, .section {
  */
 .social-media {
   place-content: center;
+  justify-content: flex-start;
   display: flex;
   align-items: center;
   gap: var(--social-media-gap, var(--space-sm));
@@ -770,6 +773,65 @@ section, .section {
   padding-right: 15px;
 }
 
+/* Items - multiple elements */
+.item {
+  display: grid;
+  gap: var(--item-gap, calc(var(--space-sm) / 2));
+  align-content: start;
+  line-height: 1em;
+  --header-transform: none;
+  --link-color: var(--text-color);
+  --link-decoration: none;
+  --link-hover-decoration: underline;
+}
+
+.item > * {
+  margin: 0;
+}
+
+/**
+ * Collections - multiple items
+ */
+.collection {
+  display: grid;
+  align-content: start;
+  gap: var(--space);
+}
+
+.collection > * {
+  margin: 0;
+}
+
+/*
+* Containers - multiple collections
+*/
+.container {
+  display: grid;
+  justify-content: start;
+  grid-template-columns: 1fr;
+  gap: var(--container-gap, var(--grid-row-gap) var(--grid-column-gap));
+  grid-auto-flow: var(--grid-flow, dense);
+  align-items: var(--container-align, start);
+  padding: var(--container-padding, 0);
+  background-color: var(--container-background-color, transparent);
+  color: var(--container-text-color, var(--text-color));
+  --link-color: var(--text-color);
+}
+
+@media (min-width: 767px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1040px) {
+  .container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.container > * {
+  margin: 0;
+}
+
 /**
  * Flag styles
  */
@@ -1422,107 +1484,6 @@ html.msb .masthead {
   display: none;
 }
 
-/**
- * Footer
- *
- * This card is essentially frozen, and I've hard-coded several
- * of the spacing properties to ensure theming doesn't affect them.
- */
-footer {
-  background-color: var(--footer-color, var(--paper-color));
-  color: var(--footer-text-color, var(--text-color));
-}
-
-.footer {
-  margin: 0 auto;
-  padding: var(--page-padding);
-  display: grid;
-  gap: 30px;
-  font: 16px var(--sans);
-}
-
-.footer-connect {
-  display: grid;
-  gap: 20px;
-  padding: 0;
-  max-width: 340px;
-  align-self: start;
-  --header-family: var(--sans);
-  --header-weight: bold;
-}
-
-.footer .flex {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.footer svg,
-.footer .icon {
-  height: 30px;
-  width: 30px;
-  --fill-color: var(--text-color);
-}
-
-.footer .icon img {
-  display: block;
-  margin: 1px 0 0 1px;
-  border-radius: 20%;
-  width: 28px;
-  height: 28px;
-}
-
-.footer .social {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.footer .social svg {
-  width: 35px;
-  height: 35px;
-}
-
-.footer-links {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 30px;
-}
-
-.footer-links .package {
-  padding: 0;
-}
-
-.bottom-nav {
-  margin: 0;
-}
-
-.bottom-nav a {
-  display: block;
-  padding: 15px;
-  --link-color: var(--text-color);
-}
-
-@media (min-width: 600px) {
-  .footer-links {
-    flex-direction: row;
-    justify-content: space-around;
-  }
-  .bottom-nav {
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
-  }
-}
-@media (min-width: 1024px) {
-  .footer {
-    grid-template-columns: 340px 1fr;
-  }
-  .footer-links {
-    justify-content: end;
-  }
-}
 /*
  * Section grid
  */
@@ -1814,6 +1775,67 @@ footer {
   color: #4B5972;
 }
 
+/**
+ * Footer
+ *
+ */
+.footer {
+  display: grid;
+  grid-template-columns: 1fr minmax(auto, var(--section-width)) 1fr;
+  gap: calc(var(--space) * 2) 0;
+  font: 16px var(--sans);
+  padding: var(--space) var(--page-padding);
+  background-color: var(--footer-background-color, var(--background-color));
+}
+
+.footer > * {
+  grid-column: 2;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-logo {
+  height: 20px;
+}
+
+.footer .container .item {
+  gap: var(--space-sm);
+}
+
+.footer a {
+  display: flex;
+  gap: var(--space-sm);
+  --link-color: var(--text-color);
+}
+
+.footer svg {
+  height: 20px;
+  --fill-color: var(--text-color);
+}
+
+.footer .h3 {
+  text-transform: uppercase;
+}
+
+.footer .social-media svg {
+  width: 15px;
+  height: 15px;
+}
+
+.item.bottom-nav {
+  gap: var(--space);
+  font-size: 0.75em;
+}
+
+@media (min-width: 600px) {
+  .item.bottom-nav {
+    grid-auto-flow: column;
+    justify-content: center;
+    margin: 0 auto;
+    gap: calc(var(--space) * 2);
+  }
+}
 /**
  * Premium topper
  */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "saratoga-design-system",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "scripts": {
     "build": "npx sass --no-source-map builds:dist",
     "version": "npm run build && git add -A dist",