diff options
| -rw-r--r-- | quatuor.css | 129 |
1 files changed, 76 insertions, 53 deletions
diff --git a/quatuor.css b/quatuor.css index 8b044f1..f72c9af 100644 --- a/quatuor.css +++ b/quatuor.css @@ -1,66 +1,89 @@ -main { - display: flex; -} +@media (min-width: 40em) { + main { + display: flex; + } -main div { - padding: 2%; -} + main div { + padding: 2%; + } -main #photos { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; + main #photos { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; - position: sticky; - top: 0; - max-height: 80vh; -} + position: sticky; + top: 0; + max-height: 80vh; + } -#photos > * { - position: relative; - width: 6em; - height: 100%; - background-color: #ddd; /* Workaround for chromium bug#377847. */ - border-color: #ddd; - border-width: 0.3em; - border-style: solid; - border-radius: 0.3em; - overflow: hidden; -} + #photos > * { + position: relative; + width: 6em; + height: 100%; + background-color: #ddd; /* Workaround for chromium bug#377847. */ + border-color: #ddd; + border-width: 0.3em; + border-style: solid; + border-radius: 0.3em; + overflow: hidden; + } -#photos img.portrait { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - filter: grayscale(1); - transition: filter 1s, transform 1s; -} + #photos img.portrait { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + filter: grayscale(1); + transition: filter 1s, transform 1s; + } -#photos img.portrait:hover { - filter: none; - transform: scale(1.05); -} + #photos img.portrait:hover { + filter: none; + transform: scale(1.05); + } -#photos > *:nth-of-type(1) { - top: -0.4em; -} + #photos > *:nth-of-type(1) { + top: -0.4em; + } -#photos > *:nth-of-type(2) { - left: -1.6em; - top: 1.2em; -} + #photos > *:nth-of-type(2) { + left: -1.6em; + top: 1.2em; + } -#photos > *:nth-of-type(3) { - left: 1.6em; - top: -1.2em; -} + #photos > *:nth-of-type(3) { + left: 1.6em; + top: -1.2em; + } -#photos > *:nth-of-type(4) { - top: 0.4em; + #photos > *:nth-of-type(4) { + top: 0.4em; + } + + #bio > *:first-child { + margin-top: 0; + } } -#bio > *:first-child { - margin-top: 0; +@media (max-width: 40em) { + #photos { + display: grid; + grid-template-columns: repeat(4, 20%); + justify-content: space-evenly; + width: 100%; + } + + #photos > * { + width: 100%; + height: 50vh; + } + + #photos img.portrait { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } } |