Fix mobile layout of feature list

Signed-off-by: trivernis <trivernis@protonmail.com>

_sass/_components.scss

@@ -138,3 +138,13 @@ code {
   }
 
 }
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  @media (min-width: $breakpoint-lg) {
+    margin-bottom: 0;
+  }
+}

_sass/_utilities.scss

@@ -186,4 +186,16 @@
 
 .max-100 {
   max-width: 100% !important;
+}
+
+.width-500 {
+  width: 500px;
+}
+
+.width-400 {
+  width: 400px;
+}
+
+.width-300 {
+  width: 300px;
 }

index.html

@@ -7,33 +7,36 @@ layout: home
 
 <p><img class="max-100" src="assets/images/mediarepo-overlapping.png"></p>
 
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Tagging of files</h3>
-    Tags can be assigned to files to describe specific
-    aspects and group them together.
-</div>
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Searching by tags and file properties</h3>
-    Assigned tags and file properties can be used to 
-    search for files.
-</div>
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Sorting by tags and file properties</h3>
-    Tag namespaces and file properties can be used for
-    sorting files.
-</div>
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Content addressing</h3>
-    Tags are not assigned to the actual file on the
-    disk but to identifiers made from the files content.
-</div>
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Multiple repositories</h3>
-    You can have multiple repositories on your system and
-    access them from your client with ease.
-</div>
-<div class="px-2 py-2 col-3 inline-block align-top">
-    <h3>Remote repositories</h3>
-    You can have repositories on remote system and connect to
-    those via tcp.
-</div>
+<div class="flex-container">
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Tagging of files</h3>
+        Tags can be assigned to files to describe specific
+        aspects and group them together.
+    </div>
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Searching by tags and file properties</h3>
+        Assigned tags and file properties can be used to 
+        search for files.
+    </div>
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Sorting by tags and file properties</h3>
+        Tag namespaces and file properties can be used for
+        sorting files.
+    </div>
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Content addressing</h3>
+        Tags are not assigned to the actual file on the
+        disk but to identifiers made from the files content.
+    </div>
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Multiple repositories</h3>
+        You can have multiple repositories on your system and
+        access them from your client with ease.
+    </div>
+    <div class="px-2 py-2 inline-block align-top width-300">
+        <h3>Remote repositories</h3>
+        You can have repositories on remote system and connect to
+        those via tcp.
+    </div>
+    
+</div>