projects / web / TroutCreek.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9520a21)
Worked on header elements
authorSteve Sutton <steve@gaslightmedia.com>
Tue, 10 Feb 2015 20:30:56 +0000 (15:30 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Tue, 10 Feb 2015 20:30:56 +0000 (15:30 -0500)
index.html patch | blob | history
scss/_settings.scss patch | blob | history
scss/_structure.scss patch | blob | history

diff --git a/index.html b/index.html
index bd0f990..006586b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -12,16 +12,21 @@
     <body id="home">
         <div class="off-canvas-wrap" data-offcanvas>
             <div class="inner-wrap">
-                <a class="left-off-canvas-toggle" href="#">Menu</a>
 
-                <aside class="left-off-canvas-menu">
-                    <ul>
-                        <li>Home</li>
+                <aside class="right-off-canvas-menu show-for-small-only">
+                    <ul class="off-canvas-list">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Accommodations</a></li>
+                        <li><a href="#">The Resort</a></li>
+                        <li><a href="#">Things to See and Do</a></li>
+                        <li><a href="#">Area Info</a></li>
+                        <li><a href="#">Lodging Specials</a></li>
+                        <li><a href="#">Golf Packages</a></li>
                     </ul>
                 </aside>
                 <div id="wrapper" class="row">
-                    <header id="header" class="small-12 columns">
                         <a href="#" id="logo">Trout Creek Condominium Resort</a>
+                    <header id="header" class="small-12 columns show-for-large-up">
                         <ul id="toplinks">
                             <li><a href="#" id="fb">Find Us on Facebook</a></li>
                             <li><a href="tel:+18007480245" id="phone">800-748-0245</a></li>
@@ -39,6 +44,13 @@
                         </ul>
                     </header>
 
+                    <nav class="tab-bar show-for-medium-down">
+                        <section class="middle tab-bar-section">Trout Creek</section>
+                        <section class="right-small">
+                            <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
+                        </section>
+                    </nav>
+
                     <div id="main" class="small-12 columns">
                         <div id="slideshow_wrapper">
                             <img src="assets/TMP_slideshow_1.jpg" width="990" height="260">
diff --git a/scss/_settings.scss b/scss/_settings.scss
index 7442f09..384e4fc 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -96,7 +96,7 @@ $total-columns: 12;
 $font-weight-normal: normal;
 $font-weight-bold: bold;
 
-// $white       : #FFFFFF;
+$white       : #FFFFFF;
 // $ghost       : #FAFAFA;
 // $snow        : #F9F9F9;
 // $vapor       : #F6F6F6;
@@ -112,12 +112,12 @@ $font-weight-bold: bold;
 // $steel       : #666666;
 // $charcoal    : #555555;
 // $tuatara     : #444444;
-// $oil         : #333333;
+$oil         : #333333;
 // $jet         : #222222;
 // $black       : #000000;
 
 // We use these as default colors throughout
-// $primary-color: #008CBA;
+$primary-color: #0e2e4c;
 // $secondary-color: #e7e7e7;
 // $alert-color: #f04124;
 // $success-color: #43AC6A;
@@ -818,16 +818,16 @@ $paragraph-text-rendering: optimizeLegibility;
 // Off Canvas Tab Bar Variables
 // $include-html-off-canvas-classes: $include-html-classes;
 
-// $tabbar-bg: $oil;
-// $tabbar-height: rem-calc(45);
-// $tabbar-icon-width: $tabbar-height;
-// $tabbar-line-height: $tabbar-height;
-// $tabbar-color: $white;
-// $tabbar-middle-padding: 0 rem-calc(10);
+$tabbar-bg: $primary-color;
+$tabbar-height: rem-calc(45);
+$tabbar-icon-width: $tabbar-height;
+$tabbar-line-height: $tabbar-height;
+$tabbar-color: $white;
+$tabbar-middle-padding: 0 rem-calc(10);
 
 // Off Canvas Divider Styles
-// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
-// $tabbar-right-section-border: $tabbar-left-section-border;
+$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
+$tabbar-right-section-border: $tabbar-left-section-border;
 
 
 // Off Canvas Tab Bar Headers
@@ -1381,7 +1381,7 @@ $paragraph-text-rendering: optimizeLegibility;
 // $include-html-top-bar-classes: $include-html-classes;
 
 // Background color for the top bar
-// $topbar-bg-color: $oil;
+// $topbar-bg-color: $primary-color;
 // $topbar-bg: $topbar-bg-color;
 
 // Height and margin
diff --git a/scss/_structure.scss b/scss/_structure.scss
index d80d30b..f3bb9c0 100755 (executable)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -198,6 +198,7 @@ iframe {
     overflow: hidden;
     margin: 0;
     padding: 0;
+    height: 157px;
 }
 #logo {
     display: block;
@@ -208,6 +209,10 @@ iframe {
     padding: 0;
     background: url(../assets/logo.gif) 0 0 no-repeat;
     text-indent: -4999px;
+    position: absolute;
+}
+.tab-bar {
+    position: relative;
 }
 ul#toplinks {
     display: block;