This commit is contained in:
Joost van der Schee 2022-12-08 00:54:40 +01:00
parent b11b97559f
commit 06eff3af08
4 changed files with 8 additions and 5 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@ -37,12 +37,13 @@
<section id="about"> <section id="about">
<h2>About</h2> <h2>About</h2>
<div class="twocols"> <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> <p>This website consists of just two files: a single HTML file and a single CSS file. This idea is based on a mix of Dave Sheas <a href="http://www.csszengarden.com/">CSS Zen Garden</a> and the <a href="https://github.com/cadars/john-doe">single HTML webpage</a> from Adam Newbold. 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> </div>
</section> </section>
<section id="examples"> <section id="examples">
<h2>Examples</h2> <h2>Examples</h2>
<p>Below you will find some examples of websites with just two files. Do you want your website here?</p>
<div class="examples"> <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://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="https://www.semkrikke.nl/"><img src="assets/images/semkrikke1.jpg" alt="Sem Krikke" /></a>
@ -53,7 +54,7 @@
<section id="contact"> <section id="contact">
<h2>Contact</h2> <h2>Contact</h2>
<div class="centered"> <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> <p>Want to submit a website? Great!<br>Just build your website and send it in a ZIP file to <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a>.</p>
</div> </div>
</section> </section>

View File

@ -1,6 +1,6 @@
*,*::after, *::before {margin: 0; padding: 0; box-sizing: border-box;} *,*::after, *::before {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 20px;} 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 {background: #fff; background-image: url("assets/images/bedge-grunge.png"); border: 1rem solid #fff; 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;} body, a {color: #3a3731; text-decoration: none;}
img {max-width: 100%;} img {max-width: 100%;}
h1,h2,h3 {line-height: 1.1; margin-bottom: 1em; font-size: 1.6rem;} h1,h2,h3 {line-height: 1.1; margin-bottom: 1em; font-size: 1.6rem;}
@ -8,10 +8,12 @@ h2::before {content: ""; display: block; width: 2rem; height: 1.5rem; background
p {margin-bottom: 1.5em;} 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 {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;} section:target {display: flex;}
section a {text-decoration: underline;}
section a:hover {text-decoration: none; color: rgb(155, 18, 18);}
header, footer {position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; text-align: center;} 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;} section,header,footer {max-width: 50rem; width: 100%; margin-left: auto; margin-right: auto;}
main {position: relative;} main {position: relative;}
main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fbfaf9; margin-left: -1rem;} main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fff; margin-left: -1rem;}
nav {display: flex; gap: 1rem;} nav {display: flex; gap: 1rem;}
div.twocols {column-width: 22rem; column-gap: 1rem; width: 100%;} div.twocols {column-width: 22rem; column-gap: 1rem; width: 100%;}
div.centered {max-width: 22rem; text-align: center;} div.centered {max-width: 22rem; text-align: center;}
@ -22,7 +24,7 @@ header nav a:hover {border-color: #3a3731;}
footer {padding: 0 3rem 4rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;} footer {padding: 0 3rem 4rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
main {margin: 0 auto;} main {margin: 0 auto;}
section#home img {width: 25rem; opacity: 0.8; margin: 1rem 0 0;} 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 {display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0;}
div.examples a {display: block; margin-bottom: 0.4rem;} 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 img {max-width: 10rem; display: block; border: 1px solid #3a3731;}
div.examples a:hover img {transform: scale(1.05);} div.examples a:hover img {transform: scale(1.05);}