up header + footer

edrlab · Apr 22, 2024 · a9e6b51 · a9e6b51
1 parent f45c5e5
commit a9e6b51
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 6 deletions.
diff --git a/assets/sass/_custom.sass b/assets/sass/_custom.sass
@@ -43,23 +43,73 @@
     display: bloc
     width: 20em
 
+.nav_header
+    height: 100px
+    background-color: #1b3c6c
+
 .nav_body
     justify-content: flex-end
-
-.nav_body .follow
-    flex: unset
+    gap: 50px
 
 .nav_item
     text-decoration: none
     color: inherit
 
-.nav_item[title="Main EDRLab website"]
+.nav_item[title="EDRLab website"]
     border: 1px solid white
     border-radius: 5px
     color: white
-    background-color: #002538
+    background-color: #1b3c6c
     font-weight: bold
 
+.footer
+    height: fit-content
+    background-color: #f4f8fe
+
+
+.footer_inner
+    display: flex
+    align-items: flex-start
+    justify-content: space-around
+    margin: 0 40px
+    max-width: unset
+    height: 100%
+    color: #1b3c6c
+    div
+        flex: 1
+        max-width: 300px
+    h6
+        margin-bottom: 15px
+    svg
+        fill: #1b3c6c
+        background-color: white
+        padding: 10px
+        border-radius: 50%
+        height: 20px
+        width: 20px
+        box-sizing: content-box
+
+.readium_container
+    max-width: 250px
+
+.address, .mail
+    display: flex
+    align-items: center
+    gap: 10px
+    margin-bottom: 20px
+    address, a
+        font-style: unset
+        color: #1b3c6c
+        text-decoration: none
+
+.follow
+    justify-content: flex-start
+.copyright
+    position: absolute
+    bottom: 0
+    display: flex
+    align-items: center
+
 .post_link
     text-decoration: none
     color: inherit
@@ -86,6 +136,9 @@
 @media screen and (max-width: 900px)
     .grid-inverse
         grid-column-gap: 1rem
+    .footer_inner
+        flex-direction: column
+        align-items: center
 
 @media screen and (max-width: 769px)
     .jsopen .nav_body 

diff --git a/config/_default/menus/menu.en.toml b/config/_default/menus/menu.en.toml
@@ -47,7 +47,7 @@
 
 # Submenus are done this way: parent -> identifier
 [[main]]
-  name = "Main EDRLab website"
+  name = "EDRLab website"
   url = "https://www.edrlab.org/about/"
   identifier = "edrlaborg"
   weight = 170

diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
@@ -0,0 +1,21 @@
+<div class='contact'>
+    <div class="address">
+        <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+            width="800px" height="800px" viewBox="0 0 512 512"  xml:space="preserve">
+            <g>
+                <path class="st0" d="M390.54,55.719C353.383,18.578,304.696,0,255.993,0c-48.688,0-97.391,18.578-134.547,55.719
+                c-59.219,59.219-74.641,149.563-36.094,218.875C129.586,354.109,255.993,512,255.993,512s126.422-157.891,170.656-237.406
+                C465.195,205.281,449.773,114.938,390.54,55.719z M255.993,305.844c-63.813,0-115.563-51.75-115.563-115.547
+                c0-63.859,51.75-115.609,115.563-115.609c63.828,0,115.578,51.75,115.578,115.609C371.571,254.094,319.821,305.844,255.993,305.844
+                z"/>
+            </g>
+        </svg>
+        <address>15 Rue de la Bûcherie,<br/>75005 Paris, France</address>
+    </div>
+    <div class="mail">
+        <svg width="800px" height="800px" viewBox="0 0 24 24" fill="#1b3c6c" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3.29289 5.29289C3.47386 5.11193 3.72386 5 4 5H20C20.2761 5 20.5261 5.11193 20.7071 5.29289M3.29289 5.29289C3.11193 5.47386 3 5.72386 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.72386 20.8881 5.47386 20.7071 5.29289M3.29289 5.29289L10.5858 12.5857C11.3668 13.3668 12.6332 13.3668 13.4142 12.5857L20.7071 5.29289" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <a href="mailto:contact@edrlab.org">contact@edrlab.org</a>
+    </div>
+</div>
diff --git a/layouts/partials/follow.html b/layouts/partials/follow.html
@@ -0,0 +1,22 @@
+{{- $base := absURL "" }}
+{{- $items := .Site.Data.social }}
+{{- $social := .Site.Menus.social }}
+{{- with $social }}
+  {{- $items = . }}
+{{- end }}
+<div class='follow'>
+  {{- range $items }}
+  {{- $url := .URL }}
+  {{- $label := lower .Name }}
+  {{- if eq $social nil }}
+    {{ $url = .url }}
+    {{ $label = lower .item }}
+  {{- end }}
+  {{- if and (eq (hasPrefix $url $base) false) (eq (hasPrefix $url "http") false) }}
+    {{ $url = absLangURL $url }}
+  {{- end }}
+  <a href="{{ $url }}">
+    {{ partial "sprite" (dict "icon" $label) }}
+  </a>
+  {{- end }}
+</div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,32 @@
+{{- $s := .Site.Params }}
+{{- $c := default .Site.Title .Site.Copyright  }}
+{{- if or .Params.enableMathNotation $s.enableMathNotation }}
+  {{ partialCached "math" . }}
+{{- end }}
+{{- $iconsDir := default "icons/" .Site.Params.iconsDir }}
+{{- $defaultFooterLogo := printf "%s%s" $iconsDir "apple-touch-icon.png"}}
+<footer class="footer">
+    {{- partialCached "top" .}}
+  <div class="footer_inner wrap pale">
+    <!-- <span class="copyright">
+        <img src='{{ absURL (default $defaultFooterLogo $s.footerLogo) }}' class="icon icon_2 transparent" alt="{{ $c }}">
+        <p>{{ T "copyright" | markdownify }}{{ with $s.since }}&nbsp;{{ . }}-{{ end }}&nbsp;<span class="year"></span>&nbsp;{{ upper $c }}. {{ T "all_rights" | markdownify }}</p>
+    </span> -->
+    <div class="about_container">
+        <h6>ABOUT US</h6>
+        <p>The European Digital Reading Lab (EDRLab) is a non-profit development laboratory, created in 2015 and based in Paris. <a href="https://www.edrlab.org/">[More...]</a></p>
+    </div>
+    <div class="readium_container">
+        <h6>READIUM - W3C</h6>
+        <p>EDRLab is the main contributor of the Readium Project and member of the W3C</p>
+    </div>
+    <div class="contact_container">
+        <h6>CONTACT</h6>
+        {{- partialCached "contact" . }}
+    </div>
+    <div class="follow_container">
+        <h6>FOLLOW US</h6>
+        {{- partialCached "follow" . }}
+    </div>
+  </div>
+</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -0,0 +1,35 @@
+{{- $params := .Site.Params }}
+{{- $centerLogo := $params.centerLogo }}
+{{ $logo := $params.logo }}
+<header class="nav_header" >
+  <nav class="nav">
+    {{- if $centerLogo }}
+      {{- partialCached "logo" (dict "logo" $logo "class" "nav_hide") }}
+    {{- else }}
+      {{- partialCached "logo" (dict "logo" $logo) }}
+    {{- end }}
+    <div class='nav_body nav_body_{{ default "left" $params.mobileNavigation }}'>
+      {{ $context := . }}
+      {{ $menuData := .Site.Data.menu }}
+      {{ with $menuData }}
+        {{ partial "nav" (dict "context" $context "menu" $menuData) }}
+      {{- else }}
+        {{ partial "nav" (dict "context" . "menu" .Site.Menus.main) }}
+      {{- end }}
+      {{ if .Site.IsMultiLingual }}
+      <div class="nav_parent">
+        <a href="#" class="nav_item">{{ $params.languageMenuName }}</a>
+        <div class="nav_sub">
+          <span class="nav_child"></span>
+          {{ range .Site.Home.AllTranslations }}
+          <a href="{{ .Permalink }}" class="nav_child nav_item">{{ .Language.LanguageName }}</a>
+          {{ end }}
+        </div>
+      </div>
+      {{- end }}
+      {{- if $centerLogo }}
+        {{- partial "logo" (dict "logo" $logo "class" "nav_center") }}
+      {{- end }}
+    </div>
+  </nav>
+</header>