Add placeholder for more work

Author: lukebrooker

components/Content.jsx

@@ -6,7 +6,7 @@ const Logo = ({
   children
 }) => {
   const classes = cx(
-    'Px(r1) Px(r2)--md Pt(r1) Pb(r2)',
+    'Px(r1) Px(r2)--md Pt(r1) Mb(r3)',
     className
   )
   return (

css/atomic.css

@@ -112,9 +112,6 @@
 .H\(1\/2\) {
   height: 50%;
 }
-.H\(ms2\) {
-  height: 1.44rem;
-}
 .H\(r1\) {
   height: 1.5rem;
 }
@@ -124,6 +121,9 @@
 .H\(45\%\) {
   height: 45%;
 }
+.H\(ms2\) {
+  height: 1.44rem;
+}
 .H\(35vw\) {
   height: 35vw;
 }
@@ -142,12 +142,12 @@
 .Lh\(1\.5\) {
   line-height: 1.5;
 }
-.M\(rh\) {
-  margin: 0.75rem;
-}
 .M\(nrh\) {
   margin: -0.75rem;
 }
+.M\(rh\) {
+  margin: 0.75rem;
+}
 .M\(0\) {
   margin: 0;
 }
@@ -171,7 +171,7 @@
   margin-left: 0;
   margin-right: 0;
 }
-.My\(r1\) {
+.My\(r1\), .Mt\(r1\) {
   margin-top: 1.5rem;
 }
 .My\(r1\), .Mb\(r1\) {
@@ -192,24 +192,27 @@
 .Mt\(a\) {
   margin-top: auto;
 }
+.Mb\(r3\) {
+  margin-bottom: 4.5rem;
+}
 .Mb\(rh\) {
   margin-bottom: 0.75rem;
 }
-.Mah\(100\%\) {
-  max-height: 100%;
-}
 .Mah\(r2\) {
   max-height: 3rem;
 }
+.Mah\(100\%\) {
+  max-height: 100%;
+}
 .Mah\(r6\) {
   max-height: 9rem;
 }
-.Maw\(100\%\) {
-  max-width: 100%;
-}
 .Maw\(r2\) {
   max-width: 3rem;
 }
+.Maw\(100\%\) {
+  max-width: 100%;
+}
 .Maw\(r6\) {
   max-width: 9rem;
 }
@@ -240,15 +243,18 @@
 .Miw\(300px\) {
   min-width: 300px;
 }
+.Op\(\.6\)\:h:hover {
+  opacity: .6;
+}
+.Op\(\.6\) {
+  opacity: .6;
+}
 .Op\(\.9\) {
   opacity: .9;
 }
 .Op\(1\)\:h:hover {
   opacity: 1;
 }
-.Op\(\.6\) {
-  opacity: .6;
-}
 .Op\(\.3\) {
   opacity: .3;
 }
@@ -258,9 +264,6 @@
 .Op\(\.9\)\:h:hover {
   opacity: .9;
 }
-.Op\(\.6\)\:h:hover {
-  opacity: .6;
-}
 .Op\(\.2\) {
   opacity: .2;
 }
@@ -279,16 +282,16 @@
 .P\(rh\) {
   padding: 0.75rem;
 }
-.Px\(rq\) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
 .Px\(r1\), .Pstart\(r1\) {
   padding-left: 1.5rem;
 }
 .Px\(r1\) {
   padding-right: 1.5rem;
 }
+.Px\(rq\) {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .Px\(rh\) {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -299,12 +302,12 @@
 .Py\(rh\) {
   padding-bottom: 0.75rem;
 }
-.Pt\(100\%\) {
-  padding-top: 100%;
-}
 .Pt\(r1\) {
   padding-top: 1.5rem;
 }
+.Pt\(100\%\) {
+  padding-top: 100%;
+}
 .Pt\(82\.7323\%\) {
   padding-top: 82.7323%;
 }
@@ -353,15 +356,15 @@
 .W\(1\/2\) {
   width: 50%;
 }
-.W\(ms2\) {
-  width: 1.44rem;
-}
 .W\(r1\) {
   width: 1.5rem;
 }
 .W\(45\%\) {
   width: 45%;
 }
+.W\(ms2\) {
+  width: 1.44rem;
+}
 .W\(35vw\) {
   width: 35vw;
 }
@@ -411,26 +414,6 @@ a[class*=LineClamp]:after {
   bottom: 0;
   left: 0;
 }
-@media screen and (orientation:landscape) {
-  .D\(f\)--land {
-    display: flex;
-  }
-  .Flxg\(0\)--land {
-    flex-grow: 0;
-  }
-  .Fld\(r\)--land {
-    flex-direction: row;
-  }
-  .Ai\(c\)--land {
-    align-items: center;
-  }
-  .Jc\(c\)--land {
-    justify-content: center;
-  }
-  .Mstart\(r4\)--land {
-    margin-left: 6rem;
-  }
-}
 @media screen and (min-width: 29.375em) {
   .D\(f\)--sm {
     display: flex;
@@ -456,6 +439,26 @@ a[class*=LineClamp]:after {
     width: 50%;
   }
 }
+@media screen and (orientation:landscape) {
+  .D\(f\)--land {
+    display: flex;
+  }
+  .Flxg\(0\)--land {
+    flex-grow: 0;
+  }
+  .Fld\(r\)--land {
+    flex-direction: row;
+  }
+  .Ai\(c\)--land {
+    align-items: center;
+  }
+  .Jc\(c\)--land {
+    justify-content: center;
+  }
+  .Mstart\(r4\)--land {
+    margin-left: 6rem;
+  }
+}
 @media screen and (min-width: 55em) {
   .D\(i\)--md {
     display: inline;

pages/work/index.jsx

@@ -16,20 +16,23 @@ export default class Work extends Component {
     }).reverse()
     return (
       <DocumentTitle title={'Work | ' + config.htmlTitle}>
-        <div className='D(f) Flw(w) M(nrh)'>
-          {sortedPages.map((page, key) => {
-            return (page.data && (page.path.indexOf('/work/') !== -1))
-              ? (<Link key={key} to={page.path} className='D(f) Fld(c) W(100%) P(rh) Mb(r1) W(1/2)--sm'>
-                  <div className='D(f) Mb(rh)'>
-                    <div className='Mend(a) Op(.6):h LineClamp(1)'>{page.data.title}</div>
-                    <div className='Op(.6)'>{page.data.projectDate}</div>
-                  </div>
-                  <div>
-                    <LogoImages basePath={page.path} teaserImages={page.data.teaserImages} />
-                  </div>
-                </Link>)
-              : undefined
-          })}
+        <div>
+          <div className='D(f) Flw(w) M(nrh)'>
+            {sortedPages.map((page, key) => {
+              return (page.data && (page.path.indexOf('/work/') !== -1))
+                ? (<Link key={key} to={page.path} className='D(f) Fld(c) W(100%) P(rh) Mb(r1) W(1/2)--sm'>
+                    <div className='D(f) Mb(rh)'>
+                      <div className='Mend(a) Op(.6):h LineClamp(1)'>{page.data.title}</div>
+                      <div className='Op(.6)'>{page.data.projectDate}</div>
+                    </div>
+                    <div>
+                      <LogoImages basePath={page.path} teaserImages={page.data.teaserImages} />
+                    </div>
+                  </Link>)
+                : undefined
+            })}
+          </div>
+          <div className='Ta(c) Op(.6) Mt(r1)'>More being added soon.</div>
         </div>
       </DocumentTitle>
     )