X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/blobdiff_plain/9a7b0b13acfa5381e9d802849520685c8ae49510..d645b495e0052c771621f8b0a8ba0d6ed0bec338:/css/mock1.css

diff --git a/css/mock1.css b/css/mock1.css
index 7b46a31de..cd7a297d4 100644
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,3 +1,20 @@
+/* vars */
+:root {
+  --navbar-bg: white;
+  --jumbotron-bg: 15,75,14;
+  --jumbotron-bg-fall: 65,225,64;
+  --footer-bg: 36,62,22;
+  --copyright-bg: 0,0,0;
+  --link-color: #428bca;
+  --nlink-col: black;
+  --text-color: #333;
+  --footer-text-color: #fff;
+  --border-color: 0,0,0;
+  --footer-border-color: 255,255,255;
+  --box-hover-color: #eee;
+  --box-round: 10px;
+}
+
 /* reset css for browser compat */
 * {
     margin: 0;
@@ -5,164 +22,134 @@
     box-sizing: border-box;
 }
 
+/* global */
 body {
-  font-family: Verdana, Helvetica, sans-serif;
-  font-size: 16px;
-  color: #222222;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--text-color);
+}
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+/* order */
+.jumbotron {
+  order: 0;
+}
+.navkinks {
+  order:1;
+}
+.main {
+  order: 2;
 }
 
 /* navbar */
 .navbar {
   width: 100%;
   height: 50px;
-  background-color: white;
+  background-color: var(--navbar-bg);
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   display: flex;
   flex-wrap: nowrap;
+  justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid rgba(var(--border-color),.3);
   z-index: 100;
 }
 .nlogo {
   height: 40px;
 }
-/* navigation links */
 .navlinks {
-        position: relative;
-        display: table;
-        height: 50px;
-        margin: 0 20px;
-        list-style-type: none;
+  display: flex;
+  justify-content: space-around;
+  fkex-wrap: nowrap;
 }
-
-.navlinks > li {
+.nlink {
   text-decoration: none;
-  font-size: 20px;
-  color: black;
-  float: left;
-  display: table-cell;
-  margin: 0 15px;
-  padding-top: 25px;
-  transform: translate(0, -25%); /* I have no idea how or why this works but it just does. */
-  cursor: pointer; /* for pseudo-links to still feel like links */
+  color: var(--nlink-col);
 }
 
 /* main */
 .container {
-  margin: 51px 0 0; /* merged margins into one */
+  margin: 50px 0 0 0;
   padding: 0;
   width: 100%; 
-  position: relative;
-  height: auto;
-  min-height: 100%; /* height is needed for some properties */
+  margin-left: 0;
+  margin-right: 0;
+  display: flex;
+  flex-direction: column;
+  fkex-wrap: wrap;
+  justify-content: space-between;
+  min-height: 100%;
 }
 
 /* jumbotron */
 .jumbotron {
-  color: white;
-  height: 50%;
-  width: 100%;
-  top: 50%;
-  margin: 5% 0;
   position: relative;
-  display: flex;
-  padding: 25px;
-  wrap-flex: wrap;
-  justify-content: center;
-  align-items: center;
+  border-bottom: 1px solid #888;
+  width: 100%;
+  background: rgb(var(--jumotron-bg-fall));
+  background: rgba(var(--jumbotron-bg),.6);
+  box-shadow: 0 3px 5px rgba(0,0,0, 0.36);
+  
+  flex-basis: 100%;
+  -webkit-border-bottom-right-radius: var(--box-round);
+  -webkit-border-bottom-left-radius: var(--box-round);
+  -moz-border-radius-bottomright: var(--box-round);
+  -moz-border-radius-bottomleft: var(--box-round);
+  border-bottom-right-radius: var(--box-round);
+  border-bottom-left-radius: var(--box-round);
 }
 .child {
   text-align: center;
 }
+.box-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
 .box {
   text-align: center;
   text-decoration: none;
-  color: black;
-  margin: 0 1%;
+  color: var(--text-color);
   margin-bottom: 5px;
-  border: 1px solid #000;
-  height: 250px;
+  border: 1px solid rgb(var(--border-color));
+  flex-basis: 30%;
+  height: 105px;
   background-color: #fff;
-  border-radius: 10px;
-  width: 350px;
-  display: inline-block;
+  border-radius: var(--box-round);
+  -webkit-border-radius: var(--box-round);
+  -moz-border-radius: var(--box-round);
 }
-.box:hover, .box:active {
-  background-color: #eee;
+.box:hover,
+.box:active {
+  background-color: var(--box-hover-color);
 }
-.title {
-  text-align: center;
+.box-center {
+  margin-top: 22.5px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
-
-/* a big welcome for newcomers ;) */
-.welcome-big {
-  position: relative;
-  margin-top: 51px;
-  border-bottom: 1px solid #888;
-  width: 100%;
-
-  background: rgb(65,225,64); /* fallback */
-  background: rgba(15, 75, 14, .6);
-
-  padding: 10%;
-
+.title {
   text-align: center;
-  color: white;
-  text-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
-
-  box-shadow: 0 3px 5px rgba(0,0,0, 0.36);
-
-  height: 50%;
-
-  overflow: hidden;
-  vertical-align: bottom;
 }
 
-.welcome-big h1 { /* make this stand out */
-  font-size: 50px;
-  line-height: 80px;
-} 
-
-.welcome-big h3 {
-  font-size: 22px;
-  width: 70%;
-  margin: 0 auto;
-  vertical-align: middle;
-  }
-
-.welcome-learnmore {
-  border: 1px solid #666;
-  background-color: white;
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: 400;
-
-  padding: 5px 8px;
-
-  border-radius: 8px;
-
-  box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21);
-
-  display: block;
-  position: relative;
-  margin: 0 auto;
-  vertical-align: middle;
-  bottom: -50%;
-  transform: translate(0, 50%);
-
-  }
 /* articles feed */
+h1 {
+  margin: 0;
+}
 div.art {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(var(--border-color),.3);
 }
 div.art:last-child {
   border-bottom: none;
 }
 h3.art {
-  margin: 0;
+  margin-bottom: 0;
 }
 p.art {
   margin: 0;
@@ -173,41 +160,97 @@ p.art-ingress {
 }
 p.art-date {
   color: #ccc;
-  margin-top: 0;
-}
-a {
-  color: #0645AD;
-  text-decoration: none;
+  margin: 0;
 }
 p.art-link {
   margin-top: 0;
 }
 
-/* footer */
-.footer {
-  background: #666; /* >:^) */
-  width: 100%;
-  /* margin and padding are reset at line 1-5 */
+/* help */
+.hmain {
   display: flex;
   flex-wrap: wrap;
-  color: #eee;
-  font-size: 18px;
-  line-height: 22px;
-  
-  min-height: 22px;
-  height: auto;
-
-  position: fixed;
-  bottom: 0;
-} /* plz no justify ;_; */
+  justify-content: space-around;
+}
+a.hchild {
+  color: var(--text-color);
+  height: 40px;
+  width: 95%;
+  text-align: center;
+  border-top: 1px solid rgba(var(--border-color),.6);
+  border-left: 1px solid rgba(var(--border-color),.6);
+  border-right: 1px solid rgba(var(--border-color),.6);
+}
+a.hchild:hover,
+a.hchild:active {
+  background-color: var(--box-hover-color);
+}
+.hchild:first-child {
+  margin-top: 10px;
+  -webkit-border-top-left-radius: var(--box-round);
+  -webkit-border-top-right-radius: var(--box-round);
+  -moz-border-radius-topleft: var(--box-round);
+  -moz-border-radius-topright: var(--box-round);
+  border-top-left-radius: var(--box-round);
+  border-top-right-radius: var(--box-round);
+}
+.hchild:last-child {
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(var(--border-color),.6);
+  -webkit-border-bottom-right-radius: var(--box-round);
+  -webkit-border-bottom-left-radius: var(--box-round);
+  -moz-border-radius-bottomright: var(--box-round);
+  -moz-border-radius-bottomleft: var(--box-round);
+  border-bottom-right-radius: var(--box-round);
+  border-bottom-left-radius: var(--box-round);
+}
 
-.footer a {
-  text-decoration: none;
-  color: #7bf;
+/* footer */
+.footer {
+  background: rgb(var(--footer-bg));
+  color: var(--footer-text-color);
+  width: device-width;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+/*  -webkit-border-top-left-radius: var(--box-round);
+  -webkit-border-top-right-radius: var(--box-round);
+  -moz-border-radius-topleft: var(--box-round);
+  -moz-border-radius-topright: var(--box-round);
+  border-top-left-radius: var(--box-round);
+  border-top-right-radius: var(--box-round);*/
+}
+@media all and (max-width: 500px) {
+  .footer {
+    flex-direction: column;
   }
-
-.footer-links {
-  position: absolute;
-  right: 0;
-  margin-right: 8px;
+  .footerchild {
+    width: 100%;
+    border-bottom: 1px solid rgba(var(--footer-border-color),.5);
+  }
+  .footerchild:last-child {
+  border: none;
   }
+}
+.footerchild ul,
+.footerchild ul ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.footerchild ul ul {
+  padding-left: 2em;
+}
+.footer h2, .footer h3 {
+margin: 0;
+}
+.footer .footerchild p {
+  margin: 0;
+}
+.copyright {
+  background: rgba(var(--copyright-bg),.5);
+  height: 50px;
+}
\ No newline at end of file