X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/blobdiff_plain/6d93c0d266fc6eabd5e296c9341757c1b9c9d180..f1fc276a3ecc98c348a48a610cdfd130eec40bb2:/css/mock1.css diff --git a/css/mock1.css b/css/mock1.css index 893b25b9b..c2396b502 100644 --- a/css/mock1.css +++ b/css/mock1.css @@ -28,12 +28,13 @@ padding: 0; box-sizing: border-box; } - /* global */ body { font-family: 'Open Sans'; color: var(--text-color); font-size: 14px; + min-height: 100vh; + height: auto; } a { @@ -75,37 +76,32 @@ a { /* main */ .container { - margin: 50px 0 0; - padding: 0; + padding: 50px 0 0; width: 100%; - min-height: 100%; + min-height: 70vh; } .main { margin-left: .5em; -/*margin-right: 0.5em;*/ + margin-top: 1em; } /* jumbotron */ .jumbotron { position: relative; width: 100%; + margin-top: -16px; background: #000; background: var(--jumbotron-bg); box-shadow: 0 3px 5px rgba(150,150,150,.36); color: var(--jumbotron-text-color); - 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; - margin-bottom: .5em; + margin: .5em; + font-size: 32px; + line-height: 48px; } .box-container { @@ -121,6 +117,7 @@ a { color: var(--text-color); margin-bottom: 5px; flex-basis: 30%; + border: 1px solid rgba(var(--border-color), 0.39); background-color: #fff; border-radius:  var(--box-round); -webkit-border-radius: var(--box-round); @@ -150,14 +147,15 @@ h1 { div.art { border-bottom: 1px solid rgba(var(--border-color),.3); + } - div.art:last-child { border-bottom: none; } -h3.art { +b.art { margin-bottom: 0; + font-size: 18px; } p.art { @@ -169,11 +167,13 @@ p.art-ingress { margin: 0; } -p.art-date { +.art-date { color: #ccc; margin: 0; } - +p.heading { + white-space: nowrap; +} p.art-link { margin-top: 0; } @@ -225,18 +225,13 @@ a.hchild:hover,a.hchild:active { .footer { background: var(--jumbotron-bg); color: rgba(var(--footer-text-color),.9); - margin-top: 1em; + margin-top: 0em; display: flex; flex-wrap: nowrap; + min-height: 30vh; justify-content: space-between; align-items: flex-start; box-shadow: 0 -3px 5px rgba(150,150,150,.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 { @@ -247,16 +242,15 @@ a.hchild:hover,a.hchild:active { color: #000; } -.footerchild ul,.footerchild ul ul { - margin: 0; - margin-left: .5em; - margin-right: .5em; - padding: 0; +.footerchild ul, +.footerchild ul ul { + margin-left: 10px; + margin-right: 10px; list-style-type: none; } .footerchild ul ul { - padding-left: 2em; + padding-left: 30px; } @media all and (max-width: 500px) { @@ -276,20 +270,21 @@ a.hchild:hover,a.hchild:active { .footerchild ul li:last-child { margin-bottom: .5em; } + .hdn { + display: none; + } } .footer h2,.footer h3 { - margin: 0; - margin-left: .5em; - margin-right: .5em; -} - -.fkex-right { - align-self: flex-end; + margin-left: 10px; + margin-right: 10px; } .copyright { display: flex; + position: fixed; + bottom: 0; + width: 100vw; flex-wrap: nowrap; justify-content: space-between; align-items: center; @@ -304,4 +299,4 @@ a.copyright { margin-top: 0; margin-left: .5em; margin-right: .5em; -} \ No newline at end of file +}