Upgrade design

This commit is contained in:
Simon 2020-02-20 18:29:02 +01:00
parent 68260ed9d4
commit 9bdf14c12a
18 changed files with 136 additions and 127 deletions

1
.gitignore vendored
View File

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

49
assets/css/card.sass Normal file
View File

@ -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

View File

@ -11,9 +11,13 @@
.grid.\-around { justify-content: space-around; } .grid.\-around { justify-content: space-around; }
.cell { flex: 1; box-sizing: border-box; } .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) { @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.\-1of12 { flex: 0 0 calc(100% * 1 / 12); }
.cell.\-2of12 { flex: 0 0 calc(100% * 2 / 12); } .cell.\-2of12 { flex: 0 0 calc(100% * 2 / 12); }
.cell.\-3of12 { flex: 0 0 calc(100% * 3 / 12); } .cell.\-3of12 { flex: 0 0 calc(100% * 3 / 12); }
@ -27,7 +31,7 @@
.cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); } .cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 599px) {
.grid { .grid {
flex-direction: column; flex-direction: column;
} }

View File

@ -1,8 +1,6 @@
@import "./font"
@import "./grid"
// Couleur // Couleur
$primary-color: #e72520 $primary-color: #e72520
$bg-color: #f2f2f2
// Responsive breakpoints // Responsive breakpoints
$size-xs: 480px $size-xs: 480px
@ -12,12 +10,17 @@ $size-lg: 960px
$size-xl: 1280px $size-xl: 1280px
$size-2x: 1440px $size-2x: 1440px
@import "./font"
@import "./grid"
@import "./card"
body body
margin: 0 margin: 0
font-family: $font-family font-family: $font-family
font-size: 13px
p h2
font-size: 0.9rem color: grey
a a
color: black color: black
@ -89,7 +92,7 @@ a
.ancre .ancre
top: -86px top: -86px
@media (max-width: $size-sm) @media (max-width: $size-sm - 1px)
.header .header
.menu .menu
text-align: right text-align: right
@ -107,7 +110,7 @@ a
padding: 20px 0 padding: 20px 0
&.colored &.colored
background-color: #f2f2f2 background-color: $bg-color
@media (max-width: $size-md) @media (max-width: $size-md)
padding: 10px 0 padding: 10px 0
@ -115,85 +118,7 @@ a
#content #content
padding-top: 90px padding-top: 90px
$gutter: 10px
$padding-card: 20px
$padding-card-body: 20px
.news .news
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
align-items: center 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

6
auto-publish.sh Executable file
View File

@ -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

View File

@ -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, lhistoire dun pied a débuté.
Jai 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 sest arrêté dun coup&nbsp;!
Puis cela est devenu une véritable addiction et même une thérapie.
Jy raconte mes journées, mes émotions, mes doutes, mes questionnements,
et la découverte du milieu hospitalier.
{{< /cell >}}
{{< /grid >}}

View File

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

View File

@ -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 à lAgence «Five» une agence de communication specialisée dans le domaine de la beauté et lédition. Le 6 novembre 2008, jai du arrêter mon travail pendant plusieurs mois suite à lhistoire que je mapprête à vous raconter :). Je me suis alors noyée dans lillustration ! Quel bonheur !
Jai ensuite repris mon travail mais jai quitté rapidement mon agence pour devenir freelance et aujourdhui je suis toujours en free et ravie ! Ce statut ma 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 ! Aujourdhui je suis installée avec ma famille, dans un petit coin de paradis tout près de Roanne. »
{{< /cell >}}
{{< /grid >}}

BIN
content/accueil/apropos.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

View File

@ -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
dun pied” et à suivre laventure 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 >}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

View File

@ -1,12 +1,22 @@
--- ---
title: Contact title: Contact
weight: 3 weight: 4
bg_colored: true
--- ---
## Contact ## CONTACT
blablabla {{< grid class="-top" >}}
{{< cell class="-4of12" markdown="true" >}}
### Bienvenue !!! Gillet Anne-Sophie
une @ histoiredunpied.com
Je voulais vous montrer comment faire un site low tech 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 >}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

View File

@ -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, jai 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 sest arrêté dun coup !
Puis cela est devenu une véritable addiction et même une thérapie. Jy raconte mes journées, mes émotions, mes doutes, mes questionnements, et la découverte du milieu hospitalier.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 212 KiB

View File

@ -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 !

View File

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