Add images to docs

.sass-lint.yml

@@ -1,5 +1,7 @@
 files:
-  include: automaton/styles/**/*.scss
+  include:
+    - automaton/styles/**/*.scss
+    - docs/_src/assets/styles/**/*.scss
 options:
   formatter: stylish
   merge-default-rules: false

docs/_src/assets/styles/app.scss

@@ -1,5 +1,10 @@
-@import 'variables';
+// vendor
 
-@import 'base/reset';
-@import 'base/global';
-@import 'base/typography';
+@import "../../../../node_modules/normalize.css/normalize";
+
+// common
+
+@import "variables";
+
+@import "base/global";
+@import "base/typography";

docs/_src/assets/styles/base/global.scss

@@ -3,7 +3,6 @@
   &:before,
   &:after {
     box-sizing: border-box;
-    font-smoothing: antialiased;
 
     text-rendering: optimizeLegibility;
   }
@@ -18,7 +17,7 @@
 
 html,
 body {
-  font-family: $font-family-regular;
   font-weight: $font-weight-regular;
   font-size: $font-size-regular;
+  font-family: $font-family-regular;
 }

docs/_src/assets/styles/variables.scss

@@ -1,11 +1,11 @@
 // colors
 
-$black: #000;
-$white: #fff;
+$black: #000000;
+$white: #ffffff;
 
 // fonts
 
-$font-family-regular: 'Roboto Mono', monospace;
+$font-family-regular: "Roboto Mono", monospace;
 
 $font-weight-regular: 400;
 $font-weight-heavy: 700;

docs/_src/data.json

@@ -1,19 +1,18 @@
 {
   "meta": {
-    "version": "0.1.0",
+    "version": "1.2.0",
     "title": "Cybernetic Gamelan Future Automaton",
     "url": "https://andreasdzialocha.com/cybernetic-gamelan-future-automaton",
     "year": 2017,
     "description": "Network-based browser game for human laptop performers",
     "image": {
       "src": "https://andreasdzialocha.com/cybernetic-gamelan-future-automaton/assets/images/bg.jpg",
-      "width": "1200",
-      "height": "1200",
+      "width": "1600",
+      "height": "1000",
       "type": "image/jpeg"
     },
     "charset": "utf-8",
     "favicon": "/assets/images/favicon.ico",
-    "styles": "/assets/styles/app.css",
-    "scripts": "/assets/scripts/app.js"
+    "styles": "/assets/styles/app.css"
   }
 }

docs/_src/index.md

@@ -1 +1,27 @@
-Hello!
+# cybernetic-gamelan-future-automaton
+
+*"... soft thought is not there to be understood as a new cognitive function or as a transcendent form of rationality, but to reveal that programming culture is infected by incomputable thoughts that are yet to be accounted for."* (Luciana Parisi)
+
+The Cybernetic Gamelan Future Automaton is a network-based browser game for four performers, developed by Andreas Dzialocha. Each performer controls its own future-gamelan instrument using text symbols while travelling inside a 3D universe of parametric architectures, visualizing how algorithms generate and represent knowledge. Based on decentralised p2p networking, which is prone to latency, and noisy gamelan-inspired synthesizer textures, the Automaton reflects the culture of computing which appears both alien in its clean and infinite shapes and rich of error, latency and noise of human input at the same time.
+
+https://www.youtube.com/watch?v=qc2i82y4oS0
+
+### Setup
+
+```
+npm install
+```
+
+### Development
+
+```
+npm run serve
+npm run lint
+```
+
+### Deployment
+
+```
+npm run build
+npm start
+```

docs/_src/layout/default.html

@@ -4,10 +4,10 @@
   <meta charset="{{ meta.charset }}">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <meta name="description" content="{{ meta.description }}">
-  <title>{{ meta.title }}{% if title %} - {{ title }}{% endif %}</title>
-  <meta property="og:title" content="{{ meta.title }}{% if title %} - {{ title }}{% endif %}">
+  <title>{{ meta.title }}</title>
+  <meta property="og:title" content="{{ meta.title }}">
   <meta property="og:description" content="{{ meta.description }}">
-  <meta property="og:url" content="{{ meta.url }}{% if slug %}/{{ slug }}{% endif %}">
+  <meta property="og:url" content="{{ meta.url }}">
   <meta property="og:image" content="{{ meta.image.src }}">
   <meta property="og:image:type" content="{{ meta.image.type }}">
   <meta property="og:image:width" content="{{ meta.image.width }}">
@@ -17,11 +17,10 @@
   <link type="image/x-icon" rel="icon" href="{{ meta.favicon }}">
   <link type="text/css" rel="stylesheet" href="{{ meta.styles }}?v={{ meta.version }}">
   <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
-  <script type="text/javascript" src="{{ meta.scripts }}?v={{ meta.version }}"></script>
 </head>
 <body>
   <header>
-    <h1><a href="/">{{ meta.title }}</a></h1>
+    <h1>{{ meta.title }}</h1>
     <hr>
   </header>
   <main>