1 files changed, 89 insertions, 0 deletions
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
new file mode 100644
index 0000000..f72c9af
--- /dev/null
+++ b/stylesheets/quatuor.css
@@ -0,0 +1,89 @@
+@media (min-width: 40em) {
+    main {
+        display: flex;
+    }
+
+    main div {
+        padding: 2%;
+    }
+
+    main #photos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+
+        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 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 > *:nth-of-type(1) {
+        top: -0.4em;
+    }
+
+    #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(4) {
+        top: 0.4em;
+    }
+
+    #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;
+    }
+}