diff --git a/assets/css/grid.scss b/assets/css/grid.scss new file mode 100644 index 0000000..9587a70 --- /dev/null +++ b/assets/css/grid.scss @@ -0,0 +1,37 @@ +.grid { display: flex; flex-wrap: wrap; } +.grid.\-top { align-items: flex-start; } +.grid.\-middle { align-items: center; } +.grid.\-bottom { align-items: flex-end; } +.grid.\-stretch { align-items: stretch; } +.grid.\-baseline { align-items: baseline; } +.grid.\-left { justify-content: flex-start; } +.grid.\-center { justify-content: center; } +.grid.\-right { justify-content: flex-end; } +.grid.\-between { justify-content: space-between; } +.grid.\-around { justify-content: space-around; } + +.cell { flex: 1; box-sizing: border-box; } +.cell.\-center { text-align: center ;} + +@media screen and (min-width: 600px) { + .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); } + .cell.\-4of12 { flex: 0 0 calc(100% * 4 / 12); } + .cell.\-5of12 { flex: 0 0 calc(100% * 5 / 12); } + .cell.\-6of12 { flex: 0 0 calc(100% * 6 / 12); } + .cell.\-7of12 { flex: 0 0 calc(100% * 7 / 12); } + .cell.\-8of12 { flex: 0 0 calc(100% * 8 / 12); } + .cell.\-9of12 { flex: 0 0 calc(100% * 9 / 12); } + .cell.\-10of12 { flex: 0 0 calc(100% * 10 / 12); } + .cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); } +} + +@media screen and (max-width: 600px) { + .grid { + flex-direction: column; + } + .cell { + flex: 0 0 auto; + } +} diff --git a/assets/css/main.sass b/assets/css/main.sass index ff3cb9c..9e494c2 100644 --- a/assets/css/main.sass +++ b/assets/css/main.sass @@ -7,21 +7,38 @@ //@import "node_modules/spectre.css/src/spectre" //@import "node_modules/spectre.css/src/spectre-exp" //@import "node_modules/spectre.css/src/spectre-icons" +//@import "node_modules/spectre.css/src/_variables" +@import "./grid" -@mixin container - max-width: 940px - width: 90% - margin: 0 auto +// Responsive breakpoints +$size-xs: 480px +$size-sm: 600px +$size-md: 840px +$size-lg: 960px +$size-xl: 1280px +$size-2x: 1440px body margin: 0 a color: black + text-decoration-color: #e72520 + + &:hover + color: #e72520 + +@mixin container + max-width: $size-lg + margin: 0 auto + padding: 0 20px + +.container + @include container .header position: fixed - z-index: 1 + z-index: 3 left: 0 right: 0 height: 90px @@ -31,7 +48,6 @@ a .container display: flex height: 100% - border-bottom: 1px dotted black .accueil padding: 15px @@ -45,8 +61,6 @@ a margin-right: -20px a - color: black - text-decoration-color: black text-decoration-thickness: 3px text-underline-offset: 10px padding: 15px @@ -60,25 +74,127 @@ a li display: inline + +.ancre + position: absolute + top: -126px + +@media (max-width: $size-md) + .header + height: 70px + .container + justify-content: space-between + align-items: center + .logo + height: 30px + + .ancre + top: -86px + +@media (max-width: $size-sm) + .header + .menu + text-align: right + margin: 0 + a + padding: 0 + margin: 0 + text-decoration-thickness: 1px + text-underline-offset: 1px + li + display: block + .bg position: relative - height: 1000px + padding: 20px 0 &.colored - background-color: green + background-color: #f2f2f2 + + @media (max-width: $size-md) + padding: 10px 0 #content padding-top: 90px -.container - @include container -.ancre - text-align: center - position: absolute - top: -106px +$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 -@media (max-width: 768px) - .menu - visibility: hidden + + .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: #bcc3ce + + *: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 diff --git a/config.toml b/config.toml index a5a6928..484dc7f 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,6 @@ -baseURL = "https://histoiredunpied.com/" +baseURL = "https://histoiredunpied.lamelio.fr/" languageCode = "fr-fr" title = "Histoire d'un Pied" theme = "lowtech" + +disableKinds = ["taxonomy", "taxonomyTerm"] diff --git a/content/about.md b/content/about.md deleted file mode 100644 index 4f51469..0000000 --- a/content/about.md +++ /dev/null @@ -1,7 +0,0 @@ -## À propos - -blablabla - -### Bienvenue !!! - -Je voulais vous montrer comment faire un site low tech diff --git a/content/accueil/about.md b/content/accueil/about.md new file mode 100644 index 0000000..7b40f31 --- /dev/null +++ b/content/accueil/about.md @@ -0,0 +1,22 @@ +--- +title: À propos +--- + +{{< grid class="-middle" >}} + {{< cell class="-4of12 -center" >}} + Le livre + {{< /cell >}} + {{< cell class="-8of12" 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 >}} diff --git a/content/accueil/actu.md b/content/accueil/actu.md new file mode 100644 index 0000000..5293f4a --- /dev/null +++ b/content/accueil/actu.md @@ -0,0 +1,9 @@ +--- +title: Actualités +weight: 2 +bg_colored: true +--- + +## Actualités + +{{< actu >}} diff --git a/content/accueil/book.png b/content/accueil/book.png new file mode 100644 index 0000000..37047f6 Binary files /dev/null and b/content/accueil/book.png differ diff --git a/content/contact.md b/content/accueil/contact.md similarity index 74% rename from content/contact.md rename to content/accueil/contact.md index d1cd6b6..41235c7 100644 --- a/content/contact.md +++ b/content/accueil/contact.md @@ -1,3 +1,8 @@ +--- +title: Contact +weight: 3 +--- + ## Contact blablabla diff --git a/content/accueil/index.md b/content/accueil/index.md new file mode 100644 index 0000000..ca03031 --- /dev/null +++ b/content/accueil/index.md @@ -0,0 +1,3 @@ +--- +headless: true +--- diff --git a/content/actu/2020-02-11 - Autumn/illustration-autumn1.jpg b/content/actu/2020-02-11 - Autumn/illustration-autumn1.jpg new file mode 100644 index 0000000..2de0c79 Binary files /dev/null and b/content/actu/2020-02-11 - Autumn/illustration-autumn1.jpg differ diff --git a/content/actu/2020-02-11 - Autumn/index.md b/content/actu/2020-02-11 - Autumn/index.md new file mode 100644 index 0000000..4a259c2 --- /dev/null +++ b/content/actu/2020-02-11 - Autumn/index.md @@ -0,0 +1,7 @@ +--- +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 ! diff --git a/content/actu/index.md b/content/actu/index.md new file mode 100644 index 0000000..ca03031 --- /dev/null +++ b/content/actu/index.md @@ -0,0 +1,3 @@ +--- +headless: true +--- diff --git a/layouts/index.html b/layouts/index.html index bb5085c..1c31916 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,23 +1,13 @@ {{ define "main" }} -
-

-

-

Actualités

-

- orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -

-
-
-
-

-

- {{ with .Site.GetPage "/about.md" }}{{ .Content }}{{ end }} -
-
-
-

-

- {{ with .Site.GetPage "/contact.md" }}{{ .Content }}{{ end }} -
-
+ {{ with .Site.GetPage "/accueil" }} + {{ $pages := .Resources.ByType "page" }} + {{ range sort $pages "Params.weight" }} +
+ {{ with .File }}

{{ end }} +

+ {{ .Content }} +
+
+ {{ end }} + {{ end }} {{ end }} diff --git a/layouts/partials/image.html b/layouts/partials/image.html new file mode 100644 index 0000000..ace08ae --- /dev/null +++ b/layouts/partials/image.html @@ -0,0 +1,2 @@ +test +{{ .Page.Dir }} diff --git a/layouts/shortcodes/actu.html b/layouts/shortcodes/actu.html new file mode 100644 index 0000000..3989ba1 --- /dev/null +++ b/layouts/shortcodes/actu.html @@ -0,0 +1,23 @@ +
+ {{ with .Site.GetPage "/actu" }} + {{ $actu := . }} + {{ range .Resources.ByType "page" }} + {{ if or (not .Params.draft) (eq .Hugo.Environment "development") }} +
+
+ {{ $src := $actu.Resources.GetMatch (printf "*%s/%s*" (path.Base .File.Dir) (.Params.Image)) }} + {{ if $src }} + {{ $image := $src.Fill "432x300" }} + + {{ end }} +
+
+

{{ .Title }}

+ + {{ .Content }} +
+
+ {{ end }} + {{ end }} + {{ end }} +
diff --git a/layouts/shortcodes/cell.html b/layouts/shortcodes/cell.html new file mode 100644 index 0000000..f05f490 --- /dev/null +++ b/layouts/shortcodes/cell.html @@ -0,0 +1,10 @@ +{{ $class := .Get "class" }} +{{ $body := .Get "text" | default .Inner }} +{{ $markdown := .Get "markdown" | default false }} +
+ {{ if $markdown }} + {{ $.Page.RenderString .Inner }} + {{ else }} + {{ .Inner }} + {{ end }} +
diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html new file mode 100644 index 0000000..79e0ad7 --- /dev/null +++ b/layouts/shortcodes/grid.html @@ -0,0 +1,3 @@ +{{ $class := .Get "class" }} +{{ $body := .Get "text" | default .Inner }} +
{{ $body }}
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html new file mode 100644 index 0000000..be02c02 --- /dev/null +++ b/layouts/shortcodes/image.html @@ -0,0 +1 @@ +{{ partial "image.html" . }} diff --git a/package.json b/package.json index b3d66b3..21587f1 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ }, "scripts": { "start": "hugo server -D", - "build": "hugo -D --minify", + "build": "rm -rf public && hugo -D --minify", + "favicon": "convert static/icon.png -resize 32x32 -colors 16 \\( -clone 0 -resize 16x16 -extent 16x16 \\) \\( -clone 0 -resize 32x32 -extent 32x32 \\) -delete 0 static/favicon.ico", + "deploy": "docker-compose up -d --build", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Simon ", diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..9619611 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/icon.png b/static/icon.png new file mode 100644 index 0000000..bf1841f Binary files /dev/null and b/static/icon.png differ diff --git a/static/logo.jpg b/static/logo.jpg deleted file mode 100644 index b736696..0000000 Binary files a/static/logo.jpg and /dev/null differ diff --git a/static/logo.svg b/static/logo.svg new file mode 100644 index 0000000..7c4653e --- /dev/null +++ b/static/logo.svg @@ -0,0 +1,59 @@ + + + + +logo_histoiredunpied_site + + + + + + + + + + + + + + + + + + + + diff --git a/static/logo_histoiredunpied_site.svg b/static/logo_histoiredunpied_site.svg deleted file mode 100644 index d1a9d8b..0000000 --- a/static/logo_histoiredunpied_site.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - -logo_histoiredunpied_site - - - - - - - - - - - - - - - - - - - - diff --git a/static/original.jpg b/static/original.jpg deleted file mode 100644 index a89290e..0000000 Binary files a/static/original.jpg and /dev/null differ diff --git a/themes/lowtech/layouts/partials/head.html b/themes/lowtech/layouts/partials/head.html index 43ea100..1f4d2cd 100644 --- a/themes/lowtech/layouts/partials/head.html +++ b/themes/lowtech/layouts/partials/head.html @@ -1,2 +1,12 @@ + + +{{ .Site.Title }} + + + + + + + {{ $style := resources.Get "css/main.sass" | toCSS | minify | fingerprint }} diff --git a/themes/lowtech/layouts/partials/header.html b/themes/lowtech/layouts/partials/header.html index c8f8063..b98cebb 100644 --- a/themes/lowtech/layouts/partials/header.html +++ b/themes/lowtech/layouts/partials/header.html @@ -1,20 +1,19 @@
- +