commit b4f16efe37f4bf1e249f4348482b2e93720943f5 Author: n loewen Date: Sat Aug 5 10:31:08 2023 +0100 Initial sketch diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2608ec2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +.vscode \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bd112bb --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + Quilt logo sketch + + + + + + + + + + +
+
+
+
◣ +
Linguist
+
+
◣ +
Quilter
+
+
◣ +
Blog
+
+
+
+
◣ +
Applied Statistician
+
+
◤ +
Knitter
+
+
+
+
+

Elizabeth Pankratz

+ about   + blog   + contact   +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..01101f2 --- /dev/null +++ b/style.css @@ -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'; +} \ No newline at end of file diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..86cbdf6 --- /dev/null +++ b/todo.md @@ -0,0 +1,5 @@ +# To do + +- [x] Switch font to Fira Sans +- [ ] ? Debug lagging hover states +- [ ] Try with images instead of characters \ No newline at end of file