From 956677285093f48af141839bc4640fff347beda3 Mon Sep 17 00:00:00 2001 From: n loewen Date: Wed, 20 Sep 2023 13:14:56 -0700 Subject: [PATCH] Finish WIP - Change all the triangles into hoverable link-pictures --- index.html | 38 ++++++++++++++++++++--------------- style.css | 59 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 53 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index e859f5f..736ca8f 100644 --- a/index.html +++ b/index.html @@ -8,33 +8,39 @@ - -
- -
-
+
-
◣ + +
Linguist
-
-
◣ -
Quilter
-
-
◣ + + + + +
Quilter
+ + + +
Blog
-
+
+
-
◣ + +
Applied Statistician
-
-
◤ + + + +
Knitter
-
+
+

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