CSS: Style about page

refs #4328

public/css/icinga/about.less

@@ -1,36 +1,84 @@
 /*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
 
 #about {
+  &.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  section {
+    width: auto;
+
+    > * {
+      margin-bottom: 2em;
+    }
+  }
+
   h2 {
-    margin-top: 2.5em;
+    margin: 0;
   }
 
-  .about-social i {
+  .name-value-table {
-    font-size: 1.7em;
+    th {
-    color: @text-color;
+      width: 100%;
+    }
+
+    th,
+    td {
+      white-space: nowrap;
+    }
   }
 
-  .about-social i:hover {
+  section:not(:last-child),
-    color: @icinga-blue;
+  .icinga-logo {
+    margin-bottom: 2em;
   }
 
-  .about-links {
+  .external-links {
-    margin-top: 2.5em;
+    .rounded-corners();
-    margin-bottom: 2.5em;
+    border: 1px solid @gray-light;
+    display: flex;
+    padding: .5em 0;
+    overflow: hidden;
+
+    .col {
+      flex: 1 1 auto;
+      text-align: center;
+      font-size: 12/14em;
+    }
+
+    .col:not(:last-child) {
+      border-right: 1px solid @gray-light;
+    }
+
+    a {
+      display: block;
+      padding: .75em 1em;
+      margin: -7/12em 0;
+    }
+
+    a:hover {
+      text-decoration: none;
+      background: @gray-light;
+    }
+
+    i {
+      font-size: 2*14/12em;
+      opacity: .8;
+      margin-bottom: .25em;
+      display: block;
+
+      &:before {
+        margin-right: 0;
+      }
+    }
   }
 
-  .about-links i {
+  footer {
-    margin: 0.5em;
+    margin-top: auto;
-    padding: 0;
+    align-self: stretch;
-    font-size: 5em;
+    display: flex;
-    color: @text-color;
+    justify-content: space-between;
-  }
-
-  .about-links i:hover {
-    color: @icinga-blue;
-  }
-
-  .common-table th {
-    text-align: center;
   }
 }