Improve important links layout (#11)

Improve mportant links layout

Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/11
Reviewed-by: Etzelia <etzelia@hotmail.com>

src/assets/sass/base/_typography.scss

@@ -65,15 +65,7 @@ p {
   margin: 0 0 _size(element-margin) 0;
 
   &.content {
-    -moz-columns: 20em 2;
-    -webkit-columns: 20em 2;
-    -ms-columns: 20em 2;
-    columns: 20em 2;
-    -moz-column-gap: _size(element-margin);
-    -webkit-column-gap: _size(element-margin);
-    -ms-column-gap: _size(element-margin);
-    column-gap: _size(element-margin);
-    text-align: justify;
+    text-align: left;
   }
 }
 

src/assets/sass/components/_list.scss

@@ -41,14 +41,6 @@ ul {
   }
 }
 
-@include breakpoint(">small") {
-  ul.content,
-  ol.content {
-    columns: 2;
-    column-gap: 2em;
-  }
-}
-
 ul p,
 li p {
   margin-bottom: 0;

src/assets/sass/components/_section.scss

@@ -11,6 +11,13 @@ article {
   &.special {
     text-align: center;
   }
+
+  &.two-column {
+    @include breakpoint(">small") {
+      columns: 2;
+      column-gap: 2em;
+    }
+  }
 }
 
 header {

src/index.html

@@ -159,6 +159,8 @@
             </li>
           </ul> -->
 
+          <section class="two-column">
+            <div style="break-inside: avoid">
               <h3>Important documents</h3>
               <ul class="content">
                 <li>
@@ -187,7 +189,9 @@
                   </p>
                 </li>
               </ul>
+            </div>
 
+            <div style="break-inside: avoid">
               <h3>Server IPs</h3>
               <ul class="content">
                 <li>
@@ -201,7 +205,9 @@
                   </p>
                 </li>
               </ul>
+            </div>
 
+            <div style="break-inside: avoid">
               <h3>Fun stuff</h3>
               <ul class="content">
                 <li>
@@ -222,7 +228,9 @@
                   </p>
                 </li>
               </ul>
+            </div>
 
+            <div style="break-inside: avoid">
               <h3>Social links</h3>
               <ul class="content">
                 <li>
@@ -250,6 +258,8 @@
                   </p>
                 </li>
               </ul>
+            </div>
+          </section>
 
           <h3>Donations</h3>
           <p>