About layout 'fixes' + Home button

7 files changed, 138 insertions, 19 deletions

diff --git a/exampleSite/data/home.yaml b/exampleSite/data/home.yaml
index 1c48e3b..3a55aeb 100644
--- a/exampleSite/data/home.yaml
+++ b/exampleSite/data/home.yaml
@@ -3,5 +3,9 @@ title: "YOUR NAME"
 subtitle: "A subtitle"
 background: "home.jpg"
 text: "A short catchy phrase ..."
-button_text: "SEE MORE"
+xbutton_text: "SEE MORE"
+button_image: "images/arrow_down.png"
+xbutton_icon:
+  icon: "fa-arrow-alt-circle-down"
+  pack: "fas"
 ---
diff --git a/exampleSite/static/images/arrow_down.png b/exampleSite/static/images/arrow_down.png
new file mode 100644
index 0000000..c47a6b8
--- /dev/null
+++ b/exampleSite/static/images/arrow_down.png
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index b1c79ff..5adf820 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -34,15 +34,15 @@
       {{- end -}}
   ">
     <div class="container-fluid">
-      <div class="row no-gutter">
+      <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 }} text-right">
+          <div class="col-md-{{ $title_length }} section-title-left">
         {{ else }}
-          <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }}">
+          <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }} section-title-right">
         {{ end }}
           {{ with .title }}
             <h2 class="section-heading">{{ . }}</h2>
@@ -76,10 +76,18 @@
           {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
           </div>
           {{/* ~Hack to add space outside (shorter right) */}}
+{{/*
           <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="text-tertiary long-text">
             <p>{{ .long_text | markdownify }}</p>
+            </div>
           </div>
           {{ else }}
+            <div>
+              <p></p>
+            </div>
             <div class="text-tertiary long-text">
               <p>{{ .long_text | markdownify }}</p>
             </div>
diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html
index 6e6bc0f..83cda9e 100644
--- a/layouts/partials/sections/contact.html
+++ b/layouts/partials/sections/contact.html
@@ -6,8 +6,8 @@
             {{ end }}
         >
         <div class="container-fluid">
-            <div class="row no-gutter">
-                <div class="col-md-4 col-md-offset-8">
+            <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">
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index 364635a..c4a7035 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -8,7 +8,7 @@
         <div class="header-content">
             <div class="header-content-inner">
                 {{ with .title }}
-                    <h1>{{ . | markdownify  }}</h1>
+                    <h1 class="wow bounceIn">{{ . | markdownify  }}</h1>
                 {{ end }}
                 {{ with .subtitle }}
                     <h2>{{ . | markdownify }}</h2>
@@ -19,10 +19,19 @@
                 {{ with .text }}
                     <p>{{ . | markdownify }}</p>
                 {{ end }}
-                {{ with .button_text }}
+                {{ if .button_image }}
+                    <a href="#about" class="btn-image page-scroll">
+                        <img src={{ .button_image }} />
+                    </a>
+                {{ else if .button_text }}
                     <a href="#about" class="btn btn-primary page-scroll">
-                        {{ . }}<br>
+                        {{ .button_text }}<br>
                     </a>
+                {{ else if .button_icon }}
+                    {{ with .button_icon }}
+                        <a href="#about" class="btn-icon btn-primary page-scroll {{ .pack }} {{ .icon }} icon-x6">
+                        </a>
+                    {{ end }}
                 {{ end }}
             </div>
         </div>
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index 8dea28b..8be7c09 100644
--- a/layouts/partials/sections/projects.html
+++ b/layouts/partials/sections/projects.html
@@ -2,9 +2,9 @@
 <section class="section projects" id="projects_{{ trim .File.Dir "/\\" }}">
     {{ $path := replace .File.Dir "\\" "/" }}
     {{ with .Title }}
-        <a href="/{{ $path }}" class="container-fluid padding-title">
+        <a href="/{{ $path }}" class="container-fluid projects-link">
             <div class="row">
-                <div class="col-md-8 text-right">
+                <div class="col-md-8 section-title-left">
                     <h2 class="section-heading">{{ . }}</h2>
                     <hr class="primary">
                 </div>
diff --git a/static/css/theme.css b/static/css/theme.css
index bc00510..7e538a2 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -255,11 +255,56 @@ fieldset[disabled] .btn-primary.active {
 
 .btn {
     border: 0;
-    border-radius: 300px;
-    font-weight: 700;
+    border-radius: 0;
+    font-weight: 500;
 
     font-family: var(--BUTTON-FONT, var(--GENERAL-FONT-2));
+
+    padding: .5em;
+}
+
+.btn-icon {
+    border: 0;
+    border-radius: 300px;
+    font-weight: 500;
+
+    padding: 0;
+}
+.btn-icon:hover {
+    text-decoration: none;
+
+    -webkit-transition: .1s ease-in-out;
+    -moz-transition: .1s ease-in-out;
+    -o-transition: .1s ease-in-out;
+    transition: .1s ease-in-out;
+
+    transform: scale(1.1);
+}
+.btn-icon:active {
+    text-decoration: none;
+    transform: scale(0.9);
+}
+.btn-icon:focus {
+    text-decoration: none;
+}
+
+.btn-image img {
+    /* TODO: size as param (?) */
+    width:64px;
+    height:64px;
+}
+.btn-image img:hover {
+    -webkit-transition: .1s ease-in-out;
+    -moz-transition: .1s ease-in-out;
+    -o-transition: .1s ease-in-out;
+    transition: .1s ease-in-out;
+
+    transform: scale(1.1);
 }
+.btn-image img:active {
+    transform: scale(0.9);
+}
+
 
 .btn-xl {
     padding: 15px 30px;
@@ -587,6 +632,17 @@ main {
     margin-top: 0;
 }
 
+/* TODO: here? */
+.section-title-left {
+    padding-left: 0;
+    text-align:right;
+}
+.section-title-right {
+    padding-right: 0;
+    text-align:left;
+}
+
+
 /******************************************************************************/
 
 /* HOME */
@@ -704,23 +760,61 @@ TODO: check!
 }
 
 
-/* TODO: could move paddings out of 'media' for all sizes (but seems ok as is */
+/* TODO: add (optional) background-color for 'boxes' (short+long) */
+/* TODO: fix problem of short+long boxes touching each other in normal layout, mobile size */
 /*@media (min-width: 64em) {*/
+    #about .long-text {
+//        padding-left: 5%;
+//        padding-right: 5%;
+//padding: 5%;
+padding-bottom: 1px;
+padding-top: 1px;
+padding-left: 15px;
+padding-right: 15px;
+//margin: 5px;
+//margin-top: 5%;
+background-color: var(--about-bkg-color);
+//background-color: grey;
+    }
+    #about .profile {
+//        padding-left: 5%;
+//        padding-right: 5%;
+padding: 5%;
+//margin: 5px;
+background-color: var(--about-bkg-color);
+//background-color: grey;
+
+//text-align: right;
+    }
 @media (min-width: 992px) {
+/*
     #about .profile {
-        padding-left: 5%;
-        padding-right: 5%;
+//        padding-left: 5%;
+//        padding-right: 5%;
+padding: 5%;
+//margin: 5px;
+background-color: grey;
 
 //text-align: right;
     }
+*/
     #about .short-text {
         text-align: left;
     }
-
+/*
     #about .long-text {
-        padding-left: 5%;
-        padding-right: 5%;
+//        padding-left: 5%;
+//        padding-right: 5%;
+//padding: 5%;
+padding-bottom: 1px;
+padding-top: 1px;
+padding-left: 15px;
+padding-right: 15px;
+//margin: 5px;
+//margin-top: 5%;
+//background-color: grey;
     }
+*/
 }
 /*@media (min-width: 80em) {*/
 /*
@@ -905,6 +999,10 @@ min-height: 300px;
     width: 100%;
 }
 
+.projects-link .row {
+    margin: 0px;
+}
+
 .project-box {
     display: block;
     position: relative;