chore: visually unify the different pages

embedding the webfonts here to avoid google tracking and having to add a cookie notice.
chrisnewtn · Feb 20, 2024 · 72728a7 · 72728a7
1 parent 255b5eb
commit 72728a7
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 103 deletions.
diff --git a/pages/index.html b/pages/index.html
@@ -7,20 +7,24 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <header>
-    <section class="business-card">
-      <h1>Chris Newton</h1>
-      <p>Works on<br> contingency<span class="punctuation">?</span></p>
-      <p class="no-money-down">No<span class="punctuation">,</span> money down<span class="punctuation">!</span></p>
+  <header class="site-wide">
+    <div class="banner">
+      <h1 class="logo">Chris Newton</h1>
       <a href="https://github.com/chrisnewtn" rel="me">
         <picture class="social">
           <source srcset="assets/github-mark-white.svg" media="(prefers-color-scheme: dark)">
           <img src="assets/github-mark.svg" alt="The GitHub Octocat logo">
         </picture>
       </a>
-    </section>
+    </div>
+    <nav>
+      <ul>
+        <li>About</li>
+        <li><a href="posts/index.html">Posts</a></li>
+      </ul>
+    </nav>
   </header>
-  <main>
+  <main class="home">
     <div class="under-construction">
       <div class="inner">Under Construction</div>
     </div>

diff --git a/pages/posts.css b/pages/posts.css
@@ -1,46 +1,3 @@
-header.site-wide {
-  font-family: var(--serif);
-}
-.banner {
-  font-weight: 100;
-  display: flex;
-  height: 4rem;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: solid thin var(--primary-text);
-  padding: 0 var(--site-margin);
-}
-.banner .logo {
-  margin: 0;
-}
-header > nav {
-  border-bottom: solid thin var(--primary-text);
-}
-header > nav > ul {
-  display: flex;
-  list-style: none;
-  padding: 0 var(--site-margin);
-  margin: 0;
-}
-header > nav > ul > li {
-  display: inline-block;
-  padding: 1rem;
-}
-header > nav > ul > li:first-child {
-  padding-left: 0;
-}
-header > nav > ul > li > a {
-  color: var(--primary-text);
-  text-decoration-color: transparent;
-  transition: text-decoration-color .1s ease-in;
-}
-header > nav > ul > li > a:visited {
-  color: var(--primary-text);
-}
-header > nav > ul > li > a:hover {
-  text-decoration-color: inherit;
-}
-
 main > article {
   margin: var(--site-margin);
   font-family: var(--serif);

diff --git a/pages/posts/index.html b/pages/posts/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title></title>
+  <title>Posts</title>
   <link rel="stylesheet" href="../style.css">
   <link rel="stylesheet" href="../posts.css">
 </head>

diff --git a/pages/style.css b/pages/style.css
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Noto Serif';
+  src: local('Noto Serif'), url('assets/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype');
+}
+
 * {
   box-sizing: border-box;
 }
@@ -14,6 +19,46 @@ a:visited {
   color: var(--link-visited);
 }
 
+.banner {
+  font-weight: 100;
+  display: flex;
+  height: 4rem;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid thin var(--primary-text);
+  padding: 0 var(--site-margin) 0 var(--site-margin);
+}
+.banner .logo {
+  margin: 0 0 .2rem 0; /* attempt at visually aligning it vertically */
+}
+header > nav {
+  border-bottom: solid thin var(--primary-text);
+}
+header > nav > ul {
+  display: flex;
+  list-style: none;
+  padding: 0 var(--site-margin);
+  margin: 0;
+}
+header > nav > ul > li {
+  display: inline-block;
+  padding: 1rem;
+}
+header > nav > ul > li:first-child {
+  padding-left: 0;
+}
+header > nav > ul > li > a {
+  color: var(--primary-text);
+  text-decoration-color: transparent;
+  transition: text-decoration-color .1s ease-in;
+}
+header > nav > ul > li > a:visited {
+  color: var(--primary-text);
+}
+header > nav > ul > li > a:hover {
+  text-decoration-color: inherit;
+}
+
 body {
   /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
   --neutral-50: #fafafa;
@@ -28,11 +73,9 @@ body {
   --red-700: #b91c1c;
   --amber-400: #fbbf24;
 
-  --serif: Georgia, Times, 'Times New Roman', serif;
-
   --site-margin: 2rem;
 
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: 'Noto Serif', serif;
 
   color: var(--primary-text);
   background-color: var(--bg-color);
@@ -48,6 +91,13 @@ body {
     ". footer .";
 }
 
+@media (max-width: 576px) {
+  body {
+    grid-template-columns: 0 100% 0;
+    --site-margin: 1rem;
+  }
+}
+
 body > header {
   grid-area: header;
   text-align: center;
@@ -62,60 +112,16 @@ body > footer {
   text-align: center;
 }
 
-.business-card .social {
-  display: inline-block;
-  padding: .5rem;
-  margin: 0 .5rem .5rem .5rem
+main.home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 .social > img {
   width: 2rem;
 }
 
-.business-card {
-  font-family: var(--serif);
-  line-height: 1rem;
-  text-transform: uppercase;
-  margin: 1rem;
-  padding: 0 .25rem;
-  position: relative;
-  display: inline-block;
-  border: solid thin var(--primary-text);
-  outline: solid thin var(--primary-text);
-  outline-offset: 1px;
-}
-
-.business-card > h1 {
-  margin: 1rem 0 1.5rem 0;
-  font-weight: normal;
-  padding: 0 2rem .25rem 2rem;
-  border-bottom: solid thin var(--primary-text);
-  position: relative;
-}
-
-.business-card > h1::after {
-  content: 'ESQ.';
-  font-size: small;
-  position: absolute;
-  display: block;
-  float: left;
-  bottom: -1rem;
-  right: 2rem;
-}
-
-.business-card > p {
-  margin: 1.5rem 0;
-}
-.business-card .no-money-down {
-  margin-bottom: .5rem;
-}
-
-.business-card .punctuation {
-  font-family: cursive;
-  font-weight: bold;
-  font-size: 1.5rem;
-  color: var(--red-600);
-}
-
 .under-construction {
   background-image: repeating-linear-gradient(
     -45deg,
@@ -145,6 +151,8 @@ body > footer {
 }
 
 .under-construction > .inner {
+  font-family: sans;
+  padding: 0 2rem;
   height: 8rem;
   font-size: 2rem;
   text-transform: uppercase;

diff --git a/public/assets/NotoSerif-VariableFont_wdth,wght.ttf b/public/assets/NotoSerif-VariableFont_wdth,wght.ttf