From: Ed Kellett <redacted>
Date: Wed, 24 Feb 2016 03:49:15 +0000 (+0000)
Subject: improve various aspects of the responsive layout
X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/commitdiff_plain/6c2065c49492074134164ce300a0fef5336b9a0d

improve various aspects of the responsive layout
---

diff --git a/static/css/style.css b/static/css/style.css
index 0da075cac..d9daa7dd1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -113,10 +113,12 @@ a {
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: stretch;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .box {
-    text-align: left;
+    text-align: center;
     text-decoration: none;
     color: var(--text-color);
     margin-bottom: 5px;
@@ -128,6 +130,10 @@ a {
     -moz-border-radius: var(--box-round);
 }
 
+.box span {
+    display: block;
+}
+
 .box:hover,.box:active {
     background-color: var(--box-hover-color);
 }
@@ -164,11 +170,11 @@ h1 {
 }
 
 div.art {
-    border-bottom: 1px solid rgba(var(--border-color),.3);
+    clear: right;
 }
 
-div.art:last-child {
-    border-bottom: none;
+div.art:not(:first-child) {
+    border-top: 1px solid rgba(var(--border-color),.3);
 }
 
 b.art {
@@ -186,8 +192,9 @@ p.art-ingress {
 }
 
 .art-date {
+    float: right;
     color: #ccc;
-    margin: 0;
+    margin: 0 .5em;
 }
 
 p.heading {
@@ -257,7 +264,7 @@ a.hchild:hover,a.hchild:active {
     color: rgba(var(--footer-text-color),.9);
     margin-top: 2vh;
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     min-height: 27vh;
     justify-content: space-between;
     align-items: flex-start;
@@ -266,6 +273,14 @@ a.hchild:hover,a.hchild:active {
 
 .footerchild {
     margin-top: .5em;
+    flex: 1 1 1px;
+    min-width: 12em;
+}
+
+.footer-push {
+    margin-left: auto;
+    min-width: 12em;
+    max-width: max-content;
 }
 
 .footer a {
@@ -287,7 +302,7 @@ a.hchild:hover,a.hchild:active {
     padding-left: 30px;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: 600px) {
     .footer {
         flex-direction: column;
     }
@@ -296,6 +311,10 @@ a.hchild:hover,a.hchild:active {
         width: 100%;
     }
 
+    .footer-push {
+        margin-left: 0;
+    }
+
     .footerchild ul li:last-child {
         margin-bottom: .5em;
     }
@@ -319,6 +338,11 @@ a.hchild:hover,a.hchild:active {
         margin: 0;
     }
 
+    .box-container {
+        flex-direction: column;
+        margin: 0 .5em;
+    }
+
     .box div {
         position: relative;
         top: initial;
@@ -368,7 +392,7 @@ a.copyright {
     text-align: right;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: 600px) {
     .copyright {
         height: 5vh;
     }
diff --git a/templates/footer.html b/templates/footer.html
index 4e67ef5b5..c2a37df38 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -58,10 +58,8 @@
             </li>
         </ul>
     </div>
-    <div class="footerchild hdn">
-        &nbsp;
-    </div>
     <div class="footerchild">
+        <div class="footer-push">
         <h2>Social Media</h2>
         <ul>
             <li>
@@ -89,6 +87,7 @@
                 Private Internet Access</a>
             </li>
         </ul>
+        </div>
     </div>
 </footer>
 <footer class="copyright">
diff --git a/templates/index.html b/templates/index.html
index 229cecfd8..0d4646caa 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,13 +5,18 @@
     <h2 class="child">Welcome to freenode, the new home of your
     projects.</h2>
     <div class="box-container">
-        <a class="box" href="about"><i class=
-        "fa fa-comment fa-4x"></i><br>
-        Chat</a> <a class="box" href="help"><i class=
-        "fa fa-question fa-4x"></i><br>
-        FAQ</a> <a class="box" href="contribute"><i class=
-        "fa fa-users fa-4x"></i><br>
-        Register a group</a>
+        <a class="box" href="about">
+            <i class="fa fa-comment fa-4x"></i>
+            <span>Chat</span>
+        </a>
+        <a class="box" href="help">
+            <i class="fa fa-question fa-4x"></i>
+            <span>FAQ</span>
+        </a>
+        <a class="box" href="contribute">
+            <i class="fa fa-users fa-4x"></i>
+            <span>Register a group</span>
+        </a>
     </div>
 </div>
 <div class="main">