main page and responsive styling

2 files changed, 61 insertions, 10 deletions

diff --git a/docs/index.md b/docs/index.md
index f8a5cdd..46d5b86 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,25 @@
 # `alive` - livecoding with persistent expressions
 
-<iframe allowfullscreen="true" frameborder="0" height="315" width="560"
-  src="https://www.youtube.com/embed/z0XZYnY3Evc"></iframe>
+`alivecoding` is a new type of programming environment and language
+specifically designed for (live) performances where code is edited while it is
+running, such as *livecoding* or *algorave* music performances.
 
-*(this site is currently under construction)*
+<iframe class="embed" allowfullscreen="true" frameborder="0"
+  height="315" width="560" src="https://www.youtube.com/embed/z0XZYnY3Evc"
+></iframe>
+
+Unlike other livecoding languages, programming with `alivecoding` does not
+mean evaluating separate pieces of code and sending individual commands to the
+programming environment. Instead, you can keep editing the program as a whole,
+and whenever you save the file `alive` will apply your changes to the running
+system seamlessly, without resetting any part of your program (unless you want
+it to).
+
+If you want to learn more or try out `alivecoding` yourself, the
+[getting started][guide] page is a good place to start. On the other hand, if
+you are a curious about the motivations and concepts behind `alivecoding`,
+you can find more in-depth information on these topics in the
+['persistent expressions' introductory article][rationale].
+
+[rationale]: https://s-ol.nu/alivecoding
+[guide]: guide.html
diff --git a/docs/style.css b/docs/style.css
index 809ee05..1d326a9 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -13,12 +13,18 @@ body {
   font-family: 'Source Sans Pro', sans-serif;
   color: #222222;
 }
+@media (max-width: 699px) {
+  body {
+    width: 100vw;
+  }
+}
 
 article {
   padding: 3rem 2em 1em;
 }
 
 code {
+  font-size: 0.9em;
   font-family: 'Source Code Pro', monospace;
 }
 
@@ -36,32 +42,58 @@ ul {
   padding-left: 0.6em;
 }
 
-nav {
+header {
   position: fixed;
   width: inherit;
   height: 4rem;
   top: 0;
-  padding: 1em 2em 4px;
+  padding: 1rem 2rem 4px;
   background: #eeeeee;
   box-sizing: border-box;
 }
 
-nav div {
+nav {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
 
   border-bottom: 1px solid #222222;
   padding-bottom: 1em;
 }
 
-nav i {
-  flex: 1;
+nav span,
+nav a {
+  flex: 0 0 auto;
 }
 
-nav a {
+nav > a {
   margin-left: 1rem;
 }
 
+nav span a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+nav .grow {
+  flex: 1;
+}
+
+footer {
+  font-size: 0.8em;
+  padding: 0 2rem;
+}
+
+footer > div {
+  border-top: 1px solid #222222;
+  text-align: right;
+  padding: 0.5rem 0;
+}
+
+.embed {
+  box-sizing: border-box;
+  width: 100%;
+}
+
 .def {
   margin-top: 0.5rem;
 }