more illo work

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

Hide file tree

Showing 12 changed files with 38 additions and 16 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='doc-image pixel' />
     <h2><a href="{{ doc.url }}">{{ doc.data.title }}</a></h2>
     <p>{% excerpt doc %}</p>
   </li>

diff --git a/src/_includes/doc.html b/src/_includes/doc.html
@@ -5,7 +5,7 @@
 <article>
   <header><h1>{{ title }}</h1></header>
 
-  <img class='doc-header-image pixel' src="/img/{{ title | slug }}.png" />
+  <img class='doc-header-image doc-image pixel' src="/img/{{ title | slug }}.png" />
 
   {% if content | toc %}
     <h2>Table of contents</h2>

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
@@ -6,30 +6,48 @@ nav.toc ol ol {
   list-style-type: circle;
 }
 
+img.doc-image {
+  border-radius: 12px;
+  /* border: 2px solid black; */
+}
+
 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;
@@ -8,7 +12,7 @@ a {
 } */
 
 .pixel {
-  image-rendering: pixelated;
+  /* image-rendering: pixelated;
   image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
+  image-rendering: crisp-edges; */
 }
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;