From 60c8f483daf58dc37d5670f8bc34da0a92077d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= Date: Sat, 11 May 2019 19:28:17 +0200 Subject: [PATCH] Add layouts and style for first version --- layouts/_default/baseof.html | 33 ++++ layouts/_default/list.html | 13 ++ layouts/_default/single.html | 3 + layouts/index.html | 8 + layouts/partials/humanize_season.html | 3 + layouts/partials/humanize_veganness.html | 4 + layouts/partials/ingredients.html | 10 ++ layouts/partials/pagetitle.html | 3 + layouts/partials/recipe_list_entry.html | 18 ++ layouts/partials/recipelist.html | 11 ++ layouts/partials/site-footer.html | 10 ++ layouts/partials/site-header.html | 5 + layouts/recettes/single.html | 27 +++ scss/Makefile | 10 ++ scss/_params.scss | 20 +++ scss/style.scss | 217 +++++++++++++++++++++++ static/css/style.css | 155 ++++++++++++++++ 17 files changed, 550 insertions(+) create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.html create mode 100644 layouts/partials/humanize_season.html create mode 100644 layouts/partials/humanize_veganness.html create mode 100644 layouts/partials/ingredients.html create mode 100644 layouts/partials/pagetitle.html create mode 100644 layouts/partials/recipe_list_entry.html create mode 100644 layouts/partials/recipelist.html create mode 100644 layouts/partials/site-footer.html create mode 100644 layouts/partials/site-header.html create mode 100644 layouts/recettes/single.html create mode 100644 scss/Makefile create mode 100644 scss/_params.scss create mode 100644 scss/style.scss create mode 100644 static/css/style.css diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..020ac71 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,33 @@ + + + + + + {{ block "title" . }} + {{ .Site.Title }} + {{ end }} + + + {{ block "header" . }} + {{ partial "site-header.html" . }} + {{ end }} + + {{ block "ingredients" . }} + {{ end }} + +
+ {{ block "pagename" . }} + {{ partial "pagetitle.html" . }} + {{ end }} + +
+ {{ block "main" . }} + {{ end }} +
+
+ + {{ block "footer" . }} + {{ partial "site-footer.html" . }} + {{ end }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..ef8874c --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,13 @@ +{{ define "main" }} +
+ {{ .Content }} +
+ +
+ +
+{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..e0e8308 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,3 @@ +{{ define "main" }} + {{ .Content }} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..a969628 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,8 @@ +{{ define "pagename" }} +{{ end }} + +{{ define "main" }} +{{ .Content }} + +{{ partial "recipelist.html" . }} +{{ end }} diff --git a/layouts/partials/humanize_season.html b/layouts/partials/humanize_season.html new file mode 100644 index 0000000..4a3364d --- /dev/null +++ b/layouts/partials/humanize_season.html @@ -0,0 +1,3 @@ +{{- if . | eq "winter" -}}Hiver +{{- else if . | eq "summer" -}}Été +{{- else -}}{{ . }}{{- end -}} diff --git a/layouts/partials/humanize_veganness.html b/layouts/partials/humanize_veganness.html new file mode 100644 index 0000000..fc78ffa --- /dev/null +++ b/layouts/partials/humanize_veganness.html @@ -0,0 +1,4 @@ +{{- if . | eq "vegan" -}}Vegan +{{- else if . | eq "veganisable" -}}Veganisable +{{- else if . | eq "vege" -}}Végétarien +{{- else -}}{{ . }}{{- end -}} diff --git a/layouts/partials/ingredients.html b/layouts/partials/ingredients.html new file mode 100644 index 0000000..2eda24f --- /dev/null +++ b/layouts/partials/ingredients.html @@ -0,0 +1,10 @@ +
+
+
Ingrédients
+
    + {{ range $.Param "ingredients" }} +
  • {{ with .qt }}{{ . }}{{ end }} {{ .name }}
    • + {{ end }} +
+
+
diff --git a/layouts/partials/pagetitle.html b/layouts/partials/pagetitle.html new file mode 100644 index 0000000..e775020 --- /dev/null +++ b/layouts/partials/pagetitle.html @@ -0,0 +1,3 @@ +
+ {{ .Page.Title }} +
diff --git a/layouts/partials/recipe_list_entry.html b/layouts/partials/recipe_list_entry.html new file mode 100644 index 0000000..960b54c --- /dev/null +++ b/layouts/partials/recipe_list_entry.html @@ -0,0 +1,18 @@ +
  • + + {{ .Title }} + + {{ with .Params.veganness }} + v + {{ end }} + {{ with .Params.season }} + + {{- if . | eq "summer" -}}✿ + {{- else if . | eq "winter" -}} + {{- end -}} + + {{ end }} + + +
    • + diff --git a/layouts/partials/recipelist.html b/layouts/partials/recipelist.html new file mode 100644 index 0000000..ddb92be --- /dev/null +++ b/layouts/partials/recipelist.html @@ -0,0 +1,11 @@ +{{ range where .Sections "Type" "==" "recettes" }} +{{ range .Sections }} +

    {{ .Title }}

    + + +{{ end }} +{{ end }} diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html new file mode 100644 index 0000000..5c9616f --- /dev/null +++ b/layouts/partials/site-footer.html @@ -0,0 +1,10 @@ + diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html new file mode 100644 index 0000000..fd040fb --- /dev/null +++ b/layouts/partials/site-header.html @@ -0,0 +1,5 @@ + diff --git a/layouts/recettes/single.html b/layouts/recettes/single.html new file mode 100644 index 0000000..9826fe0 --- /dev/null +++ b/layouts/recettes/single.html @@ -0,0 +1,27 @@ +{{ define "ingredients" }} +{{ partial "ingredients.html" . }} +{{ end }} + +{{ define "pagename" }} +
    + {{ partial "pagetitle.html" . }} + +
    + {{ with .Params.veganness }} +
    + {{ partial "humanize_veganness.html" . }} +
    + {{ end }} + + {{ with .Params.season }} +
    + {{ partial "humanize_season.html" . }} +
    + {{ end }} +
    +
    +{{ end }} + +{{ define "main" }} + {{ .Content }} +{{ end }} diff --git a/scss/Makefile b/scss/Makefile new file mode 100644 index 0000000..cde9ecb --- /dev/null +++ b/scss/Makefile @@ -0,0 +1,10 @@ +STYLES=style.scss +IMPORTS=$(shell ls -1 _*.scss) +OUTDIR=../static/css + +SASS=sassc + +all: $(addprefix $(OUTDIR)/,$(STYLES:.scss=.css)) + +$(OUTDIR)/%.css: %.scss $(IMPORTS) + $(SASS) "$<" "$@" diff --git a/scss/_params.scss b/scss/_params.scss new file mode 100644 index 0000000..f7566f7 --- /dev/null +++ b/scss/_params.scss @@ -0,0 +1,20 @@ +// vim: tabstop=2 shiftwidth=2 expandtab + +$bg_color: #010018; +$link_color: #2081c8; +$fg_color: #e4e4e4; +$secondary_bg_color: #178ca7; +$head_bg_color: $secondary_bg_color; +$footer_fg_color: darken($fg_color, 30%); + +// Veganness +$veganness_vegan_color: #40d540; +$veganness_veganisable_color: #bfce2a; +$veganness_vege_color: #ce8649; + +// Seasonality +$season_winter_color: #02bace; +$season_summer_color: #ff3838; + +$break_large: 1600px; +$content_max_width: 800px; diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..811aca2 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,217 @@ +// vim: tabstop=2 shiftwidth=2 expandtab + +@import url('fonts.css'); +@import 'params'; + +html { + background-color: $bg_color; + color:$fg_color; + height: 100%; +} + +body { + font-family:Open Sans,Arial; + font-size:16px; + line-height:1.4; + text-align:justify; + margin: 0; + padding: 0; + min-height: 100%; + display: flex; + flex-direction: column; +} + +#head { + background-color: $head_bg_color; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 30px 60px; + color: $bg_color; + + .sitetitle { + font-size: 1.4em; + font-weight: bold; + } + + a, a:visited { + color: $bg_color; + } +} + +#ingredients { + @media screen and (min-width: $break_large) { + float: left; + max-width: 300px; + margin: 0; + margin-top: 30px; + margin-left: 50px; + margin-right: 50px; + position: fixed; + box-sizing: border-box; + } + + max-width: $content_max_width; + box-sizing: border-box; + margin: 30px auto; + + padding: 20px; + border: 1px solid $secondary_bg_color; + border-radius: 10px; + text-align: left; + + .ingred-title { + font-size: 1.3em; + font-weight: bold; + } + + ul { + padding-left: 25px; + } +} + +#content { + margin: 0 auto; + max-width: $content_max_width; + padding:2em 1em; + height: 100%; + + h1 { + font-size: 1.4em; + } + + h2 { + font-size: 1.3em; + text-indent: 2ex; + } + + h3 { + font-size: 1.1em; + text-indent: 4ex; + } + + .pagenamerow { + display: flex; + align-items: center; + justify-content: space-between; + } + #pagename { + font-size: 1.5em; + font-weight: bold; + } +} + +#foot { + font-size: 0.7em; + color: $footer_fg_color; + + display: flex; + justify-content: flex-end; + align-items: center; + + margin: 10px 20px; + margin-top: auto; + + > div { + margin: 0 15px; + } +} + +a, a:visited { + color: $link_color; + text-decoration:none; +} + +ul { + list-style-type: circle; +} + +.headbadges { + display: flex; + align-items: center; + margin-right: 20px; + margin-left: 30px; +} + +.headbadge { + padding: 10px; + border-radius: 10px; + font-size: 1.2em; + margin-left: 10px; + + /* Should be overriden */ + border: 2px solid; + border-color: $secondary_bg_color; + color: $secondary_bg_color; + + &-veganness { + &-vegan { + border-color: $veganness_vegan_color; + color: $veganness_vegan_color; + } + &-veganisable { + border-color: $veganness_veganisable_color; + color: $veganness_veganisable_color; + } + &-vege { + border-color: $veganness_vege_color; + color: $veganness_vege_color; + } + } + + &-season { + &-winter { + border-color: $season_winter_color; + color: $season_winter_color; + } + &-summer { + border-color: $season_summer_color; + color: $season_summer_color; + } + } +} + +.badges { + display: inline-block; + margin-left: 0.5ex; +} + +.badge { + font-weight: bold; + display: inline-block; + border: 2px solid black; + padding: 0 0.5ex; + border-radius: 1.5ex; + margin: 0.2ex 0; + margin-left: 0.6ex; + font-size: 0.7em; + position: relative; + bottom: 0.2ex; + + &-veganness { + &-vegan { + border-color: $veganness_vegan_color; + color: $veganness_vegan_color; + } + &-veganisable { + border-color: $veganness_veganisable_color; + color: $veganness_veganisable_color; + } + &-vege { + border-color: $veganness_vege_color; + color: $veganness_vege_color; + } + } + + &-season { + &-winter { + border-color: $season_winter_color; + color: $season_winter_color; + } + &-summer { + border-color: $season_summer_color; + color: $season_summer_color; + } + } +} diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..f19e547 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,155 @@ +@import url("fonts.css"); +html { + background-color: #010018; + color: #e4e4e4; + height: 100%; } + +body { + font-family: Open Sans,Arial; + font-size: 16px; + line-height: 1.4; + text-align: justify; + margin: 0; + padding: 0; + min-height: 100%; + display: flex; + flex-direction: column; } + +#head { + background-color: #178ca7; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 30px 60px; + color: #010018; } + #head .sitetitle { + font-size: 1.4em; + font-weight: bold; } + #head a, #head a:visited { + color: #010018; } + +#ingredients { + max-width: 800px; + box-sizing: border-box; + margin: 30px auto; + padding: 20px; + border: 1px solid #178ca7; + border-radius: 10px; + text-align: left; } + @media screen and (min-width: 1600px) { + #ingredients { + float: left; + max-width: 300px; + margin: 0; + margin-top: 30px; + margin-left: 50px; + margin-right: 50px; + position: fixed; + box-sizing: border-box; } } + #ingredients .ingred-title { + font-size: 1.3em; + font-weight: bold; } + #ingredients ul { + padding-left: 25px; } + +#content { + margin: 0 auto; + max-width: 800px; + padding: 2em 1em; + height: 100%; } + #content h1 { + font-size: 1.4em; } + #content h2 { + font-size: 1.3em; + text-indent: 2ex; } + #content h3 { + font-size: 1.1em; + text-indent: 4ex; } + #content .pagenamerow { + display: flex; + align-items: center; + justify-content: space-between; } + #content #pagename { + font-size: 1.5em; + font-weight: bold; } + +#foot { + font-size: 0.7em; + color: #989898; + display: flex; + justify-content: flex-end; + align-items: center; + margin: 10px 20px; + margin-top: auto; } + #foot > div { + margin: 0 15px; } + +a, a:visited { + color: #2081c8; + text-decoration: none; } + +ul { + list-style-type: circle; } + +.headbadges { + display: flex; + align-items: center; + margin-right: 20px; + margin-left: 30px; } + +.headbadge { + padding: 10px; + border-radius: 10px; + font-size: 1.2em; + margin-left: 10px; + /* Should be overriden */ + border: 2px solid; + border-color: #178ca7; + color: #178ca7; } + .headbadge-veganness-vegan { + border-color: #40d540; + color: #40d540; } + .headbadge-veganness-veganisable { + border-color: #bfce2a; + color: #bfce2a; } + .headbadge-veganness-vege { + border-color: #ce8649; + color: #ce8649; } + .headbadge-season-winter { + border-color: #02bace; + color: #02bace; } + .headbadge-season-summer { + border-color: #ff3838; + color: #ff3838; } + +.badges { + display: inline-block; + margin-left: 0.5ex; } + +.badge { + font-weight: bold; + display: inline-block; + border: 2px solid black; + padding: 0 0.5ex; + border-radius: 1.5ex; + margin: 0.2ex 0; + margin-left: 0.6ex; + font-size: 0.7em; + position: relative; + bottom: 0.2ex; } + .badge-veganness-vegan { + border-color: #40d540; + color: #40d540; } + .badge-veganness-veganisable { + border-color: #bfce2a; + color: #bfce2a; } + .badge-veganness-vege { + border-color: #ce8649; + color: #ce8649; } + .badge-season-winter { + border-color: #02bace; + color: #02bace; } + .badge-season-summer { + border-color: #ff3838; + color: #ff3838; }