Add minimal styles

kylegach · kylegach · commit cae108d120aa · 2020-05-05T19:50:42.000-06:00
- System font
- Line length
- Constrained images and code blocks
diff --git a/.eleventy.js b/.eleventy.js
@@ -6,6 +6,7 @@ module.exports = function(config) {
   });
 
   config.addPassthroughCopy('./src/img');
+  config.addPassthroughCopy('./src/styles');
 
   return {
     dir: {
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -8,6 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>{{ pageTitle }}</title>
+  <link href="/styles/site.css" rel="stylesheet">
 </head>
 <body>
   {{content | safe}}
diff --git a/src/styles/site.css b/src/styles/site.css
@@ -0,0 +1,19 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  max-width: 60ch;
+  padding: 1rem;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+pre {
+  max-width: 100%;
+  overflow: auto;
+}
