start services page

dmd-web-and-mobile · Mar 31, 2016 · e294e58 · e294e58
1 parent 9cfde60
commit e294e58
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 13 deletions.
diff --git a/www/wp-content/themes/ation2016/page-services.php b/www/wp-content/themes/ation2016/page-services.php
diff --git a/www/wp-content/themes/ation2016/page.php b/www/wp-content/themes/ation2016/page.php
@@ -31,6 +31,8 @@
         'post_type' => 'project',
     );
     $context['work'] = Timber::get_posts( $work_args );
+} else if ( $post->post_name === 'services' ) {
+    $context['services'] = Timber::get_terms('service');
 }
 
 Timber::render( array( 'page-' . $post->post_name . '.twig', 'page.twig' ), $context );
diff --git a/www/wp-content/themes/ation2016/src/scripts/main.js b/www/wp-content/themes/ation2016/src/scripts/main.js
@@ -33,4 +33,31 @@ jQuery( document ).ready( function( $ ) {
         console.log('Filtered by', filter);
     });
 
+    // Make service items same height
+    // var $list       = $( '.services .row' ),
+    //     $items      = $list.find( '.service' ),
+    //     setHeights  = function()
+    //     {
+    //         $items.css( 'height', 'auto' );
+
+    //         var perRow = Math.floor( $list.width() / $items.width() );
+    //         if( perRow == null || perRow < 2 ) return true;
+
+    //         for( var i = 0, j = $items.length; i < j; i += perRow )
+    //         {
+    //             var maxHeight   = 0,
+    //                 $row        = $items.slice( i, i + perRow );
+
+    //             $row.each( function()
+    //             {
+    //                 var itemHeight = parseInt( $( this ).outerHeight() );
+    //                 if ( itemHeight > maxHeight ) maxHeight = itemHeight;
+    //             });
+    //             $row.css( 'height', maxHeight );
+    //         }
+    //     };
+
+    // setHeights();
+    // $( window ).on( 'resize', setHeights );
+
 });
diff --git a/www/wp-content/themes/ation2016/src/styles/components/_services.scss b/www/wp-content/themes/ation2016/src/styles/components/_services.scss
@@ -0,0 +1,28 @@
+.services {
+    .bubbles {
+        a {
+            border-radius: 50px;
+            width: 70px;
+            height: 70px;
+        }
+    }
+
+    .service {
+        padding: 10%;
+        background-color: $grey;
+        color: white;
+        margin-bottom: 20px;
+
+        h1 {
+            margin-top: 0;
+            text-align: center;
+            font-family: $header-font;
+            font-size: 25px;
+        }
+
+        p {
+            font-family: $header-font;
+            color: white;
+        }
+    }
+}
diff --git a/www/wp-content/themes/ation2016/src/styles/site.scss b/www/wp-content/themes/ation2016/src/styles/site.scss
@@ -22,6 +22,7 @@ $header-height-sticky: 70px;
 @import 'components/header';
 @import 'components/mainsection';
 @import 'components/work';
+@import 'components/services';
 @import 'components/footer';
 
 @import 'utility/images';

diff --git a/www/wp-content/themes/ation2016/static/scripts/main.js b/www/wp-content/themes/ation2016/static/scripts/main.js
@@ -33,4 +33,31 @@ jQuery( document ).ready( function( $ ) {
         console.log('Filtered by', filter);
     });
 
+    // Make service items same height
+    // var $list       = $( '.services .row' ),
+    //     $items      = $list.find( '.service' ),
+    //     setHeights  = function()
+    //     {
+    //         $items.css( 'height', 'auto' );
+
+    //         var perRow = Math.floor( $list.width() / $items.width() );
+    //         if( perRow == null || perRow < 2 ) return true;
+
+    //         for( var i = 0, j = $items.length; i < j; i += perRow )
+    //         {
+    //             var maxHeight   = 0,
+    //                 $row        = $items.slice( i, i + perRow );
+
+    //             $row.each( function()
+    //             {
+    //                 var itemHeight = parseInt( $( this ).outerHeight() );
+    //                 if ( itemHeight > maxHeight ) maxHeight = itemHeight;
+    //             });
+    //             $row.css( 'height', maxHeight );
+    //         }
+    //     };
+
+    // setHeights();
+    // $( window ).on( 'resize', setHeights );
+
 });
diff --git a/www/wp-content/themes/ation2016/static/styles/site.css b/www/wp-content/themes/ation2016/static/styles/site.css
@@ -5860,6 +5860,25 @@ section#content {
   .work-grid .blocks .block {
     margin-bottom: 10px; }
 
+.services .bubbles a {
+  border-radius: 50px;
+  width: 70px;
+  height: 70px; }
+
+.services .service {
+  padding: 10%;
+  background-color: #a8a8a8;
+  color: white;
+  margin-bottom: 20px; }
+  .services .service h1 {
+    margin-top: 0;
+    text-align: center;
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 25px; }
+  .services .service p {
+    font-family: "Source Sans Pro", sans-serif;
+    color: white; }
+
 footer {
   border-top: 1px solid #eeeeee; }
 

diff --git a/www/wp-content/themes/ation2016/static/styles/site.min.css b/www/wp-content/themes/ation2016/static/styles/site.min.css
diff --git a/www/wp-content/themes/ation2016/templates/page-services.twig b/www/wp-content/themes/ation2016/templates/page-services.twig
@@ -0,0 +1,136 @@
+{% extends "base.twig" %}
+
+{% block content %}
+    <style>
+
+            .jumbotron {
+                background-color: white;
+            }
+
+            #persona {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/persona.png);
+            }
+
+            #unleash {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/unleash.png);
+            }
+
+            #skybox {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/skybox.png);
+            }
+
+            #umbie {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/umbie.png);
+            }
+
+            #football {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/football.png);
+            }
+
+            #pcc {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/pcc.png);
+            }
+
+            #iso {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/iso.png);
+            }
+
+            #huskyhunt {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/huskyhunt.png);
+            }
+
+            #dtstorrs {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/dtstorrs.png);
+            }
+
+            #mansfeild {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/circles/mansfield.png);
+            }
+
+            .btn-circle {
+                margin-top: 2px;
+                margin-left: 2px;
+                margin-right: 2px;
+                width: 70px;
+                height: 70px;
+                padding: 0;
+                border-radius: 50px;
+                background-size: 120%;
+                background-repeat: no-repeat;
+                background-position: -8.5px 2px;
+                }
+
+
+            #vimeo {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/social/vimeo.png);
+            }
+
+            #facebook {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/social/facebook.png);
+            }
+
+            #pintrest {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/social/pintrest.png);
+            }
+
+            #twitter {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/social/twitter.png);
+            }
+
+            #instagram {
+                background-image: url(http://ation.develop.digitalmediauconn.org/img/social/instagram.png);
+            }
+
+            .btn-circle2 {
+                margin-left: 2px;
+                margin-right: 2px;
+                width: 50px;
+                height: 50px;
+                padding: 0;
+                border-radius: 50px;
+                background-size: 105%;
+                background-repeat: no-repeat;
+                background-position: -1px -1px;
+                }
+
+            .pullup {
+                margin-top: -5%;
+            }
+
+        </style>
+    <div class="container services">
+
+        <div class="row">
+            {% for service in services %}
+                <div class="col-xs-12 col-sm-6 col-md-4">
+                    <div class="service">
+                        <h1>{{ service.name }}</h1>
+                        <p>{{ service.description }}</p>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+
+        <div class="jumbotron text-center bubbles">
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="persona"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="unleash"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="skybox"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="umbie"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="football"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="pcc"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="iso"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="huskyhunt"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="dtstorrs"></a>
+            <a href="#" class="btn btn-default btn-circle btn-lg" role="button" id="mansfeild"></a>
+        </div>
+
+        <div class="jumbotron text-center pullup">
+            <a href="#" class="btn btn-default btn-circle2 btn-lg" role="button" id="vimeo"></a>
+            <a href="#" class="btn btn-default btn-circle2 btn-lg" role="button" id="facebook"></a>
+            <a href="#" class="btn btn-default btn-circle2 btn-lg" role="button" id="pintrest"></a>
+            <a href="#" class="btn btn-default btn-circle2 btn-lg" role="button" id="twitter"></a>
+            <a href="#" class="btn btn-default btn-circle2 btn-lg" role="button" id="instagram"></a>
+        </div>
+
+    </div>
+{% endblock %}