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 16:43:27 +01:00
parent 952e4762c3
commit 9bc79e03ef
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -35,18 +35,18 @@
</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 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 simple 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 <a href="https://pages.github.com/">free to host</a>.</p>
</div>
<p>This website consists of just two files: a single HTML file and a single CSS file. This 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.</p>
<h2>Advantages</h2>
<p>The simple approach has many advantages (and some disadvantages) and is all about minimalism. Zen Garden Websites are easy to build, easy to maintain and cheap or even <a href="https://pages.github.com/">free to host</a>.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<div class="centered">
<p>Below you will find some examples of websites with just two files. Want to submit your own website? Great!
Just build your website and send a link to <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a> and/or submit a <a href="https://github.com/jhvanderschee/zengardenwebsites">pull request</a>.</p>
</div>
<p>Below you will find some examples of websites with just two files. Want to submit your own website? Great! Just build your website and send a link to <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a> and/or submit a <a href="https://github.com/jhvanderschee/zengardenwebsites">pull request</a>.</p>
<div class="examples">
<div>
<a href="https://john-doe.neocities.org"><img src="assets/images/johndoe.png" alt="John Doe" /></a>by <a href="https://github.com/cadars/john-doe">cadars</a>
@ -68,9 +68,7 @@
<section id="contact">
<h2>Contact</h2>
<div class="centered">
<p>My name is Joost van der Schee and I have created this website to celebrate the joy and simplicity of web development. Do not get me wrong: simple does not mean easy. If you want to contact me, send me an e-mail at <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a>.</p>
</div>
<p>My name is Joost van der Schee and I have created this website to celebrate the joy and simplicity of web development. If you want to contact me, send me an e-mail at <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a>.</p>
</section>
</main>

5
style.css
View File

@ -6,6 +6,7 @@ img {max-width: 100%;}
h1,h2,h3 {line-height: 1.1; margin-bottom: 0.75em; 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;}
h2:not(:first-child) {margin-top: 1em;}
section {min-height: 30rem; padding: 12rem 2rem 15rem; 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;}
@ -15,8 +16,8 @@ section,header,footer {max-width: 50rem; width: 100%; margin-left: auto; margin-
main {position: relative;}
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;}
section p {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;}