From edcd382cf6fdba00e572271064108f0191845e46 Mon Sep 17 00:00:00 2001
From: klutz <kev.belisle@gmail.com>
Date: Fri, 30 Oct 2020 04:01:15 +0100
Subject: [PATCH] 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    |  10 +-
 src/assets/sass/components/_list.scss    |   8 -
 src/assets/sass/components/_section.scss |   7 +
 src/index.html                           | 186 ++++++++++++-----------
 4 files changed, 106 insertions(+), 105 deletions(-)

diff --git a/src/assets/sass/base/_typography.scss b/src/assets/sass/base/_typography.scss
index 0d991d5..bf6f46f 100644
--- a/src/assets/sass/base/_typography.scss
+++ b/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;
   }
 }
 
diff --git a/src/assets/sass/components/_list.scss b/src/assets/sass/components/_list.scss
index fd5ad64..d3b3905 100644
--- a/src/assets/sass/components/_list.scss
+++ b/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;
diff --git a/src/assets/sass/components/_section.scss b/src/assets/sass/components/_section.scss
index e6a0b2b..4709ffb 100644
--- a/src/assets/sass/components/_section.scss
+++ b/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 {
diff --git a/src/index.html b/src/index.html
index 27a420d..f519775 100644
--- a/src/index.html
+++ b/src/index.html
@@ -159,97 +159,107 @@
             </li>
           </ul> -->
 
-          <h3>Important documents</h3>
-          <ul class="content">
-            <li>
-              <p class="content">
-                Make sure to read our
-                <a href="http://birbmc.com/rules">rules</a> before you join!
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Learn about
-                <a href="https://birbmc.com/land_claims">land claims</a>
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Help reduce <a href="https://birbmc.com/lag">lag</a> and keep
-                the server running smoothly
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Set up your
-                <a href="https://birbmc.com/nether">nether</a> portal, and
-                connect to the tunnel system
-              </p>
-            </li>
-          </ul>
+          <section class="two-column">
+            <div style="break-inside: avoid">
+              <h3>Important documents</h3>
+              <ul class="content">
+                <li>
+                  <p class="content">
+                    Make sure to read our
+                    <a href="http://birbmc.com/rules">rules</a> before you join!
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Learn about
+                    <a href="https://birbmc.com/land_claims">land claims</a>
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Help reduce <a href="https://birbmc.com/lag">lag</a> and keep
+                    the server running smoothly
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Set up your
+                    <a href="https://birbmc.com/nether">nether</a> portal, and
+                    connect to the tunnel system
+                  </p>
+                </li>
+              </ul>
+            </div>
 
-          <h3>Server IPs</h3>
-          <ul class="content">
-            <li>
-              <p class="content">
-                Survival server: <strong>play.birbmc.com</strong>
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Creative server: <strong>creative.birbmc.com</strong>
-              </p>
-            </li>
-          </ul>
+            <div style="break-inside: avoid">
+              <h3>Server IPs</h3>
+              <ul class="content">
+                <li>
+                  <p class="content">
+                    Survival server: <strong>play.birbmc.com</strong>
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Creative server: <strong>creative.birbmc.com</strong>
+                  </p>
+                </li>
+              </ul>
+            </div>
 
-          <h3>Fun stuff</h3>
-          <ul class="content">
-            <li>
-              <p class="content">
-                Take a look around our
-                <a href="http://map.birbmc.com/">dynmap</a>
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                <a href="https://stats.birbmc.com/">Stats.</a> So many stats.
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Learn about <a href="https://birbmc.com/discord">Geoffrey</a>,
-                our shop & location bot.
-              </p>
-            </li>
-          </ul>
+            <div style="break-inside: avoid">
+              <h3>Fun stuff</h3>
+              <ul class="content">
+                <li>
+                  <p class="content">
+                    Take a look around our
+                    <a href="http://map.birbmc.com/">dynmap</a>
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    <a href="https://stats.birbmc.com/">Stats.</a> So many stats.
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Learn about <a href="https://birbmc.com/discord">Geoffrey</a>,
+                    our shop & location bot.
+                  </p>
+                </li>
+              </ul>
+            </div>
 
-          <h3>Social links</h3>
-          <ul class="content">
-            <li>
-              <p class="content">
-                Join us on <a href="https://birbmc.com/discord">Discord</a>!
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Follow us on <a href="https://twitter.com/birb_mc">Twitter</a>!
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Give us some updoots on
-                <a href="https://www.reddit.com/r/BirbMC/">Reddit</a>
-              </p>
-            </li>
-            <li>
-              <p class="content">
-                Join our
-                <a href="https://steamcommunity.com/groups/BirbMC"
-                  >Steam Group</a
-                >
-              </p>
-            </li>
-          </ul>
+            <div style="break-inside: avoid">
+              <h3>Social links</h3>
+              <ul class="content">
+                <li>
+                  <p class="content">
+                    Join us on <a href="https://birbmc.com/discord">Discord</a>!
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Follow us on <a href="https://twitter.com/birb_mc">Twitter</a>!
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Give us some updoots on
+                    <a href="https://www.reddit.com/r/BirbMC/">Reddit</a>
+                  </p>
+                </li>
+                <li>
+                  <p class="content">
+                    Join our
+                    <a href="https://steamcommunity.com/groups/BirbMC"
+                      >Steam Group</a
+                    >
+                  </p>
+                </li>
+              </ul>
+            </div>
+          </section>
 
           <h3>Donations</h3>
           <p>