diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css new file mode 100644 index 0000000..d163296 --- /dev/null +++ b/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+ */ + } + \ No newline at end of file diff --git a/assets/fonts/spectral-v13-latin-200.woff b/assets/fonts/spectral-v13-latin-200.woff new file mode 100644 index 0000000..dce7208 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200.woff differ diff --git a/assets/fonts/spectral-v13-latin-200.woff2 b/assets/fonts/spectral-v13-latin-200.woff2 new file mode 100644 index 0000000..2ce4d90 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-200italic.woff b/assets/fonts/spectral-v13-latin-200italic.woff new file mode 100644 index 0000000..a7477b9 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-200italic.woff2 b/assets/fonts/spectral-v13-latin-200italic.woff2 new file mode 100644 index 0000000..3f07444 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-300.woff b/assets/fonts/spectral-v13-latin-300.woff new file mode 100644 index 0000000..e394508 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300.woff differ diff --git a/assets/fonts/spectral-v13-latin-300.woff2 b/assets/fonts/spectral-v13-latin-300.woff2 new file mode 100644 index 0000000..9f575fa Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-300italic.woff b/assets/fonts/spectral-v13-latin-300italic.woff new file mode 100644 index 0000000..b0c2140 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-300italic.woff2 b/assets/fonts/spectral-v13-latin-300italic.woff2 new file mode 100644 index 0000000..6ceffc8 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-500.woff b/assets/fonts/spectral-v13-latin-500.woff new file mode 100644 index 0000000..0979ba9 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500.woff differ diff --git a/assets/fonts/spectral-v13-latin-500.woff2 b/assets/fonts/spectral-v13-latin-500.woff2 new file mode 100644 index 0000000..cf6c174 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-500italic.woff b/assets/fonts/spectral-v13-latin-500italic.woff new file mode 100644 index 0000000..72abf44 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-500italic.woff2 b/assets/fonts/spectral-v13-latin-500italic.woff2 new file mode 100644 index 0000000..f1fd0ca Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-600.woff b/assets/fonts/spectral-v13-latin-600.woff new file mode 100644 index 0000000..6de7995 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600.woff differ diff --git a/assets/fonts/spectral-v13-latin-600.woff2 b/assets/fonts/spectral-v13-latin-600.woff2 new file mode 100644 index 0000000..7e1b61b Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-600italic.woff b/assets/fonts/spectral-v13-latin-600italic.woff new file mode 100644 index 0000000..4e91c16 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-600italic.woff2 b/assets/fonts/spectral-v13-latin-600italic.woff2 new file mode 100644 index 0000000..c5fa7f1 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-700.woff b/assets/fonts/spectral-v13-latin-700.woff new file mode 100644 index 0000000..0f6d94d Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700.woff differ diff --git a/assets/fonts/spectral-v13-latin-700.woff2 b/assets/fonts/spectral-v13-latin-700.woff2 new file mode 100644 index 0000000..df09d01 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-700italic.woff b/assets/fonts/spectral-v13-latin-700italic.woff new file mode 100644 index 0000000..1dc63b6 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-700italic.woff2 b/assets/fonts/spectral-v13-latin-700italic.woff2 new file mode 100644 index 0000000..069db67 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-800.woff b/assets/fonts/spectral-v13-latin-800.woff new file mode 100644 index 0000000..b4ea31a Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800.woff differ diff --git a/assets/fonts/spectral-v13-latin-800.woff2 b/assets/fonts/spectral-v13-latin-800.woff2 new file mode 100644 index 0000000..a4605c4 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-800italic.woff b/assets/fonts/spectral-v13-latin-800italic.woff new file mode 100644 index 0000000..d3fd00f Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-800italic.woff2 b/assets/fonts/spectral-v13-latin-800italic.woff2 new file mode 100644 index 0000000..c10e973 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-italic.woff b/assets/fonts/spectral-v13-latin-italic.woff new file mode 100644 index 0000000..1c7f405 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-italic.woff differ diff --git a/assets/fonts/spectral-v13-latin-italic.woff2 b/assets/fonts/spectral-v13-latin-italic.woff2 new file mode 100644 index 0000000..052d22f Binary files /dev/null and b/assets/fonts/spectral-v13-latin-italic.woff2 differ diff --git a/assets/fonts/spectral-v13-latin-regular.woff b/assets/fonts/spectral-v13-latin-regular.woff new file mode 100644 index 0000000..e363c48 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-regular.woff differ diff --git a/assets/fonts/spectral-v13-latin-regular.woff2 b/assets/fonts/spectral-v13-latin-regular.woff2 new file mode 100644 index 0000000..1929073 Binary files /dev/null and b/assets/fonts/spectral-v13-latin-regular.woff2 differ diff --git a/assets/images/enso.png b/assets/images/enso.png new file mode 100644 index 0000000..3aac940 Binary files /dev/null and b/assets/images/enso.png differ diff --git a/assets/images/lotus.png b/assets/images/lotus.png new file mode 100644 index 0000000..8ee4dda Binary files /dev/null and b/assets/images/lotus.png differ diff --git a/assets/images/matt.png b/assets/images/matt.png new file mode 100644 index 0000000..9860f25 Binary files /dev/null and b/assets/images/matt.png differ diff --git a/assets/images/semkrikke1.jpg b/assets/images/semkrikke1.jpg new file mode 100644 index 0000000..ce63029 Binary files /dev/null and b/assets/images/semkrikke1.jpg differ diff --git a/assets/images/zengardenwebsites.png b/assets/images/zengardenwebsites.png new file mode 100644 index 0000000..4c70d4c Binary files /dev/null and b/assets/images/zengardenwebsites.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c555c03 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + Site title + + + + + + + + + + + + + +
+

+ Zen Garden Websites +

+ +
+ +
+
+ Enso +
+ +
+

About

+
+

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.

+
+
+ +
+

Examples

+
+ Matt Mulderberg + Sem Krikke + Zen Garden Websites +
+
+ +
+

Contact

+
+

Want to submit a website? Great!
Just build your website and send it in a ZIP file to joost@vdschee.nl.

+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2344bcb --- /dev/null +++ b/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);} \ No newline at end of file