diff --git a/index.html b/index.html index 995fe29..c3fa200 100644 --- a/index.html +++ b/index.html @@ -35,18 +35,18 @@
+

About

-
-

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 CSS Zen Garden and the single HTML webpage 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 free to host.

-
+

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 CSS Zen Garden and the single HTML webpage 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.

+ +

Advantages

+

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 free to host.

+

Examples

-
-

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 joost@vdschee.nl and/or submit a pull request.

-
+

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 joost@vdschee.nl and/or submit a pull request.

John Doeby cadars @@ -68,9 +68,7 @@

Contact

-
-

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 joost@vdschee.nl.

-
+

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 joost@vdschee.nl.

diff --git a/style.css b/style.css index 722c498..9f46b6d 100644 --- a/style.css +++ b/style.css @@ -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;}