Enhance tag and taxonomy layouts: introduce new taxonomy.html and update list.html for improved structure and styling. Adjust image sizes in index.html for better visibility and add padding to tag links for improved usability.

layouts/_default/list.html

@@ -46,6 +46,7 @@
     text-decoration: none;
     font-size: 1.8rem;
     font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {

layouts/_default/taxonomy.html

@@ -0,0 +1,63 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    {{ with .Content }}
+    <div class="listContent">
+        {{- . -}}
+    </div>
+    {{ end }}
+
+    <div>
+        {{ range .Pages }}
+        <a class="postListLink" href="{{ .Permalink }}">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">{{ .Title }}</span>
+                    {{ $formattedDate := .Date.Format "2006-01-02" }}
+                    <time class="postDate" datetime="{{ $formattedDate }}">{{ .Date | time.Format ":date_long" }}</time>
+                </div>
+                <div class="postExcerpt">
+                    <p>{{ .Summary }}</p>
+                </div>
+            </div>
+        </a>
+        {{end}}
+    </div>
+</div>
+
+<style>
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tags-link {
+    text-decoration: none;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.tags-link:hover .highlight {
+    opacity: 0.8;
+}
+</style>
+{{ end }} 

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="content">
     <div class="intro" style="min-height: calc(100vh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center;">
-        <img src="/favicon.ico" alt="codeskraps logo" style="width: 48px; height: 48px; margin-bottom: 3rem;" />
+        <img src="/favicon.ico" alt="codeskraps logo" style="width: 64px; height: 64px; margin-bottom: 3rem;" />
         <div class="intro-title" style="font-family: 'Fira Mono', monospace; font-size: 3rem; font-weight: 500; margin-bottom: 3rem;">{{ .Site.Title }}</div>
         {{ with .Site.Params.social }}
         <div class="intro-social" style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">

layouts/tags/list.html

@@ -3,45 +3,50 @@
 {{ end }}
 
 {{ define "main" }}
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        {{ range .Site.Taxonomies.tags.ByCount }}
-        {{ $fontSize := add 1 (mul 0.3 (math.Log .Count)) }}
-        <a href="{{ .Page.RelPermalink }}" class="tag" style="font-size: {{ $fontSize }}rem">
-            <span class="highlight">
-                {{ .Page.Title }}
-                <span class="tag-count">({{ .Count }})</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    {{ with .Content }}
+    <div class="listContent">
+        {{- . -}}
+    </div>
+    {{ end }}
+
+    <div>
+        {{ range .Pages }}
+        <a class="postListLink" href="{{ .Permalink }}">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">{{ .Title }}</span>
+                    {{ $formattedDate := .Date.Format "2006-01-02" }}
+                    <time class="postDate" datetime="{{ $formattedDate }}">{{ .Date | time.Format ":date_long" }}</time>
+                </div>
+                <div class="postExcerpt">
+                    <p>{{ .Summary }}</p>
+                </div>
+            </div>
         </a>
-        {{ end }}
+        {{end}}
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px); /* Adjust for header and footer */
+.header-content {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    padding: 2rem;
 }
 
-.tag-cloud {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -49,26 +54,11 @@
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
-/* Ensure tags wrap nicely on mobile */
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 {{ end }} 

layouts/tags/terms.html

@@ -0,0 +1,73 @@
+{{ define "title" }}
+{{ .Title }} | {{ .Site.Params.author.name }}
+{{ end }}
+
+{{ define "main" }}
+<div class="tag-cloud-container">
+    <div class="tag-cloud">
+        {{ range .Site.Taxonomies.tags.ByCount }}
+        {{ $fontSize := add 1 (mul 0.3 (math.Log .Count)) }}
+        <a href="{{ .Page.RelPermalink }}" class="tag" style="font-size: {{ $fontSize }}rem">
+            <span class="highlight">
+                {{ .Page.Title }}
+                <span class="tag-count">({{ .Count }})</span>
+            </span>
+        </a>
+        {{ end }}
+    </div>
+</div>
+
+<style>
+.tag-cloud-container {
+    min-height: calc(100vh - 200px);  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: 8px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.tag {
+    text-decoration: none;
+    line-height: 1.4;
+}
+
+.highlight {
+    background: var(--accent-color);
+    color: var(--bg-color);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tag:hover .highlight {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.tag-count {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+@media (max-width: 600px) {
+    .tag-cloud {
+        padding: 1rem;
+    }
+}
+</style>
+{{ end }} 

public/index.html

@@ -83,7 +83,7 @@
                 
 <div class="content">
     <div class="intro" style="min-height: calc(100vh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center;">
-        <img src="/favicon.ico" alt="codeskraps logo" style="width: 48px; height: 48px; margin-bottom: 3rem;" />
+        <img src="/favicon.ico" alt="codeskraps logo" style="width: 64px; height: 64px; margin-bottom: 3rem;" />
         <div class="intro-title" style="font-family: 'Fira Mono', monospace; font-size: 3rem; font-weight: 500; margin-bottom: 3rem;">codeskraps</div>
         
         <div class="intro-social" style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">

public/posts/index.html

@@ -173,6 +173,7 @@ Posts | codeskraps
     text-decoration: none;
     font-size: 1.8rem;
     font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {

public/tags/android/index.html

@@ -81,133 +81,60 @@ Android | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
+                    
+                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><h2 id="introduction">Introduction</h2>
+<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
+                </div>
+            </div>
         </a>
         
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +142,11 @@ Android | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/architecture/index.html

@@ -81,133 +81,46 @@ Architecture | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Architecture | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/git/index.html

@@ -81,133 +81,59 @@ Git | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/gitignore_not_working/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">When .gitignore Doesnt Seem to Work: A Quick Fix</span>
+                    
+                    <time class="postDate" datetime="2024-06-02">June 2, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>As developers, we&rsquo;ve all been there. You&rsquo;ve added a file or folder to your <code>.gitignore</code>, but Git keeps tracking it anyway. What gives? Let&rsquo;s dive into why this happens and how to fix it.</p></p>
+                </div>
+            </div>
         </a>
         
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/git_ssh_command/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Configuring SSH Keys for Individual Git Commands</span>
+                    
+                    <time class="postDate" datetime="2024-04-17">April 17, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>When working with Git repositories, you often need to authenticate using SSH keys. While you can configure SSH settings globally, there are times when you need to use a specific SSH key for just one command. This is particularly useful when cloning a new repository or adding a submodule, where there isn&rsquo;t yet a local <code>.git/config</code> file to modify.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +141,11 @@ Git | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/index.html

@@ -230,7 +230,6 @@ Tags | codeskraps
     font-size: 0.8em;
 }
 
- 
 @media (max-width: 600px) {
     .tag-cloud {
         padding: 1rem;

public/tags/ios/index.html

@@ -81,133 +81,47 @@ Ios | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
+                    
+                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><h2 id="introduction">Introduction</h2>
+<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +129,11 @@ Ios | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/kmp/index.html

@@ -81,133 +81,60 @@ Kmp | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
+                    
+                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><h2 id="introduction">Introduction</h2>
+<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
+                </div>
+            </div>
         </a>
         
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +142,11 @@ Kmp | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/kotlin/index.html

@@ -81,133 +81,60 @@ Kotlin | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
+                    
+                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><h2 id="introduction">Introduction</h2>
+<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
+                </div>
+            </div>
         </a>
         
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +142,11 @@ Kotlin | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/linux/index.html

@@ -81,133 +81,46 @@ Linux | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2025/move_home_folder/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Move /home Folder</span>
+                    
+                    <time class="postDate" datetime="2025-01-29">January 29, 2025</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>You can move the <code>/home</code> folder on Ubuntu, but you must do it carefully to avoid breaking your system. Below are the steps to safely move <code>/home</code> to a new location.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Linux | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/mvi/index.html

@@ -81,133 +81,46 @@ Mvi | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Mvi | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/mvvm/index.html

@@ -81,133 +81,46 @@ Mvvm | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Mvvm | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/react-native/index.html

@@ -81,133 +81,47 @@ React-Native | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/react_vs_kmp/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">React Native vs Kotlin Multiplatform</span>
+                    
+                    <time class="postDate" datetime="2024-10-03">October 3, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><h2 id="introduction">Introduction</h2>
+<p>In the ever-evolving world of mobile app development, choosing the right cross-platform framework can be a game-changer for businesses and developers alike. Two prominent contenders in this space are React Native and Kotlin Multiplatform (KMP). Both offer unique approaches to the challenge of writing code once and deploying it across multiple platforms. This article will dive deep into the strengths and considerations of each, helping you make an informed decision for your next project.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +129,11 @@ React-Native | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/ssh/index.html

@@ -81,133 +81,46 @@ Ssh | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/git_ssh_command/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Configuring SSH Keys for Individual Git Commands</span>
+                    
+                    <time class="postDate" datetime="2024-04-17">April 17, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>When working with Git repositories, you often need to authenticate using SSH keys. While you can configure SSH settings globally, there are times when you need to use a specific SSH key for just one command. This is particularly useful when cloning a new repository or adding a submodule, where there isn&rsquo;t yet a local <code>.git/config</code> file to modify.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Ssh | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>
 

public/tags/viewmodel/index.html

@@ -81,133 +81,46 @@ Viewmodel | codeskraps
         <div class="content">
             <main class="main">
                 
-<div class="tag-cloud-container">
-    <div class="tag-cloud">
-        
-        
-        <a href="/tags/android/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Android
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/git/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Git
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kmp/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kmp
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/kotlin/" class="tag" style="font-size: 1.2079441541679836rem">
-            <span class="highlight">
-                Kotlin
-                <span class="tag-count">(2)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/architecture/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Architecture
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ios/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ios
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/linux/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Linux
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvi/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvi
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/mvvm/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Mvvm
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/react-native/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                React-Native
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/ssh/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Ssh
-                <span class="tag-count">(1)</span>
-            </span>
-        </a>
-        
-        
-        <a href="/tags/viewmodel/" class="tag" style="font-size: 1rem">
-            <span class="highlight">
-                Viewmodel
-                <span class="tag-count">(1)</span>
-            </span>
+<div>
+    <div class="listHeader">
+        <div class="header-content">
+            <div></div>
+            <a href="/tags" class="tags-link"><span class="highlight">Tags</span></a>
+        </div>
+    </div>
+
+    
+
+    <div>
+        
+        <a class="postListLink" href="https://codeskraps.com/posts/2024/mvi_architecture/">
+            <div class="postListItem" role="listitem">
+                <div class="postHeader">
+                    <span class="postTitle">Simplifying MVI Architecture</span>
+                    
+                    <time class="postDate" datetime="2024-09-27">September 27, 2024</time>
+                </div>
+                <div class="postExcerpt">
+                    <p><p>Model-View-Intent (MVI) is a powerful architectural pattern for building user interfaces, especially in Android development. In this post, we&rsquo;ll explore a helper class that simplifies the implementation of MVI, making it easier to manage state, handle user intents, and emit actions in your application.</p></p>
+                </div>
+            </div>
         </a>
         
     </div>
 </div>
 
 <style>
-.tag-cloud-container {
-    min-height: calc(100vh - 200px);  
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
-
-.tag-cloud {
+.header-content {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
-    padding: 2rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
-.tag {
+.tags-link {
     text-decoration: none;
-    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
 }
 
 .highlight {
@@ -215,26 +128,11 @@ Viewmodel | codeskraps
     color: var(--bg-color);
     padding: 0.2em 0.4em;
     border-radius: 4px;
-    transition: all 0.2s;
-    display: inline-block;
-    text-decoration: none;
+    transition: opacity 0.2s;
 }
 
-.tag:hover .highlight {
+.tags-link:hover .highlight {
     opacity: 0.8;
-    text-decoration: underline;
-}
-
-.tag-count {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
- 
-@media (max-width: 600px) {
-    .tag-cloud {
-        padding: 1rem;
-    }
 }
 </style>