Enhanced CSS customisability

11ty-src/assets/css/_core.css

@@ -0,0 +1,88 @@
+html {
+  font-family: sans-serif;
+  padding: 10px;
+}
+
+#container {
+  width: 100%;
+}
+
+/* typography */
+
+h1, h2, h3, h4, h5, h6, strong, th {
+  font-weight: 600;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  padding: 1rem 0;
+}
+
+p, ol, ul {
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: 2em;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.17em;
+}
+
+p, ol, ul, pre {
+  padding-bottom: 1rem;
+}
+
+em {
+  font-style: italic;
+}
+
+ol {
+  list-style: decimal;
+}
+
+ul {
+  list-style: disc;
+}
+
+ul, ol {
+  margin-left: 2em;
+}
+
+p + ul {
+  margin-top: -0.375rem;
+}
+
+/* links */
+
+ul#links {
+  list-style-type: none;
+  margin-left: 0;
+  padding: 0;
+}
+
+ul#links li a {
+  display: block;
+  text-decoration: none;
+}
+
+/* form */
+
+#contact-form {
+  margin-top: -15px;
+}
+
+#contact-form fieldset {
+  border: none;
+  margin: 15px 0;
+  padding: 0;
+}
+
+#contact-form textarea {
+  height: 5em;
+}

11ty-src/assets/css/bundle.css

@@ -1,99 +1,29 @@
 @import "_reset.css";
+@import "_core.css";
 
 html {
-  font-family: sans-serif;
-  padding: 10px;
+  background-image: url("/assets/img/webb.png");
 }
 
-body {
+#container {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin: 10px auto;
   max-width: 600px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-/* typography */
-
-h1, h2, h3, h4, h5, h6, strong, th {
-  font-weight: 600;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  padding: 1rem 0;
-}
-
-p, ol, ul {
-  line-height: 1.5;
-}
-
-h1 {
-  font-size: 2em;
-  text-align: center;
-}
-
-h2 {
-  font-size: 1.5em;
-}
-
-h3 {
-  font-size: 1.17em;
-}
-
-p, ol, ul, pre {
-  padding-bottom: 1rem;
-}
-
-em {
-  font-style: italic;
-}
-
-ol {
-  list-style: decimal;
-}
-
-ul {
-  list-style: disc;
-}
-
-ul, ol {
-  margin-left: 2em;
-}
-
-p + ul {
-  margin-top: -0.375rem;
-}
-
-/* links */
-
-ul#links {
-  list-style-type: none;
-  margin-left: 0;
-  padding: 0;
+  padding: 15px;
 }
 
 ul#links li a {
   background: #00b;
   border-radius: 8px;
   color: #fff;
-  display: block;
   margin: 25px 0;
   padding: 10px 0;
   text-align: center;
-  text-decoration: none;
   width: 100%;
 }
 
-/* form */
-
-#contact-form {
-  margin-top: -15px;
-}
-
-#contact-form fieldset {
-  border: none;
-  margin: 15px 0;
-  padding: 0;
-}
-
 #contact-form button, input, textarea {
   border: 1px solid #000;
   border-radius: 5px;
@@ -103,10 +33,6 @@ ul#links li a {
   width: calc(100% - (2 * 1px) - (2 * 10px));
 }
 
-#contact-form textarea {
-  height: 5em;
-}
-
 #contact-form button {
   padding: 10px 0;
   width: 100%;

eleventy.config.js

@@ -9,6 +9,8 @@ let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
 export default async function (eleventyConfig) {
   eleventyConfig.addDataExtension("json", (contents) => JSON.parse(contents) );
 
+  eleventyConfig.addPassthroughCopy("11ty-src/assets/img");
+
   eleventyConfig.addPlugin(eleventyAutoCacheBuster, {
     hashTruncate: 8,
   });