Gallery color changes

diff --git a/css/app.css b/css/app.css
index aa4a06a..f9fd4aa 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -5859,7 +5859,7 @@ article h2 {
 .top-bar-container, .tab-bar {
   margin-bottom: 2rem; }
 
-#menu-menu-1 .dropdown li a {
+#menu-menu-1 ul li a {
   font-size: 12px;
   font-weight: bold; }
 
@@ -6084,7 +6084,33 @@ article h2 {
   padding: 20px; }
 
 .ngg-gallery-thumbnail-box {
-  margin: 5px 0 !important; }
+  margin: 5px 0 !important;
+  border: 1px solid black;
+  border-radius: 4px;
+  color: white;
+  background-color: #0568b3;
+  font-family: times;
+  font-size: 18px;
+  font-style: italic; }
+
+#fancybox-title-inside {
+  background-color: #0568b3;
+  border-radius: 4px;
+  color: white;
+  font-family: times;
+  font-size: 18px; }
+
+#gallery li:first-child .ngg-gallery-thumbnail-box {
+  background-color: orange; }
+
+#gallery li:nth-child(2) .ngg-gallery-thumbnail-box {
+  background-color: orange; }
+
+#gallery li:nth-child(3) .ngg-gallery-thumbnail-box {
+  background-color: orange; }
+
+#gallery li:nth-child(4) .ngg-gallery-thumbnail-box {
+  background-color: orange; }
 
 .ngg-gallery-thumbnail {
   float: none !important; }
@@ -6098,23 +6124,23 @@ article h2 {
 .slideshowlink {
   display: none; }
 
-.top-bar-menu > li.has-dropdown > ul.dropdown li ul li:only-child a {
+.top-bar-menu > li.has-dropdown > ul li ul li:only-child a {
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px; }
 
-.top-bar-menu > li.has-dropdown > ul.dropdown li ul li:first-child a {
+.top-bar-menu > li.has-dropdown > ul li ul li:first-child a {
   border-top-right-radius: 15px; }
 
-.top-bar-menu > li.has-dropdown > ul.dropdown li:last-child a {
+.top-bar-menu > li.has-dropdown > ul li:last-child a {
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px; }
 
-.top-bar-menu > li.has-dropdown > ul.dropdown li:last-child:hover > a {
+.top-bar-menu > li.has-dropdown > ul li:last-child:hover > a {
   border-radius: 0; }
 
-.top-bar-menu > li.has-dropdown > ul.dropdown li ul li:last-child {
+.top-bar-menu > li.has-dropdown > ul li ul li:last-child {
   background-color: transparent; }
-  .top-bar-menu > li.has-dropdown > ul.dropdown li ul li:last-child a {
+  .top-bar-menu > li.has-dropdown > ul li ul li:last-child a {
     border-bottom-right-radius: 15px; }
 
 /**
@@ -6145,6 +6171,204 @@ span.wpcf7-list-item {
  * 5.0 Plugins
  * ----------------------------------------------------------------------------
  */
+/*
+ * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8).
+ *
+ * Don't hesitate to create new effects and remove the ones you don't need.
+ *
+ * latest version and complete README available on Github:
+ * https://github.com/louisremi/menu-effects
+ *
+ * Copyright 2012 @louis_remi
+ * Licensed under the MIT license.
+ *
+ * Are you using this in a paid work?
+ * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
+ *
+ */
+.top-bar-menu > li > .sub-menu {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 0;
+  overflow: hidden;
+  max-height: 0;
+  /* The transition-delay prevents the menu to disappear before the transition is run backward
+   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
+  -webkit-transition: max-height 1ms linear 1s;
+  -moz-transition: max-height 1ms linear 1s;
+  /* A .submenu should be only revealed when hovering the .menu */
+  pointer-events: none; }
+
+.top-bar-menu > li:hover .sub-menu, .top-bar-menu > li:focus .sub-menu {
+  pointer-events: auto;
+  z-index: 10;
+  max-height: 2000px;
+  -webkit-transition: none;
+  -moz-transition: none; }
+
+.has-dropdown.not-click .dropdown {
+  display: block;
+  visibility: hidden;
+  opacity: 0; }
+.has-dropdown.not-click:hover > .dropdown {
+  visibility: visible;
+  opacity: 1; }
+
+/* Progressive Anim
+ * ==================================================================
+ * This is a lot of redundant code but the result is worth it
+ * This should be edited for menus with more or much less than 8 items 
+ */
+/* forward */
+.top-bar-menu > li:hover .sub-menu li:nth-child(1), .menu > li:hover .sub-menu li:nth-child(1), .sub-menu li:nth-child(8) {
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
+  transition-delay: 0; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(2), .sub-menu li:nth-child(7) {
+  -webkit-transition-delay: 66;
+  -moz-transition-delay: 66;
+  -ms-transition-delay: 66;
+  -o-transition-delay: 66;
+  transition-delay: 66; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(3), .sub-menu li:nth-child(6) {
+  -webkit-transition-delay: 132;
+  -moz-transition-delay: 132;
+  -ms-transition-delay: 132;
+  -o-transition-delay: 132;
+  transition-delay: 132; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(4), .sub-menu li:nth-child(5) {
+  -webkit-transition-delay: 198;
+  -moz-transition-delay: 198;
+  -ms-transition-delay: 198;
+  -o-transition-delay: 198;
+  transition-delay: 198; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(5), .sub-menu li:nth-child(4) {
+  -webkit-transition-delay: 264;
+  -moz-transition-delay: 264;
+  -ms-transition-delay: 264;
+  -o-transition-delay: 264;
+  transition-delay: 264; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(6), .sub-menu li:nth-child(3) {
+  -webkit-transition-delay: 330;
+  -moz-transition-delay: 330;
+  -ms-transition-delay: 330;
+  -o-transition-delay: 330;
+  transition-delay: 330; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(7), .sub-menu li:nth-child(2) {
+  -webkit-transition-delay: 396;
+  -moz-transition-delay: 396;
+  -ms-transition-delay: 396;
+  -o-transition-delay: 396;
+  transition-delay: 396; }
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(8), .sub-menu li:nth-child(1) {
+  -webkit-transition-delay: 462;
+  -moz-transition-delay: 462;
+  -ms-transition-delay: 462;
+  -o-transition-delay: 462;
+  transition-delay: 462; }
+
+/* Default
+ ================================================================= */
+.sub-menu li {
+  opacity: 0;
+  -webkit-transition: opacity 0.4s, -webkit-transform 0.6s, max-height 0.6s;
+  -moz-transition: opacity 0.4s, -moz-transform 0.6s, max-height 0.6s;
+  -ms-transition: opacity 0.4s, -ms-transform 0.6s, max-height 0.6s;
+  -o-transition: opacity 0.4s, -o-transform 0.6s, max-height 0.6s;
+  transition: opacity 0.4s, transform 0.6s, max-height 0.6s; }
+
+.top-bar-menu > li:hover .sub-menu li, .top-bar-menu > li:focus .sub-menu li {
+  opacity: 1;
+  -webkit-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none; }
+
+/* Helix
+ ================================================================= */
+.helix {
+  -webkit-perspective: 400px;
+  -moz-perspective: 400px;
+  -ms-perspective: 400px;
+  -o-perspective: 400px;
+  perspective: 400px; }
+
+.helix li {
+  -webkit-transform: rotateY(90deg);
+  -moz-transform: rotateY(90deg);
+  -ms-transform: rotateY(90deg);
+  -o-transform: rotateY(90deg);
+  transform: rotateY(90deg); }
+
+/* Wave
+ ================================================================= */
+.wave li {
+  -webkit-transform-origin: 0% 0%;
+  -moz-transform-origin: 0% 0%;
+  -ms-transform-origin: 0% 0%;
+  -o-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+  -webkit-transform: skewY(-90deg);
+  -moz-transform: skewY(-90deg);
+  -ms-transform: skewY(-90deg);
+  -o-transform: skewY(-90deg);
+  transform: skewY(-90deg); }
+
+/* Fly
+ ================================================================= */
+.fly {
+  -webkit-perspective: 400px;
+  -moz-perspective: 400px;
+  -ms-perspective: 400px;
+  -o-perspective: 400px;
+  perspective: 400px; }
+
+.fly li {
+  -webkit-transform-origin: 50% 50% -50px;
+  -moz-transform-origin: 50% 50% -50px;
+  -ms-transform-origin: 50% 50% -50px;
+  -o-transform-origin: 50% 50% -50px;
+  transform-origin: 50% 50% -50px;
+  -webkit-transform: rotateX(-180deg);
+  -moz-transform: rotateX(-180deg);
+  -ms-transform: rotateX(-180deg);
+  -o-transform: rotateX(-180deg);
+  transform: rotateX(-180deg); }
+
+/* Blind
+ ================================================================= */
+.blind li {
+  max-height: 0; }
+
+.top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
+  /* This should be changed to the normal height of list-items */
+  max-height: 55px; }
+
+/* Venitian
+ ================================================================= */
+.venitian li {
+  -webkit-transform-origin: 50% 0;
+  -moz-transform-origin: 50% 0;
+  -ms-transform-origin: 50% 0;
+  -o-transform-origin: 50% 0;
+  transform-origin: 50% 0;
+  -webkit-transform: scale(1, 0);
+  -moz-transform: scale(1, 0);
+  -ms-transform: scale(1, 0);
+  -o-transform: scale(1, 0);
+  transform: scale(1, 0); }
+
 /* Assets */
 /* 
  * Foundation Icons v 3.0

diff --git a/front-page.php b/front-page.php
index c526711..a618719 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -82,7 +82,6 @@ get_header(); ?>
                         <h1 class="home_section_title">Portfolio of Results</h1>
                         
                         <?php the_block( 'Gallery Column'); ?>
-                        <?php echo do_shortcode("[ngg_images gallery_ids='1' display_type='photocrati-nextgen_basic_thumbnails']")?>
                         
                     </div> <!-- Portfolio -->
                     <div id="homepage_testimonials" class="row">

diff --git a/scss/site/_structure.scss b/scss/site/_structure.scss
index 66ac673..7b62ea4 100644 (file)
--- a/scss/site/_structure.scss
+++ b/scss/site/_structure.scss
@@ -320,7 +320,7 @@ article h2 {
 .top-bar-container, .tab-bar {
     margin-bottom: rem-calc(32);
 }
-#menu-menu-1 .dropdown li a {
+#menu-menu-1 ul li a {
     font-size: 12px;
     font-weight: bold;
 }
@@ -573,16 +573,43 @@ article h2 {
     }
     #homepage_problem_solvers {
         text-align:center;
-        
     }
-    #homepage_gallery {
+    #homepage_portfolio {
         text-align:center;
+        margin: 0;
     }
     .ngg-galleryoverview {
         padding: 20px;
     }
     .ngg-gallery-thumbnail-box {
         margin: 5px 0 !important;
+        border: 1px solid black;
+        border-radius: 4px;
+        color: white;
+        background-color: #0568b3;
+        font-family: times;
+        font-size: 18px;
+        font-style: italic;
+    }
+    #fancybox-title-inside {
+        background-color: #0568b3;
+        border-radius: 4px;
+        color: white;
+        
+        font-family: times;
+        font-size: 18px;
+    }
+    #gallery li:first-child .ngg-gallery-thumbnail-box {
+        background-color: orange;
+    }
+    #gallery li:nth-child(2) .ngg-gallery-thumbnail-box {
+        background-color: orange;
+    }
+    #gallery li:nth-child(3) .ngg-gallery-thumbnail-box {
+        background-color: orange;
+    }
+    #gallery li:nth-child(4) .ngg-gallery-thumbnail-box {
+        background-color: orange;
     }
     .ngg-gallery-thumbnail {
         float: none !important;
@@ -596,7 +623,32 @@ article h2 {
     .slideshowlink {
         display:none;
     }
-
+    .top-bar-menu > li.has-dropdown > ul li ul li:only-child a {
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+    }
+    
+    .top-bar-menu > li.has-dropdown > ul li ul li:first-child a {
+        border-top-right-radius: 15px;
+    }
+    .top-bar-menu > li.has-dropdown > ul li:last-child {
+       
+        a {
+            border-bottom-left-radius: 15px;
+            
+        border-bottom-right-radius: 15px;
+        }
+    }
+    .top-bar-menu > li.has-dropdown > ul li:last-child:hover > a {
+        border-radius: 0;
+    }
+    
+    .top-bar-menu > li.has-dropdown > ul li ul li:last-child {
+        background-color: transparent;
+        a {
+            border-bottom-right-radius: 15px;
+        }
+    }
 
     /**
      * 4.2 Posts
@@ -647,3 +699,215 @@ article h2 {
  */
 
 // Insert styles here
+/*
+ * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8).
+ *
+ * Don't hesitate to create new effects and remove the ones you don't need.
+ *
+ * latest version and complete README available on Github:
+ * https://github.com/louisremi/menu-effects
+ *
+ * Copyright 2012 @louis_remi
+ * Licensed under the MIT license.
+ *
+ * Are you using this in a paid work?
+ * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
+ *
+ */
+
+.top-bar-menu > li > .sub-menu {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 0;
+  overflow: hidden;
+  max-height: 0;
+  /* The transition-delay prevents the menu to disappear before the transition is run backward
+   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
+  -webkit-transition: max-height 1ms linear 1s;
+     -moz-transition: max-height 1ms linear 1s;
+  /* A .submenu should be only revealed when hovering the .menu */
+  pointer-events: none;
+}
+ 
+.top-bar-menu > li:hover .sub-menu, .top-bar-menu > li:focus .sub-menu {
+  pointer-events: auto;
+  z-index: 10;
+  max-height: 2000px;
+  -webkit-transition: none;
+     -moz-transition: none;
+}
+&.has-dropdown.not-click {
+    .dropdown {
+        @extend %anim-button;
+        display:block;
+        visibility: hidden;
+        opacity: 0;
+    }
+    &:hover > .dropdown {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+/* Progressive Anim
+ * ==================================================================
+ * This is a lot of redundant code but the result is worth it
+ * This should be edited for menus with more or much less than 8 items 
+ */
+$baseTime: 66;
+@mixin transition-delay($transitionTime) {
+    $newTime: $transitionTime * $baseTime;
+      -webkit-transition-delay: $newTime;
+     -moz-transition-delay: $newTime;
+      -ms-transition-delay: $newTime;
+       -o-transition-delay: $newTime;
+          transition-delay: $newTime;
+}
+ /* forward */
+.top-bar-menu > li:hover .sub-menu li:nth-child(1),
+.menu > li:hover .sub-menu li:nth-child(1),
+.sub-menu li:nth-child(8) {
+    @include transition-delay(0);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(2),
+.sub-menu li:nth-child(7)  {
+    @include transition-delay(1);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(3),
+.sub-menu li:nth-child(6)  {
+    @include transition-delay(2);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(4),
+.sub-menu li:nth-child(5)  {
+    @include transition-delay(3);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(5),
+.sub-menu li:nth-child(4)  {
+    @include transition-delay(4);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(6),
+.sub-menu li:nth-child(3)  {
+    @include transition-delay(5);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(7),
+.sub-menu li:nth-child(2) {
+    @include transition-delay(6);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(8),
+.sub-menu li:nth-child(1)  {
+    @include transition-delay(7);
+}
+
+/* Default
+ ================================================================= */
+.sub-menu li {
+  opacity: 0;
+
+  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
+     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
+      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
+       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
+          transition: opacity .4s,         transform .6s, max-height .6s;
+}
+
+.top-bar-menu > li:hover .sub-menu li, .top-bar-menu > li:focus .sub-menu li {
+  opacity: 1;
+
+  -webkit-transform: none;
+     -moz-transform: none;
+      -ms-transform: none;
+       -o-transform: none;
+          transform: none;
+}
+
+/* Helix
+ ================================================================= */
+.helix {
+  -webkit-perspective: 400px;
+     -moz-perspective: 400px;
+      -ms-perspective: 400px;
+       -o-perspective: 400px;
+          perspective: 400px;
+}
+
+.helix li {
+  -webkit-transform: rotateY(90deg);
+     -moz-transform: rotateY(90deg);
+      -ms-transform: rotateY(90deg);
+       -o-transform: rotateY(90deg);
+          transform: rotateY(90deg);
+}
+
+/* Wave
+ ================================================================= */
+.wave li {
+  -webkit-transform-origin: 0% 0%;
+     -moz-transform-origin: 0% 0%;
+      -ms-transform-origin: 0% 0%;
+       -o-transform-origin: 0% 0%;
+          transform-origin: 0% 0%;
+
+  -webkit-transform: skewY(-90deg);
+     -moz-transform: skewY(-90deg);
+      -ms-transform: skewY(-90deg);
+       -o-transform: skewY(-90deg);
+          transform: skewY(-90deg);
+}
+
+/* Fly
+ ================================================================= */
+.fly {
+  -webkit-perspective: 400px;
+     -moz-perspective: 400px;
+      -ms-perspective: 400px;
+       -o-perspective: 400px;
+          perspective: 400px;
+}
+
+.fly li {
+  -webkit-transform-origin: 50% 50% -50px;
+     -moz-transform-origin: 50% 50% -50px;
+      -ms-transform-origin: 50% 50% -50px;
+       -o-transform-origin: 50% 50% -50px;
+          transform-origin: 50% 50% -50px;
+
+  -webkit-transform: rotateX( -180deg );
+     -moz-transform: rotateX( -180deg );
+      -ms-transform: rotateX( -180deg );
+       -o-transform: rotateX( -180deg );
+          transform: rotateX( -180deg );
+}
+
+/* Blind
+ ================================================================= */
+.blind li {
+  max-height: 0;
+}
+
+.top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
+  /* This should be changed to the normal height of list-items */
+  max-height: 55px;
+}
+
+/* Venitian
+ ================================================================= */
+.venitian li {
+  -webkit-transform-origin: 50% 0;
+     -moz-transform-origin: 50% 0;
+      -ms-transform-origin: 50% 0;
+       -o-transform-origin: 50% 0;
+          transform-origin: 50% 0;
+
+  -webkit-transform: scale(1,0);
+     -moz-transform: scale(1,0);
+      -ms-transform: scale(1,0);
+       -o-transform: scale(1,0);
+          transform: scale(1,0);
+}