initial pink style

assets/css/style.scss

@@ -3,39 +3,100 @@
 }
 html {
     font-family: "Coelacanth", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
-    font-size: large;
+    font-size: x-large;
 }
 a {
     text-decoration: none;
 }
-a.exposed {
+a.exposed, span.exposed {
     font-weight: bold;
     font-size: 1.3em;
 }
 a:visited {
 }
-
-body {
-    max-width: 1200px;
-    @media (min-width: 1200px) {
-        margin: auto;
-    }
-}
-
-header {
-    text-align: center;
-    h1 {
-        margin-bottom: 0;
-    }
-    nav {
-        margin: 1em;
-    }
-    nav > * {
-        padding: 0.5em;
-    }
-}
-
 .path {
     display: inline;
 }
 
+body {
+    background-color: white;
+}
+
+header {
+    margin-top: 1em;
+    padding-bottom: 2em;
+    padding-top: 1em;
+    background-color: #9f5470;
+    background-color: pink;
+    color: white;
+    a {
+        color: white;
+    }
+    a.exposed, span.exposed {
+        font-weight: bold;
+        font-size: 1.8em;
+    }
+    a:visited {
+        font-weight: bold;
+    }
+    div.title-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 1200px;
+        @media (min-width: 1200px) {
+            margin: auto;
+        }
+        img {
+            height: 88px;
+        }
+        * {
+            padding: 0.5em;
+        }
+    }
+    div.description {
+        display: inline;
+        font-style: italic;
+        font-size: smaller;
+    }
+    nav {
+        position: relative;
+        display: flex;
+        align-items: baseline;
+        justify-content: space-around;
+        max-width: 1200px;
+        padding-bottom: 6em;
+        span {
+            -webkit-animation: exposed 1s ease forwards;
+        }
+        span.exposed {
+            position: absolute;
+            top: 4rem;
+        }
+        @keyframes exposed {
+            from { position: relative; top: 0; }
+            to { position: absolute; top: 4rem; }
+        }
+        @media (min-width: 1200px) {
+            margin: auto;
+        }
+    }
+}
+
+main {
+    max-width: 1200px;
+    @media (min-width: 1200px) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    background-color: white;
+    padding: 1em;
+    border-top-left-radius: 1em;
+    border-top-right-radius: 1em;
+    margin-top: -2em;
+    margin-left: 1em;
+    margin-right: 1em;
+    *:nth-child(1) {
+        margin-top: 0;
+    }
+}

layouts/partials/header.html

@@ -1,22 +1,30 @@
 {{ $currentPage := . }}
 <header>
-  <h1>
-  {{ with resources.Get "img/titre.png" }}
+  <div class="title-bar">
+  {{ with resources.Get "img/titre-blanc.png" }}
     <a href="{{ $.Site.BaseURL | relURL }}">
       <img src="{{ .RelPermalink }}" />
     </a>
   {{ else }}
       <a href="{{ $.Site.BaseURL | relURL }}">{{ .Site.Title }}</a>
   {{ end }}
-  </h1>
-  {{ with $.Site.Params.Description }}
-    {{ . }}
-  {{ end }}
+    <div class="description">
+      {{ with $.Site.Params.Description }}
+        {{ . }}
+      {{ end }}
+    </div>
+  </div>
   <nav>
     {{ range $.Site.Sections }}
-      <a href="{{ .Permalink }}" class="{{ if eq $currentPage.Section .Section }}exposed{{ end }}">
-        {{ .Title | markdownify }}
-      </a>
+      {{ if eq $currentPage.Section .Section }}
+        <span class="exposed">
+          {{ .Title | markdownify }}
+        </span>
+      {{ else }}
+        <a href="{{ .Permalink }}">
+          {{ .Title | markdownify }}
+        </a>
+      {{ end }}
     {{ end }}
   </nav>
 </header>