feat(styles): Recoleta font + real wave for main title

1 files changed, 41 insertions, 2 deletions

diff --git a/src/styles/main.css b/src/styles/main.css
index e61c05d..fb5aa62 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,3 +1,5 @@
+/* font */
+
 @font-face {
 	font-family: "IBM Plex Mono";
 	src: url("/static/fonts/ibm-plex-mono-medium-normal.woff2") format("woff2");
@@ -26,6 +28,22 @@
 	font-weight: 600;
 }
 
+@font-face {
+	font-family: "Recoleta";
+	src: url("/static/fonts/recoleta-medium-normal.woff") format("woff");
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: "Recoleta";
+	src: url("/static/fonts/recoleta-bold-normal.woff") format("woff");
+	font-style: normal;
+	font-weight: 600;
+}
+
+/* page */
+
 * {
 	font-family: "IBM Plex Mono", monospace;
 }
@@ -35,6 +53,8 @@ body {
 	max-width: 96ch;
 }
 
+/* title */
+
 h1 {
 	font-size: 2em;
 	margin-top: 1em;
@@ -44,10 +64,19 @@ header h1 {
 	margin-bottom: 30vh;
 }
 
-h1 > a {
-	text-decoration-style: wavy;
+header h1 a {
+	text-decoration: none;
+	font-size: 2em;
+	font-family: "Recoleta";
+	letter-spacing: .08em;
+	background-image: url("/static/underline.svg");
+	background-position-y: .5em;
+	background-repeat: repeat-x;
+	background-size: auto;
 }
 
+/* elements */
+
 a, a:hover, a:visited {
 	color: blue;
 }
@@ -83,3 +112,13 @@ img {
 .img-item:not(:last-child) {
 	margin-right: 1em;
 }
+
+/* mobile */
+@media only screen and (max-width: 72ch) {
+
+	/* title */
+
+	header h1 a {
+		font-size: 13vw;
+	}
+}