[FEATURE] improve content elements

t3kit · May 18, 2016 · a89eeda · a89eeda
1 parent 1db2665
commit a89eeda
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 75 deletions.
diff --git a/dev/styles/main/contentElements/bigIconTextButton.less b/dev/styles/main/contentElements/bigIconTextButton.less
@@ -6,9 +6,8 @@
 }
 
 .big-icon-text-btn {
-    margin: 40px 0;
     text-align: center;
-    padding: 0 16px;
+    padding: 36px 16px;
 }
 
 .big-icon-text-btn__link {

diff --git a/dev/styles/main/contentElements/imageTextLink.less b/dev/styles/main/contentElements/imageTextLink.less
@@ -2,8 +2,8 @@
 // === Image text link =====================================
 // =========================================================
 .img-text-link {
-    margin: 40px 0;
-    padding: 0 16px;
+    // margin: 20px 0;
+    padding: 36px 16px;
 }
 
 .img-text-link__header {

diff --git a/dev/styles/main/contentElements/leftIconTextButton.less b/dev/styles/main/contentElements/leftIconTextButton.less
@@ -18,8 +18,8 @@
 }
 
 .icon-text-btn{
-    margin: 40px 0;
-    padding: 0 16px;
+    padding: 36px 16px;
+    padding-top: 16px;
 }
 .icon-text-btn__link {
     font-size: 16px;

diff --git a/dev/styles/main/contentElements/slider.less b/dev/styles/main/contentElements/slider.less
@@ -18,10 +18,10 @@
 }
 
 .img-slider__caption{
+    padding: 20px 40px;
     position: absolute;
     top: 0;
     left: 0;
-    padding: 0 20px;
 }
 
 .img-slider__caption-sub-header{
@@ -33,22 +33,23 @@
 .img-slider__caption-header{
     font-family: @font-family-serif;
     text-shadow: 0 1px 0 rgba(100,100,100,.3);
-    font-size: 20px;
+    font-size: 36px;
     color: #fff;
     margin-top: 10px;
     font-weight: 400;
 
 }
+
 .img-slider__caption-p{
     font-size: 13px;
     color: #fff;
     padding: 6px 10px;
 }
 .img-slider__caption-link{
-    padding: 6px;
+    padding: 10px 36px;
     background: #ff5a00;
     color: #FFF;
-    font-size: 14px;
+    font-size: 16px;
     border: 1px solid #ff5a00;
 }
 
@@ -68,6 +69,7 @@
     display: none;
 }
 
+
 @media (min-width: 768px) {
     .img-slider__caption{
         padding: 30px 50px;
@@ -89,6 +91,13 @@
     .img-slider__caption-p{
         font-size: 16px;
     }
+    .img-slider__caption-sub-header{
+        font-size: 26px;
+    }
+    .img-slider__caption-header{
+        font-size: 62px;
+        margin-top: 20px;
+    }
 }
 
 @media (min-width: 992px) {
@@ -102,7 +111,6 @@
     .img-slider__caption-header{
         font-size: 72px;
         margin-top: 20px;
-        // font-style: italic;
     }
     .img-slider__caption-p{
         padding:12px 20px;

diff --git a/dev/styles/main/contentElements/socialIcons.less b/dev/styles/main/contentElements/socialIcons.less
@@ -2,47 +2,17 @@
     width: 100%;
     text-align: center;
     display: block;
-    padding: 40px 0 20px;
+    padding: 30px 0 20px;
 }
 .social-icons__item {
     position: relative;
     display: inline-block;
     color: @social-icons-bg-color;
     padding-top: 12px;
-    line-height: normal;
-    vertical-align: middle;
-    background: transparent;
     padding: 8px;
-    margin-right: 6px;
-    // font-size: 32px;
-    // transition: all .2s ease;
+    margin: 6px 10px;
     transition: color .2s;
 
-    &:after {
-        font-family: 'icons';
-        speak: none;
-        font-size: 26px;
-        font-style: normal;
-        font-weight: normal;
-        font-variant: normal;
-        text-transform: none;
-        line-height: 1;
-        /* Better Font Rendering =========== */
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        content: '\101';//'\e675';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        // transform: translate3D(-50%, -50%, 0) rotateY(90deg);
-        margin-top: -1px;
-        margin-left: 1px;
-        opacity: 0;
-        // will-change: color, opacity, transform;
-        // transition: color .2s, opacity .3s, transform .4s;
-        // transition: opacity .25s ease, translate .25s ease, rotateY .25s ease;
-    }
-
     & > .icons {
         position: relative;
         font-size: 16px;
@@ -53,56 +23,38 @@
             top: 50%;
             left: 50%;
             transform: translate3D(-50%, -50%, 0) rotateY(0);
-            // will-change: color, opacity, transform;
-            // transition: color .25s, opacity .25s, transform .25s;
         }
 
         &:after {
-            // transition: border-color .25s, opacity .25s, transform .25s;
             transition: border-color .2s;
             content: '';
             position: absolute;
             height: 36px;
             width: 36px;
-            border: 2px solid shade(@main-color, 40%);
+            border: 2px solid fade(@social-icons-bg-color, 30%);
             border-radius: 50%;
             top: 50%;
             left: 50%;
             transform: translate3D(-50%, -50%, 0);
         }
     }
-
-
 }
- // .social-icons__item {
 .no-touch .footer .social-icons__item {
     &:hover {
         color: @social-icons-hover-color;
 
-        // &:after {
-        //     // opacity: 1;
-        //     // transform: translate3D(-50%, -50%, 0) rotateY(0);
-        // }
-        //
         & > .icons:after {
-            border-color: @social-icons-hover-color;;
-            // opacity: 0;
-            // transform: translate3D(-50%, -50%, 0) rotateY(180deg);
+            border-color: fade(@social-icons-hover-color, 50%);
         }
     }
 }
 
-
-// @media (min-width: 768px) {
-//     .social-icons {
-//     }
-//     .social-icons__item {
-//     }
-//     .social-icons__item .icons{
-//         font-size: 32px;
-//     }
-// }
-
+@media (min-width: 768px) {
+    .social-icons__item {
+        margin: 0;
+        margin-right: 8px;
+    }
+}
 
 // =================================
 // === Header Social Icons =========
@@ -121,8 +73,4 @@
         height: @header-middle-height;
         line-height: @header-middle-height;
     }
-    // .header-middle__social-icon .social-icons__item {
-    //     padding-top: 0;
-    //     padding: 0 4px;
-    // }
 }
diff --git a/dev/templates/parts/content/contentElements/logoCarousel.hbs b/dev/templates/parts/content/contentElements/logoCarousel.hbs
@@ -14,7 +14,7 @@
         </div>
         <div class="swiper-slide logo-carousel__slide">
             <a class="logo-carousel__link" href="/">
-                <img data-src="images/t3kit.png" class="swiper-lazy img-responsive logo-carousel__img">
+                <img data-src="images/logo.png" class="swiper-lazy img-responsive logo-carousel__img">
                 <div class="swiper-lazy-preloader"></div>
             </a>
         </div>

diff --git a/dev/templates/parts/content/contentElements/parallax.hbs b/dev/templates/parts/content/contentElements/parallax.hbs
@@ -1,4 +1,4 @@
-<div class="parallax {{#if this.videoLink}} parallax-video {{else}} parallax-img {{/if}} {{#if this.hideInMobile}} hidden-xs{{/if}}" {{#if this.videoLink}} data-jarallax-video={{videoLink}} {{/if}} style="background-image: url({{imgSrc}}); height: {{#if this.height}}{{height}}{{else}} auto{{/if}};">
+<div class="parallax {{#if this.videoLink}} parallax-video {{else}} parallax-img {{/if}} {{#if this.hideInMobile}} hidden-xs hidden-sm{{/if}}" {{#if this.videoLink}} data-jarallax-video={{videoLink}} {{/if}} style="background-image: url({{imgSrc}}); height: {{#if this.height}}{{height}}{{else}} auto{{/if}};">
     {{#if this.elements}}
         {{{elements}}}
     {{/if}}