X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/blobdiff_plain/636c336db5e87e4f98575a76f3895e8e9f5668da..e77c6e957f9fc13519443d576d36cb3b359da0a9:/css/mock1.css

diff --git a/css/mock1.css b/css/mock1.css
index b196d94eb..07786dc77 100644
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,13 +1,25 @@
 /* vars */
 :root {
   --navbar-bg: white;
+  --jumbotron-bg: 15,75,14;
+  --jumbotron-bg-fall: 65,225,64;
+  --copyright-bg: 0,0,0;
+  --link-color: 66,139,202;
+  --footer-link-color: 32,32,32;
   --nlink-col: black;
-  --jumbotron-bg: rgba(75,235,74,.4);
-  --footer-bg: #eee;
-  --link-color: #428bca;
   --text-color: #333;
+  --footer-text-color: 255,255,255;
   --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;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 /* global */
@@ -16,7 +28,7 @@ body {
   color: var(--text-color);
 }
 a {
-  color: var(--link-color);
+  color: rgb(var(--link-color));
   text-decoration: none;
 }
 
@@ -39,6 +51,11 @@ a {
 .nlogo {
   height: 40px;
 }
+.navlinks {
+  display: flex;
+  justify-content: space-around;
+  fkex-wrap: nowrap;
+}
 .nlink {
   text-decoration: none;
   color: var(--nlink-col);
@@ -46,21 +63,34 @@ a {
 
 /* main */
 .container {
-  margin-top: 51px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+  margin: 50px 0 0 0;
   padding: 0;
   width: 100%; 
   margin-left: 0;
   margin-right: 0;
-  position: static;
+  min-height: 100%;
+}
+.main {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
 }
 
 /* jumbotron */
 .jumbotron {
-  background: var(--jumbotron-bg);
+  position: relative;
+  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);
+  color: white;
+  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;
@@ -80,10 +110,19 @@ a {
   flex-basis: 30%;
   height: 105px;
   background-color: #fff;
+  border-radius: var(--box-round);
+  -webkit-border-radius: var(--box-round);
+  -moz-border-radius: var(--box-round);
 }
-.box:hover, .box:active {
+.box:hover,
+.box:active {
   background-color: var(--box-hover-color);
 }
+.box-center {
+  margin-top: 22.5px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
 .title {
   text-align: center;
 }
@@ -116,21 +155,107 @@ p.art-link {
   margin-top: 0;
 }
 
+/* help */
+.hmain {
+  display: flex;
+  flex-wrap: wrap;
+  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 */
 .footer {
-  background: var(--footer-bg);
-  width: device-width;
-  margin: 0;
-  padding: 0;
+  background: rgba(var(--jumbotron-bg),.6);
+  color: rgba(var(--footer-text-color),.9);
+  margin-top: 1em;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: space-between;
   align-items: flex-start;
+  box-shadow: 0 -3px 5px rgba(0,0,0, 0.36);
+  -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);
+}
+.footerchild {
+  margin-top: 0.5em;
+  padding-left: 0.5em;
+}
+.footer a {
+  color: rgb(var(--footer-link-color));
+}
+@media all and (max-width: 500px) {
+  .footer {
+    flex-direction: column;
+  }
+  .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;
 }
-.footerline {
-  border-right: 1px solid #000;
-  height: 100%;
+.copyright {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(var(--copyright-bg),.5);
+  height: 31px;
+  color: rgba(var(--footer-text-color),.9);
+}
+a.copyright {
+  background: rgba(var(--copyright-bg),.5);
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file