About layout

5 files changed, 268 insertions, 36 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 5ccc662..a261f05 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -82,6 +82,24 @@ unsafe= true
 
     # ----------
 
+    # ABOUT section
+    [params.about]
+        # Settings related to the CSS can be set in 'static\css\custom.css', 'about' section
+        #title_align = "right"              # left|right (default: right)
+        #title_length = 10                  # 1-12 (default: 10)
+        #layout = "right"                   # classic|left|right (default: "classic")
+        #big_side = 6                       # 2-10/12 (4-8 advised if 'classic') (default: 8)
+        #background = "full"                # "full" (default: none, depends on "layout")
+        ####
+        #TODO: keep this in 'config'? (should be enough with only in CSS)
+        # => should remove, not really worth it
+        #background_opacity = 1.0           # [0; 1.0] (default: 1.0)
+        #background_size = "contain"        # contain|cover (default: contain)
+        #background_position = "left top"   # left|center|right top|center|bottom (detault: center center)
+        ####
+
+    # ----------
+
     # PROJECTS section
     [params.projects]
         # Values in "categories" must be the same as in navigation menu "projects".
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 02e1b6c..b1c79ff 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,37 +1,95 @@
 {{ "<!-- ABOUT -->" | safeHTML }}
+{{ $params := .Site.Params.about }}
 {{ with .Site.Data.about }}
-    <section class="section bg-primary" id="about">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-md-10 col-md-offset-2">
-                    {{ with .title }}
-                        <h2 class="section-heading">{{ . }}</h2>
-                        <hr class="primary light">
-                    {{ end }}
-                </div>
-            </div>
+  {{ $big_side := 8 }}
+  {{ with $params.big_side -}}
+    {{ $big_side = . }}
+  {{ end }}
+  {{ $small_side := sub 12 $big_side }}
+  <section class="section" id="about"
+    style="
+      {{- with .background_image -}}
+        --about-bkg-image: url('{{ (printf "images/%s" .) | absURL }}');
+      {{- end -}}
+      {{- if ne $params.background "full" -}}
+        {{- if eq $params.layout "left" -}}
+          --about-bkg-width: {{ mul (div $small_side 12.0) 100 }}%;
+          --about-bkg-margin-left: {{ mul (div $big_side 12.0) 100 }}%;
+          --about-bkg-margin-right: 0;
+        {{- else if eq $params.layout "right" -}}
+          --about-bkg-width: {{ mul (div $small_side 12.0) 100 }}%;
+          --about-bkg-margin-left: 0;
+          --about-bkg-margin-right: {{ mul (div $big_side 12.0) 100 }}%;
+        {{- end -}}
+      {{- end -}}
+      {{/* TODO: keep this in 'config'? (should be enough with only in CSS) */}}
+      {{- with $params.background_opacity -}}
+        --about-bkg-opacity: {{ . }};
+      {{- end -}}
+      {{- with $params.background_position -}}
+        --about-bkg-position: {{ . }};
+      {{- end -}}
+      {{- with $params.background_size -}}
+        --about-bkg-size: {{ . }};
+      {{- end -}}
+  ">
+    <div class="container-fluid">
+      <div class="row no-gutter">
+        {{ $title_length := 10 }}
+        {{ with $params.title_length }}
+          {{ $title_length = . }}
+        {{ end }}
+        {{ if eq $params.title_align "left" }}
+          <div class="col-md-{{ $title_length }} text-right">
+        {{ else }}
+          <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }}">
+        {{ end }}
+          {{ with .title }}
+            <h2 class="section-heading">{{ . }}</h2>
+            <hr class="primary light">
+          {{ end }}
         </div>
-        <div class="container">
-            <div class="row">
-                <div class="col-xs-12 col-md-4">
-                    <div class="profile">
-                        {{ with .avatar }}
-                            <div class="portrait" title="avatar: {{ . }}" style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"></div>
-                        {{ end }}
-                        {{ with .short_text }}
-                            <div class="text-primary">
-                                <p>{{ . | markdownify }}</p>
-                            </div>
-                        {{ end }}
-                    </div>
+      </div>
+    </div>
+    <div class="container-fluid">
+      <div class="row">
+        {{ if eq $params.layout "right" }}
+          <div class="col-xs-12 col-md-{{ $small_side }}"></div>
+        {{ end }}
+        {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
+          {{/* ~Hack to add space outside (offset left) */}}
+          <div class="col-xs-12 col-md-offset-1 col-md-{{ sub $small_side 1 }}">
+        {{ else }}
+          <div class="col-xs-12 col-md-{{ $big_side }}">
+        {{ end }}
+            <div class="profile">
+              {{ with .avatar }}
+                <img class="portrait" title="avatar: {{ . }}" src="{{ printf "/images/%s" .}}">
+              {{ end }}
+              {{ with .short_text }}
+                <div class="text-primary short-text">
+                  <p>{{ . | markdownify }}</p>
                 </div>
-
-                {{ with .long_text }}
-                    <div class="col-xs-12 col-md-8 text-tertiary">
-                        <p>{{ . | markdownify }}</p>
-                    </div>
-                {{ end }}
+              {{ end }}
             </div>
-        </div>
-    </section>
+        {{ if .long_text }}
+          {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
+          </div>
+          {{/* ~Hack to add space outside (shorter right) */}}
+          <div class="col-xs-12 col-md-{{ sub $big_side 1 }} text-tertiary long-text">
+            <p>{{ .long_text | markdownify }}</p>
+          </div>
+          {{ else }}
+            <div class="text-tertiary long-text">
+              <p>{{ .long_text | markdownify }}</p>
+            </div>
+          </div>
+          {{ end }}
+        {{ end }}
+        {{ if eq $params.layout "left" }}
+          <div class="col-xs-12 col-md-{{ $small_side }}"></div>
+        {{ end }}
+      </div>
+    </div>
+  </section>
 {{ end }}
diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html
index 4f4da1b..6e6bc0f 100644
--- a/layouts/partials/sections/contact.html
+++ b/layouts/partials/sections/contact.html
@@ -6,7 +6,7 @@
             {{ end }}
         >
         <div class="container-fluid">
-            <div class="row">
+            <div class="row no-gutter">
                 <div class="col-md-4 col-md-offset-8">
                     {{ with .title }}
                         <h2 class="section-heading text-tertiary">{{ . }}</h2>
diff --git a/static/css/default.css b/static/css/default.css
index d3e4e35..293906d 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -1,4 +1,7 @@
 :root{
+    /* Default values for most CSS fields.
+        Can be modified, but DO NOT DELETE ANY FIELD!
+    */
 
     --GENERAL-FONT-1: "Merriweather", "Helvetica Neue", Arial, sans-serif;
     --GENERAL-FONT-2: "Fjalla One", "Helvetica Neue", Arial, sans-serif;
@@ -32,4 +35,24 @@
 
     --NAVBAR-HEIGHT: 50px; /* ! - Must correspond to the real navbar height! (Horrible hack) */
     --NAVBAR-BACKGROUND-COLOR: rgba(255, 255, 255, .3);
+
+}
+
+
+/* ABOUT */
+#about {
+    --about-bkg-color: var(--GENERAL-COLOR-1);
+    --about-bkg-opacity: 1.0;
+    --about-bkg-position: center center;
+    --about-bkg-size: cover;
+
+    --about-image-border-radius: var(--GENERAL-IMAGE-BORDER-RADIUS);
+
+    --about-link-color: var(--GENERAL-LINK-COLOR-2);
+    --about-link-color-active: var(--GENERAL-FONT-COLOR-3);
+
+    /* The following variables should not be changed (managed by code) */
+    --about-bkg-width: 100%;
+    --about-bkg-margin-left: 0;
+    --about-bkg-margin-right: 0;
 }
diff --git a/static/css/theme.css b/static/css/theme.css
index 153cc16..bc00510 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -369,13 +369,15 @@ ul.images-list {
 
 .profile {
     text-align: center;
-    padding: 30px 10px;
+//    padding: 30px 10px;
+padding: 2em 2em 2em 2em;
     position: relative;
 }
 
 .profile .portrait {
     width: 200px;
     height: 200px;
+//    width: 100%;
     margin: 0 auto 30px;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -658,21 +660,152 @@ main {
 
 /* ABOUT */
 
+/*
+TODO: move to common (for all background images)
++ adapt each section code (as in "about")
+
+(TODO: move to README)
+In data/yaml:
+layout: classic|left|right
+main_side_size: 2-10/12 (default: 8)
+background_image: "avatar.png" (file in "static/images") (default : no image)
+background_opacity: [0;1.0] (default: 1.0)
+background_size: contain|cover (default: contain)
+background_position: left|center|right top|center|bottom (detault: center center)
+
+
++ add layout stuff:
+=> "big_side": 2-10/12 (default: 8)
+- default classic: 33+67% & 4+8 columns
+- default left: 67+33% & 8+4 columns
+- default left: 33+67% & 4+8 columns
+
+
+TODO: to add (?):
+- if background image => add background color to text (same as for image, use "::after" element)
+v- allow to override background image size to "width:100%" for right/left layouts
+
+- background color
+  - primary|secondary (one is default depending on section)
+  - color (rgb)
+
+
+TODO: check!
+- hide background in "small" screen
+  => add option for that? (only if right or left layout!)
+
+*/
+#about {
+    display: block;
+    position: relative;
+
+    z-index: -2;
+    background-color: var(--about-bkg-color);
+}
+
+
+/* TODO: could move paddings out of 'media' for all sizes (but seems ok as is */
+/*@media (min-width: 64em) {*/
+@media (min-width: 992px) {
+    #about .profile {
+        padding-left: 5%;
+        padding-right: 5%;
+
+//text-align: right;
+    }
+    #about .short-text {
+        text-align: left;
+    }
+
+    #about .long-text {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+}
+/*@media (min-width: 80em) {*/
+/*
+@media (min-width: 1200px) {
+}
+*/
+
+#about::after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+
+    top: 0;
+    bottom: 0;
+    left: var(--about-bkg-margin-left);
+    right: var(--about-bkg-margin-right);
+
+    width: var(--about-bkg-width);
+
+    background-image: var(--about-bkg-image);
+    opacity: var(--about-bkg-opacity);
+
+    background-position: var(--about-bkg-position);
+    background-repeat: no-repeat;
+    -webkit-background-size: var(--about-bkg-size);
+    -moz-background-size: var(--about-bkg-size);
+    background-size: var(--about-bkg-size);
+    -o-background-size: var(--about-bkg-size);
+
+
+/*
+position: relative;
+height: 100vh;
+width: 100%;
+display: flex;
+align-items: center;
+justify-content: center;
+*/
+/*
+height: 100vh;
+width: 100%;
+*/
+
+    /* TODO: set params as customizable */
+/*
+    background-position: center;
+    //background-position: left;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    background-size: contain;
+    -o-background-size: contain;
+*/
+
+}
+
+/*@media (min-width: 64em) {*/
+@media (max-width: 992px) {
+    #about::after {
+//background-color: green;
+            left: 0;
+            right: 0;
+            width: 100%;
+background-position: top;
+background-size: cover;
+    }
+
+}
+
 #about hr {
     width: 100%;
 }
 
 #about a {
-    color: var(--ABOUT-LINK-COLOR, var(--GENERAL-LINK-COLOR-2));
+    color: var(--about-link-color);
 }
 
 #about a:hover,
 #about a:focus {
-    color: var(--ABOUT-LINK-COLOR-ACTIVE, var(--GENERAL-LINK-ACTIVE-COLOR-2));
+    /* TODO: move this globally (for all links) */
+    text-decoration: none;
+    color: var(--about-link-color-active);
 }
 
 #about .portrait {
-    border-radius: var(--ABOUT-IMAGE-BORDER-RADIUS, var(--GENERAL-IMAGE-BORDER-RADIUS));
+    border-radius: var(--about-image-border-radius);
 }
 
 #about .text-tertiary {