From a286ba6a83a6394d470c24d56320089ff1c3b522 Mon Sep 17 00:00:00 2001
From: Derek Severin <severinderek@gmail.com>
Date: Sat, 16 Jul 2022 14:42:45 +0700
Subject: About offsets + home image

---
 layouts/partials/sections/about.html | 67 ++++++++++++++++++++++--------------
 layouts/partials/sections/home.html  |  7 +++-
 static/css/theme.css                 | 43 +++++++++++++++++++----
 3 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index de8b08f..6565780 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -26,6 +26,10 @@
     {{ $offset_left = add $offset_left $remaining }}
     {{ $remaining = 0 }}
   {{ end }}
+{{- $sum := add (add (add $main_side $extra_side) $offset_left) $offset_right -}}
+{{- if gt $sum 12 -}}
+ERROR: Sum of columns width bigger than 12! - Check "params.about" in "config.toml"
+{{- end -}}
   {{ $offset_center := $remaining }}
   <section class="section" id="about"
     style="
@@ -35,12 +39,12 @@
       {{- if ne $params.background "full" -}}
         {{- if eq $params.layout "left" -}}
           --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;
+          --about-bkg-margin-left: {{ mul (div (add $main_side $offset_left) 12.0) 100 }}%;
+          --about-bkg-margin-right: {{ mul (div $offset_right 12.0) 100 }}%;
         {{- else if eq $params.layout "right" -}}
           --about-bkg-width: {{ mul (div $extra_side 12.0) 100 }}%;
-          --about-bkg-margin-left: 0;
-          --about-bkg-margin-right: {{ mul (div $main_side 12.0) 100 }}%;
+          --about-bkg-margin-left: {{ mul (div $offset_left 12.0) 100 }}%;
+          --about-bkg-margin-right: {{ mul (div (add $main_side $offset_right) 12.0) 100 }}%;
         {{- end -}}
       {{- end -}}
       {{/* TODO: keep this in 'config'? (should be enough with only in CSS) */}}
@@ -61,12 +65,13 @@
     {{ end }}
     <div class="container-fluid">
       <div class="row">
-        {{ if eq $params.layout "right" }}
-          <div class="col-xs-12 col-md-{{ $extra_side }}"></div>
-        {{ else if eq $params.layout "left" }}
-          {{ $offset_left := sub (sub 12 $extra_side) $main_side }}
+        {{- if eq $params.layout "right" -}}
+          <div class="col-xs-12 col-md-{{ add $extra_side $offset_left }}"></div>
+        {{- else if eq $params.layout "left" -}}
+          {{- if gt $offset_left 0 -}}
           <div class="col-xs-12 col-md-{{ $offset_left }}"></div>
-        {{ end }}
+          {{- end -}}
+        {{- end -}}
         {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
           {{/* ~Hack to add space outside (offset left) */}}
 {{/*
@@ -76,23 +81,35 @@
         {{ else }}
           <div class="col-xs-12 col-md-{{ $main_side }}">
         {{ end }}
-            <div class="profile">
-              {{ if .avatar }}
-                {{/* 2-REC: Special "hover easter egg" */}}
-                {{ if .avatar2 }}
-                  <div class="portrait" style="position:relative; overflow: hidden;">
-                    <img id="avatar1" src="{{ printf "images/%s" .avatar }}">
-                    <img id="avatar2" src="{{ printf "images/%s" .avatar2 }}" oncontextmenu="return false;">
+            <div class="container-fluid profile">
+              <div class="row">
+                {{- $width_portrait := 12 -}}
+                {{- $width_text := 12 -}}
+                {{- if or (eq $params.layout "left") (eq $params.layout "right") -}}
+                  {{- $width_portrait = $params.portrait_width -}}
+                  {{- $width_text = sub 12 $width_portrait -}}
+                {{- end -}}
+                {{- if .avatar -}}
+                  <div class="col-xs-12 col-md-{{ $width_portrait }}">
+                  {{/* 2-REC: Special "hover easter egg" */}}
+                  {{- if .avatar2 -}}
+                    <div class="portrait">
+                      <img id="avatar1" src="{{ printf "images/%s" .avatar }}">
+                      <img id="avatar2" src="{{ printf "images/%s" .avatar2 }}" oncontextmenu="return false;">
+                    </div>
+                  {{- else -}}
+                    <img class="portrait" src="{{ printf "/images/%s" .avatar}}">
+                  {{- end -}}
+                  </div>
+                {{- end -}}
+                {{- with .short_text -}}
+                  <div class="col-xs-12 col-md-{{ $width_text }}">
+                    <div class="text-primary short-text">
+                      {{ . | markdownify }}
+                    </div>
                   </div>
-                {{ else }}
-                  <img class="portrait" src="{{ printf "/images/%s" .avatar}}">
-                {{ end }}
-              {{ end }}
-              {{ with .short_text }}
-                <div class="text-primary short-text">
-                  <p>{{ . | markdownify }}</p>
-                </div>
-              {{ end }}
+                {{- end -}}
+              </div>
             </div>
         {{ if .long_text }}
           {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index 97557e9..a630222 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -1,9 +1,14 @@
 {{ $params := .Site.Params.home }}
 {{ with .Site.Data.home }}
     <section id="home"
+{{/*
         {{ with .background }}
-            style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
+            style="background-image: url('{{ (printf "images/%s" .) | absURL }}'); opacity: 50%;"
         {{ end }}
+*/}}
+{{- with .background -}}
+    style="--home-bkg-image: url('{{ (printf "images/%s" .) | absURL }}');"
+{{- end -}}
         >
         <div class="header-content"
             style="
diff --git a/static/css/theme.css b/static/css/theme.css
index 9bbe9bd..1351d9a 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -461,7 +461,7 @@ ul.images-list {
 .profile {
     text-align: center;
 //    padding: 30px 10px;
-padding: 2em 2em 2em 2em;
+padding: 2rem;
     position: relative;
 }
 
@@ -469,7 +469,7 @@ padding: 2em 2em 2em 2em;
     width: 200px;
     height: 200px;
 //    width: 100%;
-    margin: 0 auto 30px;
+    margin: 0 auto;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
@@ -722,12 +722,42 @@ main {
     position: relative;
     min-height: 100vh;
 
+/*
     background-position: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
     background-color: var(--HOME-BACKGROUND-COLOR, transparent);
+*/
+/* TODO: why was '-2'? => bug (can't select text + button) */
+/*z-index: -2;*/
+z-index: 0;
+/* TODO: from param */
+/*background-color: transparent;*/
+background-color: black;
+}
+
+#home::after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+width:100%;
+
+    background-position: center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+
+/*    background-color: var(--HOME-BACKGROUND-COLOR, transparent);*/
+top:0;
+left:0;
+bottom:0;
+right:0;
+    background-image: var(--home-bkg-image);
+/* TODO: from variable! */
+    opacity: 50%;
 }
 
 #home_video {
@@ -896,7 +926,6 @@ background-color: var(--about-bkg-color);
     #about .profile {
 //        padding-left: 5%;
 //        padding-right: 5%;
-padding: 5%;
 //margin: 5px;
 background-color: var(--about-bkg-color);
 background-color: white;
@@ -1022,7 +1051,7 @@ background-size: cover;
     width: var(--about-image-width);
     height: auto;
     /* 2-REC TODO: set as custom param */
-    max-width: 300px;
+/*    max-width: 300px;*/
 }
 /*@media (min-width: 64em) {*/
 @media (max-width: 992px) {
@@ -1038,6 +1067,9 @@ background-size: cover;
 #about .text-tertiary p {
     text-justify: inter-word;
 }
+#about .short-text p:last-of-type {
+    margin: 0;
+}
 
 #avatar1 {
     /* 2-REC: setting position here causes problems with height */
@@ -1325,8 +1357,6 @@ min-height: 300px;
 }
 
 #contact .profile {
-    padding: 2em 2em 2em 2em;
-
     background-color: var(--CONTACT-PROFILE-COLOR, var(--GENERAL-COLOR-2));
     border-radius: var(--CONTACT-PROFILE-BORDER-RADIUS, 0px);
     box-shadow: var(--CONTACT-PROFILE-BOX-SHADOW, 0);
@@ -1334,6 +1364,7 @@ min-height: 300px;
 
 #contact .portrait {
     border-radius: var(--CONTACT-IMAGE-BORDER-RADIUS, var(--GENERAL-IMAGE-BORDER-RADIUS));
+margin-bottom: 2em;
 }
 
 #contact .text-primary {
-- 
cgit v1.2.3