deploy: 9f765af

css/blog.css

@@ -2,4 +2,5 @@
   list-style: none;
   padding: 0;
   margin: 0;
+  margin-top: 3rem;
 }

css/post.css

@@ -34,11 +34,19 @@
   font-weight: bold;
 }
 
+.single-post .subtitle {
+  color: var(--color-primary-lighter);
+  font-weight: normal;
+  margin-bottom: 2rem;
+}
+
 .postlist-link .post-title {
   margin-top: 0;
   margin-bottom: 2rem;
 }
 
+
+
 @media (min-width: 768px) {
   .post__metadata {
     flex-direction: row;

css/style.css

@@ -22,3 +22,12 @@ body {
     font-size: 14px;
   }
 }
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

css/variables.css

@@ -2,5 +2,6 @@
   --color-link: #0070f3;
   --accent-color: #002999;
   --color-border-light: #eaeaea;
-  --color-primary: #14252E;
+  --color-primary: #14252e;
+  --color-primary-lighter: #767676;
 }

index.html

@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,43 +36,45 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/[email protected]/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/[email protected]/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-
-
+
+
+
 
 
 
 
 
 
 
-  <title>Praveen Puglia</title>
 
 
 
 
+<title></title>
 <meta property="og:site_name" content="Praveen Puglia"/>
-<meta property="og:title" content="undefined - Praveen Puglia"/>
+<meta property="og:title" content=""/>
 <meta property="og:type" content="website"/>
 <meta property="og:url" content="https://praveenpuglia.com/"/>
 <meta property="twitter:url" content="https://praveenpuglia.com/"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -164,4 +385,4 @@ <h3>Past</h3>
 </div>
 
   </body>
-</html>
+</html>