Skills columns layout

6 files changed, 89 insertions, 48 deletions

diff --git a/TODO/TODO.md b/TODO/TODO.md
index feb3b16..34391f7 100644
--- a/TODO/TODO.md
+++ b/TODO/TODO.md
@@ -298,15 +298,6 @@
         - [ ] get-keywords.html
             - [ ] Add a parameter to specify order (based on wieght, title, occurrences, ...)
             (now hardcoded on alphanumerical value - at end of file)
-        - [ ] get-number-columns.html
-            - [ ] Enhance by adding "offsets" & "xl" (& "xs", "sm"?)<br>
-                => Output should be such as:
-                ```html
-                .Scratch.Set "col-sizes" "col-md-6 col-lg-4 col-xl-5"
-                .Scratch.Set "col-offsets" "col-xl-offset-1"
-                & in loop: class="{{ .Scratch.Get "col-sizes" }} {{ .Scratch.Get "col-offsets" }} text-center"
-                ! - delete Scratch variables after, & delete "offsets" after first iteration (end of first)!
-                ```
     - [ ] footer.html
         - [ ] Fix problem that not at bottom of page.<br>
             => Need changes in CSS for main tags (html, body, sections, etc?)
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index a114709..938ae3a 100644
--- a/layouts/partials/sections/projects.html
+++ b/layouts/partials/sections/projects.html
@@ -12,7 +12,7 @@
                 {{/* Sort the list */}}
                 {{ partial "utils/ordered-list.html" (dict "list" .Sections "params" .Params "scratch" .Scratch) }}
                 {{ range (.Scratch.Get "list") }}
-                    {{ partial "limage.html" (dict "context" . "data" $.Site.Params.projects.home) }}
+                    {{ partial "limage.html" (dict "context" . "data" $params.home) }}
                 {{ end }}
                 {{ .Scratch.Delete "list" }}
             {{ end }}
diff --git a/layouts/partials/sections/services.html b/layouts/partials/sections/services.html
index ac1333e..f62b6aa 100644
--- a/layouts/partials/sections/services.html
+++ b/layouts/partials/sections/services.html
@@ -1,8 +1,42 @@
 {{ $params := .Site.Params.services }}
 {{ with .Site.Data.services }}
+    {{/* Get the number of columns from config */}}
+    {{/* TODO: clean... */}}
+    {{ $nb_cols_lg := 4 }}
+    {{ $nb_cols_sm := 2 }}
+    {{ $nb_cols_xs := 1 }}
+
+    {{ with $params.nb_columns }}
+        {{ $nb_cols_lg = . }}
+    {{ end }}
+    {{ with $params.nb_columns_small }}
+        {{ $nb_cols_sm = . }}
+    {{ end }}
+    {{ with $params.nb_columns_xsmall }}
+        {{ $nb_cols_xs = . }}
+    {{ end }}
+
+    {{ $nb_left := len .services }}
+
+    {{ $size_lg := div 12 (int $nb_cols_lg) }}
+    {{ $size_sm := div 12 (int $nb_cols_sm) }}
+    {{ $size_xs := div 12 (int $nb_cols_xs) }}
+
+    {{ $mod_lg := mod $nb_left $nb_cols_lg }}
+    {{ if lt $nb_left $nb_cols_lg }}
+    {{ $mod_lg = $nb_left }}
+    {{ end }}
+    {{ $mod_sm := mod $nb_left $nb_cols_sm }}
+    {{ if lt $nb_left $nb_cols_sm }}
+    {{ $mod_sm = $nb_left }}
+    {{ end }}
+    {{ $mod_xs := mod $nb_left $nb_cols_xs }}
+    {{ if lt $nb_left $nb_cols_xs }}
+    {{ $mod_xs = $nb_left }}
+    {{ end }}
     <section class="section" id="services"
             {{ with .background_image }}
-                style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
+                style="--services-bkg-image: url('{{ (printf "images/%s" .) | absURL }}');"
             {{ end }}
         >
         {{ with .title }}
@@ -12,9 +46,34 @@
         {{ end }}
         <div class="container services-container">
             <div class="row">
-                {{ partial "utils/get-number-columns.html" (dict "length" (len .services) "scratch" $.Scratch) }}
-                {{ $col_layout := $.Scratch.Get "col_layout" }}
                 {{ range .services }}
+                    {{/* TODO: clean... */}}
+                    {{ $offset_lg := "col-lg-offset-0" }}
+                    {{- if eq $nb_left $mod_lg -}}
+                        {{ $double_offset := sub $nb_cols_lg $mod_lg }}
+                        {{ $off_lg := div (mul $double_offset $size_lg) 2 }}
+                        {{ $offset_lg = print "col-lg-offset-" $off_lg }}
+                        {{/* $nb_cols_lg = 3 */}}
+                    {{ end }}
+                    {{ $offset_sm := "col-sm-offset-0" }}
+                    {{- if eq $nb_left $mod_sm -}}
+                        {{ $double_offset := sub $nb_cols_sm $mod_sm }}
+                        {{ $off_sm := div (mul $double_offset $size_sm) 2 }}
+                        {{ $offset_sm = print "col-sm-offset-" $off_sm }}
+                    {{ end }}
+                    {{ $offset_xs := "col-xs-offset-0" }}
+                    {{- if eq $nb_left $mod_xs -}}
+                        {{ $double_offset := sub $nb_cols_xs $mod_xs }}
+                        {{ $off_xs := div (mul $double_offset $size_xs) 2 }}
+                        {{ $offset_xs = print "col-xs-offset-" $off_xs }}
+                    {{ end }}
+                    {{/* TODO: use "size_" variables, when sure "nb_cols_" does not change  */}}
+                    {{ $col_lg := print "col-lg-" (div 12 (int $nb_cols_lg)) }}
+                    {{ $col_sm := print "col-sm-" (div 12 (int $nb_cols_sm)) }}
+                    {{ $col_xs := print "col-xs-" (div 12 (int $nb_cols_xs)) }}
+                    {{ $col_layout := print $col_lg " " $col_sm " " $col_xs " " $offset_lg " " $offset_sm " " $offset_xs }}
+                    {{ $nb_left = sub $nb_left 1 }}
+
                     <div class="{{ $col_layout }} text-center">
                         <div class="service-box">
                             {{ $pack := or .icon_pack "fa" }}
@@ -35,7 +94,6 @@
                         </div>
                     </div>
                 {{ end }}
-                {{ $.Scratch.Delete "col_layout" }}
             </div>
         </div>
     </section>
diff --git a/layouts/partials/utils/get-number-columns.html b/layouts/partials/utils/get-number-columns.html
deleted file mode 100644
index d19b99f..0000000
--- a/layouts/partials/utils/get-number-columns.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{/*
-    Determine the optimal number of columns based on the number of entries.
-    Parameters:
-    - length: INTEGER
-    - scratch: (Scratch)
-*/}}
-
-{{ if eq .length 1 }}
-    {{ .scratch.Set "col-lg" "12" }}
-    {{ .scratch.Set "col-md" "12" }}
-{{ else if eq .length 2 }}
-    {{ .scratch.Set "col-lg" "6" }}
-    {{ .scratch.Set "col-md" "6" }}
-{{ else if or (eq .length 4) (or (eq .length 7) (eq .length 8)) }}
-    {{ .scratch.Set "col-lg" "3" }}
-    {{ .scratch.Set "col-md" "6" }}
-{{ else }}
-    {{ .scratch.Set "col-lg" "4" }}
-    {{ .scratch.Set "col-md" "6" }}
-{{ end }}
-
-{{ .scratch.Set "col_layout" (printf "col-lg-%s col-md-%s" (.scratch.Get "col-lg") (.scratch.Get "col-md")) }}
-
-{{ .scratch.Delete "col-md" }}
-{{ .scratch.Delete "col-lg" }}
diff --git a/static/css/default.css b/static/css/default.css
index e20114d..416f02e 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -1,3 +1,4 @@
+/* TODO: check all caps lock variables (reorganise + check use) */
 :root{
     /* Default values for most CSS fields.
         Can be modified, but DO NOT DELETE ANY FIELD!
@@ -36,6 +37,7 @@
     --NAVBAR-HEIGHT: 50px; /* ! - Must correspond to the real navbar height! (Horrible hack) */
     --NAVBAR-BACKGROUND-COLOR: rgba(255, 255, 255, .3);
 
+    --homepage-section-padding-v: 100px;
 }
 
 
@@ -72,8 +74,21 @@
 
 /* SERVICES */
 #services {
+    --services-bkg-color: var(--GENERAL-COLOR-2);
+
     --services-title-color: var(--GENERAL-FONT-COLOR-1);
     --services-title-bar-color: var(--GENERAL-COLOR-1);
+
+    --services-container-color: transparent;
+    --services-container-border-radius: 0;
+    --services-container-shadow: 0;
+
+    --services-box-color: var(--GENERAL-COLOR-2);
+    --services-box-border-radius: 0;
+    --services-box-shadow: 0;
+
+    --services-icon-color: var(--GENERAL-COLOR-1);
+    /* TODO: add other variables? */
 }
 
 
diff --git a/static/css/theme.css b/static/css/theme.css
index eb2ce7b..99d2afc 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -625,7 +625,7 @@ main {
 }
 
 .section {
-    padding: 100px 0;
+    padding: var(--homepage-section-padding-v) 0;
     min-height: calc(100% - var(--NAVBAR-HEIGHT));
 }
 
@@ -948,6 +948,8 @@ background-size: cover;
 
 #services {
     position: relative;
+ 
+    background-image: var(--services-bkg-image);
     background-position: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -956,7 +958,7 @@ background-size: cover;
 
     /* TODO: add a 'services' specific color variable */
     color: var(--GENERAL-FONT-COLOR-1);
-    //background-color: var(--services-bkg-color);
+    background-color: var(--services-bkg-color);
 }
 
 #services .section-hr {
@@ -967,9 +969,9 @@ background-size: cover;
 }
 
 .services-container {
-    background-color: var(--SERVICES-CONTAINER-COLOR, transparent);
-    border-radius: var(--SERVICES-CONTAINER-BORDER-RADIUS, 0);
-    box-shadow: var(--SERVICES-CONTAINER-BOX-SHADOW, 0);
+    background-color: var(--services-container-color);
+    border-radius: var(--services-container-border-radius);
+    box-shadow: var(--services-container-shadow);
 }
 
 .service-box {
@@ -977,16 +979,16 @@ background-size: cover;
     padding: 10px;
     max-width: 400px;
 
-    background-color: var(--SERVICES-BOX-COLOR, var(--GENERAL-COLOR-2));
-    border-radius: var(--SERVICES-BOX-BORDER-RADIUS, 0);
-    box-shadow: var(--SERVICES-BOX-BOX-SHADOW, 0);
+    background-color: var(--services-box-color);
+    border-radius: var(--services-box-border-radius);
+    box-shadow: var(--services-box-shadow);
 
 /* Hack to avoid misalignment of boxes - TO BE REMOVED! */
 min-height: 300px;
 }
 
 .service-box i {
-    color: var(--SERVICES-ICON-COLOR, var(--GENERAL-COLOR-1));
+    color: var(--services-icon-color);
 }
 
 .service-box ul {