Upgrade design
This commit is contained in:
parent
68260ed9d4
commit
9bdf14c12a
|
|
@ -1,3 +1,4 @@
|
|||
public
|
||||
resources
|
||||
node_modules
|
||||
IMG
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 !
|
||||
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 >}}
|
||||
|
|
@ -4,6 +4,6 @@ weight: 2
|
|||
bg_colored: true
|
||||
---
|
||||
|
||||
## Actualités
|
||||
## ACTUALITÉS
|
||||
|
||||
{{< actu >}}
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
|
|
@ -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 !
|
||||
{{< /cell >}}
|
||||
{{< /grid >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
|
|
@ -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 >}}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
|
|
@ -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.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
|
|
@ -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 !
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue