diff --git a/style.css b/style.css index b09d493..6bed698 100644 --- a/style.css +++ b/style.css @@ -35,7 +35,7 @@ header { justify-content: center; padding: 1em; - font-size: 1.5rem; + font-size: 1.5em; } header p { max-width: var(--width); @@ -50,7 +50,7 @@ header .arrow:hover { transform: scale(1.3) } main section { - margin-bottom: 10rem; + margin-bottom: 10em; padding: 1em; } @@ -97,6 +97,7 @@ main .team .list { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 2em; + grid-row-gap: 1em; } main .team figure { background-color: #fff; @@ -119,7 +120,9 @@ main .team figure label { main .articles .header { display: grid; grid-template-columns: 1fr 4fr; + grid-column-gap: 1em; align-items: baseline; + margin-bottom: 4em; border-bottom: 1px solid var(--color-blue); } @@ -186,3 +189,39 @@ footer img:hover { transform: scale(1.1) } transform: translate(0); } +@media only screen and (max-width: 1000px) { + + header { font-size: 1em } + header .arrow { height: 3em } + + main section { margin-bottom: 5em } + + main .quotations figure, + main .quotations figure blockquote { + margin-left: 0; + margin-right: 0; + } + main .quotations figure { padding: 1em } + main .quotations figure figcaption { + max-width: 100%; + text-align: left; + } + + main .team .list { + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 1em; + } + + main .articles .list { grid-template-columns: 1fr } + + footer { margin: 5em auto } + + .modal .content { + height: 100vh; + overflow-y: scroll; + overflow-x: hidden; + transform: translate(0); + } + +} +