more illo work

Author: chasemccoy

src/_includes/css/styles.css

@@ -1,7 +1,7 @@
 <ul class='doc-grid'>
 {%- for doc in collections.docs %}
   <li {% if doc.url == page.url -%} class="doc-list-active" {%- endif -%}>
-    <img src="/img/{{ doc.data.title | slug }}.png" />
+    <img src="/img/{{ doc.data.title | slug }}.png" class='pixel' />
     <h2><a href="{{ doc.url }}">{{ doc.data.title }}</a></h2>
     <p>{% excerpt doc %}</p>
   </li>

src/_includes/doc-grid.html

@@ -1,7 +1,7 @@
 <header>
-  <img src="/img/logo.png" width="100" class='pixel' />
+  <img src="/img/logo.png" width="64" class='' />
   <h1>
-    <span role='img' aria-label='Hammer and wrench emoji'>🛠</span> <a href='/'>designsystems.dev</a>
+    <a href='/'>designsystems.dev</a>
   </h1>
 
   <p>{{ pkg.description }}</p>

src/_includes/header.html

@@ -7,29 +7,42 @@ nav.toc ol ol {
 }
 
 img.doc-header-image {
-  max-width: none;
-  width: calc(100% + 10em);
-  margin-left: -5em;
+  /* max-width: none; */
+  /* width: calc(100% + 10em);
+  margin-left: -5em; */
+  width: 100%;
 }
 
 ul.doc-grid {
   padding: 0;
-  display: flex;
+  /* display: flex;
   flex-wrap: wrap;
-  margin: -0.5em -0.5em 0;
+  margin: -0.5em -0.5em 0; */
+
+  --auto-grid-min-size: 20rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+  grid-gap: 3rem;
+}
+
+@media screen and (max-width: 30rem) {
+  ul.doc-grid {
+    --auto-grid-min-size: 100%;
+  }
 }
 
 ul.doc-grid li {
   list-style-type: none;
   display: block;
-  width: 100%;
+  /* width: 50%;
   padding: 0.5em 0.5em 0;
+  min-width: 30ch; */
 }
 
 ul.doc-grid img {
   /* height: 180px; */
-  width: 100%;
-  object-fit: cover;
+  /* width: 100%;
+  object-fit: cover; */
   margin-bottom: 0.5em;
 }
 

src/img/components.png

@@ -1,3 +1,7 @@
+:root {
+  --wrapper-max-width: 100ch;
+}
+
 /* body {
   background: #151515;
   color: white;