Merge pull request #113 from CodeWithAloha/subtsk-73-setting-base-typ…

…eface Subtask 73: setting base typeface
CodeWithAloha · Feb 6, 2024 · 26a190d · 26a190d
2 parents bd45c68 + df0486d
commit 26a190d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -36,6 +36,9 @@
 	<!-- Load Material icons -->
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 
+	<!-- Typeface styling -->
+	<link href="https://api.fontshare.com/v2/css?f[]=red-hat-display@700&f[]=zodiak@400&display=swap" rel="stylesheet">
+
 	<!-- Google tag (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZTZX623WY7"></script>
 	<script>
@@ -50,7 +53,7 @@
 	<script src="scripts/map.js"></script>
 </head>
 
-<body class="helvetica">
+<body>
 	<div id="map" class="vw-100 vh-100"></div>
 
 	<div class="pa3 shadow-1 dn bg-white" id="activeAreaCalculator"></div>

diff --git a/style.css b/style.css
@@ -1,12 +1,21 @@
 body {
   padding: 0;
   margin: 0;
+  font-family: 'Zodiak', serif;
+  font-size: 16px;
+  letter-spacing: 0.02em;
 }
 /* html, body, #map {
   height: 100%;
   width: 100vw;
 } */
 
+h2 {
+  font-family: 'Red Hat Display', sans-serif;
+  font-size: 20px;
+  letter-spacing: 0.03em;
+}
+
 #sidebar {
   z-index: 999 !important;
   position: absolute;
@@ -105,6 +114,12 @@ hr {
   max-width: 450px !important;
 }
 
+#driver-popover-item * {
+  font-family: 'Zodiak', serif !important;
+  font-size: 16px !important;
+  letter-spacing: 0.02em;
+}
+
 .bb-dotted {
   border-bottom: 1px dotted #333;
 }