Merge pull request #13 from daniele-salvagni/ft/new-typeface

Feature: new typeface
daniele-salvagni · Jul 23, 2024 · fce0a57 · fce0a57
2 parents b49e558 + dc2c269
commit fce0a57
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 129 deletions.
diff --git a/public/fonts/Inconsolata-Bold.woff2 b/public/fonts/Inconsolata-Bold.woff2
diff --git a/public/fonts/Inconsolata-Light.woff2 b/public/fonts/Inconsolata-Light.woff2
diff --git a/public/fonts/Inconsolata-Regular.woff2 b/public/fonts/Inconsolata-Regular.woff2
diff --git a/public/fonts/Menlo-Regular.woff2 b/public/fonts/Menlo-Regular.woff2
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -21,9 +21,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->
-<link rel="preload" href="/fonts/Inconsolata-Bold.woff2" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/Inconsolata-Light.woff2" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/Inconsolata-Regular.woff2" as="font" type="font/woff" crossorigin />
+<link rel="preload" href="/fonts/Menlo-Regular.woff2" as="font" type="font/woff" crossorigin />
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -10,14 +10,15 @@ const today = new Date();
 </footer>
 <style>
   footer {
-    color: #d7cccc;
-    margin-top: auto;
-    padding: 1.75rem 5vw;
+    font-family: var(--ff-mono);
+    font-size: var(--fs-mono);
+    color: var(--gray-soft);
     text-align: center;
-    font-size: 0.85rem;
     display: block;
+    margin-top: auto;
+    padding: 1.75rem 5vw;
   }
   footer a {
-    color: #d7cccc;
+    color: var(--gray-soft);
   }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -31,29 +31,18 @@ import { SITE_TITLE } from '../consts';
   .logo a,
   .logo a:hover {
     display: block;
-    max-width: 3rem;
+    max-width: 2.64rem;
     margin: 0 auto;
     background: none;
   }
   .logo img {
     display: block;
     border-radius: 0;
-    /* transition: cubic-bezier(.57,.21,.69,2.25) 0.2s; */
     transition: ease-in 0.15s;
-    /* filter: drop-shadow(1px 1px 0px fuchsia) drop-shadow(-1px -1px 0px aqua); */
     animation: dropShadow 6s ease-in infinite;
   }
   .logo img:hover {
-    /* filter: drop-shadow(3px 2px 0px magenta) drop-shadow(-3px -2px 0px cyan); */
-    /* animation: none;
-    transition: ease-in 0.15s; */
-    /* transition: ease-in 0.15s; */
     filter: drop-shadow(3px 2px 0px magenta) drop-shadow(-3px -2px 0px cyan) !important;
-    /* filter: invert(0.5) sepia(1) saturate(65) hue-rotate(340deg); */
-    /* filter: invert(0.7); */
-
-    /* filter: none; */
-    /* transition: ease-in 1s; */
   }
 
   /* animate the drop shadow filter every few seconds */
@@ -75,7 +64,6 @@ import { SITE_TITLE } from '../consts';
 
   .internal-links {
     text-align: center;
-
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -91,73 +79,25 @@ import { SITE_TITLE } from '../consts';
 
   .internal-links a:hover {
     background: linear-gradient(90deg, magenta 0%, cyan 100%);
-    /* background: linear-gradient(90deg, rgb(226, 0, 226) 0%, rgb(0, 230, 230) 100%); */
     background-clip: text;
     -webkit-background-clip: text;
     color: rgba(0, 0, 0, 0);
-    /* color: orangered; */
-    /* background-color: moccasin; */
     animation: rainbow 2s ease-in-out infinite;
-    /* transition: color 0.2s ease-in-out; */
     background-size: 200% 200%;
     font-weight: 700;
-    /* filter:drop-shadow(1px 1px 0 rgba(242, 0, 0, 0.859)); */
-    /* filter: drop-shadow(3px 2px 0px magenta) drop-shadow(-3px -2px 0px cyan); */
-    /* color: palevioletred; */
-    /* color: magenta; */
-    /* border-bottom: 1px solid; */
   }
 
-  /* @keyframes rainbow {
-  0%{background-position:left}
-  50%{background-position:right}
-  100%{background-position:left}
-} */
-  /* .internal-links a:not(:last-child)::after {
-  	content: ' /';
-	} */
-
   nav {
+    font-family: 'Inconsolata', sans-serif;
+    font-family: var(--ff-mono);
+    font-size: var(--fs-mono);
     position: relative;
     overflow: hidden;
   }
-  /* nav a {
-		padding: 1em 0.5em;
-		font-weight: 400;
-		color: #fff;
-		color: var(--black);
-		border-bottom: 4px solid transparent;
-		text-decoration: none;
-	} */
-  /* nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-	nav a {
-		padding: 1em 0.5em;
-		color: var(--black);
-		border-bottom: 4px solid transparent;
-		text-decoration: none;
-	}
-	nav a.active {
-		text-decoration: none;
-		border-bottom-color: var(--accent);
-	} */
-  /* .social-links,
-	.social-links a {
-		display: flex;
-	}
-	@media (max-width: 720px) {
-		.social-links {
-			display: none;
-		}
-	} */
 
-  /* @media (max-width: 480px) { */
-  @media (max-width: 80px) {
+  /* @media (max-width: 480px) {
     .internal-links {
       justify-content: space-between;
     }
-  }
+  } */
 </style>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -49,23 +49,19 @@ const { title, description, pubDate, updatedDate, issue } = Astro.props;
 </BasePage>
 
 <style>
-  .prose {
-    margin: auto;
-    text-align: left;
-  }
   .title {
     margin-bottom: 3em;
     text-align: center;
     line-height: 1;
   }
   .title h1 {
     margin: 0 0 0.5em 0;
-    text-transform: uppercase;
   }
   .date {
+    color: var(--gray-soft);
+    font-family: var(--ff-mono);
+    font-size: var(--fs-mono);
     margin-bottom: 0.5em;
-    color: var(--gray-light);
-    font-size: 0.875em;
   }
   .last-updated-on {
     font-style: italic;

diff --git a/src/pages/b/index.astro b/src/pages/b/index.astro
@@ -61,6 +61,9 @@ const PAGE_DESCRIPTION =
   }
 
   .posts li time {
+    font-family: var(--ff-mono);
+    font-size: var(--fs-mono);
+    color: var(--gray-soft);
     white-space: nowrap;
   }
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -52,7 +52,7 @@ const SITE_DESCRIPTION = `Ciao ヾ(＾∇＾), I'm Daniele Salvagni, a Software
       <!-- concatenating br's like it's 1999 -->
       <br /><br />
       <div id="duck" style="text-align: center; position: relative;">
-        <img src="/img/duck.png" alt="duck" width="46px" />
+        <img src="/img/duck.png" alt="duck" width="42px" />
         <span class="quack">Quack!</span>
       </div>
     </main>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,46 +1,42 @@
 :root {
   --accent: #373737;
   --accent-dark: #000d8a;
-  --gray-lightest: #e6e6e6;
+  --off-white: #f9f9f9
   --white: #f4f4f4;
   --black: #000000;
-  --gray: hsl(40, 4%, 25%);
+  --gray-lightest: #e6e6e6;
+  --gray-soft: #d7cccc;
   --gray-light: #868686;
+  --gray: hsl(40, 4%, 25%);
   --gray-dark: 34, 41, 57;
   --gray-gradient: rgba(var(--gray-light), 50%), #fff;
-  --container-width: min(95vw, 42rem);
+  --container-width: min(95vw, 39rem);
   --heading: var(#222);
-  --text: #373737;
+  --text: #464646;
+  --ff: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --fs: 13px;
+  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  --fs-mono: 0.85em;
+  --ff-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
 }
 
 ::selection {
   background-color: #ffeaba;
 }
 
 @font-face {
-  font-family: 'Inconsolata';
-  src: url('/fonts/Inconsolata-Light.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inconsolata';
-  src: url('/fonts/Inconsolata-Regular.woff2') format('woff2');
+  font-family: 'Menlo';
+  src: url('/fonts/Menlo-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
-@font-face {
-  font-family: 'Inconsolata';
-  src: url('/fonts/Inconsolata-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
 
 body {
-  font-family: 'Inconsolata', sans-serif;
+  font-family: var(--ff);
   margin: 0;
   padding: 0;
   text-align: left;
@@ -49,9 +45,9 @@ body {
   word-wrap: break-word;
   overflow-wrap: break-word;
   color: var(--text);
-  font-size: 15px;
+  font-size: var(--fs);
   font-weight: 400;
-  line-height: 1.33;
+  line-height: 1.5;
   min-height: 100%;
   display: flex;
   flex-direction: column;
@@ -77,11 +73,19 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: 1em;
+  font-family: var(--ff-serif);
   color: var(--heading);
+  font-weight: 400;
   position: relative;
   margin: 2em 0 1em;
 }
+h1 {
+  font-size: 1.62em;
+}
+
+h2 {
+  font-size: 1.32em;
+}
 h2::before {
   content: '';
   border-left: 5px solid var(--accent);
@@ -90,9 +94,19 @@ h2::before {
   height: 75%;
   top: 12%;
 }
-h4,
-h5,
+h3 {
+  font-size: 1.32em;
+}
+h4 {
+  font-size: 1.32em;
+  color: var(--gray-light);
+}
+h5 {
+  font-size: 1.12em;
+  color: var(--gray-light);
+}
 h6 {
+  font-size: 1em;
   color: var(--gray-light);
 }
 
@@ -107,12 +121,13 @@ a {
 }
 a:hover {
   color: #000;
-  font-weight: bold;
+  text-decoration: underline dotted;
 }
 
 p {
   margin-bottom: 2em;
 }
+
 textarea {
   width: 100%;
   font-size: 16px;
@@ -127,26 +142,7 @@ img,
 video {
   max-width: 100%;
   height: auto;
-  border-radius: 8px;
-}
-code {
-  padding: 0 0.4em;
-  background-color: #f9f9f9;
-  border-radius: 2px;
-  font-family: 'Inconsolata', monospace;
-  color: var(--gray-light);
-}
-pre {
-  padding: 0.5em 1.5em;
-  margin-bottom: 2em;
   border-radius: 6px;
-  line-height: 1.3;
-  background-color: #f9f9f9;
-}
-pre > code {
-  all: unset;
-  font-family: 'Inconsolata', monospace;
-  font-size: 1em;
 }
 blockquote {
   border-left: 4px solid var(--gray-lightest);
@@ -173,12 +169,38 @@ ol {
   margin-bottom: 2em;
 }
 
+code {
+  padding: 0 0.4em;
+  background-color: var(--off-white);
+  border-radius: 2px;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-mono);
+  color: var(--gray-light);
+}
+pre {
+  padding: 0.5em 1.5em;
+  margin-bottom: 2em;
+  border-radius: 6px;
+  line-height: 1.3;
+  background-color: var(--off-white);
+}
+pre > code {
+  all: unset;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-mono);
+}
+
+.prose {
+  margin: 0 auto;
+  text-align: left;
+}
 .prose a::after {
   content: '↗';
   color: var(--accent);
   display: inline-block;
-  margin: 0 0 0 0.3em;
+  margin: 0 0 0 0.2em;
   font-weight: normal;
+  font-size: 0.9em;
 
   transition-property: transform;
   transition-duration: 0.2s;