more illo work

chasemccoy · Mar 22, 2020 · 4b7337b · 4b7337b
1 parent f3a78ab
commit 4b7337b
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 13 deletions.
diff --git a/src/_includes/css/styles.css b/src/_includes/css/styles.css
diff --git a/src/_includes/doc-grid.html b/src/_includes/doc-grid.html
@@ -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>

diff --git a/src/_includes/header.html b/src/_includes/header.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>

diff --git a/src/img/components.png b/src/img/components.png
diff --git a/src/img/design-tokens.png b/src/img/design-tokens.png
diff --git a/src/img/logo.png b/src/img/logo.png
diff --git a/src/img/taxonomy.png b/src/img/taxonomy.png
diff --git a/src/img/tools.png b/src/img/tools.png
diff --git a/src/styles/doc.css b/src/styles/doc.css
@@ -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;
 }
 

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,3 +1,7 @@
+:root {
+  --wrapper-max-width: 100ch;
+}
+
 /* body {
   background: #151515;
   color: white;

diff --git a/src/styles/layout.css b/src/styles/layout.css
@@ -1,5 +1,5 @@
 #site-wrapper {
-  max-width: 64ch;
+  max-width: var(--wrapper-max-width);
   min-height: 100vh;
   margin: 0 auto;
   padding: 32px 16px;