Home layout - UNFINISHED

3 files changed, 51 insertions, 10 deletions

diff --git a/README.md b/README.md
index 7154303..ee1b0f4 100644
--- a/README.md
+++ b/README.md
@@ -127,10 +127,16 @@ The different parameters that can be used are:
 * "subtitle": A subtitle. Typically the kind of services or specialty you provide.
 * "background": The image used for the background.
 * "text": A short phrase to draw attention and make the visitor to see more.
-* "button_text": The text displayed on the scrolling button.
 
+Additionally, the following parameters can be used to customize the scrolling button.
+* "button_image": The image used as the button.
+* "button_text": The text on the button.
+* "button_icon": The icon used as the button.
+These parameters are mutually exclusive, so only one can be used (the others will be ignored).
+They are presented in their order of priority.
 
-All the parameters are optional - if not defined, it will not be added to the page content.
+
+All the parameters are optional: if not defined, their corresponding element will not be added to the page content.
 
 
 ### ABOUT: Introduce yourself
@@ -196,7 +202,7 @@ It is composed of a grid representing a set of subsections, each grouping "Proje
 
 It is based on the "Portfolio" section of the CREATIVE theme, but with an additional level of categories above the projects level. Also, instead of opening a pop-up window when selecting an element in the grid, it opens a new page displaying the contained projects.
 
-A portfolio section "Projects" is defined in the Homepage via the "config.toml" configuration file. Additionaly to the entry specified in the file, a directory with the same name must exist at the top level of the website file structure, containing its associated "_index.md" file.
+A portfolio section "Projects" is defined in the Homepage via the "config.toml" configuration file. Additionally to the entry specified in the file, a directory with the same name must exist at the top level of the website file structure, containing its associated "_index.md" file.
 
 As an example, to have two sections for a professional portfolio and a personal porfolio, the following entry could be added to the "[params.projects]" group in "config.toml" file:
 
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index c4a7035..4157a81 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -1,14 +1,17 @@
-{{ "<!-- HOME -->" | safeHTML }}
 {{ with .Site.Data.home }}
     <section id="home"
-            {{ with .background }}
-                style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
-            {{ end }}
+        {{ with .background }}
+            style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
+        {{ end }}
         >
         <div class="header-content">
             <div class="header-content-inner">
                 {{ with .title }}
+{{/* HOME_LAYOUT
                     <h1 class="wow bounceIn">{{ . | markdownify  }}</h1>
+*/}}
+{{/* TODO: use specific class for title? */}}
+                    <h1>{{ . | markdownify  }}</h1>
                 {{ end }}
                 {{ with .subtitle }}
                     <h2>{{ . | markdownify }}</h2>
diff --git a/static/css/theme.css b/static/css/theme.css
index 8533bb0..3d657c2 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -656,6 +656,9 @@ main {
 
 /* HOME */
 
+/* TODO: rewrite+check all subcases (inner, etc) */
+/* TODO: check required/desired variables and add to "default css" */
+
 #home {
     position: relative;
     min-height: 100%;
@@ -665,15 +668,24 @@ main {
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
-    text-align: center;
-    color: var(--HOME-TITLE-COLOR, var(--GENERAL-FONT-COLOR-3));
+
+/* HOME_LAYOUT - BEGIN */
+    //text-align: center;
+/* HOME_LAYOUT - MID */
 }
 
 #home .header-content {
     position: relative;
     width: 100%;
     padding: 100px 15px;
-    text-align: center;
+/* HOME_LAYOUT - BEGIN */
+//    text-align: center;
+/* HOME_LAYOUT - MID */
+/* TODO: use variables for 'top' and 'left' (0-100%) */
+text-align: center;
+/* HOME_LAYOUT - END */
+
+    color: var(--HOME-TITLE-COLOR, var(--GENERAL-FONT-COLOR-3));
 }
 
 #home .header-content .header-content-inner h1 {
@@ -688,6 +700,10 @@ main {
 
 #home .header-content .header-content-inner hr {
     margin: 30px auto;
+/* HOME_LAYOUT - MID */
+/* TODO: use variables for 'bar-width' (0-100%) (find better name) */
+width: 100%;
+/* HOME_LAYOUT - END */
 }
 
 #home .header-content .header-content-inner p {
@@ -697,14 +713,30 @@ main {
     color: var(--HOME-TEXT-COLOR, var(--GENERAL-FONT-COLOR-3));
 }
 
+/* TODO: move this to "default" case, and use "@media(max-width: 768px)" instead */
 @media(min-width: 768px) {
     #home .header-content {
         position: absolute;
+
+/* HOME_LAYOUT - BEGIN */
+/*
         top: 50%;
         padding: 0 50px;
+
         -webkit-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
         transform: translateY(-50%);
+*/
+/* HOME_LAYOUT - MID */
+padding: 0;
+/* TODO: use variables for 'top' and 'left' (0-100%) */
+width: 50%;
+left: 50%;
+top: 50%;
+-webkit-transform: translate(-50%,-50%);
+-ms-transform: translate(-50%,-50%);
+transform: translate(-50%,-50%);
+/* HOME_LAYOUT - END */
     }
 
     #home .header-content .header-content-inner {