Add layouts and style for first version
This commit is contained in:
parent
ca29c3da46
commit
60c8f483da
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<meta charset="utf-8">
|
||||
<title>{{ block "title" . }}
|
||||
{{ .Site.Title }}
|
||||
{{ end }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ block "header" . }}
|
||||
{{ partial "site-header.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ block "ingredients" . }}
|
||||
{{ end }}
|
||||
|
||||
<div id="content">
|
||||
{{ block "pagename" . }}
|
||||
{{ partial "pagetitle.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<div id="main">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ block "footer" . }}
|
||||
{{ partial "site-footer.html" . }}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{{ define "main" }}
|
||||
<div class="descr">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
{{ partial "recipe_list_entry.html" . }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{{ define "pagename" }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
|
||||
{{ partial "recipelist.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{{- if . | eq "winter" -}}Hiver
|
||||
{{- else if . | eq "summer" -}}Été
|
||||
{{- else -}}{{ . }}{{- end -}}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{{- if . | eq "vegan" -}}Vegan
|
||||
{{- else if . | eq "veganisable" -}}Veganisable
|
||||
{{- else if . | eq "vege" -}}Végétarien
|
||||
{{- else -}}{{ . }}{{- end -}}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="outer_ingredients">
|
||||
<div id="ingredients">
|
||||
<div class="ingred-title">Ingrédients</div>
|
||||
<ul>
|
||||
{{ range $.Param "ingredients" }}
|
||||
<li>{{ with .qt }}{{ . }}{{ end }} {{ .name }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="pagename">
|
||||
{{ .Page.Title }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<li>
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ .Title }}
|
||||
<span class="badges">
|
||||
{{ with .Params.veganness }}
|
||||
<span class="badge badge-veganness badge-veganness-{{ . }}">v</span>
|
||||
{{ end }}
|
||||
{{ with .Params.season }}
|
||||
<span class="badge badge-season badge-season-{{ . }}">
|
||||
{{- if . | eq "summer" -}}✿
|
||||
{{- else if . | eq "winter" -}}<i class="fa fa-snowflake-o" aria-hidden="true"></i>
|
||||
{{- end -}}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{{ range where .Sections "Type" "==" "recettes" }}
|
||||
{{ range .Sections }}
|
||||
<h2 class="recipecat">{{ .Title }}</h2>
|
||||
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
{{ partial "recipe_list_entry.html" . }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<footer id="foot">
|
||||
<div id="footer-legal">
|
||||
Site sous license libre
|
||||
<a href="{{ $.Site.Params.siteLicenseURL }}">
|
||||
{{- $.Site.Params.siteLicenseName -}}
|
||||
</a> (<a href="{{ $.Site.Params.sourceURL }}">code</a>).
|
||||
Recettes allègrement pompables.
|
||||
</div>
|
||||
<div id="madeby">Made by <a href="https://tobast.fr/">tobast</a>.</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<header id="head">
|
||||
<div class="sitetitle">
|
||||
<a href="/">{{ .Site.Title }}</a>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{{ define "ingredients" }}
|
||||
{{ partial "ingredients.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "pagename" }}
|
||||
<div class="pagenamerow">
|
||||
{{ partial "pagetitle.html" . }}
|
||||
|
||||
<div class="headbadges">
|
||||
{{ with .Params.veganness }}
|
||||
<div class="headbadge headbadge-veganness headbadge-veganness-{{ . }}">
|
||||
{{ partial "humanize_veganness.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.season }}
|
||||
<div class="headbadge headbadge-season headbadge-season-{{ . }}">
|
||||
{{ partial "humanize_season.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
|
@ -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) "$<" "$@"
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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; }
|
||||
Loading…
Reference in New Issue