X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/blobdiff_plain/d645b495e0052c771621f8b0a8ba0d6ed0bec338..6ad815ccb2e27257cfe0897cec0d8470a685bb73:/css/mock1.css diff --git a/css/mock1.css b/css/mock1.css index cd7a297d4..3e77b1ee7 100644 --- a/css/mock1.css +++ b/css/mock1.css @@ -3,12 +3,12 @@ --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; + --link-color: 66,139,202; + --footer-link-color: 255,255,255; --nlink-col: black; --text-color: #333; - --footer-text-color: #fff; + --footer-text-color: 255,255,255; --border-color: 0,0,0; --footer-border-color: 255,255,255; --box-hover-color: #eee; @@ -24,25 +24,14 @@ /* global */ body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: 'Open Sans'; color: var(--text-color); } a { - color: var(--link-color); + color: rgb(var(--link-color)); text-decoration: none; } -/* order */ -.jumbotron { - order: 0; -} -.navkinks { - order:1; -} -.main { - order: 2; -} - /* navbar */ .navbar { width: 100%; @@ -77,14 +66,12 @@ a { margin: 50px 0 0 0; padding: 0; width: 100%; - margin-left: 0; - margin-right: 0; - display: flex; - flex-direction: column; - fkex-wrap: wrap; - justify-content: space-between; min-height: 100%; } +.main { + margin-left: 0.5em; + /*margin-right: 0.5em;*/ +} /* jumbotron */ .jumbotron { @@ -94,7 +81,7 @@ a { 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); @@ -105,21 +92,20 @@ a { } .child { text-align: center; + margin-bottom: 0.5em; } .box-container { display: flex; flex-wrap: wrap; justify-content: space-around; - align-items: center; + align-items: stretch; } .box { text-align: center; text-decoration: none; color: var(--text-color); margin-bottom: 5px; - border: 1px solid rgb(var(--border-color)); flex-basis: 30%; - height: 105px; background-color: #fff; border-radius: var(--box-round); -webkit-border-radius: var(--box-round); @@ -129,10 +115,8 @@ a { .box:active { background-color: var(--box-hover-color); } -.box-center { - margin-top: 22.5px; - margin-left: 5px; - margin-right: 5px; +.fa-users { + margin-top: 5px; } .title { text-align: center; @@ -171,10 +155,11 @@ p.art-link { display: flex; flex-wrap: wrap; justify-content: space-around; + align-items: stretch; } a.hchild { color: var(--text-color); - height: 40px; + /*height: 40px;*/ width: 95%; text-align: center; border-top: 1px solid rgba(var(--border-color),.6); @@ -207,21 +192,37 @@ a.hchild:active { /* footer */ .footer { - background: rgb(var(--footer-bg)); - color: var(--footer-text-color); - 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: nowrap; justify-content: space-between; align-items: flex-start; -/* -webkit-border-top-left-radius: var(--box-round); + 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);*/ + border-top-right-radius: var(--box-round); +} +.footerchild { + margin-top: 0.5em; +} +.footer a { + color: rgb(var(--footer-link-color)); +} +.footerchild ul, +.footerchild ul ul { + margin: 0; + margin-left: 0.5em; + margin-right: 0.5em; + padding: 0; + list-style-type: none; +} +.footerchild ul ul { + padding-left: 2em; } @media all and (max-width: 500px) { .footer { @@ -234,23 +235,31 @@ a.hchild:active { .footerchild:last-child { border: none; } -} -.footerchild ul, -.footerchild ul ul { - margin: 0; - padding: 0; - list-style-type: none; -} -.footerchild ul ul { - padding-left: 2em; + .footerchild ul li:last-child { + margin-bottom: 0.5em; + } } .footer h2, .footer h3 { -margin: 0; -} -.footer .footerchild p { margin: 0; + margin-left: 0.5em; + margin-right: 0.5em; +} +.fkex-right { + align-self: flex-end; } .copyright { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; background: rgba(var(--copyright-bg),.5); - height: 50px; + height: 31px; + color: rgba(var(--footer-text-color),.9); +} +a.copyright { + background: rgba(var(--copyright-bg),.5); + margin-bottom: 0; + margin-top: 0; + margin-left: 0.5em; + margin-right: 0.5em; } \ No newline at end of file