Project image padding

9 files changed, 53 insertions, 21 deletions

diff --git a/TODO/TODO.md b/TODO/TODO.md
index b2368e2..d325fa6 100644
--- a/TODO/TODO.md
+++ b/TODO/TODO.md
@@ -285,7 +285,7 @@
             - [ ] Add "all_projects" at end of list!
                 => set front matter, etc.
                 ```html
-                {{ .Render "limage" }}
+                {{ .Render "project-image" }}
                 ```
         - [ ] services.html
             - [ ] For "services-container"<br>
diff --git a/exampleSite/static/css/custom.css b/exampleSite/static/css/custom.css
index 24faafa..2cb9fbb 100644
--- a/exampleSite/static/css/custom.css
+++ b/exampleSite/static/css/custom.css
@@ -1,4 +1,5 @@
 :root{
+/* TODO: adapt/change to new variables */
 
     /*
       Override desired values for the following variables.
diff --git a/layouts/partials/pages/hero.html b/layouts/partials/pages/hero.html
index b29ca38..493c2d2 100644
--- a/layouts/partials/pages/hero.html
+++ b/layouts/partials/pages/hero.html
@@ -14,8 +14,8 @@
     {{/* Horrible hack to avoid gap when no header image & no small image in sidebar */}}
     <style type="text/css">
         :root {
-            --HERO-IMAGE-MARGIN-BOTTOM: 0px;
-            --HERO-IMAGE-MARGIN-BOTTOM-SMALL: 0px;
+            --hero-image-margin-bottom: 0px;
+            --hero-image-margin-bottom-small: 0px;
         }
     </style>
 {{ end }}
diff --git a/layouts/partials/pages/lists.html b/layouts/partials/pages/lists.html
index 6858c95..479c0c2 100644
--- a/layouts/partials/pages/lists.html
+++ b/layouts/partials/pages/lists.html
@@ -12,7 +12,7 @@
             <div class="container-fluid">
                 <div class="row no-gutter">
                     {{ range (.Scratch.Get "list") }}
-                        {{ partial "limage.html" (dict "context" . "data" $.Site.Params.projects.list) }}
+                        {{ partial "project-image.html" (dict "context" . "data" $.Site.Params.projects.list) }}
                     {{ end }}
                 </div>
             </div>
diff --git a/layouts/partials/limage.html b/layouts/partials/project-image.html
index 9995503..9995503 100644
--- a/layouts/partials/limage.html
+++ b/layouts/partials/project-image.html
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index 938ae3a..e619fd9 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" $params.home) }}
+                    {{ partial "project-image.html" (dict "context" . "data" $params.home) }}
                 {{ end }}
                 {{ .Scratch.Delete "list" }}
             {{ end }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 47c68b9..69d73fc 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,5 +1,5 @@
 :root{
-
+/* TODO: replace with content of my website's custom (th all variables commented) */
     /*
       Override desired values for the following variables.
     */
@@ -51,6 +51,8 @@
 /*
     --HERO-IMAGE-HEIGHT: 500px;
     --HERO-IMAGE-HEIGHT-SMALL: 250px;
+    --HERO-IMAGE-MARGIN-BOTTOM: 0px;
+    --HERO-IMAGE-MARGIN-BOTTOM-SMALL: 0px;
 */
 
 
diff --git a/static/css/default.css b/static/css/default.css
index 416f02e..00ec50d 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -27,17 +27,20 @@
 
     --COPYRIGHT-FONT: Arial, sans-serif;
 
-    /* ! - Must be in "px", else need to change "calc" formula for "empty-padding" */
-    --HERO-IMAGE-MARGIN-BOTTOM: -50px;
-    --HERO-IMAGE-MARGIN-BOTTOM-SMALL: -75px;
-
-    --PROJECTBOX-IMAGE-WIDTH: 650px;
-    --PROJECTBOX-CAPTION-BACKGROUND-COLOR: rgba(64, 95, 240, .9);
-
     --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;
+
+
+    /* HERO IMAGE */
+/*
+    --hero-image-height: 500px;
+    --hero-image-height-small: 250px;
+*/
+    /* ! - Must be in "px", else need to change "calc" formula for "empty-padding" */
+    --hero-image-margin-bottom: -50px;
+    --hero-image-margin-bottom-small: -75px;
 }
 
 
@@ -98,9 +101,29 @@
     --skills-title-bar-color: var(--GENERAL-COLOR-1);
 }
 
+/* PROJECTS */
+.project-box {
+/*
+TODO: REMOVE? keep/adapt?
+    --PROJECTBOX-NAME-FONT: var(--GENERAL-FONT-2);
+    --PROJECTBOX-CATEGORY-FONT: var(--GENERAL-FONT-2);
+    --PROJECTBOX-DATE-FONT: var(--GENERAL-FONT-2);
+*/
+/* TODO: useless? */
+/*    --projectbox-image-width: 650px;*/
+    --projectbox-image-padding: 0;
+    --projectbox-caption-background-color: rgba(64, 95, 240, .9);
+}
 
 /* CONTACT */
 #contact {
+/*
+TODO: REMOVE? keep/adapt?
+    --CONTACT-PROFILE-COLOR: var(--GENERAL-COLOR-2);
+    --CONTACT-PROFILE-BORDER-RADIUS: 0px;
+    --CONTACT-PROFILE-BOX-SHADOW: var(--GENERAL-BOX-SHADOW);
+    --CONTACT-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
+*/
     --contact-title-color: var(--GENERAL-FONT-COLOR-3);
     --contact-title-bar-color: var(--GENERAL-COLOR-1);
 }
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 64b1efe..53b3782 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -48,6 +48,7 @@ hr {
     border-color: var(--HR-BORDER-COLOR, var(--GENERAL-COLOR-1));
 }
 
+/* TODO: move elsewhere in file... */
 @keyframes zoom-in {
     0% {
         transform: scale(0);
@@ -1104,7 +1105,12 @@ min-height: 300px;
     position: relative;
     margin: 0 auto;
 
-    max-width: var(--PROJECTBOX-IMAGE-WIDTH);
+/* TODO: useless? */
+/*    max-width: var(--projectbox-image-width);*/
+}
+
+.project-box img {
+    padding: var(--projectbox-image-padding);
 }
 
 .project-box .project-box-caption {
@@ -1119,7 +1125,7 @@ min-height: 300px;
     transition: all .35s;
     opacity: 0;
 
-    background: var(--PROJECTBOX-CAPTION-BACKGROUND-COLOR);
+    background: var(--projectbox-caption-background-color);
     color: var(--GENERAL-FONT-COLOR-3);
 }
 
@@ -1238,8 +1244,8 @@ min-height: 300px;
     background-size: cover;
     -o-background-size: cover;
 
-    margin-bottom: var(--HERO-IMAGE-MARGIN-BOTTOM-SMALL);
-    height: var(--HERO-IMAGE-HEIGHT-SMALL, 250px);
+    margin-bottom: var(--hero-image-margin-bottom-small);
+    height: var(--hero-image-height-small, 250px);
 }
 
 .header-image p {
@@ -1256,23 +1262,23 @@ min-height: 300px;
 
 @media(min-width: 768px) {
     .header-image {
-        height: var(--HERO-IMAGE-HEIGHT, 500px);
+        height: var(--hero-image-height, 500px);
     }
 }
 
 /* Hack to avoid navigation tree to go in header image when no small image in sidebar */
 .empty-padding {
-    margin-top: calc(0px - var(--HERO-IMAGE-MARGIN-BOTTOM-SMALL));
+    margin-top: calc(0px - var(--hero-image-margin-bottom-small));
 }
 
 /*@media (min-width: 64em) {*/
 @media (min-width: 992px) {
     .header-image {
-        margin-bottom: var(--HERO-IMAGE-MARGIN-BOTTOM);
+        margin-bottom: var(--hero-image-margin-bottom);
     }
 
     .empty-padding {
-        margin-top: calc(0px - var(--HERO-IMAGE-MARGIN-BOTTOM));
+        margin-top: calc(0px - var(--hero-image-margin-bottom));
     }
 }