Hopefully fixing pr problems

diff --git a/css/mock1.css b/css/mock1.css
index cabbe860b1b4cf6655acc2650069bfaa8c01af36..bcb1310c0888c2ddf5e16b06664ea8d006cf4b8d 100644 (file)
--- a/css/mock1.css
+++ b/css/mock1.css
@@ -1,12 +1,15 @@
 /* vars */
 :root {
   --navbar-bg: white;
 /* vars */
 :root {
   --navbar-bg: white;

-  --nlink-col: black;

   --jumbotron-bg: rgba(75,235,74,.4);
   --jumbotron-bg: rgba(75,235,74,.4);

-  --footer-bg: #eee;
+  --footer-bg: 36,62,22;
+  --copyright-bg: 0,0,0;

   --link-color: #428bca;
   --link-color: #428bca;

+  --nlink-col: black;

   --text-color: #333;
   --text-color: #333;

+  --footer-text-color: #fff;

   --border-color: 0,0,0;
   --border-color: 0,0,0;

+  --footer-border-color: 255,255,255;

   --box-hover-color: #eee;
   --box-round: 10px;
 }
   --box-hover-color: #eee;
   --box-round: 10px;
 }


@@ -21,6 +24,17 @@ a {
   text-decoration: none;
 }
 
   text-decoration: none;
 }
 

+/* order */
+.jumbotron {
+  order: 0;
+}
+.navkinks {
+  order:1;
+}
+.main {
+  order: 2;
+}
+

 /* navbar */
 .navbar {
   width: 100%;
 /* navbar */
 .navbar {
   width: 100%;


@@ -40,6 +54,11 @@ a {
 .nlogo {
   height: 40px;
 }
 .nlogo {
   height: 40px;
 }

+.navlinks {
+  display: flex;
+  justify-content: space-around;
+  fkex-wrap: nowrap;
+}

 .nlink {
   text-decoration: none;
   color: var(--nlink-col);
 .nlink {
   text-decoration: none;
   color: var(--nlink-col);


@@ -55,13 +74,17 @@ a {
   width: 100%; 
   margin-left: 0;
   margin-right: 0;
   width: 100%; 
   margin-left: 0;
   margin-right: 0;

-  position: static;
+  display: flex;
+  flex-direction: column;
+  fkex-wrap: wrap;
+  justify-content: space-between;

 }
 
 /* jumbotron */
 .jumbotron {
   background: var(--jumbotron-bg);
   width: 100%;
 }
 
 /* jumbotron */
 .jumbotron {
   background: var(--jumbotron-bg);
   width: 100%;

+  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);
   -webkit-border-bottom-right-radius: var(--box-round);
   -webkit-border-bottom-left-radius: var(--box-round);
   -moz-border-radius-bottomright: var(--box-round);


@@ -87,13 +110,19 @@ a {
   flex-basis: 30%;
   height: 105px;
   background-color: #fff;
   flex-basis: 30%;
   height: 105px;
   background-color: #fff;

-  border-radius: var(--box-round);
+  border-radius: var(--box-round);

   -webkit-border-radius: var(--box-round);
   -moz-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);
 }
   background-color: var(--box-hover-color);
 }

+.box-center {
+  margin-top: 22.5px;
+  margin-left: 5px;
+  margin-right: 5px;
+}

 .title {
   text-align: center;
 }
 .title {
   text-align: center;
 }


@@ -141,7 +170,8 @@ a.hchild {
   border-left: 1px solid rgba(var(--border-color),.6);
   border-right: 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 {
+a.hchild:hover,
+a.hchild:active {

   background-color: var(--box-hover-color);
 }
 .hchild:first-child {
   background-color: var(--box-hover-color);
 }
 .hchild:first-child {


@@ -166,12 +196,13 @@ a.hchild:hover, a.hchild:active {
 
 /* footer */
 .footer {
 
 /* footer */
 .footer {

-  background: var(--footer-bg);
+  background: rgb(var(--footer-bg));
+  color: var(--footer-text-color);

   width: device-width;
   margin: 0;
   padding: 0;
   display: flex;
   width: device-width;
   margin: 0;
   padding: 0;
   display: flex;

-  flex-wrap: wrap;
+  flex-wrap: nowrap;

   justify-content: space-between;
   align-items: flex-start;
 /*  -webkit-border-top-left-radius: var(--box-round);
   justify-content: space-between;
   align-items: flex-start;
 /*  -webkit-border-top-left-radius: var(--box-round);


@@ -181,10 +212,34 @@ a.hchild:hover, a.hchild:active {
   border-top-left-radius: var(--box-round);
   border-top-right-radius: var(--box-round);*/
 }
   border-top-left-radius: var(--box-round);
   border-top-right-radius: var(--box-round);*/
 }

-.footer .footerchild p {
+@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;
   margin: 0;

+  padding: 0;
+  list-style-type: none;

 }
 }

-.footerline {
-  border-right: 1px solid #000;
-  height: 100%;
+.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