Feature/new menu (#8)

* Add new menu * Display bigger buttons for menus
armandfardeau · Apr 5, 2023 · fc0387e · fc0387e
1 parent da97393
commit fc0387e
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 24 deletions.
diff --git a/assets/_custom.scss b/assets/_custom.scss
@@ -66,16 +66,22 @@ figure {
 
 .top {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   margin-bottom: 2rem;
 
+  .intro{
+    display: flex;
+    flex-direction: column;
+  }
+
   .reading_time {
     font-style: italic;
     font-size: 0.875rem;
     max-width: 40%;
+    text-align: center;
   }
 }
 
@@ -170,3 +176,60 @@ figure {
     }
   }
 }
+
+.home_menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  align-items: stretch;
+
+  .book-btn {
+    font-weight: bold;
+    font-size: .875rem;
+    color: $blue;
+    line-height: 2rem;
+    border: 1px solid $blue;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    display: flex !important;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 1rem !important;
+    transition: .2s ease-in-out;
+
+    margin-top: 1rem;
+
+    &:first-of-type {
+      margin: 0 0 0 0;
+    }
+
+    @media (max-width: 576px) {
+      line-height: 1.2rem !important;
+    }
+
+    &:hover {
+      color: $white;
+      background-color: rgba($blue, 0.5);
+      transform: scale(1.05);
+    }
+  }
+}
+
+
+.book-header {
+  .book-brand{
+    a{
+      color: $black;
+    }
+  }
+  label {
+    img {
+      height: 32px;
+      width: auto;
+    }
+  }
+}
diff --git a/content/en/_index.md b/content/en/_index.md
@@ -8,14 +8,17 @@ BookToC: false
 
 Table of Contents :
 
-- [**🌦 Weather forecast**]({{<relref"/docs/meteorology">}})
-- [**💨 The winds**]({{<relref"/docs/winds">}})
-- [**⚖️ Dinghy mechanics**]({{<relref"/docs/dinghy_mecanic">}})
-- [**🛠 The settings**]({{<relref"/docs/settings">}})
-- [**🔂 Timelines**]({{<relref"/docs/chronologies">}})
-- [**🌊 Tides**]({{<relref"/docs/tides">}})
-- [**🗺 Landmarks and map**]({{<relref"/docs/buoyage_system_and_map">}})
-- [**🏁 Regatta**]({{<relref"/docs/regatta">}})
+Table des matières :
+{{< wrapper "home_menu" >}}
+    {{< button_link title="🌦 Weather forecast" relref="/docs/meteorology" class="book-btn" >}}
+    {{< button_link title="💨 The winds" relref="/docs/winds" class="book-btn" >}}
+    {{< button_link title="⚖️ Dinghy mechanics" relref="/docs/dinghy_mecanic" class="book-btn" >}}
+    {{< button_link title="🛠 The settings" relref="/docs/settings" class="book-btn" >}}
+    {{< button_link title="🔂 Timelines" relref="/docs/chronologies" class="book-btn" >}}
+    {{< button_link title="🌊 Tides" relref="/docs/tides" class="book-btn" >}}
+    {{< button_link title="🗺 Landmarks and map" relref="/docs/buoyage_system_and_map" class="book-btn" >}}
+    {{< button_link title="🏁 Regatta" relref="/docs/regatta" class="book-btn" >}}
+{{< /wrapper >}}
 
 This theoretical course is inspired by Antoine Rogues' work for the [ex level 5 ffv in catamaran](http://glenans.arogues.org/niveau5.pdf).
 

diff --git a/content/fr/_index.md b/content/fr/_index.md
@@ -1,25 +1,30 @@
 ---
 title: Cours théorique Niveau 4 FFV
+subtitle: "Vous voulez progresser en voile légère ? C'est par ici! 👇"
 type: docs
 BookToC: false
 display_reading_time: false
 display_share_buttons: true
 ---
+
 {{< figure caption="Laséristes en compétition au portugal" src="images/laser-solo.jpg" >}}
 
 Table des matières :
+{{< wrapper "home_menu" >}}
+    {{< button_link title="🌦 Météo" relref="/docs/meteorology" class="book-btn" >}}
+    {{< button_link title="💨 Les vents" relref="/docs/winds" class="book-btn" >}}
+    {{< button_link title="⚖️ Mécanique du Dériveur" relref="/docs/dinghy_mecanic" class="book-btn" >}}
+    {{< button_link title="🛠 Les réglages" relref="/docs/settings" class="book-btn" >}}
+    {{< button_link title="🔂 Les chronologies" relref="/docs/chronologies" class="book-btn" >}}
+    {{< button_link title="🌊 Les marées" relref="/docs/tides" class="book-btn" >}}
+    {{< button_link title="🗺 Balisage et carte" relref="/docs/buoyage_system_and_map" class="book-btn" >}}
+    {{< button_link title="🏁 La régate" relref="/docs/regatta" class="book-btn" >}}
+{{< /wrapper >}}
 
-- [**🌦 Météo**]({{<relref"/docs/meteorology">}})
-- [**💨 Les vents**]({{<relref"/docs/winds">}})
-- [**⚖️ Mécanique du Dériveur**]({{<relref"/docs/dinghy_mecanic">}})
-- [**🛠 Les réglages**]({{<relref"/docs/settings">}})
-- [**🔂 Les chronologies**]({{<relref"/docs/chronologies">}})
-- [**🌊 Les marées**]({{<relref"/docs/tides">}})
-- [**🗺 Balisage et carte**]({{<relref"/docs/buoyage_system_and_map">}})
-- [**🏁 La régate**]({{<relref"/docs/regatta">}})
-
-Ce cours théorique s'inspire du travail d'Antoine Rogues pour l'[ex niveau 5 ffv en catamaran](http://glenans.arogues.org/niveau5.pdf).
+Ce cours théorique s'inspire du travail d'Antoine Rogues pour
+l'[ex niveau 5 ffv en catamaran](http://glenans.arogues.org/niveau5.pdf).
 
-Ce support ne saurait remplacer un apprentissage auprès de monitrices et moniteurs compétents, il est le fruit d'opinions qui doivent être critiquées, remises en question et enrichies de vos expériences.
+Ce support ne saurait remplacer un apprentissage auprès de monitrices et moniteurs compétents, il est le fruit
+d'opinions qui doivent être critiquées, remises en question et enrichies de vos expériences.
 
 Remerciements chaleureux à ceux qui ont contribué à ce guide.
diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html
@@ -0,0 +1,13 @@
+<div class="flex align-center justify-between">
+  <label for="menu-control">
+    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
+  </label>
+
+  {{ partial "docs/brand" . }}
+
+  <label for="toc-control">
+    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
+    <img src="{{ "svg/toc.svg" | relURL }}" class="book-icon" alt="Table of Contents" />
+    {{ end }}
+  </label>
+</div>
diff --git a/layouts/partials/docs/inject/content-before.html b/layouts/partials/docs/inject/content-before.html
@@ -1,8 +1,13 @@
 <div class="top">
-    {{ if .Params.title }}
-    <h1 id="{{ .Title | anchorize }}">{{ .Title }}</h1>
-    {{ end }}
+    <div class="intro">
+        {{ if .Params.title }}
+        <h1 id="{{ .Title | anchorize }}">{{ .Title }}</h1>
+        {{ end }}
+        {{ if .Params.subtitle }}
+        <p>{{ .Params.subtitle }}</p>
+        {{ end }}
+    </div>
     {{ if .Params.display_reading_time }}
-        <span class="reading_time">{{ partial "docs/reading_time.html" . }}</span>
+    <span class="reading_time">{{ partial "docs/reading_time.html" . }}</span>
     {{ end }}
 </div>
diff --git a/layouts/shortcodes/button_link.html b/layouts/shortcodes/button_link.html
@@ -0,0 +1,3 @@
+<a href='{{ relref . (.Get "relref") }}' {{ if .Get "class" }} class='{{.Get "class"}}' {{ end }}>
+    {{ .Get "title" }}
+</a>
diff --git a/layouts/shortcodes/wrapper.html b/layouts/shortcodes/wrapper.html
@@ -0,0 +1,3 @@
+<div class="{{ .Get 0 }}">
+    {{ .Inner }}
+</div>