👏 Merge improvements

README.md

@@ -1,6 +1,26 @@
-# tweetscape
+<p align="center" style="text-align:center;">
+  <a href="https://github.com/pierrechls/tweetscape"><img src="https://img.shields.io/badge/version-1.1.0-green.svg?style=flat-square"></a>
+  <a href="https://img.shields.io/badge/build-passing-green.svg?style=flat-square"><img src="https://img.shields.io/badge/build-passing-green.svg?style=flat-square"></a>
+  <a href="http://vuejs.org/"><img src="https://img.shields.io/badge/front--end%20framework-vue.js-lightgrey.svg?style=flat-square"></a>
+  <a href="https://aframe.io/"><img src="https://img.shields.io/badge/vr%20framework-a--frame-lightgrey.svg?style=flat-square"></a>
+  <a href="http://standardjs.com/"><img src="https://img.shields.io/badge/code_style-standard-lightgrey.svg?style=flat-square"></a>
+</p>
 
-## How to use it
+<h1 align="center" style="text-align:center; border: 0;">T W E E T S C A P E</h1>
+
+<h6 align="center" style="text-align:center;">A WebVR experience displaying tweets along a 3D timeline</h6>
+
+<p align="center" style="text-align:center;">
+  <img src="http://cdn.rawgit.com/pierrechls/tweetscape/master/static/preview.gif" style="width:100%;">
+</p>
+
+## 🚀 How to use it
+
+### Clone the repo
+
+```bash
+$ git clone [email protected]:pierrechls/tweetscape.git
+```
 
 ### Connect your Twitter API
 
@@ -21,7 +41,6 @@ $ npm install
 $ npm run dev
 ```
 
-
 ### Serve the API port
 
 ```bash
@@ -42,12 +61,17 @@ $ npm run lint
 
 ### Deploy your build
 
-Before, you have to build for production.
-
 ```bash
 $ npm run deploy
 ```
 
-## Prior installation
+Set API production URL from the `default.json` file into `settings` folder.
+
+## 🛠 Prior installation
 
 You have to download [Node.js](https://nodejs.org/en/download/)
+
+
+## 🎉 Credits
+
+Project developed by [Pierre Charles](https://github.com/pierrechls/), [Jules Tantot](https://github.com/lujlujluj) and [Victor Viale](https://github.com/Koroeskohr), 3 students of [IMAC](http://www.ingenieur-imac.fr/) Engineering school.

client/components/App.vue

@@ -34,6 +34,10 @@
 
   @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400i,600,600i,700,700i,900,900i');
 
+  html {
+    font-size: 100%;
+  }
+
   body {
     margin: 0;
     font-size: 2rem;
@@ -68,4 +72,34 @@
     -ms-user-select: none;
   }
 
+  @media screen and (min-width: 1200px) {
+    html {
+      font-size: 110%;
+    }
+  }
+
+  @media screen and (min-width: 1400px) {
+    html {
+      font-size: 120%;
+    }
+  }
+
+  @media screen and (min-width: 1600px) {
+    html {
+      font-size: 130%;
+    }
+  }
+
+  @media screen and (min-width: 1800px) {
+    html {
+      font-size: 140%;
+    }
+  }
+
+  @media screen and (min-width: 1900px) {
+    html {
+      font-size: 150%;
+    }
+  }
+
 </style>

client/components/Camera.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-entity camera :position="attributify(position)" :look-controls="controlsEnabled ? '' : 'enabled: false; hmdEnabled: false;'">
+  <a-entity id="camera" camera :position="attributify(position)" :look-controls="controlsEnabled ? '' : 'enabled: false; hmdEnabled: false;'">
     <end-message></end-message>
   </a-entity>
 </template>