n
/
elizabeth-website-sketch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish WIP - Change all the triangles into hoverable link-pictures

This commit is contained in:
n loewen 2023-09-20 13:14:56 -07:00
parent 7aa4f4612e
commit 9566772850
2 changed files with 53 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -8,33 +8,39 @@
</head>
<body>
<div id="cliptest">
<img src="https://placekitten.com/200/200">
</div>
<div class="main">
<div class="monogram">
<div class="column">
<div class="triangle triangle-bottom">◣
<a href="#" class="triangle triangle-bottom">
<img src="https://placekitten.com/200/200">
<div class="triangle-label">Linguist</div>
</div>
<div class="triangle triangle-bottom">◣
<div class="triangle-label">Quilter</div>
</div>
<div class="triangle triangle-bottom">◣
</a>
<a href="#" class="triangle triangle-bottom">
<img src="https://placekitten.com/200/200">
<div class="triangle-label">Quilter</div>
</a>
<a href="#" class="triangle triangle-bottom">
<img src="https://placekitten.com/200/200">
<div class="triangle-label">Blog</div>
</div>
</a>
</div>
<div class="column">
<div class="triangle triangle-bottom">◣
<a href="#" class="triangle triangle-bottom">
<img src="https://placekitten.com/200/200">
<div class="triangle-label multiline">Applied Statistician</div>
</div>
<div class="triangle triangle-top">◤
</a>
<a href="#" class="triangle triangle-top">
<img src="https://placekitten.com/200/200">
<div class="triangle-label">Knitter</div>
</div>
</a>
</div>
</div>
<div class="heading">
<h1> Elizabeth Pankratz </h1>
<a href="#">about</a> &emsp;

59
style.css
View File

@ -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 <a> 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;
}