add paddings for the titles on project image tile

4 files changed, 14 insertions, 13 deletions

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index a673496..50975d0 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -38,7 +38,7 @@ projects:
         "565": img/analytik_565x420.jpg
         "360": img/analytik_360x318.jpg
   - title: Friends
-    type: web design
+    type: Product Development
     link: https://unsplash.com/photos/ir5lIkVFqC4
     class: wide-col
     image:
diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html
index 3c99529..5fff50f 100644
--- a/layouts/partials/head-includes.html
+++ b/layouts/partials/head-includes.html
@@ -115,6 +115,16 @@
       -o-transition: all 500ms;
       transition: all 500ms; }
 
+  .break-word {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto; }
+
   .main-description {
     position: relative; }
     .main-description h1 {
@@ -125,15 +135,6 @@
       padding-top: 1.3em;
       padding-bottom: 1.3em;
       z-index: 1; }
-    .main-description .break-word {
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      -ms-word-break: break-all;
-      word-break: break-word;
-      -ms-hyphens: auto;
-      -moz-hyphens: auto;
-      -webkit-hyphens: auto;
-      hyphens: auto; }
     .main-description .image-item {
       position: absolute;
       bottom: 0;
diff --git a/layouts/partials/modules/projects.html b/layouts/partials/modules/projects.html
index a5c2475..b079476 100644
--- a/layouts/partials/modules/projects.html
+++ b/layouts/partials/modules/projects.html
@@ -8,10 +8,10 @@
         <div class="project-hover">
           <div class="project-caption">
             {{- with .title -}}
-              <div class="project-title">{{.}}</div>
+              <div class="break-word project-title">{{.}}</div>
             {{- end -}}
             {{- with .type -}}
-              <div class="project-type">{{.}}</div>
+              <div class="break-word project-type">{{.}}</div>
             {{- end -}}
           </div>
         </div>
diff --git a/static/app.css b/static/app.css
index b0388e1..26a5a60 100644
--- a/static/app.css
+++ b/static/app.css
@@ -1,2 +1,2 @@
-.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform 0.5s, top 0.2s}.burger .middle{top:.8em;transition:transform 0.5s ease 0.2s, top 0.2s}.burger .bottom{top:1.6em;transition:all 0.5s ease 0.1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:0.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:0.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .image-item{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding-top:2.7em;padding-left:2.1em;line-height:1.2}.project-caption .project-title{font-size:2.8em;font-weight:bold}.project-caption .project-type{font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:0.3s;animation-duration:0.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width: 22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}.project-caption .project-title{font-size:3.5em}}@media only screen and (min-width: 27.875em){.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width: 46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding-top:3.7em;padding-left:3.1em}.project-caption .project-title{font-size:4em}}@media only screen and (min-width: 58.5em){.project-caption .project-title{font-size:4.6em}}
+.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform 0.5s, top 0.2s}.burger .middle{top:.8em;transition:transform 0.5s ease 0.2s, top 0.2s}.burger .bottom{top:1.6em;transition:all 0.5s ease 0.1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:0.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:0.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .image-item{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding:1.5em;line-height:1.2}.project-caption .project-title{max-height:3.5em;font-size:2.8em;font-weight:bold;overflow:hidden}.project-caption .project-type{margin-top:.5em;font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:0.3s;animation-duration:0.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width: 22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}}@media only screen and (min-width: 27.875em){.project-caption .project-title{font-size:3.5em}.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width: 46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding:3.7em 2.5em 3.7em 3em}.project-caption .project-title{font-size:4em;max-height:4.8em}}@media only screen and (min-width: 58.5em){.project-caption .project-title{font-size:4.6em}}