Title bars

7 files changed, 110 insertions, 59 deletions

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index 5adf820..a31e905 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,4 +1,3 @@
-{{ "<!-- ABOUT -->" | safeHTML }}
 {{ $params := .Site.Params.about }}
 {{ with .Site.Data.about }}
   {{ $big_side := 8 }}
@@ -33,24 +32,9 @@
         --about-bkg-size: {{ . }};
       {{- end -}}
   ">
-    <div class="container-fluid">
-      <div class="row">
-        {{ $title_length := 10 }}
-        {{ with $params.title_length }}
-          {{ $title_length = . }}
-        {{ end }}
-        {{ if eq $params.title_align "left" }}
-          <div class="col-md-{{ $title_length }} section-title-left">
-        {{ else }}
-          <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }} section-title-right">
-        {{ end }}
-          {{ with .title }}
-            <h2 class="section-heading">{{ . }}</h2>
-            <hr class="primary light">
-          {{ end }}
-        </div>
-      </div>
-    </div>
+    {{ with .title }}
+      {{ partial "title-bar.html" (dict "title" . "align" $params.title_align "length" $params.title_length) }}
+    {{ end }}
     <div class="container-fluid">
       <div class="row">
         {{ if eq $params.layout "right" }}
diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html
index 83cda9e..4411010 100644
--- a/layouts/partials/sections/contact.html
+++ b/layouts/partials/sections/contact.html
@@ -1,21 +1,15 @@
-{{ "<!-- CONTACT -->" | safeHTML }}
+{{ $params := .Site.Params.contact }}
 {{ with .Site.Data.contact }}
     <section class="section" id="contact"
             {{ with .background_image }}
                 style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
             {{ end }}
         >
+        {{ with .title }}
+            {{ partial "title-bar.html" (dict "title" . "align" $params.title_align "length" $params.title_length) }}
+        {{ end }}
         <div class="container-fluid">
             <div class="row">
-                <div class="col-md-4 col-md-offset-8 section-title-right">
-                    {{ with .title }}
-                        <h2 class="section-heading text-tertiary">{{ . }}</h2>
-                        <hr class="primary">
-                    {{ end }}
-                </div>
-            </div>
-
-            <div class="row">
                 <div class="col-md-4 col-md-offset-1 text-center">
                     <div class="profile bg-secondary">
                         {{ with .photo }}
diff --git a/layouts/partials/sections/services.html b/layouts/partials/sections/services.html
index fcbc90e..0c2d37b 100644
--- a/layouts/partials/sections/services.html
+++ b/layouts/partials/sections/services.html
@@ -1,4 +1,4 @@
-{{ "<!-- SERVICES -->" | safeHTML }}
+{{ $params := .Site.Params.services }}
 {{ with .Site.Data.services }}
     <section class="section" id="services"
             {{ with .background_image }}
@@ -6,16 +6,8 @@
             {{ end }}
         >
         {{ with .title }}
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="text-center">
-                        <h2 class="section-heading text-tertiary">{{ . }}</h2>
-                        <hr class="primary">
-                    </div>
-                </div>
-            </div>
+            {{ partial "title-bar.html" (dict "title" . "align" $params.title_align "length" $params.title_length) }}
         {{ end }}
-
         <div class="container services-container">
             <div class="row">
                 {{ partial "utils/get-number-columns.html" (dict "length" (len .services) "scratch" $.Scratch) }}
diff --git a/layouts/partials/sections/skills.html b/layouts/partials/sections/skills.html
index a177cbf..72dc59e 100644
--- a/layouts/partials/sections/skills.html
+++ b/layouts/partials/sections/skills.html
@@ -1,17 +1,9 @@
-{{ "<!-- SKILLS -->" | safeHTML }}
+{{ $params := .Site.Params.skills }}
 {{ $data := .Site.Data.skills }}
 <section class="section" id="skills">
     {{ with $data.title }}
-        <div class="container-fluid">
-            <div class="row">
-                <div class="text-center">
-                    <h2 class="section-heading">{{ . }}</h2>
-                    <hr class="primary">
-                </div>
-            </div>
-        </div>
+        {{ partial "title-bar.html" (dict "title" . "align" $params.title_align "length" $params.title_length) }}
     {{ end }}
-
     <div class="container-fluid">
         <div class="row">
             <div class="col-lg-6 col-lg-offset-1 text-primary">
@@ -31,7 +23,6 @@
             </div>
             {{ end }}
         </div>
-
         {{/* Tags & Categories */}}
         {{ $project_sections := .Site.Params.projects.categories }}
         <div class="row">
@@ -45,7 +36,6 @@
                     </div>
                 </div>
             </div>
-
             <div class="col-lg-5">
                 <div class="skills-container">
                     {{ $label := or $data.categories_label "CATEGORIES" }}
diff --git a/layouts/partials/title-bar.html b/layouts/partials/title-bar.html
new file mode 100644
index 0000000..bc4c574
--- /dev/null
+++ b/layouts/partials/title-bar.html
@@ -0,0 +1,26 @@
+{{/*
+    Parameters:
+    - length: width of title bar
+    - align: alignment (left|center|right)
+    - title: the title text
+*/}}
+<div class="container-fluid">
+  <div class="row">
+    {{ $title_length := 10 }}
+    {{ with .length }}
+      {{ $title_length = . }}
+    {{ end }}
+    {{ if eq .align "left" }}
+      <div class="col-md-{{ $title_length }} section-title-left">
+    {{ else if eq .align "right" }}
+      <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }} section-title-right">
+    {{ else }}
+      <div class="col-md-{{ $title_length }} col-md-offset-{{ div (sub 12 $title_length) 2 }} section-title-center">
+    {{ end }}
+      {{ with .title }}
+        <h2 class="section-heading">{{ . }}</h2>
+        <hr class="section-hr">
+      {{ end }}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/static/css/default.css b/static/css/default.css
index 293906d..631c90b 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -48,6 +48,9 @@
 
     --about-image-border-radius: var(--GENERAL-IMAGE-BORDER-RADIUS);
 
+    --about-title-color: var(--GENERAL-FONT-COLOR-1);
+    --about-title-bar-color: var(--GENERAL-COLOR-2);
+
     --about-link-color: var(--GENERAL-LINK-COLOR-2);
     --about-link-color-active: var(--GENERAL-FONT-COLOR-3);
 
@@ -56,3 +59,24 @@
     --about-bkg-margin-left: 0;
     --about-bkg-margin-right: 0;
 }
+
+
+/* SERVICES */
+#services {
+    --services-title-color: var(--GENERAL-FONT-COLOR-1);
+    --services-title-bar-color: var(--GENERAL-COLOR-1);
+}
+
+
+/* SKILLS */
+#skills {
+    --skills-title-color: var(--GENERAL-FONT-COLOR-1);
+    --skills-title-bar-color: var(--GENERAL-COLOR-1);
+}
+
+
+/* CONTACT */
+#contact {
+    --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 7e538a2..8533bb0 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -44,10 +44,11 @@ p {
 hr {
     border-width: 3px;
 
-    width: var(--HR-WIDTH);
+//    width: var(--HR-WIDTH);
     border-color: var(--HR-BORDER-COLOR, var(--GENERAL-COLOR-1));
 }
 
+/* TODO: can be removed*/
 hr.light {
     border-color: var(--HR-BORDER-LIGHT-COLOR, var(--GENERAL-COLOR-2));
 }
@@ -631,6 +632,10 @@ main {
 .section-heading {
     margin-top: 0;
 }
+/*
+.section-hr {
+}
+*/
 
 /* TODO: here? */
 .section-title-left {
@@ -639,7 +644,11 @@ main {
 }
 .section-title-right {
     padding-right: 0;
-    text-align:left;
+    text-align: left;
+}
+.section-title-center {
+    //padding-right: 0;
+    text-align: center;
 }
 
 
@@ -756,9 +765,20 @@ TODO: check!
     position: relative;
 
     z-index: -2;
+
+    /* TODO: add a 'about' specific color variable */
+    color: var(--GENERAL-FONT-COLOR-1);
     background-color: var(--about-bkg-color);
 }
 
+#about .section-hr {
+    border-color: var(--about-title-bar-color);
+}
+#about .section-heading {
+    color: var(--about-title-color);
+}
+
+
 
 /* TODO: add (optional) background-color for 'boxes' (short+long) */
 /* TODO: fix problem of short+long boxes touching each other in normal layout, mobile size */
@@ -883,10 +903,6 @@ background-size: cover;
 
 }
 
-#about hr {
-    width: 100%;
-}
-
 #about a {
     color: var(--about-link-color);
 }
@@ -921,7 +937,16 @@ background-size: cover;
     background-size: cover;
     -o-background-size: cover;
 
+    /* TODO: add a 'services' specific color variable */
     color: var(--GENERAL-FONT-COLOR-1);
+    //background-color: var(--services-bkg-color);
+}
+
+#services .section-hr {
+    border-color: var(--services-title-bar-color);
+}
+#services .section-heading {
+    color: var(--services-title-color);
 }
 
 .services-container {
@@ -975,10 +1000,18 @@ min-height: 300px;
     background-size: cover;
     -o-background-size: cover;
 
+    /* TODO: add a 'services' specific color variable */
     color: var(--GENERAL-FONT-COLOR-1);
     background-color: var(--GENERAL-COLOR-2);
 }
 
+#skills .section-hr {
+    border-color: var(--skills-title-bar-color);
+}
+#skills .section-heading {
+    color: var(--skills-title-color);
+}
+
 #skills .text-tertiary p {
     text-justify: inter-word;
 }
@@ -1084,10 +1117,17 @@ min-height: 300px;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
+
+    /* TODO: add a 'contact' specific color variable */
+    color: var(--GENERAL-FONT-COLOR-1);
+    //background-color: var(--contact-bkg-color);
 }
 
-#contact hr {
-    width: 100%;
+#contact .section-hr {
+    border-color: var(--contact-title-bar-color);
+}
+#contact .section-heading {
+    color: var(--contact-title-color);
 }
 
 #contact .profile {
@@ -1101,6 +1141,7 @@ min-height: 300px;
 #contact .portrait {
     border-radius: var(--CONTACT-IMAGE-BORDER-RADIUS, var(--GENERAL-IMAGE-BORDER-RADIUS));
 }
+
 #contact .text-primary {
     text-align: left;
 }