Merge pull request #9 from freenode/design-boxes

[irc/freenode/web-7.0.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index 615662cf2e1f32fbe0f2719dfb8f63cea9f08e29..df7fc4c33158db000513d4283d339ad596641860 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,13 +1,5 @@
 /* vars */
 
-:root {
-  /*--jumbotron-bg: 15,75,14;*/
-  /*--jumbotron-bg: rgba(75,235,74,.4);*/
-  /*--footer-link-color: 255,255,255;*/
-  /*--footer-text-color: 255,255,255;*/
-  /*--footer-border-color: 255,255,255;*/
-}
-
 /* reset css for browser compat */
 
 * {
@@ -22,10 +14,12 @@ body {
   font-family: 'Open Sans';
   color: #333;
   font-size: 14px;
+  min-height: 100vh;
+  height: auto;
 }
 
 a {
-  color: #000;
+  color: rgb(66,139,202);
   text-decoration: none;
 }
 
@@ -70,7 +64,9 @@ a {
   -webkit-justify-content: space-around;
   -ms-flex-pack: distribute;
   justify-content: space-around;
-  fkex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
 .nlink {
@@ -81,15 +77,15 @@ a {
 /* main */
 
 .container {
-  margin: 50px 0 0;
-  padding: 0;
+  padding: 50px 0 0;
   width: 100%;
-  min-height: 100%;
+  min-height: 68vh;
 }
 
 .main {
   margin-left: .5em;
   margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 /* jumbotron */
@@ -97,9 +93,9 @@ a {
 .jumbotron {
   position: relative;
   width: 100%;
-  margin: 0;
+  margin-top: -16px;
   background: #000;
-  background: rgb(238,238,238);
+  background: #eee;
   box-shadow: 0 3px 5px rgba(150,150,150,.36);
   color: #333;
 }
@@ -107,6 +103,8 @@ a {
 .child {
   text-align: center;
   margin: .5em;
+  font-size: 32px;
+  line-height: 48px;
 }
 
 .box-container {
@@ -127,10 +125,11 @@ a {
 }
 
 .box {
-  text-align: center;
+  text-align: left;
   text-decoration: none;
   color: #333;
   margin-bottom: 5px;
+  padding: 5px;
   -webkit-flex-basis: 30%;
   -ms-flex-preferred-size: 30%;
   flex-basis: 30%;
@@ -142,7 +141,17 @@ a {
 
 .box:hover,
 .box:active {
-  background-color: #eee;
+  background-color: #ddd;
+}
+
+.box div {
+  font-size: 28px;
+  line-height: 28px;
+  padding-left: 8px;
+  font-weight: 700;
+  position: relative;
+  display: inline;
+  top: -10px;
 }
 
 .fa-users {
@@ -154,6 +163,10 @@ a {
   margin-bottom: 5px;
 }
 
+.fa-4x {
+  padding-left: 8px;
+}
+
 .title {
   text-align: center;
 }
@@ -172,8 +185,9 @@ div.art:last-child {
   border-bottom: none;
 }
 
-h3.art {
+b.art {
   margin-bottom: 0;
+  font-size: 18px;
 }
 
 p.art {
@@ -190,10 +204,16 @@ p.art-ingress {
   margin: 0;
 }
 
+p.heading {
+  white-space: nowrap;
+}
+
 p.art-link {
   margin-top: 0;
 }
 
+/* Article */
+
 /* help */
 
 .hmain {
@@ -225,7 +245,7 @@ a.hchild {
 
 a.hchild:hover,
 a.hchild:active {
-  background-color: #eee;
+  background-color: #ddd;
 }
 
 .hchild:first-child {
@@ -251,10 +271,14 @@ a.hchild:active {
 
 /* footer */
 
+.footers {
+  min-height: 30vh;
+}
+
 .footer {
-  background: rgb(238,238,238);
+  background: #eee;
   color: rgba(51,51,51,.9);
-  margin-top: 1em;
+  margin-top: 2vh;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,6 +286,7 @@ a.hchild:active {
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  min-height: 27vh;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -281,6 +306,11 @@ a.hchild:active {
   color: #000;
 }
 
+.footer h2 {
+  margin-bottom: 9px;
+  display: inline-block;
+}
+
 .footerchild ul,
 .footerchild ul ul {
   margin-left: 10px;
@@ -303,11 +333,6 @@ a.hchild:active {
 
   .footerchild {
     width: 100%;
-    border-bottom: 1px solid rgba(51,51,51,.5);
-  }
-
-  .footerchild:last-child {
-    border: none;
   }
 
   .footerchild ul li:last-child {
@@ -317,6 +342,31 @@ a.hchild:active {
   .hdn {
     display: none;
   }
+
+  .box {
+    text-align: center;
+  }
+
+  .child {
+    font-size: 20px;
+    line-height: 30px;
+    padding: 10px 0 5px;
+  }
+
+  .fa-4x {
+    padding: 0;
+    margin: 0;
+  }
+
+  .box div {
+    position: relative;
+    top: initial;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 16px;
+    padding: 10px 0;
+    display: block;
+  }
 }
 
 .footer h2,
@@ -342,7 +392,7 @@ a.hchild:active {
   -ms-flex-align: center;
   align-items: center;
   background: rgba(170,178,171,.5);
-  height: 31px;
+  height: 3vh;
   color: rgba(0,0,0,.8);
 }
 
@@ -352,4 +402,29 @@ a.copyright {
   margin-top: 0;
   margin-left: .5em;
   margin-right: .5em;
+  width: auto;
+  height: auto;
+}
+
+.copyright a img {
+  height: 3vh;
+  width: auto;
+}
+
+.copyright p {
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-left: .5em;
+  margin-right: .5em;
+  text-align: right;
+}
+
+@media all and (max-width: 500px) {
+  .copyright {
+    height: 5vh;
+  }
+
+  .copyright a img {
+    height: 5vh;
+  }
 }
\ No newline at end of file