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

Initial sketch

This commit is contained in:
n loewen 2023-08-05 10:31:08 +01:00
commit b4f16efe37
4 changed files with 135 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.DS_Store
.vscode

46
index.html Normal file
View File

@ -0,0 +1,46 @@
<!doctype HTML>
<html>
<head>
<title> Quilt logo sketch </title>
<meta charset="utf-8">
<meta name="viewport" content="device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- TODO: maybe don't use google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="monogram">
<div class="column">
<div class="triangle triangle-bottom">◣
<div class="triangle-label">Linguist</div>
</div>
<div class="triangle triangle-bottom">◣
<div class="triangle-label">Quilter</div>
</div>
<div class="triangle triangle-bottom">◣
<div class="triangle-label">Blog</div>
</div>
</div>
<div class="column">
<div class="triangle triangle-bottom">◣
<div class="triangle-label multiline">Applied Statistician</div>
</div>
<div class="triangle triangle-top">◤
<div class="triangle-label">Knitter</div>
</div>
</div>
</div>
<div class="heading">
<h1> Elizabeth Pankratz </h1>
<a href="#">about</a> &emsp;
<a href="#">blog</a> &emsp;
<a href="#">contact</a> &emsp;
</div>
</div>
</body>
</html>

82
style.css Normal file
View File

@ -0,0 +1,82 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*
@font-face {
font-family: "Dinish";
src: url("./fonts/Dinish/Dinish-Regular.otf");
font-weight: normal;
}
@font-face {
font-family: "Dinish Condensed";
src: url("./fonts/DinishCondensed/DinishCondensed.otf") format("opentype");
font-weight: normal;
}
@font-face {
font-family: "Dinish Condensed";
src: url("./fonts/DinishCondensed/DinishCondensed-Bold.otf") format("opentype");
font-weight: bold;
}
*/
body {
/* font-family: 'Dinish', sans-serif; */
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;
}
.main {
grid-column: content-column / content-column;
grid-row: center / center;
}
.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 */
}
.monogram .triangle-label {
/* TODO */
font-size: 1rem;
margin-top: -1rem;
margin-left: 1rem;
color: black;
z-index: 2;
}
.monogram .triangle-label.multiline {
margin-top: -2rem;
}
.monogram .triangle-top .triangle-label {
margin-top: -5.5rem;
}
h1 {
font-weight: bold;
font-size: 1.7rem;
margin-top: 1em;
}
/* FIXME temp: */
a {
font-family: 'Fira Sans';
}

5
todo.md Normal file
View File

@ -0,0 +1,5 @@
# To do
- [x] Switch font to Fira Sans
- [ ] ? Debug lagging hover states
- [ ] Try with images instead of characters