diff --git a/public/css/index.css b/public/css/index.css index 5f8e4e2..ac4219e 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -20,21 +20,23 @@ box-sizing: border-box; } -html, -body { +html { padding: 0; margin: 0 auto; min-height:100%; font-family: var(--font-family); color: var(--text-color); - max-width:1600px; -} -html { overflow-y: scroll; background: center bottom fixed repeat-x url("/img/dark-b10.png"), center top fixed url("/img/erratu18.png"); background-color:#120f2b; } +body { + max-width:1600px; + padding:8px; + margin: auto; +} + /* https://www.a11yproject.com/posts/how-to-hide-content/ */ .visually-hidden { clip: rect(0 0 0 0); @@ -84,7 +86,11 @@ a[href].header-anchor:focus, } .wrapper { - display:flex; + display:grid; + grid-template-columns: 320px 1fr 240px; + column-gap: 8px; + margin-bottom: 8px; + max-width: 100%; } header h1 a { @@ -102,7 +108,7 @@ h1 img { } header nav { - margin: 3px 12px; + margin-bottom: 8px; } header nav { @@ -158,7 +164,11 @@ main, box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.8); border-radius:6px; padding:8px; - margin:8px; +} + +.card, +ul > li.item { + margin-bottom: 8px; } main { @@ -261,16 +271,6 @@ ul.flex li, box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5); } -#more-info { - min-width:240px; - width:240px; -} - -#sidebar { - min-width:320px; - width:320px; -} - footer { text-align:right; margin:12px; @@ -281,9 +281,13 @@ table { border-collapse: collapse; } +.table-responsive { + overflow-x: auto; +} + th, td { border: 1px solid rgba(255,255,255,0.15); - padding: 3px; + padding: 3px 9px; } th { @@ -308,14 +312,25 @@ p > img:only-child { display: none; } +@media screen and (max-width: 1300px) and (min-width: 1000px) { + + .wrapper { + grid-template-columns: 220px 1fr 220px; + } + + #sidebar ul li li { + width:100%; + } + +} + @media screen and (max-width: 1000px) { html { width: 100%; } - #more-info, - #sidebar { - width: 100%; + .wrapper { + display: block; } @@ -340,8 +355,9 @@ p > img:only-child { justify-content: space-around; position: fixed; bottom:0; + left:0; height:48px; - width:100%; + width:100vw; background-color: white; box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.4); }