About layout with 'remaining'

2 files changed, 35 insertions, 30 deletions

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index a8369b9..47014bb 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,28 +1,32 @@
 {{ $params := .Site.Params.about }}
-{{/* 2-REC - TODO: should rewrite all this mess (esp left/right layouts), and use better variable names */}}
 {{ with .Site.Data.about }}
-  {{ $big_side := 7 }}
-  {{ with $params.big_side -}}
-    {{ $big_side = . }}
+  {{/* 2-REC - TODO: CHECK IF VALUES ARE VALID! (sum of all = 12) */}}
+  {{ $main_side := 7 }}
+  {{ with $params.main_side -}}
+    {{ $main_side = . }}
   {{ end }}
-  {{ $small_side := 3 }}
-  {{ with $params.small_side -}}
-    {{ $small_side = . }}
+  {{ $extra_side := 3 }}
+  {{ with $params.extra_side -}}
+    {{ $extra_side = . }}
   {{ end }}
-  {{ $offset_left := 0 }}
+  {{ $remaining := sub (sub 12 $main_side) $extra_side }}
+  {{ $set_left := 0 }}
+  {{ $offset_left := div $remaining 2 }}
   {{ with $params.offset_left -}}
+    {{ $set_left = 1 }}
     {{ $offset_left = . }}
   {{ end }}
-  {{ $offset_right := 0 }}
+  {{ $remaining = sub $remaining $offset_left }}
+  {{ $offset_right := $remaining }}
   {{ with $params.offset_right -}}
     {{ $offset_right = . }}
   {{ end }}
-{{/*
-  {{ $small_side := sub 12 $big_side }}
-*/}}
-  {{ $offset_center := sub (sub (sub (sub 12 $big_side) $small_side) $offset_left) $offset_right }}
-
-{{/* TODO: ERROR if < 1! */}}
+  {{ $remaining = sub $remaining $offset_right }}
+  {{ if and (eq $set_left 0) (ne $remaining 0) }}
+    {{ $offset_left = add $offset_left $remaining }}
+    {{ $remaining = 0 }}
+  {{ end }}
+  {{ $offset_center := $remaining }}
   <section class="section" id="about"
     style="
       {{- with .background_image -}}
@@ -30,13 +34,13 @@
       {{- 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-width: {{ mul (div $extra_side 12.0) 100 }}%;
+          --about-bkg-margin-left: {{ mul (div $main_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-width: {{ mul (div $extra_side 12.0) 100 }}%;
           --about-bkg-margin-left: 0;
-          --about-bkg-margin-right: {{ mul (div $big_side 12.0) 100 }}%;
+          --about-bkg-margin-right: {{ mul (div $main_side 12.0) 100 }}%;
         {{- end -}}
       {{- end -}}
       {{/* TODO: keep this in 'config'? (should be enough with only in CSS) */}}
@@ -58,19 +62,19 @@
     <div class="container-fluid">
       <div class="row">
         {{ if eq $params.layout "right" }}
-          <div class="col-xs-12 col-md-{{ $small_side }}"></div>
+          <div class="col-xs-12 col-md-{{ $extra_side }}"></div>
         {{ else if eq $params.layout "left" }}
-          {{ $offset_left := sub (sub 12 $small_side) $big_side }}
+          {{ $offset_left := sub (sub 12 $extra_side) $main_side }}
           <div class="col-xs-12 col-md-{{ $offset_left }}"></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 }}">
+          <div class="col-xs-12 col-md-offset-1 col-md-{{ sub $extra_side 1 }}">
 */}} 
-          <div class="col-xs-12 col-md-offset-{{ $offset_left }} col-md-{{ $small_side }}">
+          <div class="col-xs-12 col-md-offset-{{ $offset_left }} col-md-{{ $extra_side }}">
         {{ else }}
-          <div class="col-xs-12 col-md-{{ $big_side }}">
+          <div class="col-xs-12 col-md-{{ $main_side }}">
         {{ end }}
             <div class="profile">
               {{ if .avatar }}
@@ -95,9 +99,9 @@
           </div>
           {{/* ~Hack to add space outside (shorter right) */}}
 {{/*
-          <div class="col-xs-12 col-md-{{ sub $big_side 1 }} text-tertiary long-text">
+          <div class="col-xs-12 col-md-{{ sub $main_side 1 }} text-tertiary long-text">
 */}}
-          <div class="col-xs-12 col-md-offset-{{ $offset_center }} col-md-{{ $big_side }}">
+          <div class="col-xs-12 col-md-offset-{{ $offset_center }} col-md-{{ $main_side }}">
             <div class="text-tertiary long-text">
             <p>{{ .long_text | markdownify }}</p>
             </div>
@@ -113,7 +117,7 @@
           {{ end }}
         {{ end }}
         {{ if eq $params.layout "left" }}
-          <div class="col-xs-12 col-md-{{ $small_side }}"></div>
+          <div class="col-xs-12 col-md-{{ $extra_side }}"></div>
         {{ end }}
       </div>
     </div>
diff --git a/static/css/theme.css b/static/css/theme.css
index e275ca6..4f4ab48 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -666,12 +666,12 @@ padding: 2em 2em 2em 2em;
 
 main {
     /* Need to consider header & footer heights as well... */
-    min-height: calc(100% - var(--NAVBAR-HEIGHT));
+    min-height: calc(100vh - var(--NAVBAR-HEIGHT));
 }
 
 .section {
     padding: var(--homepage-section-padding);
-    min-height: calc(100% - var(--NAVBAR-HEIGHT));
+    min-height: calc(100vh - var(--NAVBAR-HEIGHT));
 }
 
 .section-heading {
@@ -703,13 +703,14 @@ main {
 
 #home {
     position: relative;
-    min-height: 100%;
+    min-height: 100vh;
 
     background-position: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
+background-color: transparent;
 }
 
 #home .header-content {