Merge pull request #217 from XetaIO/update-homepage

Updated CSS in Home page
XetaIO · Apr 19, 2017 · 41af6ac · 41af6ac
2 parents d935259 + 0899525
commit 41af6ac
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 557 deletions.
diff --git a/src/Template/Pages/home.ctp b/src/Template/Pages/home.ctp
diff --git a/src/Template/Users/login.ctp b/src/Template/Users/login.ctp
@@ -117,7 +117,7 @@
                 <div class="form-group">
                     <?= $this->Form->button(
                         __('SignUp {0}', '<i class="fa fa-arrow-right"></i>'),
-                        ['class' => 'btn btn-primary']
+                        ['class' => 'btn btn-primary-outline']
                     ); ?>
                 </div>
                 <?= $this->Form->end(); ?>
@@ -175,7 +175,7 @@
                     <div class="form-group">
                         <?= $this->Form->button(
                             __('LogIn {0}', '<i class="fa fa-arrow-right"></i>'),
-                            ['class' => 'btn btn-primary']
+                            ['class' => 'btn btn-primary-outline']
                         ); ?>
                     </div>
                 <?= $this->Form->end(); ?>

diff --git a/webroot/css/less/button.less b/webroot/css/less/button.less
@@ -11,7 +11,7 @@
     background-image: none;
     border: none;
     cursor: pointer;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
 
     .button-size(@padding-base-vertical, @padding-base-horizontal);
     .transition(all 200ms ease);
@@ -75,7 +75,7 @@
 }
 
 .btn-white-outline {
-     .button-variant-outline-white(@btn-info-color, @btn-info-color);
+     .button-variant-outline-white(@btn-primary-bg, @btn-info-color);
 }
 
 //Link bouton

diff --git a/webroot/css/less/footer.less b/webroot/css/less/footer.less
@@ -7,7 +7,8 @@
     min-height: 60px;
     color: @white;
     background-color: @footer-bg;
-    border-top: 4px solid @footer-border-color;
+    border-top: 1px solid @primary-color;
+    box-shadow: 0 -4px 0 0 @footer-border-color;
 
     .container {
         padding-right: 15px;

diff --git a/webroot/css/less/form.less b/webroot/css/less/form.less
@@ -3,24 +3,24 @@
 .form-control {
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    height: 42px;
+    height: 44px;
     padding: 0 10px;
     margin-bottom: 15px;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 25px;
     color: @text-color;
     resize: none;
     vertical-align: middle;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
-    border: 1px solid @form-control-border-color;
+    border: 2px solid @form-control-border-color;
 
     .border-radius(3px);
     .transition(all 200ms ease-out);
 
     &:focus {
-        border: 1px solid @form-control-border-color-focus;
+        border: 2px solid @form-control-border-color-focus;
         box-shadow: none;
     }
 
@@ -48,8 +48,8 @@
         right: 0;
         top: 0;
         padding: 0;
-        margin-top: 5px;
-        margin-right: 5px;
+        margin-top: 7px;
+        margin-right: 7px;
         width: 30px;
         height: 30px;
         line-height: 1;
@@ -69,7 +69,7 @@ textarea.form-control {
 .input-group-addon {
     background-color: #FFFFFF;
     color: inherit;
-    border: 1px solid @form-control-border-color;
+    border: 2px solid @form-control-border-color;
     border-radius: 3px;
     min-width: 40px;
 }

diff --git a/webroot/css/less/home.less b/webroot/css/less/home.less
@@ -1,35 +1,27 @@
 // main : xeta.less
 
-svg {
-    float: left;
-    width: 100px;
-    height: 100px;
-    shape-rendering: geometricPrecision;
-}
-
-g, path, circle, rect {
-    //.animation-iteration-count(infinite);
-    -webkit-animation-iteration-count: infinite;
-    .animation-timing-function(linear);
-    //.animation-duration(18s);
-    .animation-direction(normal);
-
-    .transform-origin(50% 50%);
+#particles {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
 }
 
-.sky {
+.showcase {
     position: relative;
-    padding: 0;
-    margin: 0 0 35px;
+    background-color: #2a2c3a;
+    color: #fff;
     text-align: center;
-    background-color: #6bc2ea;
-    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
 
     .hp-title {
-        font-size: 28px;
+        font-size: 250%;
+        font-weight: 600;
+        line-height: 120%;
         padding: 20px 0 40px;
-        font-family: cursive;
-        text-shadow: 0 0 8px rgba(0, 0, 0, 0.27);
+        text-shadow: 0 0 8px rgba(0, 0, 0, 0.87);
 
         span {
             font-family: 'Leckerli One',cursive;
@@ -39,143 +31,12 @@ g, path, circle, rect {
 
     .hp-intro {
         padding: 0 0 40px;
-        text-shadow: 0 0 8px rgba(0, 0, 0, 0.27);
+        text-shadow: 0 0 8px rgba(0, 0, 0, 0.87);
 
         .hp-headline {
             color: @white;
         }
     }
-
-    .svg svg {
-        opacity: 0.9;
-    }
-
-    .sky-bg {
-        padding: 48px 30px 68px;
-        background: url(/img/home/overlay.png);
-    }
-
-    .container {
-        position: inherit;
-        z-index: 2;
-    }
-
-    .climacon_component-stroke {
-        fill: #ffffff;
-        stroke-width: 0%;
-        stroke: #000000;
-
-        &.climacon_component-stroke_sunSpoke,
-        &.climacon_component-stroke_sunBody {
-            fill: #F1C40F;
-        }
-    }
-
-    .climacon_component-fill {
-        fill: #aedef4;
-        stroke-width: 0%;
-        stroke: #000000;
-    }
-
-    .climacon_sun {
-        position: absolute;
-        left: -5%;
-        top: -70px;
-        width: 150px;
-        height: 150px;
-        margin-left: -100px;
-
-        .animation(animateSun 280s 0s linear infinite);
-    }
-
-    .climacon_cloudFill {
-        position: absolute;
-        right: 0%;
-        margin-right: -120px;
-
-        &.cloud-1 {
-            top: 10%;
-            .transform(scale(0.6));
-            .animation(animateCloud 35s 12s linear infinite);
-        }
-
-        &.cloud-1-1 {
-            top: 34%;
-            .transform(scale(0.6));
-            .animation(animateCloud 35s 14s linear infinite);
-        }
-
-        &.cloud-1-2 {
-            top: 74%;
-            .transform(scale(0.6));
-            .animation(animateCloud 35s 9s linear infinite);
-        }
-
-        &.cloud-2 {
-            top: 60%;
-            .transform(scale(0.8));
-            .animation(animateCloud 30s 10s linear infinite);
-        }
-
-        &.cloud-3 {
-            top: 43%;
-            .transform(scale(1));
-            .animation(animateCloud 25s 7s linear infinite);
-        }
-
-        &.cloud-3-1 {
-            top: 13%;
-            .transform(scale(1));
-            .animation(animateCloud 25s 16s linear infinite);
-        }
-
-        &.cloud-4 {
-            top: 18%;
-            .transform(scale(1.2));
-            .animation(animateCloud 20s 4s linear infinite);
-        }
-
-        &.cloud-4-1 {
-            top: 70%;
-            .transform(scale(1.4));
-            .animation(animateCloud 20s 8s linear infinite);
-        }
-
-        &.cloud-5 {
-            top: 27%;
-            .transform(scale(1.6));
-            .animation(animateCloud 15s 0s linear infinite);
-        }
-
-        &.cloud-5-1 {
-            top: 8%;
-            .transform(scale(1.8));
-            .animation(animateCloud 15s 5s linear infinite);
-        }
-    }
-
-    .climacon_componentWrap_sunSpoke,
-    .climacon_component-stroke_sunSpoke {
-        .animation-name(scale);
-        .animation-direction(alternate);
-        .animation-duration(2s);
-    }
-
-    .climacon_componentWrap_sunSpoke,
-    .climacon_component-stroke_sunSpoke:nth-child(even) {
-        .animation-delay(1.5s);
-    }
-}
-
-
-@media (max-width: 767px) {
-    .sky .climacon_sun {
-        display: none;
-    }
-
-    .sky .sky-bg {
-        padding: 28px 0px 48px;
-    }
 }
 
 .news {
@@ -270,9 +131,9 @@ g, path, circle, rect {
 }
 
 .focus {
-    margin-bottom: 80px;
+    padding-bottom: 80px;
     text-align: center;
-    margin-top: 55px;
+    padding-top: 55px;
 
     .col-md-4 {
         margin-top: 20px;
@@ -485,61 +346,6 @@ g, path, circle, rect {
     }
 }
 
-
-@keyframes animateCloud {
-    0% {
-        right: 0%;
-    }
-    100% {
-        right: 110%;
-    }
-}
-
-@-webkit-keyframes animateCloud {
-    0% {
-        right: 0%;
-    }
-    100% {
-        right: 110%;
-    }
-}
-
-@-moz-keyframes animateCloud {
-    0% {
-        right: 0%;
-    }
-    100% {
-        right: 110%;
-    }
-}
-
-@keyframes animateSun {
-    0% {
-        left: 0%;
-    }
-    100% {
-        left: 110%;
-    }
-}
-
-@-webkit-keyframes animateSun {
-    0% {
-        left: 0%;
-    }
-    100% {
-        left: 110%;
-    }
-}
-
-@-moz-keyframes animateSun {
-    0% {
-        left: 0%;
-    }
-    100% {
-        left: 110%;
-    }
-}
-
 @-moz-keyframes left-top {
     0% { -webki-transform: translate(-100px, -100px) scale(3,3) }
     1% { -webkit-transform: translate(-100px, -100px) scale(3,3) }

diff --git a/webroot/css/less/mixins.less b/webroot/css/less/mixins.less
@@ -101,7 +101,7 @@
     &.active,
     .open > .dropdown-toggle& {
         color: @color;
-        background-color: transparent;
+        background-color: @background;
         box-shadow: none;
     }
     &:active,

diff --git a/webroot/css/less/navbar.less b/webroot/css/less/navbar.less
@@ -3,6 +3,7 @@
 .navbar-inverse {
     background-color: @white;
     border-bottom: 4px solid rgba(0,0,0,0.1);
+    transition: all 0.15s ease-in;
 
     //Toggle button on responsive menu.
     .navbar-toggle {

diff --git a/webroot/css/xeta.min.css b/webroot/css/xeta.min.css
diff --git a/webroot/js/particles.min.js b/webroot/js/particles.min.js