diff --git a/prototype/style.css b/prototype/style.css index f54b316..b54e31e 100644 --- a/prototype/style.css +++ b/prototype/style.css @@ -113,11 +113,7 @@ header { padding: 1rem; } -@media screen and not (min-width: 70rem) { - aside { - margin-bottom: 1rem; - } - +@media screen and not (min-width: 67rem) { nav .buttonListWrap { position: relative; } @@ -142,15 +138,13 @@ header { transparent 0%, var(--background) 100%); } + + nav > .buttonListWrap:last-child { + margin-top: 1rem; + } } -@media screen and (min-width: 70rem) { - #contentWrap { - display: grid; - grid-gap: 1rem; - grid-template-columns: 24rem auto; - } - +@media screen and (min-width: 67rem) { nav { display: grid; grid-grid: 1rem; @@ -162,6 +156,20 @@ header { } } +@media screen and not (min-width: 60rem) { + aside { + margin-bottom: 1rem; + } +} + +@media screen and (min-width: 60rem) { + #contentWrap { + display: grid; + grid-gap: 2rem; + grid-template-columns: 24rem auto; + } +} + @media screen and (min-width: 80rem) { #contentWrap { grid-template-columns: 36rem auto; @@ -176,12 +184,16 @@ header { .files tr { display: grid; - grid-template-columns: 30% auto 30%; + grid-template-columns: 30% auto min-content; + gap: 1rem; } .files td { border: none; padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .files td:last-child {