projects subtitle2 + home css fixes

5 files changed, 59 insertions, 60 deletions

diff --git a/layouts/partials/limage.html b/layouts/partials/limage.html
index 77624dc..9995503 100644
--- a/layouts/partials/limage.html
+++ b/layouts/partials/limage.html
@@ -39,6 +39,11 @@
                         {{ . }}
                     </div>
                 {{ end }}
+                {{ with .context.Params.subtitle2 }}
+                    <div class="project-category2">
+                        {{ . }}
+                    </div>
+                {{ end }}
                 {{ if .context.Params.startDate }}
                     <div class="project-date">
                         {{ partial "time-period.html" (dict "startDate" .context.Params.startDate "endDate" .context.Params.endDate) }}
diff --git a/layouts/partials/pages/title.html b/layouts/partials/pages/title.html
index d2b96e5..76e9b13 100644
--- a/layouts/partials/pages/title.html
+++ b/layouts/partials/pages/title.html
@@ -6,6 +6,9 @@
     {{ with .Params.subtitle }}
         <h2>{{ . }}</h2>
     {{ end }}
+    {{ with .Params.subtitle2 }}
+        <h3>{{ . }}</h3>
+    {{ end }}
 
     {{/* Period */}}
     {{ if .Params.startDate }}
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index b073591..d9f8a72 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -10,20 +10,20 @@
             {{- with $params.width -}}
                 --home-width: {{ . }}%;
             {{- end -}}
-            {{- with $params.offset_h -}}
-                --home-offset-h: {{ . }}%;
+            {{- if isset $params "offset_h" -}}
+                --home-offset-h: {{ $params.offset_h }}%;
             {{- end -}}
-            {{- with $params.offset_v -}}
-                --home-offset-v: {{ . }}%;
+            {{- if isset $params "offset_v" -}}
+                --home-offset-v: {{ $params.offset_v }}%;
+            {{- end -}}
+            {{- with $params.text_align -}}
+                --home-text-align: {{ . }};
             {{- end -}}
             "
         >
             <div class="header-content-inner">
                 {{ with .title }}
-{{/* HOME_LAYOUT
-                    <h1 class="wow bounceIn">{{ . | markdownify  }}</h1>
-*/}}
-{{/* TODO: use specific class for title? */}}
+                    {{/* TODO: use specific class for title? */}}
                     <h1>{{ . | markdownify  }}</h1>
                 {{ end }}
                 {{ with .subtitle }}
diff --git a/static/css/default.css b/static/css/default.css
index 90229c2..e20114d 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -45,6 +45,7 @@
     --home-width: 50%;
     --home-offset-h: 50%;
     --home-offset-v: 50%;
+    --home-text-align: center;
 }
 
 /* ABOUT */
diff --git a/static/css/theme.css b/static/css/theme.css
index 0880b7c..eb2ce7b 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -656,9 +656,6 @@ main {
 
 /* HOME */
 
-/* TODO: rewrite+check all subcases (inner, etc) + ADD VARIABLES! (align, sizes?) */
-/* TODO: check required/desired variables and add to "default css" */
-
 #home {
     position: relative;
     min-height: 100%;
@@ -668,22 +665,14 @@ main {
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
-
-/* HOME_LAYOUT - BEGIN */
-    //text-align: center;
-/* HOME_LAYOUT - MID */
 }
 
 #home .header-content {
     position: relative;
     width: 100%;
     padding: 100px 15px;
-/* HOME_LAYOUT - BEGIN */
-//    text-align: center;
-/* HOME_LAYOUT - MID */
-/* TODO: use variables for 'top' and 'left' (0-100%) */
-text-align: center;
-/* HOME_LAYOUT - END */
+
+    text-align: var(--home-text-align);
 
     color: var(--HOME-TITLE-COLOR, var(--GENERAL-FONT-COLOR-3));
 }
@@ -700,64 +689,51 @@ text-align: center;
 
 #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 */
+
+    /* TODO: use variables for 'bar-width' (0-100%) (find better name) (?) */
+    width: 100%;
 }
 
 #home .header-content .header-content-inner p {
-    margin-bottom: 50px;
+    margin-bottom: 25px;
     font-size: 16px;
     font-weight: 300;
     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;
-width: var(--home-width);
-left: var(--home-offset-h);
-top: var(--home-offset-v);
-
--webkit-transform: translate(
-    calc(-1 * var(--home-offset-h)),
-    calc(-1 * var(--home-offset-v))
-);
--ms-transform: translate(
-    calc(-1 * var(--home-offset-h)),
-    calc(-1 * var(--home-offset-v))
-);
-transform: translate(
-    calc(-1 * var(--home-offset-h, 0%)),
-    calc(-1 * var(--home-offset-v, 0%))
-);
-/* HOME_LAYOUT - END */
+        padding: 0;
+        width: var(--home-width);
+        left: var(--home-offset-h);
+        top: var(--home-offset-v);
+
+        -webkit-transform: translate(
+            calc(-1 * var(--home-offset-h)),
+            calc(-1 * var(--home-offset-v))
+        );
+        -ms-transform: translate(
+            calc(-1 * var(--home-offset-h)),
+            calc(-1 * var(--home-offset-v))
+        );
+        transform: translate(
+            calc(-1 * var(--home-offset-h)),
+            calc(-1 * var(--home-offset-v))
+        );
     }
 
     #home .header-content .header-content-inner {
         margin-right: auto;
         margin-left: auto;
-        max-width: 1000px;
+//        max-width: 1000px;
     }
 
     #home .header-content .header-content-inner p {
-        margin-right: auto;
-        margin-left: auto;
-        max-width: 80%;
+//        margin-right: auto;
+//        margin-left: auto;
+//        max-width: 80%;
         font-size: 18px;
     }
 }
@@ -1121,12 +1097,22 @@ min-height: 300px;
 }
 
 .project-box .project-box-caption .project-box-caption-content .project-category {
-    padding: 10px;
+    /*padding: 10px;*/
+    padding: 0 10px;
     font-size: 16px;
 
     font-family: var(--PROJECTBOX-CATEGORY-FONT, var(--GENERAL-FONT-2));
 }
 
+.project-box .project-box-caption .project-box-caption-content .project-category2 {
+    /*padding: 10px;*/
+    padding: 0 10px;
+    font-size: 12px;
+
+    font-family: var(--PROJECTBOX-CATEGORY-FONT, var(--GENERAL-FONT-2));
+}
+
+
 .project-box .project-box-caption .project-box-caption-content .project-date {
     padding: 10px;
     font-size: 12px;
@@ -1143,6 +1129,10 @@ min-height: 300px;
         font-size: 18px;
     }
 
+    .project-box .project-box-caption .project-box-caption-content .project-category2 {
+        font-size: 14px;
+    }
+
     .project-box .project-box-caption .project-box-caption-content .project-date {
         font-size: 14px;
     }