Upgrade design

.gitignore

@@ -1,3 +1,4 @@
 public
 resources
 node_modules
+IMG

assets/css/card.sass

@@ -0,0 +1,49 @@
+$gutter: 20px
+$gutterXS: 10px
+
+.card
+  margin: $gutter 0
+  padding: $gutter
+  background-color: white
+  box-shadow: 0 1px 3px rgba(0,0,0,.1)
+  border-bottom: 1px solid #ebebeb
+
+  .card-image
+    overflow: hidden
+    display: flex
+    justify-content: center
+    padding: $gutter
+
+    img
+      padding: 0
+      margin: 0
+      max-width: 100%
+      max-height: 100%
+
+  .card-body
+    align-self: center
+    background-color: white
+    padding: $gutter
+
+    h3
+      padding: 0
+      margin: 0
+
+    time
+      color: #798081
+      font-size: .8rem
+
+    *:last-child
+      margin-bottom: 0
+      padding-bottom: 0
+
+@media screen and (max-width: 600px)
+  .card
+    margin: $gutterXS 0
+    padding: $gutterXS
+
+    .card-image
+      padding: $gutterXS
+
+    .card-body
+      padding: $gutterXS

assets/css/grid.scss

@@ -11,9 +11,13 @@
 .grid.\-around   { justify-content: space-around; }
 
 .cell            { flex: 1; box-sizing: border-box; }
-.cell.\-center    { text-align: center ;}
+.cell.\-left   { text-align: left ;}
+.cell.\-right   { text-align: right; }
+.cell.\-center   { text-align: center ;}
+.cell img        { max-width: 100% }
 
 @media screen and (min-width: 600px) {
+  .\-even-reverse:nth-child(even) { flex-direction: row-reverse; }
   .cell.\-1of12    { flex: 0 0 calc(100% * 1 / 12); }
   .cell.\-2of12    { flex: 0 0 calc(100% * 2 / 12); }
   .cell.\-3of12    { flex: 0 0 calc(100% * 3 / 12); }
@@ -27,7 +31,7 @@
   .cell.\-11of12   { flex: 0 0 calc(100% * 11 / 12); }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 599px) {
   .grid {
     flex-direction: column;
   }

assets/css/main.sass

@@ -1,8 +1,6 @@
-@import "./font"
-@import "./grid"
-
 // Couleur
 $primary-color: #e72520
+$bg-color: #f2f2f2
 
 // Responsive breakpoints
 $size-xs: 480px
@@ -12,12 +10,17 @@ $size-lg: 960px
 $size-xl: 1280px
 $size-2x: 1440px
 
+@import "./font"
+@import "./grid"
+@import "./card"
+
 body
   margin: 0
   font-family: $font-family
+  font-size: 13px
 
-p
-  font-size: 0.9rem
+h2
+  color: grey
 
 a
   color: black
@@ -89,7 +92,7 @@ a
   .ancre
     top: -86px
 
-@media (max-width: $size-sm)
+@media (max-width: $size-sm - 1px)
   .header
     .menu
       text-align: right
@@ -107,7 +110,7 @@ a
   padding: 20px 0
 
   &.colored
-    background-color: #f2f2f2
+    background-color: $bg-color
 
   @media (max-width: $size-md)
     padding: 10px 0
@@ -115,85 +118,7 @@ a
 #content
   padding-top: 90px
 
-
-$gutter: 10px
-$padding-card: 20px
-$padding-card-body: 20px
-
 .news
   display: flex
   flex-wrap: wrap
   align-items: center
-
-.card
-  margin: 20px 0
-  height: 300px
-  overflow: hidden
-  display: flex
-
-  &:nth-child(even)
-    .card-image
-      order: 2
-    .card-body
-      order: 1
-      margin-left: 0
-      margin-right: -40px
-
-
-
-  .card-image
-    width: 45%
-    overflow: hidden
-    display: flex
-    justify-content: center
-
-    img
-      padding: 0
-      margin: 0
-      align-self: center
-      min-height: 300px
-
-  .card-body
-    z-index: 2
-    width: 55%
-    box-shadow: 0 1px 3px rgba(0,0,0,.1)
-    border-bottom: 1px solid #ebebeb
-    margin-left: -40px
-    align-self: center
-    background-color: white
-    padding: $padding-card-body
-
-    h3
-      padding: 0
-      margin: 0
-
-    time
-      color: #798081
-      font-size: .8rem
-
-    *:last-child
-      margin-bottom: 0
-      padding-bottom: 0
-
-@media (max-width: $size-md)
-  .card
-    .card-image
-      width: 40%
-    .card-body
-      width: 60%
-
-@media (max-width: $size-sm)
-  .card
-    height: inherit
-    .card-image
-      width: 30%
-      max-height: 200px
-      align-self: center
-    .card-body
-      align-self: inherit
-      margin: 0
-      width: 70%
-
-    &:nth-child(even)
-      .card-body
-        margin: 0

auto-publish.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+while inotifywait -e create,moved_to,delete,modify -r ./content/ ./static/; do
+  sleep 20
+  npm run build && npm run ftp-deploy
+  date
+done

content/accueil/about.md

@@ -1,22 +0,0 @@
----
-title: À propos
----
-
-{{< grid class="-middle" >}}
-  {{< cell class="-6of12 -center" >}}
-    <img src="./accueil/book.png" alt="Le livre"  />
-  {{< /cell >}}
-  {{< cell class="-6of12" markdown="true" >}}
-
-## test
-
-Touchée par une terrible épreuve il y a 11 ans, l’histoire d’un pied a débuté.
-J’ai mis à profit mes compétences de graphiste pour raconter en images
-deux ans de ma vie, concentrés en 20 carnets.
-
-Au début dessiner me permettait de passer le temps qui s’est arrêté d’un coup&nbsp;!
-Puis cela est devenu une véritable addiction et même une thérapie.  
-J’y raconte mes journées, mes émotions, mes doutes, mes questionnements,
-et la découverte du milieu hospitalier.
-  {{< /cell >}}
-{{< /grid >}}

content/accueil/actu.md

@@ -4,6 +4,6 @@ weight: 2
 bg_colored: true
 ---
 
-## Actualités
+## ACTUALITÉS
 
 {{< actu >}}

content/accueil/apropos.md

@@ -0,0 +1,19 @@
+---
+title: À propos
+weight: 3
+---
+
+## À PROPOS
+
+{{< grid class="-middle" >}}
+  {{< cell class="-4of12 -center" >}}
+    <img src="./accueil/apropos.png" alt="Le livre" width="180"/>
+  {{< /cell >}}
+  {{< cell class="-8of12 " markdown="true" >}}
+« Après des études de graphisme, je suis embauchée en tant que graphiste à l’Agence «Five» une agence de communication specialisée dans le domaine  de la beauté et l’édition. Le 6 novembre 2008, j’ai du arrêter mon travail pendant plusieurs mois suite à l’histoire que je m’apprête à vous raconter :). Je me suis alors noyée dans l’illustration ! Quel bonheur !
+
+J’ai ensuite repris mon travail mais j’ai quitté rapidement mon agence pour devenir freelance et aujourd’hui je suis toujours en free et ravie ! Ce statut m’a permis de quitter Paris avec mon compagnon.
+
+Début 2016, nous sommes partis pour 2 ans de nomadisme, une incroyable expérience de voyager tout en travaillant ! Aujourd’hui je suis installée avec ma famille, dans un petit coin de paradis tout près de Roanne. »
+  {{< /cell >}}
+{{< /grid >}}

content/accueil/bienvenue.md

@@ -0,0 +1,15 @@
+---
+---
+
+{{< grid class="-middle" >}}
+  {{< cell class="-6of12 -center" >}}
+    <img src="./accueil/bienvenue.png" alt="Le livre"  />
+  {{< /cell >}}
+  {{< cell class="-6of12" markdown="true" >}}
+### Bienvenue
+
+Je vous invite à sauter à pieds joints dans mon nouveau site “Histoire
+d’un pied” et à suivre l’aventure de l'édition de mes carnets. Au fil du
+ temps, je vous tiendrai au courant des actus et avancées de mon projet&nbsp;!
+  {{< /cell >}}
+{{< /grid >}}

content/accueil/contact.md

@@ -1,12 +1,22 @@
 ---
 title: Contact
-weight: 3
+weight: 4
+bg_colored: true
 ---
 
-## Contact
+## CONTACT
 
-blablabla
-
-### Bienvenue !!!
-
-Je voulais vous montrer comment faire un site low tech
+{{< grid class="-top" >}}
+  {{< cell class="-4of12" markdown="true" >}}
+Gillet Anne-Sophie  
+une @ histoiredunpied.com  
+06 43 3 / 6 54 83
+  {{< /cell >}}
+  {{< cell class="-4of12" markdown="true" >}}
+Suivez-moi sur [facebook](https://facebook.com)
+   {{< /cell >}}
+   {{< cell class="-4of12" markdown="true" >}}
+Ce site est un site low-tech.  
+Simon Constans
+    {{< /cell >}}
+ {{< /grid >}}

content/actu/2020-02-11 - A Propos/index.md

@@ -0,0 +1,9 @@
+---
+title: À propos du projet
+date: 2020-02-11
+image: img_aproposprojet.jpg
+---
+
+Touchée par une terrible épreuve il y a 11 ans, j’ai mis à profit mes compétences de graphiste pour raconter en images deux ans de ma vie, concentrés en 20 carnets.
+Au début, dessiner me permettait de passer le temps qui s’est arrêté d’un coup !
+Puis cela est devenu une véritable addiction et même une thérapie. J’y raconte mes journées, mes émotions, mes doutes, mes questionnements, et la découverte du milieu hospitalier.

content/actu/2020-02-11 - Autumn/index.md

@@ -1,7 +0,0 @@
----
-title: Bienvenue
-date: 2020-02-11
-image: illustration-autumn1.jpg
----
-
-Je vous invite à sauter à pieds joints dans mon nouveau site "Histoire d'un pied" et à suivre l'aventure de l'édition de mes carnets. Au fil du temps, je vous tiendrai au courant des actus et avancées de mon projet !

layouts/shortcodes/actu.html

@@ -3,15 +3,15 @@
     {{ $actu := . }}
     {{ range .Resources.ByType "page" }}
       {{ if or (not .Params.draft) (eq hugo.Environment "development") }}
-        <article class="card">
-          <div class="card-image">
+        <article class="card grid -middle -even-reverse">
+          <div class="card-image cell -5of12">
             {{ $src := $actu.Resources.GetMatch (printf "*%s/%s*" (path.Base .File.Dir) (.Params.Image)) }}
             {{ if $src }}
               {{ $image := $src.Fill "432x300" }}
               <img src="{{ $image.RelPermalink }}" />
             {{ end }}
           </div>
-          <div class="card-body">
+          <div class="card-body cell -7of12">
             <h3>{{ .Title }}</h3>
             <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
             {{ .Content }}