improve archive layout, home and pagination. Also add some extra space in posts

src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content

@@ -295,6 +295,7 @@ template {
     ========================================================================== */
     --background-main: #F0F0F0;
     --color-main: #292929;
+    --color-main-dark: #3d3d3d;
     --color-main-medium: #535353;
     --color-link: #0161f0;
     --color-link-hover:#575757;
@@ -341,6 +342,7 @@ template {
         --background-main: #292929;
         --color-main: #F0F0F0;
         --color-main-medium: #a3a3a3;
+        --color-main-dark: #4e4e4e;
         --color-link: #02A4FF;
         --color-link-hover:#9e9e9e;
     }
@@ -360,13 +362,13 @@ body {
     background-color: var(--background-main);
     color: var(--color-main);
 }
-body a {
+a {
-        color: var(--color-link);
+    color: var(--color-link);
-        text-decoration: none;
+    text-decoration: none;
+}
+a:hover {
+        color: var(--color-link-hover);
     }
-body a:hover {
-            color: var(--color-link-hover);
-        }
 h1, h2, h3, h4, h5, h6,
 b, strong {
     font-weight: var(--fw-bold);
@@ -424,6 +426,34 @@ i, em {
         display: flex;
         gap: var(--spacing-2);
     }
+.main-nav a.is-active {
+        color: var(--color-main);
+        border-bottom: 1px solid var(--color-main);
+    }
+/* promo hero */
+.hero .is-active,
+    .hero div {
+        display: none;
+    }
+.hero .hero-title {
+        font: var(--font-title);
+        color: var(--color-main);
+        margin-bottom: calc(var(--spacing-8) * 2);
+    }
+.hero .hero-img {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        max-width: 250px;
+        background-color: var(--color-link);
+        border-radius: 50%;
+        aspect-ratio: 1;
+        overflow: hidden;
+    }
+.hero .hero-img img {
+            width: 100%;
+            mix-blend-mode: overlay;
+        }
 /* POST LIST  */
 .posts-container {
 }
@@ -492,6 +522,52 @@ i, em {
         font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
         margin-bottom: 0;
     }
+.post-detail p, .post-detail li {
+        margin-bottom: var(--spacing-3);
+    }
+/* Archive */
+.post h2 {
+        font: var(--font-heading);
+        margin: 0;
+        display: flex;
+        aling-items: center;
+        border-bottom: 1px solid var(--color-main-dark);
+        padding-bottom: var(--spacing-1);
+    }
+.post h2 span {
+            font: var(--font-heading);
+            color: var(--color-main-medium);
+            vertical-align: middle;
+        }
+.post h2 span:first-child {
+                margin-right: var(--spacing-2);
+                color: var(--color-main);
+            }
+.post h2:first-child {
+            margin-top: var(--spacing-7);
+        }
+.post ul {
+        padding-left: 1rem;
+    }
+.post ul:not(:last-child) {
+            margin-bottom: var(--spacing-6);
+
+        }
+.pagination {
+    border-top: 1px solid var(--color-main-medium);
+    border-bottom: 1px solid var(--color-main-medium);
+    padding-block: var(--spacing-3);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+}
+.pagination a {
+        font: var(--font-heading);
+    }
+.pagination span {
+        font: var(--font-body);
+    }
 .footer {
     padding: var(--spacing-6) var(--spacing-3);
     font: var(--font-caption);

src/themes/oscar/assets/css/common.css

@@ -10,12 +10,12 @@ body {
     text-rendering: auto;
     background-color: var(--background-main);
     color: var(--color-main);
-    a {
+}
-        color: var(--color-link);
+a {
-        text-decoration: none;
+    color: var(--color-link);
-        &:hover {
+    text-decoration: none;
-            color: var(--color-link-hover);
+    &:hover {
-        }
+        color: var(--color-link-hover);
     }
 }
 h1, h2, h3, h4, h5, h6,

src/themes/oscar/assets/css/main.css

@@ -11,6 +11,7 @@
 /* Modules */
 @import 'assets/css/modules/header.css';
 @import 'assets/css/modules/posts.css';
+@import 'assets/css/modules/pagination.css';
 @import 'assets/css/modules/footer.css';
 
 /* Specific pages */

src/themes/oscar/assets/css/modules/header.css

@@ -29,4 +29,35 @@
         display: flex;
         gap: var(--spacing-2);
     }
+    a.is-active {
+        color: var(--color-main);
+        border-bottom: 1px solid var(--color-main);
+    }
+}
+
+/* promo hero */
+.hero {
+    .is-active,
+    div {
+        display: none;
+    }
+    .hero-title {
+        font: var(--font-title);
+        color: var(--color-main);
+        margin-bottom: calc(var(--spacing-8) * 2);
+    }
+    .hero-img {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        max-width: 250px;
+        background-color: var(--color-link);
+        border-radius: 50%;
+        aspect-ratio: 1;
+        overflow: hidden;
+        img {
+            width: 100%;
+            mix-blend-mode: overlay;
+        }
+    }
 }

src/themes/oscar/assets/css/modules/pagination.css

@@ -0,0 +1,15 @@
+.pagination {
+    border-top: 1px solid var(--color-main-medium);
+    border-bottom: 1px solid var(--color-main-medium);
+    padding-block: var(--spacing-3);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    a {
+        font: var(--font-heading);
+    }
+    span {
+        font: var(--font-body);
+    }
+}

src/themes/oscar/assets/css/modules/posts.css

@@ -5,6 +5,7 @@
 .post-item {
     display: block;
     margin-bottom: var(--spacing-7);
+
     &::after {
         display: block;
         content: "";
@@ -69,4 +70,38 @@
         font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
         margin-bottom: 0;
     }
+    p, li {
+        margin-bottom: var(--spacing-3);
+    }
+}
+
+/* Archive */
+.post {
+    h2 {
+        font: var(--font-heading);
+        margin: 0;
+        display: flex;
+        aling-items: center;
+        border-bottom: 1px solid var(--color-main-dark);
+        padding-bottom: var(--spacing-1);
+        span {
+            font: var(--font-heading);
+            color: var(--color-main-medium);
+            vertical-align: middle;
+            &:first-child {
+                margin-right: var(--spacing-2);
+                color: var(--color-main);
+            }
+        }
+        &:first-child {
+            margin-top: var(--spacing-7);
+        }
+    }
+    ul {
+        padding-left: 1rem;
+        &:not(:last-child) {
+            margin-bottom: var(--spacing-6);
+
+        }
+    }
 }

src/themes/oscar/assets/css/variables.css

@@ -17,6 +17,7 @@
     ========================================================================== */
     --background-main: #F0F0F0;
     --color-main: #292929;
+    --color-main-dark: #3d3d3d;
     --color-main-medium: #535353;
     --color-link: #0161f0;
     --color-link-hover:#575757;
@@ -65,6 +66,7 @@
         --background-main: #292929;
         --color-main: #F0F0F0;
         --color-main-medium: #a3a3a3;
+        --color-main-dark: #4e4e4e;
         --color-link: #02A4FF;
         --color-link-hover:#9e9e9e;
     }

src/themes/oscar/layouts/index.html

@@ -4,7 +4,7 @@
 
     <div class="hero">
         {{ range (where .Site.Pages "Type" "heros") }}
-        <div {{ if .Params.current }}class="active"{{ end }}>
+        <div {{ if .Params.current }}class="is-active"{{ end }}>
             {{ if .Params.link }}<a href="{{ .Params.link }}">{{ end }}
             {{ if .Params.image }}
             <img src="heros/{{ .Params.image }}"
@@ -14,6 +14,18 @@
             {{ if .Params.link }}</a>{{ end }}
         </div>
         {{ end }}
+
+        <!--  PROVISIONAL PROMO -  @todo: change this -->
+        {{ range (where .Site.Pages "Type" "heros") }}
+        {{ if .Params.image }}
+        <div class="hero-img" >
+            <img src="heros/{{ .Params.image }}"
+                alt="{{ .Content | plainify | htmlUnescape | truncate 10 }}" />
+        </div>
+        {{ end }}
+        {{ end }}
+        <h2 class="hero-title">Este es el primer texto dinámico del hero y mejor con el <a href="">enlace a twich aquí</a>, no global ⚡.</h2>
+        <!--  / PROVISIONAL PROMO -  @todo: change this -->
     </div>
 
 	<div class="posts-container">
@@ -25,3 +37,4 @@
 </main>
 
 {{ end }}
+

src/themes/oscar/layouts/partials/header.html

@@ -15,9 +15,9 @@
                 {{ $currentPage := . }}
                 {{ range .Site.Menus.main }}
                 <li>
-                    <a href="{{ .URL }}" {{ if eq $currentPage.RelPermalink .URL }}class="active"{{ end }}>
+                    <a href="{{ .URL }}" {{ if eq $currentPage.RelPermalink .URL }}class="is-active"{{ end }}>
                         {{ .Pre }}
-                        <span>{{ .Name }}</span>
+                            {{ .Name }}
                         {{ .Post }}
                     </a>
                 </li>

src/themes/oscar/layouts/partials/pagination.html

@@ -1,7 +1,7 @@
 {{ if .Paginator.HasPrev }}
-    <a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">&#8592;</a>
+    <a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">⇠</a>
 {{ end }}
 <span>{{ .Paginator.PageNumber }}</span>
 {{ if .Paginator.HasNext }}
-    <a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">&#8594;</a>
+    <a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">⇢</a>
 {{ end }}

src/themes/oscar/layouts/partials/posts/pagination.html

@@ -1,7 +1,7 @@
 
 		{{- if .NextInSection }}
-        <a href="{{ .NextInSection.RelPermalink }}" class="left arrow">&#8592; {{ .NextInSection.Title }}</a>
+        <a href="{{ .NextInSection.RelPermalink }}" class="left arrow">⇠ <span>{{ .NextInSection.Title }}</span></a>
 		{{- end }}
 		{{- if .PrevInSection }}
-        | <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow">{{ .PrevInSection.Title }} &#8594;</a>
+        | <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span> ⇢</a>
 		{{- end }}

src/themes/oscar/layouts/sections/archive.html

@@ -2,18 +2,15 @@
 
 <main class="main wrapper">
     <h1>Archive</h1>
+    {{ .Content }}
     <div class="post">
-
-        {{ .Content }}
-
         {{ range (where .Site.RegularPages "Type" "posts").GroupByDate "2006" }}
-        <h2>{{ .Key }}</h2>
+        <h2><span>{{ .Key }}</span><span>{{ len .Pages }} posts</span></h2>
-        <p>{{ len .Pages }} posts</p>
+        <ul>
-            <ul>
+            {{ range .Pages }}
-                {{ range .Pages }}
+            <li><a href="{{ .Permalink }}">{{ .Title }}</a> - {{ .Date.Format "January 2" }}</li>
-                <li><a href="{{ .Permalink }}">{{ .Title }}</a> - {{ .Date.Format "January 2" }}</li>
+            {{ end }}
-                {{ end }}
+        </ul>
-            </ul>
         {{ end }}
 
     </div>