styling improvements

Author: Julia Rienitz

index.html

@@ -14,14 +14,14 @@
     <h1>DSA Würfel Tool</h1>
 
     <h2>Attribute</h2>
-    <ul>
+    <ul id="attributes">
         <li v-for="attribute in myAttributes">
           {{ attribute.name }}: {{ attribute.value }}
         </li>
     </ul>
 
     <h2>Fertigkeiten</h2>  
-    <ul>
+    <ul id="skills">
         <li v-for="(skill, skillID) in skills">
             <button v-on:click="rollSkill(skillID)">
                 {{ skill.name }} ({{ skill.attributes[0] }}/{{ skill.attributes[1] }}/{{ skill.attributes[2] }}) - {{ skill.value }} 

style.css

@@ -20,7 +20,22 @@ h1, h2, h3 {
     padding-bottom: 20px;
     box-sizing: border-box;
 }
+#attributes {
+    display: flex;
+    list-style: none;
+    margin: 20px 0;
+    padding: 0;
+    text-align: center;
+    flex-wrap: wrap;
+}
+
+#attributes li {
+    margin: 0 10px;
+}
 
+#skills {
+    columns: 2;
+}
 
 .green {
     color: green;