+
Elizabeth Pankratz
about
diff --git a/style.css b/style.css
index 2901dd9..e0277e6 100644
--- a/style.css
+++ b/style.css
@@ -20,7 +20,6 @@ body {
width: 100%;
height: 100vh;
display: grid;
- /* FIXME: */
grid-template-columns: [gutter-left] 1fr [content-column] max(16em) [gutter-right] 1fr;
grid-template-rows: [header] 1fr [center] 1fr [footer] 1.75fr;
font-family: 'Fira Sans', sans-serif;
@@ -34,47 +33,51 @@ body {
.monogram {
display: grid;
grid-template-columns: 50% 50%;
- line-height: 0.9;
- font-size: 8rem;
}
-.monogram .triangle:hover {
- color: hsl(50, 90%, 50%);
- cursor: pointer; /* FIXME: this is a temporary move because the triangles are unicode characters right now */
+.triangle {
+ display: block; /* Because these are
tags */
+ background-color: black;
+ position: relative; /* Required for the absolute positioning of the triangle-label */
}
-.monogram .triangle-label {
- /* TODO */
- font-size: 1rem;
- margin-top: -1rem;
- margin-left: 1rem;
+.triangle-bottom {
+ clip-path: polygon(0 0, 0 100%, 100% 100%);
+}
+
+.triangle-top {
+ clip-path: polygon(0 0, 0 100%, 100% 0);
+}
+
+.triangle img {
+ display: block; /* Prevents the annoying inline-block gap after */
+ filter: grayscale(100%);
+ mix-blend-mode: overlay;
+ width: 100%;
+ height: 100%;
+}
+
+.triangle:hover {
+ background-color: hsl(50, 90%, 50%);
+}
+
+.triangle-label {
+ position: absolute;
color: black;
- z-index: 2;
+ bottom: 0.5rem;
+ left: 0.5rem;
}
-.monogram .triangle-label.multiline {
+.triangle-label.multiline {
margin-top: -2rem;
}
-.monogram .triangle-top .triangle-label {
- margin-top: -5.5rem;
+.triangle-top .triangle-label {
+ top: 0.5rem;
}
h1 {
font-weight: bold;
font-size: 1.7rem;
margin-top: 1em;
-}
-
-#cliptest {
- width: 200px;
- height: 200px;
- clip-path: polygon(0 0, 0 100%, 100% 100%);
- background: hsl(50, 90%, 50%);
-}
-
-#cliptest img {
- filter: grayscale(100%);
- /* mix-blend-mode: multiply; */
- mix-blend-mode: overlay;
}
\ No newline at end of file
