update

assets/fonts/fonts.css

@@ -0,0 +1,140 @@
+/* spectral-200 - latin */
+@font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 200;
+    src: local(''),
+         url('spectral-v13-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-200italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 200;
+    src: local(''),
+         url('spectral-v13-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-300 - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+         url('spectral-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-300italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 300;
+    src: local(''),
+         url('spectral-v13-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-regular - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+         url('spectral-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 400;
+    src: local(''),
+         url('spectral-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-500 - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 500;
+    src: local(''),
+         url('spectral-v13-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-500italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 500;
+    src: local(''),
+         url('spectral-v13-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-600 - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 600;
+    src: local(''),
+         url('spectral-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-600italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 600;
+    src: local(''),
+         url('spectral-v13-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-700 - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+         url('spectral-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-700italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 700;
+    src: local(''),
+         url('spectral-v13-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-800 - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: normal;
+    font-weight: 800;
+    src: local(''),
+         url('spectral-v13-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* spectral-800italic - latin */
+  @font-face {
+    font-family: 'Spectral';
+    font-style: italic;
+    font-weight: 800;
+    src: local(''),
+         url('spectral-v13-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('spectral-v13-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  

index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    
+    <title>Site title</title>
+    <meta name="description" content="Site description">
+      
+    <link rel="shortcut icon" type="image/png" href="assets/images/icon-192x192.png">
+    <link rel="shortcut icon" sizes="196x196" href="assets/images/icon-192x192.png">
+    <link rel="apple-touch-icon" href="assets/images/icon-192x192.png">
+
+    <!-- Link to the stylesheet -->
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="assets/fonts/fonts.css">
+    
+  </head>
+  <body>
+    
+    <header>
+      <h1>
+        <a href="#home">Zen Garden Websites</a>
+      </h1>
+      <nav>
+        <a href="#about">About</a>
+        <a href="#examples">Examples</a>
+        <a href="#contact">Contact</a>
+      </nav>
+    </header>
+    
+    <main>
+      <section id="home">
+        <a href="#about"><img src="assets/images/enso.png" alt="Enso" /></a>
+      </section>
+      
+      <section id="about">
+        <h2>About</h2>
+        <div class="twocols">
+            <p>This website consists of just two files: a single HTML file and a single CSS file. This is based on the idea of Dave Shea, who created CSS Zen Garden. He wanted to show what was possible through CSS alone. The goal of this website is to show what can be done with just one simple CSS and one simple HTML file. It aims to illustrate how simple web development can be. The minimalistic approach has many advantages (and some disadvantages) and is all about minimalism. Zen Garden websites are easy to build, easy to maintain and often cheap or free to host.</p>
+        </div>
+      </section>
+
+      <section id="examples">
+        <h2>Examples</h2>
+        <div class="examples">
+            <a href="https://jhvanderschee.github.io/democratizepublishing/matt-mullenweg"><img src="assets/images/matt.png" alt="Matt Mulderberg" /></a>
+            <a href="https://www.semkrikke.nl/"><img src="assets/images/semkrikke1.jpg" alt="Sem Krikke" /></a>
+            <a href="#home"><img src="assets/images/zengardenwebsites.png" alt="Zen Garden Websites" /></a>
+        </div>
+      </section>
+
+      <section id="contact">
+        <h2>Contact</h2>
+        <div class="centered">
+            <p>Want to submit a website? Great!<br>Just build your website and send it in a ZIP file to joost@vdschee.nl.</p>
+        </div>
+      </section>
+
+    </main>
+    <footer>
+      <span>&copy; 2022 - zen garden websites</span>
+    </footer>
+    
+    <script type="text/javascript">
+      /* Make sure a hash is loaded */
+      if (window.location.hash == '') window.location.href = '#home';
+    </script>
+
+  </body>
+</html>

style.css

@@ -0,0 +1,28 @@
+*,*::after, *::before {margin: 0; padding: 0; box-sizing: border-box;}
+html {font-size: 20px;}
+body {background: #fff; background-image: url("https://www.transparenttextures.com/patterns/bedge-grunge.png"); border: 1rem solid #fbfaf9; border-top: 0; border-bottom: 0; min-height: 100vh; font-size: 0.85rem; font-family: 'Spectral'; line-height: 1.5; letter-spacing: -0.02em; overflow: auto;}
+body, a {color: #3a3731; text-decoration: none;}
+img {max-width: 100%;}
+h1,h2,h3 {line-height: 1.1; margin-bottom: 1em; font-size: 1.6rem;}
+h2::before {content: ""; display: block; width: 2rem; height: 1.5rem; background: url('assets/images/lotus.png') center center / contain no-repeat; margin: 0 auto 0.4rem; opacity: 0.8;}
+p {margin-bottom: 1.5em;}
+section {min-height: 30rem; padding: 12rem 2rem 12rem; display: none; align-items: center; flex-direction: column; justify-content: flex-start; margin: auto 0; min-height: calc(100vh - 1rem);}
+section:target {display: flex;}
+header, footer {position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; text-align: center;}
+section,header,footer {max-width: 50rem; width: 100%; margin-left: auto; margin-right: auto;}
+main {position: relative;}
+main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fbfaf9; margin-left: -1rem;} 
+nav {display: flex; gap: 1rem;}
+div.twocols {column-width: 22rem; column-gap: 1rem; width: 100%;}
+div.centered {max-width: 22rem; text-align: center;}
+header {top: 0; padding: 0 3rem 0; height: 14rem; display: flex; flex-direction: column; justify-content: center;}
+header h1 {margin: 0 0 0.5rem;}
+header nav a {border-bottom: 1px solid transparent;}
+header nav a:hover {border-color: #3a3731;}
+footer {padding: 0 3rem 4rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
+main {margin: 0 auto;}
+section#home img {width: 25rem; opacity: 0.8; margin: 1rem 0 0;}
+div.examples {display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: center;}
+div.examples a {display: block; margin-bottom: 0.4rem;}
+div.examples a img {max-width: 10rem; display: block; border: 1px solid #3a3731;}
+div.examples a:hover img {transform: scale(1.05);}