udpate basic layout for post details

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

@@ -295,6 +295,7 @@ template {
     ========================================================================== */
     --background-main: #F0F0F0;
     --color-main: #292929;
+    --color-main-medium: #535353;
     --color-link: #0161f0;
     --color-link-hover:#575757;
 
@@ -313,7 +314,7 @@ template {
     /* Font sizes names */
     --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
     --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
-    --font-body: var(--font-size-2) / 1.38 var(--font-brand);
+    --font-body: var(--font-size-2) / 1.46 var(--font-brand);
     --font-caption: var(--font-size-1) / 1.37 var(--font-brand);
 
  /* ==========================================================================
@@ -325,6 +326,8 @@ template {
     --spacing-4: 2rem;
     --spacing-5: 2.5rem;
     --spacing-6: 3rem;
+    --spacing-7: 4rem;
+    --spacing-8: 5rem;
 
  /* ==========================================================================
     Size
@@ -337,6 +340,7 @@ template {
     :root {
         --background-main: #292929;
         --color-main: #F0F0F0;
+        --color-main-medium: #a3a3a3;
         --color-link: #02A4FF;
         --color-link-hover:#9e9e9e;
     }
@@ -420,6 +424,66 @@ i, em {
         display: flex;
         gap: var(--spacing-2);
     }
+/* POST LIST  */
+.posts-container {
+}
+.post-item {
+    display: block;
+    margin-bottom: var(--spacing-7);
+}
+.post-item .post-item-title {
+        transition: ease-in-out 200ms;
+        font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3));
+        margin-left: 0;
+    }
+.post-item .post-item-title::before {
+            content: "»";
+            margin-right: var(--spacing-1);
+            opacity: .5;
+            position: relative;
+        }
+.post-item .post-item-date {
+        display: block;
+        font: var(--font-caption);
+        color: var(--color-main);
+        margin-top: calc(var(--spacing-1) / 2);
+    }
+.post-item .post-item-summary {
+        font: var(--font-body);
+        color: var(--color-main-medium);
+    }
+.post-item:hover .post-item-title {
+            color: var(--color-main);
+            margin-left: var(--spacing-1);
+        }
+/* POST DETAIL  */
+.post-detail {
+    font: var(--font-body);
+    color:var(--color-main-medium);
+}
+.post-detail img{
+        max-width: 100%;
+        width: auto;
+    }
+.post-detail pre {
+        overflow-x: scroll;
+        border: 1px solid var(--color-main-medium);
+        padding: var(--spacing-3);
+        border-radius: 4px;
+    }
+.post-detail ul {
+        padding-left: 1rem;
+    }
+.post-detail .post-detail-info {
+        font:  var(--font-caption);
+        color:var(--color-main);
+        margin-bottom: var(--spacing-3);
+    }
+.post-detail .post-detail-title {
+        color: var(--color-link);
+        font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
+        margin-bottom: 0;
+    }
 .footer {
     padding: var(--spacing-6) var(--spacing-3);
     font: var(--font-caption);

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

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

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

@@ -0,0 +1,64 @@
+/* POST LIST  */
+.posts-container {
+}
+
+.post-item {
+    display: block;
+    margin-bottom: var(--spacing-7);
+    .post-item-title {
+        transition: ease-in-out 200ms;
+        font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3));
+        margin-left: 0;
+        &::before {
+            content: "»";
+            margin-right: var(--spacing-1);
+            opacity: .5;
+            position: relative;
+        }
+    }
+    .post-item-date {
+        display: block;
+        font: var(--font-caption);
+        color: var(--color-main);
+        margin-top: calc(var(--spacing-1) / 2);
+    }
+    .post-item-summary {
+        font: var(--font-body);
+        color: var(--color-main-medium);
+    }
+    &:hover {
+        .post-item-title {
+            color: var(--color-main);
+            margin-left: var(--spacing-1);
+        }
+    }
+}
+
+/* POST DETAIL  */
+.post-detail {
+    font: var(--font-body);
+    color:var(--color-main-medium);
+    img{
+        max-width: 100%;
+        width: auto;
+    }
+    pre {
+        overflow-x: scroll;
+        border: 1px solid var(--color-main-medium);
+        padding: var(--spacing-3);
+        border-radius: 4px;
+    }
+    ul {
+        padding-left: 1rem;
+    }
+    .post-detail-info {
+        font:  var(--font-caption);
+        color:var(--color-main);
+        margin-bottom: var(--spacing-3);
+    }
+    .post-detail-title {
+        color: var(--color-link);
+        font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
+        margin-bottom: 0;
+    }
+}

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

@@ -17,6 +17,7 @@
     ========================================================================== */
     --background-main: #F0F0F0;
     --color-main: #292929;
+    --color-main-medium: #535353;
     --color-link: #0161f0;
     --color-link-hover:#575757;
 
@@ -35,7 +36,7 @@
     /* Font sizes names */
     --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
     --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
-    --font-body: var(--font-size-2) / 1.38 var(--font-brand);
+    --font-body: var(--font-size-2) / 1.46 var(--font-brand);
     --font-caption: var(--font-size-1) / 1.37 var(--font-brand);
 
  /* ==========================================================================
@@ -47,6 +48,8 @@
     --spacing-4: 2rem;
     --spacing-5: 2.5rem;
     --spacing-6: 3rem;
+    --spacing-7: 4rem;
+    --spacing-8: 5rem;
 
  /* ==========================================================================
     Size
@@ -61,6 +64,7 @@
     :root {
         --background-main: #292929;
         --color-main: #F0F0F0;
+        --color-main-medium: #a3a3a3;
         --color-link: #02A4FF;
         --color-link-hover:#9e9e9e;
     }

src/themes/oscar/layouts/_default/summary.html

@@ -1,8 +1,8 @@
-<article>
+<article class="post-item">
     <a href="{{ .Permalink }}" class="catalogue-item">
-        <time datetime="{{ .PublishDate }}" class="catalogue-time">{{ i18n "publishdate" . }}</time>
+        <h3 class="post-item-title">{{ .Title }}</h3>
-        <h3>{{ .Title }}</h3>
+        <time datetime="{{ .PublishDate }}" class="post-item-date">{{ i18n "publishdate" . }}</time>
-        <p>
+        <p class="post-item-summary">
             {{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
         </p>
     </a>

src/themes/oscar/layouts/index.html

@@ -2,12 +2,11 @@
 
 <main class="main wrapper">
 
-	<section class="catalogue">
+	<div class="posts-container">
-		<h2>List: Index</h2>
 		{{ range (.Paginate (where .Site.RegularPages "Type" "posts")).Pages }}
 			{{ .Render "summary" }}
 		{{ end }}
-	</section>
+	</div>
 
 	<div class="pagination">
         {{ partial "pagination.html" . }}

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

@@ -1,4 +1,4 @@
-<div class="post-info">
+<div class="post-detail-info">
     <span>{{ i18n "writtenBy" }}</span>
     {{- if .Params.Author }}
         {{ .Params.Author }}
@@ -7,7 +7,6 @@
     {{- end }}
 
     {{- if .PublishDate }}
-        <br>
+        <span>{{ i18n "on" }}</span> <time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
-        <span>{{ i18n "on" }}&nbsp;</span><time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
     {{- end }}
 </div>

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

@@ -1,2 +1 @@
-<h1 class="post-title">{{ .Title }}</h1>
+<h1 class="post-detail-title">{{ .Title }}</h1>
-<div class="post-line"></div>

src/themes/oscar/layouts/posts/single.html

@@ -1,11 +1,9 @@
 {{ define "main" }}
 
-<main>
+<main class="main wrapper">
-    <h1>Single one: Post</h1>
+    <div class="post-detail">
-
-    <div class="post">
-        {{ partial "posts/info.html" . }}
         {{ partial "posts/title.html" . }}
+        {{ partial "posts/info.html" . }}
         {{ partial "posts/header.html" . }}
 
         <!-- raw html -->

src/themes/tale/layouts/_default/summary.html

@@ -1,11 +1,7 @@
-<a href="{{ .Permalink }}" class="catalogue-item">
+<a href="{{ .Permalink }}" class="post-item">
-    <div>
+    <h2 class="post-item-title">{{ .Title }}</h2>
-        <time datetime="{{ .PublishDate }}" class="catalogue-time">{{ i18n "publishdate" . }}</time>
+    <time datetime="{{ .PublishDate }}" class="post-item-date ">{{ i18n "publishdate" . }}</time>
-        <h2 class="catalogue-title">{{ .Title }}</h2>
+    <p class="post-item-summary">
-        <div class="catalogue-line"></div>
+        {{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
-
+    </p>
-        <p>
-            {{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
-        </p>
-    </div>
 </a>