librebits
/
zengarden-bits
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bedge-grunge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
assets/images/zengardenwebsites.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

5
index.html
View File

@ -37,12 +37,13 @@
<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>
<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>
</section>
<section id="examples">
<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">
<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>
@ -53,7 +54,7 @@
<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>
<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>
</section>

8
style.css
View File

@ -1,6 +1,6 @@
*,*::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 {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;}
img {max-width: 100%;}
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;}
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 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;}
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;}
main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fff; 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;}
@ -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;}
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 {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 img {max-width: 10rem; display: block; border: 1px solid #3a3731;}
div.examples a:hover img {transform: scale(1.05);}