More margin for revisions view

README.md

@@ -10,51 +10,62 @@ A static site generator for AOE Technology Radar
 > npm install
 > npm run watch
 ```
-*A new browser tab should open up - wait until last command has finished and refresh.*
+
+_A new [browser tab](http://127.0.0.1:8080/techradar) should open up - wait
+until last command has finished and refresh._
 
 ## Usage
 
-For a new Technology Radar release, create a folder of the release date (YYYY-MM-DD) under `/radar`. In each release folder create a folder for every quadrant and place the items there.
+For a new Technology Radar release, create a folder of the release date
+(YYYY-MM-DD) under `/radar`. In each release folder create a folder for every
+quadrant and place the items there.
 
 ### Maintaining items
 
 The items are written in Markdown format (.md)
 
-Each file has a [front-matter](https://github.com/jxson/front-matter) header where the attributes of the item are listed:
+Each file has a [front-matter](https://github.com/jxson/front-matter) header
-  ```
+where the attributes of the item are listed:
-  ---
-  title:      "React"
-  ring:       adopt
-  quadrant:   languages-and-frameworks
-  ---
 
-  Text goes here. You can use **markdown** here.
+```
+---
+title:      "React"
+ring:       adopt
+quadrant:   languages-and-frameworks
+---
 
-  ```
+Text goes here. You can use **markdown** here.
+```
 
 Following front-matter attributes are possible:
-- **title**: Name of the Item
-- **quadrant**: Quadrant. One of `languages-and-frameworks`, `methods-and-patterns`, `platforms-and-aoe-services`, `tools`
-- **ring**: Ring section in radar. One of `trial`, `assess`, `adopt`, `hold`
-- **info**: (optional) A short textual description of the item (visible in overview pages)
 
-The name of the .md file acts as item identifier and may overwrite items with the same name from older releases.
+* **title**: Name of the Item
+* **quadrant**: Quadrant. One of `languages-and-frameworks`,
+  `methods-and-patterns`, `platforms-and-aoe-services`, `tools`
+* **ring**: Ring section in radar. One of `trial`, `assess`, `adopt`, `hold`
+* **info**: (optional) A short textual description of the item (visible in
+  overview pages)
 
-If an item is overwritten in a new release, the attributes from the new item are merged with the old ones and a new history entry is created for that item.
+The name of the .md file acts as item identifier and may overwrite items with
+the same name from older releases.
+
+If an item is overwritten in a new release, the attributes from the new item are
+merged with the old ones and a new history entry is created for that item.
 
 ## Travis
+
 [![Travis](https://api.travis-ci.org/AOEpeople/aoe_technology_radar.svg?branch=master)](https://travis-ci.org/AOEpeople/aoe_technology_radar/)
 
 ## Todos
 
--  [x] Add Icons
+* [x] Add Icons
--  [x] Implement search
+* [x] Implement search
--  [ ] Finalize CSS
+* [ ] Finalize CSS
--  [x] Get contents for how-to-use page
+* [x] Get contents for how-to-use page
--  [ ] Show item history on details (relevant with 2nd release)
+* [ ] Show item history on details (relevant with 2nd release)
--  [ ] Better semantic and SEO
+* [ ] Better semantic and SEO
--  [ ] Make mobile friendly
+* [ ] Make mobile friendly
--  [ ] Add mobile navigation and search
+* [ ] Add mobile navigation and search
--  [ ] Create more react components for already existing CSS comps
+* [ ] Create more react components for already existing CSS comps
--  [ ] Refactor hardcoded subfolder in routing
+* [ ] Refactor hardcoded subfolder in routing
--  [ ] Unit test for radar generation :see_no_evil:
+* [ ] Unit test for radar generation :see_no_evil:

js/components/ItemRevisions.js

@@ -4,14 +4,14 @@ import ItemRevision from './ItemRevision';
 
 export default function ItemRevisions({ revisions }) {
   return (
-    <div>
+    <div className="item-revisions">
       <HeadlineGroup secondary>
-        <h4 className="headline headline--dark">
+        <h4 className="headline headline--dark">Revisions:</h4>
-          Revisions:
-        </h4>
       </HeadlineGroup>
 
-      {revisions.map((revision) => <ItemRevision key={revision.release} revision={revision} />)}
+      {revisions.map(revision => (
+        <ItemRevision key={revision.release} revision={revision} />
+      ))}
     </div>
   );
 }

styles/components/item-revisions.css

@@ -0,0 +1,3 @@
+.item-revisions {
+  margin-top: 60px;
+}