Add header and footer styles

src/_includes/partials/date.njk

@@ -1,5 +1 @@
-<time datetime="{{ definedDate | getDatetime }}">
-  {{
-    definedDate | toFullDate
-  }}
-</time>
+<time datetime="{{ definedDate | getDatetime }}">{{ definedDate | toFullDate }}</time>

src/_includes/partials/footer.njk

@@ -2,39 +2,19 @@
 
 <footer>
   <nav id="footernav" aria-label="Footer">
-
-    {% year %} <a href="/" {% if activePage === '/' %} aria-current="page" {% endif %}>{{ meta.siteName }}</a>
-
-    {% for item in navigation.bottom %}
-
-    <a
-      href="{{ item.url }}"
-      {{
-      helpers.getLinkActiveState(item.url,
-      page.url)
-      |
-      safe
-      }}
-      >{{ item.text }}</a
-    >
-
-    {% endfor %}
-  </nav>
-
-  <nav id="social" aria-label="Social links">
-    {% for item in social %}
-
-    {% if item.platform == "rss" %}
-    <a href="{{ meta.url }}/{{ locale }}{{ item.url }}" rel="alternate" type="application/rss+xml">
-    {% else %}
-    <a href="{{ item.url }}" rel="me">
-      {% endif %}
-      <span class="sr-only">{{ item.platform }}</span>
-      <div aria-hidden="true">{% include 'icons/social-' + item.icon %}</div>
-      </a
-      >
-    {% endfor %}
-
-
+    <ul>
+      {% for item in navigation.bottom %}
+      <li><a
+        href="{{ item.url }}"
+        {{
+        helpers.getLinkActiveState(item.url,
+        page.url)
+        |
+        safe
+        }}
+        >{{ item.text }}</a
+      ></li>
+      {% endfor %}
+    </ul>
   </nav>
 </footer>

src/_includes/partials/header.njk

@@ -1,5 +1,6 @@
 <a href="#main" class="skip-link">{{ meta.skipContent }}</a>
 
 <header>
+    <div></div>
     {% include "partials/menu.njk" %}
 </header>

src/_includes/partials/posts-light.njk

@@ -0,0 +1,9 @@
+{% if postslist %}
+<ul role="list">
+    {% asyncEach post in postslist %}
+        <li>{% set definedDate = post.date %}
+            <a href="{{ post.url | url }}">{{ post.data.title }} ({% include "partials/date.njk" %})</a>
+        </li>
+    {% endeach %}
+</ul>
+{% endif %}

src/_includes/partials/posts.njk

@@ -6,7 +6,6 @@
                 <a href="{{ post.url | url }}">{{ post.data.title }}</a>
             </h2>
             {% set definedDate = post.date %} {% include "partials/date.njk" %}
-            {% set definedTags = post.data.tags %} {% include "partials/tags.njk" %}
             <p>{{ post.data.description }}</p>
         </li>
     {% endeach %}

src/_layouts/blog.njk

@@ -12,6 +12,6 @@ layout: base
 
   {{ content | safe }}
     
-  {% set postslist = collections.posts %} {% include "partials/posts.njk" %}
+  {% set postslist = collections.posts %} {% include "partials/posts-light.njk" %}
 
 </article>

src/_layouts/home.njk

@@ -1,23 +1,14 @@
 ---
 layout: base
 ---
-
-<header>
+<div>
   <h1>{{ title }}</h1>
-</header>
 
-<article>
   {{ content | safe }}
-</article>
+</div>
 
 <article>
-    <h2>{{ blog.title }}</h2>
-    <!-- blog intro text is optional. -->
-    {% if blog.intro %}
-    <p>{{ blog.intro }}</p>
-    {% endif %}
-  </div>
+  <h2>{{ blog.title }}</h2>
 
-  {% set postslist = collections.posts.slice(0, 4) %} {% include "partials/posts.njk" %}
-  
+  {% set postslist = collections.posts.slice(0, 4) %} {% include "partials/posts-light.njk" %}
 </article>

src/assets/css/styles.scss

@@ -3,11 +3,12 @@
     --light-2: #ddd;
     --light-3: #fed;
     --dark-1: #333;
-    --dark-2: #123;
+    --dark-2: #212121;
     --light-transparent-1: rgba(125,125,125, 0.75);
     --dark-transparent-1: rgba(200,195,190,0.15);
 
     --color-1: #5bf;
+    --color-2: #4396cd;
 
     --background-color: var(--light-1);
     --text-color: var(--dark-1);
@@ -21,7 +22,8 @@
         --text-color: var(--light-2);
         --link-color: var(--color-1);
         --link-focus: var(--light-3);
-
+    }
+    body {
         a{color:var(--link-color);}
         a:focus{outline-color:var(--link-focus);}
     }
@@ -32,15 +34,17 @@ body{
     background-color: var(--background-color);
     font-size: 18px;
     font: 1.2rem/1.5 Century Gothic, sans-serif;
-    max-width: 600px;
-    max-width: 55ch;
-    margin: 0 auto;
-    padding: 2.5rem 1.75rem;
-}
-header{
-    outline: 2px solid var(--light-2);
-    outline-offset: 1rem;
+    margin: 0;
+    padding: 0;
+    // max-width: 600px;
+    // max-width: 55ch;
+    // margin: 0 auto;
+    // padding: 2.5rem 1.75rem;
 }
+// header{
+//     outline: 2px solid var(--light-2);
+//     outline-offset: 1rem;
+// }
 h1,h2,h3,h4,h5,h6{
     line-height: 1.2; 
     font-family: Arial, serif;
@@ -107,4 +111,90 @@ dt:target{
     color: var(--text-color);
     padding: .2rem .4rem;
     line-height: 1;
+}
+
+/* Body */
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+header {
+    display: flex;
+    justify-content: space-between;
+    padding: .4rem 1rem;
+
+    nav {
+        padding: 0 1rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: .6rem;
+
+        li {
+            padding: .6rem .4rem;
+        }
+
+        a {
+            color: var(--text-color);
+            text-decoration: none;
+            border-bottom: 2px solid var(--link-color);
+            padding-bottom: .1rem;
+
+            &:focus, &:hover {
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    padding: .4rem 1rem;
+    margin: 0;
+
+    nav {
+        padding: 0 1rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: .6rem;
+
+        li {
+            padding: .6rem .4rem;
+        }
+
+        a {
+            color: var(--text-color);
+            text-decoration: none;
+            border-bottom: 2px solid var(--link-color);
+            padding-bottom: .1rem;
+
+            &:focus, &:hover {
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+
+
+/* Main */
+main {
+    max-width: 600px;
+    max-width: 55ch;
+    margin: 0 auto;
+    padding: 2.5rem 1.75rem;
+    flex: auto;
 }

src/pages/index.md

@@ -1,12 +1,15 @@
 ---
 permalink: /index.html
-title: ' Eleventy Excellent'
+title: 'Welcome to my blog !'
 description: 'Eleventy starter using modern CSS, fluid type, fluid spacing, flexible layout and progressive enhancement.'
 layout: 'home'
+blog: 
+  title: "Latest post from the blog"
 ---
 
-## Eleventy demo
+Hey ! This is the home page !<br>
+Have fun !
 
-Hey ! This is a demo page !
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-Have fun !
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.