big load of changes to homepage

gatsby-browser.js

@@ -17,6 +17,7 @@ import './src/stylesheets/IconButton.css';
 import './src/stylesheets/IconContainer.css';
 import './src/stylesheets/Image.css';
 import './src/stylesheets/Link.css';
+import './src/stylesheets/LinkCard.css';
 import './src/stylesheets/List.css';
 import './src/stylesheets/ListItem.css';
 import './src/stylesheets/Section.css';
@@ -26,6 +27,10 @@ import './src/stylesheets/Sup.css';
 import './src/stylesheets/Table.css';
 import './src/stylesheets/Text.css';
 import './src/stylesheets/TextField.css';
+import './src/stylesheets/VideoThumb.css';
+
+import './src/stylesheets/padding.css';
+import './src/stylesheets/margin.css';
 
 import './src/stylesheets/ds.css';
 

src/stylesheets/Avatar.css

@@ -12,7 +12,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  content: "''";
+  content: "";
   width: 100%;
   height: 100%;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);

src/stylesheets/IconContainer.css

@@ -2,9 +2,33 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+}
+
+.IconContainer.size-1 {
   width: var(--space-6);
   height: var(--space-6);
+}
+
+.IconContainer.size-2 {
+  width: var(--space-7);
+  height: var(--space-7);
+}
+
+.IconContainer.rounded {
+  border-radius: var(--br-2);
+}
+
+.IconContainer.circle {
   border-radius: var(--br-circle);
-  background-color: var(--green-4);
-  color: var(--green-11);
+}
+
+.IconContainer.solid {
+  background: radial-gradient(at bottom left, hsl(12 100% 50%) 50%, hsl(35.75deg 100% 55.73%) 100%);
+  color: white;
+}
+
+.IconContainer.hollow {
+  background: white;
+  color: var(--gray-11);
+  box-shadow: inset 0 0 0 1px var(--gray-6);
 }

src/stylesheets/LinkCard.css

@@ -0,0 +1,18 @@
+.LinkCard {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-shrink: 0;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-decoration: none;
+  transition: all 150ms ease;
+  border-radius: 12px;
+  padding: var(--space-3);
+}
+
+.LinkCard:hover {
+  transform: translateY(-2px);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px -3px,
+    hsla(226, 80%, 20%, .25) 0px 5px 15px -5px;
+}

src/stylesheets/Section.css

@@ -8,13 +8,13 @@
 }
 
 .Section.size-2 {
-  padding-top: var(--space-7);
-  padding-bottom: var(--space-7);
+  padding-top: var(--space-9);
+  padding-bottom: var(--space-9);
 }
 
 .Section.size-3 {
-  padding-top: var(--space-9);
-  padding-bottom: var(--space-9);
+  padding-top: 64px;
+  padding-bottom: 64px;
 }
 
 .Section.bordered {

src/stylesheets/Separator.css

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   background-color: var(--gray-6);
   height: 1px;
+  flex-shrink: 0;
 }
 
 .Separator.size-1 {
@@ -23,4 +24,19 @@
 
 .Separator.vertical.size-2 {
   height: var(--space-8);
+}
+
+.SeparatorGradient {
+  box-sizing: border-box;
+  background: linear-gradient(to right, transparent, var(--gray-7) 50%, transparent);
+  height: 1px;
+  flex-shrink: 0;
+}
+
+.SeparatorGradient.size-1 {
+  width: 100px;
+}
+
+.SeparatorGradient.size-2 {
+  width: 264px;
 }

src/stylesheets/Text.css

@@ -75,55 +75,6 @@
   text-indent: -.75px;
 }
 
-.Text.highContrast {
-  color: var(--gray-12);
-}
-
-.Text.lowContrast {
-  color: var(--gray-11);
-}
-
-.Text.indigo {
-  color: var(--indigo-11);
-}
-
-.Text.white {
-  color: white;
-}
-
-.Text.whiteA {
-  color: rgba(255,255,255,.75);
-}
-
-.Text.weight-1 {
-  font-weight: var(--fw-1);
-}
-
-.Text.weight-2 {
-  font-weight: var(--fw-2);
-}
-
-.Text.string {
-  line-height: 1;
-}
-
-.Text.inline {
-  display: inline;
-}
-
-.Text.ta-start {
-  text-align: start;
-}
-
-.Text.ta-center {
-  text-align: center;
-}
-
-.Text.ta-end {
-  text-align: end;
-}
-
-
 @media only screen and (min-width: 520px) {
   .Text.bp1-size-1 {
     font-size: var(--fs-1);
@@ -398,4 +349,52 @@
     font-weight: var(--fw-2);
     text-indent: -.75px;
   }
+}
+
+.Text.highContrast {
+  color: var(--gray-12);
+}
+
+.Text.lowContrast {
+  color: var(--gray-11);
+}
+
+.Text.indigo {
+  color: var(--indigo-11);
+}
+
+.Text.white {
+  color: white;
+}
+
+.Text.whiteA {
+  color: rgba(255, 255, 255, .75);
+}
+
+.Text.weight-1 {
+  font-weight: var(--fw-1);
+}
+
+.Text.weight-2 {
+  font-weight: var(--fw-2);
+}
+
+.Text.string {
+  line-height: 1;
+}
+
+.Text.inline {
+  display: inline;
+}
+
+.Text.ta-start {
+  text-align: start;
+}
+
+.Text.ta-center {
+  text-align: center;
+}
+
+.Text.ta-end {
+  text-align: end;
 }

src/stylesheets/VideoThumb.css

@@ -0,0 +1,18 @@
+.VideoThumb {
+  width: 70px;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+.VideoThumb::after {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 6px;
+}

src/stylesheets/ds.css

@@ -89,7 +89,7 @@
 
   --fs-1: 10px;
   --fs-2: 12px;
-  --fs-3: 14px;
+  --fs-3: 15px;
   --fs-4: 17px;
   --fs-5: 20px;
   --fs-6: 27px;
@@ -99,11 +99,11 @@
 
   --lh-1: 14px;
   --lh-2: 17px;
-  --lh-3: 19px;
+  --lh-3: 21px;
   --lh-4: 23px;
   --lh-5: 26px;
   --lh-6: 32px;
-  --lh-7: 36px;
+  --lh-7: 37px;
   --lh-8: 54px;
 
   --ls-1: -.12px;
@@ -173,14 +173,19 @@
   left: 0;
 }
 
-.pt-1 {
-  padding-top: var(--space-1);
-}
 
-.pl-7 {
-  padding-left: var(--space-7);
-}
+
+
 
 .fg-1 {
   flex-grow: 1;
+}
+
+
+.js-center {
+  justify-self: center;
+}
+
+.display-if {
+  display: inline-flex;
 }