About layout + 'dual avatar'

3 files changed, 81 insertions, 7 deletions

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index c9425e5..a8369b9 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,10 +1,28 @@
 {{ $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 := 8 }}
+  {{ $big_side := 7 }}
   {{ with $params.big_side -}}
     {{ $big_side = . }}
   {{ end }}
+  {{ $small_side := 3 }}
+  {{ with $params.small_side -}}
+    {{ $small_side = . }}
+  {{ end }}
+  {{ $offset_left := 0 }}
+  {{ with $params.offset_left -}}
+    {{ $offset_left = . }}
+  {{ end }}
+  {{ $offset_right := 0 }}
+  {{ 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! */}}
   <section class="section" id="about"
     style="
       {{- with .background_image -}}
@@ -41,16 +59,30 @@
       <div class="row">
         {{ if eq $params.layout "right" }}
           <div class="col-xs-12 col-md-{{ $small_side }}"></div>
+        {{ else if eq $params.layout "left" }}
+          {{ $offset_left := sub (sub 12 $small_side) $big_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-{{ $offset_left }} col-md-{{ $small_side }}">
         {{ 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" .}}">
+              {{ if .avatar }}
+                {{/* 2-REC: Special "hover easter egg hack" */}}
+                {{ 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 }}">
+                  </div>
+                {{ else }}
+                  <img class="portrait" src="{{ printf "/images/%s" .avatar}}">
+                {{ end }}
               {{ end }}
               {{ with .short_text }}
                 <div class="text-primary short-text">
@@ -65,7 +97,7 @@
 {{/*
           <div class="col-xs-12 col-md-{{ sub $big_side 1 }} text-tertiary long-text">
 */}}
-          <div class="col-xs-12 col-md-{{ sub $big_side 1 }}">
+          <div class="col-xs-12 col-md-offset-{{ $offset_center }} col-md-{{ $big_side }}">
             <div class="text-tertiary long-text">
             <p>{{ .long_text | markdownify }}</p>
             </div>
diff --git a/static/css/default.css b/static/css/default.css
index 00ec50d..4385a27 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -19,7 +19,7 @@
     --GENERAL-LINK-COLOR-2: rgba(64, 64, 64, .75);
     --GENERAL-LINK-ACTIVE-COLOR-2: rgb(18, 56, 235);
 
-    --GENERAL-IMAGE-BORDER-RADIUS: 50%;
+    --GENERAL-IMAGE-BORDER-RADIUS: 0;
     --GENERAL-BOX-SHADOW: 0px 3px 9px rgba(0, 0, 0, .05);
 
 
@@ -30,7 +30,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;
+    --homepage-section-padding: 100px 0 25px 0;
 
 
     /* HERO IMAGE */
@@ -61,6 +61,8 @@
     --about-bkg-size: cover;
 
     --about-image-border-radius: var(--GENERAL-IMAGE-BORDER-RADIUS);
+    --about-image-border: 0;
+    --about-image-width: 100%;
 
     --about-title-color: var(--GENERAL-FONT-COLOR-1);
     --about-title-bar-color: var(--GENERAL-COLOR-2);
diff --git a/static/css/theme.css b/static/css/theme.css
index 53b3782..e275ca6 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -670,7 +670,7 @@ main {
 }
 
 .section {
-    padding: var(--homepage-section-padding-v) 0;
+    padding: var(--homepage-section-padding);
     min-height: calc(100% - var(--NAVBAR-HEIGHT));
 }
 
@@ -978,6 +978,21 @@ background-size: cover;
 
 #about .portrait {
     border-radius: var(--about-image-border-radius);
+    border: var(--about-image-border);
+//border: 1px solid;
+//background-color: rgb(64,64,64);
+
+    position: relative;
+
+    width: var(--about-image-width);
+    height: auto;
+}
+/*@media (min-width: 64em) {*/
+@media (max-width: 992px) {
+    #about .portrait {
+        /* 2-REC TODO: set as custom param */
+        max-width: 300px;
+    }
 }
 
 #about .text-tertiary {
@@ -987,6 +1002,31 @@ background-size: cover;
     text-justify: inter-word;
 }
 
+#avatar1 {
+    /* 2-REC: setting position here causes problems with height */
+    //position: absolute;
+    top:0;
+    left:0;
+
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+#avatar2 {
+    opacity: 0;
+    position: absolute;
+    top:0;
+    left:0;
+
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+#avatar2:hover {
+    opacity: 100%;
+}
+
 /******************************************************************************/
 
 /* SERVICES */