Adds basic "option group" to versioning template

An option group consists of an image (e.g. a logo), a name and
an input type (radio or checkbox depending on whether multiple
options are possible or not). If a user picks an option
a form will be opened to add additional information for that
option.

An option can be for example a particular version control system,
or a build command. The opened form will be pre-populated with
the appropriate command. The user can then customize or change the
command associated with that option.

static/css/main.css

@@ -10,3 +10,33 @@ html, body, div, p, span {
   color: #3d4a5c;
   font-family: 'Calibri', 'Myriad Pro', 'Lucida Grande', 'Lucida Sans', Verdana, sans-serif;
 }
+
+label.option-group {
+  width: 100px;
+  display: inline-block;
+  border: 1px solid lightgrey;
+  margin: 0;
+  padding: 0;
+}
+
+label.option-group > img {
+  display: block;
+  margin: 10px auto;
+  height: 50px;
+}
+
+label.option-group > span {
+  display: block;
+  text-align: center;
+  padding: 10px
+}
+
+label.option-group > input {
+  display:none;
+}
+
+label.option-group > input:checked ~ span {
+  font-weight: bolder;
+  background-color: lightgrey;
+}
+

templates/versioning.html

@@ -8,9 +8,11 @@
   tempor incididunt ut labore et dolore magna aliqua.
 
   <h3>What version control system do you use?</h3>
-  {% for item in range(20) %}
-    {{ loop.index }}
-  {% endfor %}
+  {% for item in range(20) %}<label class="option-group">
+    <img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png">
+    <input type="radio" value="git" name="vcs">
+    <span>git</span>
+  </label>{% endfor %}
 {% endblock %}
 
 {% block links %}