Permalink
Browse files

adding slider images, binding links for slides and adding a few respo…

…nsive tweaks
  • Loading branch information...
1 parent 6219077 commit 34b3be21e165085865586ab078aa5c17f5c7e38c Nick DiMatteo committed May 9, 2012
View
@@ -1,10 +1,12 @@
#load {display: block; width: 100%; height: 100%; position: absolute; z-index: 99998; background-color: #f2f2f2;}
-html,body{height:100%; margin:0; padding:0; overflow: hidden !important; font-family: Georgia, Times, serif; background: #f2f2f2; color: #1E1E1E; line-height: 24px;}
+html,body{height:100%; margin:0; padding:0; overflow: hidden !important; font-family: 'Lato', Helvetica Neue, Helvetica, sans-serif; background: #fff; color: #002b5c; line-height: 24px;}
::selection { background: #C1272D; color: #fff; }
::-moz-selection { background: #C1272D; color: #fff; }
+a:focus { outline: none; }
+
p {margin: 0 0 20px 0; padding: 0;}
header, footer {position: fixed; left: 0; height: 40px; width: 100%; display: block; background: #C1272D;}
@@ -15,7 +17,7 @@ footer {bottom: 0;}
header #logo {width: 960px; margin: 0 auto;}
header #logo a {
- width: 275px;
+ width: 315px;
height: 40px;
display: block;
text-indent: -9999px;
@@ -34,6 +36,10 @@ footer li.email a {background: transparent url('../images/icn.mail.png') 0 0 no-
.slider {height: 60%; width: 100%; display: block; background: #ccc; position: absolute; top: 40px; zoom: 1;}
+.slider .blue { background: #002b5c; margin: 0 auto;}
+
+.slider .red { background: #c1282d; margin: 0 auto;}
+
.selector {top: 0; position: relative; overflow: hidden; }
@@ -42,7 +48,22 @@ h1, h2, h3, .tabs li a {
}
h1 {margin: 0; padding: 0 20px; outline: none; cursor: pointer; font-weight: 300; font-size: 18px; position: relative;}
- h1 a {color: #fff; text-transform: lowercase; text-decoration: none; display: block; margin: 0 auto; width: 920px;}
+
+ h1 a {
+ color: #fff;
+ text-transform: lowercase;
+ text-decoration: none;
+ display: block;
+ margin: 0 auto;
+ width: 920px;
+ -webkit-transition: padding .2s ease-in-out;
+ -moz-transition: padding .2s ease-in-out;
+ -o-transition: padding .2s ease-in-out;
+ -ms-transition: padding .2s ease-in-out;
+ transition: padding .2s ease-in-out;
+ }
+
+ h1 a:focus {padding-left: 15px;}
h1#about-us {background: #0071BC;}
h1#programs {background: #0092C8;}
@@ -68,40 +89,24 @@ h1 span:hover {background-position: 0 -20px;}
h1 span.ui-icon-triangle-1-s {display: block;}
h1 span.ui-icon-triangle-1-e {display: none;}
-.section {overflow: hidden !important;}
-
-.section.programs {
- background: url('../images/bg1.jpg') center center no-repeat;
-}
+.section {overflow: hidden !important; background: #fff;}
-.section.about-us {
- background: url('../images/bg2.jpg') center center no-repeat;
-}
-
-.section.faq {
- background: url('../images/bg4.jpg') center center no-repeat;
-}
-
-.section.contact-us {
- background: url('../images/bg3.jpg') center center no-repeat;
-}
-
-.content-wrapper {width: 920px; margin: 0 auto; padding: 50px 20px 20px 20px; background: transparent url('../images/bg.content.png') 0 0 repeat; overflow: hidden; position: relative;}
+.content-wrapper {width: 920px; margin: 0 auto; padding: 50px 20px 20px 20px; overflow: hidden; position: relative;}
.content {width: 100%; position: relative; height: inherit; display: none; outline: none;}
.scroll-pane {width: 100%; height: 100%; overflow: auto;}
.titles {position: absolute; top: 0; padding-top: 15px;}
-h2 {font-weight: 900; font-size: 26px; text-transform: uppercase; margin: 0; padding: 0;}
+h2 {font-weight: 500; font-size: 26px; text-transform: uppercase; margin: 0; padding: 0;}
.tabs li a {
- font-weight: 900;
+ font-weight: 500;
font-size: 14px;
text-transform: uppercase;
margin: 0;
padding: 5px 8px;
- color: #1E1E1E;
+ color: #0092c8;
}
/*-----LOADING-----*/
@@ -324,13 +329,43 @@ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endCol
display: block;
width: 900px;
height: 27px;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
}
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; margin: 0; padding: 0 10px 0 0; white-space: nowrap; line-height: normal;}
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; }
+
+.ui-tabs .ui-tabs-nav li a:focus { outline: none; background-color: #f2f2f2; }
+
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { background-color: #C1272D; color: #fff !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0; background: none; clear: both;}
-.ui-tabs .ui-tabs-hide { display: none !important; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
+
+.slider .blue img, .slider .red img {
+ width: auto;
+ max-width: 100%;
+ margin: 0 auto;
+ margin-top: 100px;
+}
+
+
+@media (max-width: 979px) {
+
+ .content-wrapper {
+ width: auto;
+ }
+
+ .ui-tabs .ui-tabs-nav {
+ width: auto;
+ }
+
+ h2 {
+ font-size: 22px;
+ }
+
+ h1 span {
+ right: 20px;
+ margin-right: 0;
+ }
+
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -24,12 +24,17 @@
<div class="slider">
<ul class="slides">
<li>
- <img src="images/top.jpg" />
- <!-- <p class="flex-caption">Captions and cupcakes. Winning combination.</p> -->
+ <img src="images/feature-welcome.png" />
</li>
- <li>
- <img src="images/top.jpg" />
- <!-- <p class="flex-caption">Captions and cupcakes. Winning combination.</p> -->
+ <li class="blue">
+ <a href="#/programs/class-times">
+ <img src="images/feature-adult.png" />
+ </a>
+ </li>
+ <li class="red">
+ <a href="#/programs/camps">
+ <img src="images/feature-camp.png" />
+ </a>
</li>
</ul>
</div>
View
@@ -192,6 +192,25 @@ $(window).resize( function() {
});
+ //handle links from the slider
+ $('.slides a').click(function() {
+ var n = $(this).attr('href').replace(/^#\//, '');
+
+ var sub = n.split('/')[1];
+
+ $.address.value($(this).attr('href').replace(/^#/, ''));
+
+ $('.selector').accordion('activate', '#'+n);
+
+
+ //if there is a sub hash
+ if (sub) {
+ setTimeout( function() {
+ $('.tabs').tabs('select', sub); //open the corresponding tab
+ }, 50);
+ }
+ });
+
$(function() {
$( ".tabs" ).tabs({
fx: {

0 comments on commit 34b3be2

Please sign in to comment.