ready for php
authorIan Weller <ian@gaslightmedia.com>
Tue, 10 Feb 2015 18:46:51 +0000 (13:46 -0500)
committerIan Weller <ian@gaslightmedia.com>
Tue, 10 Feb 2015 18:46:51 +0000 (13:46 -0500)
index.html
interior.html
scss/_settings.scss
scss/_structure.scss

index 02ac516..b29d3f7 100644 (file)
@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gilmore Car Museum</title>
-    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/app.css"/>
+    <link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>
     <script src="bower_components/modernizr/modernizr.js"></script>
   </head>
   <body>
@@ -12,8 +13,8 @@
         <div class="inner-wrap">
             <header>
                 <div class="row">
-                    <div class="small-12 medium-4 columns">
-                        <a id="logo" href="#"><img src="assets/logo.png"></a>
+                    <div class="small-12 medium-4 columns text-center">
+                        <a id="logo" class="text-center" href="#"><img src="assets/logo.png"></a>
                     </div>
                     <div class="small-12 medium-8 columns right">
                         <div class="small-8 columns show-for-medium-up">
@@ -43,7 +44,7 @@
                                 <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
                             </div>
                         </div>
-                        <div class="small-12 columns">
+                        <div class="small-12 columns small-only-text-center medium-text-right">
                             <h1>America's Signature Collection<sup>&trade;</sup></h1>
                         </div>
                     </div>
                     </ul>
                 </aside>
             </header>
+            <div class="show-for-medium-up">
             <div class="slider">
             </div>
             <div class="thumb-nav">
                     </div>
                 </div>
             </div>
+            </div>
             <div class="row content">
                 <div class="small-12 columns">
                     <h2>Welcome</h2>
                     </div>
                 </div>
             </footer>
-            <div class="row text-center">
+            <div id="partners" class="row text-center">
                 <div class="small-offset-0 small-6 medium-4 large-offset-1 large-2 columns">
                     <a href="#"><img src="assets/naam-logo.png"></a>
                 </div>
                     <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
                 </div>
             </div>
+        <a class="exit-off-canvas"></a>
         </div><!--/inner-wrap-->
     </div><!--/off-canvas-wrap-->
 
index ba10a80..26949e9 100644 (file)
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gilmore Car Museum</title>
     <link rel="stylesheet" href="css/app.css" />
+    <link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>
     <script src="bower_components/modernizr/modernizr.js"></script>
   </head>
   <body>
@@ -12,7 +13,7 @@
         <div class="inner-wrap">  
             <header>
                 <div class="row">
-                    <div class="small-12 medium-4 columns">
+                    <div class="small-12 medium-4 columns text-center">
                         <a id="logo" href="#"><img src="assets/logo.png"></a>
                     </div>
                     <div class="small-12 medium-8 columns right">
@@ -43,7 +44,7 @@
                                 <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
                             </div>
                         </div>
-                        <div class="small-12 columns">
+                        <div class="small-12 columns small-only-text-center medium-text-right">
                             <h1>America's Signature Collection<sup>&trade;</sup></h1>
                         </div>
                     </div>
                         <li><a id="current-crumb" href="#">General Events</a></li>
                     </ul>
                 </div>
-                <div class="medium-4 columns show-for-medium-up sidebar">
-                    <h2>Host an Event</h3>
+                <div class="medium-3 columns show-for-medium-up sidebar">
+                    <h3>Host an Event</h3>
                     <ul>
                         <li><a id="active" href="#">General Events</a></li>
                         <li><a href="#">Banquets</a></li>
                         <li><a href="#">Event/Meeting Spaces</a></li>
                         <li><a href="#">Approved Caterers</a></li>
                     </ul>
-                    <a class="tab" href="#"><h2>Upcoming Events</h2></a>
-                    <a class="tab" href="#"><h2>News</h2></a>
-                    <a class="tab" href="#"><h2>The Collections</h2></a>
-                    <a class="tab" href="#"><h2>Sponsors</h2></a>
+                    <a class="tab" href="#"><h3>Upcoming Events</h3></a>
+                    <a class="tab" href="#"><h3>News</h3></a>
+                    <a class="tab" href="#"><h3>The Collections</h3></a>
+                    <a class="tab" href="#"><h3>Sponsors</h3></a>
                 </div>
-                <div class="small-12 medium-8 columns main">
+                <div class="small-12 medium-9 columns main">
                     <h2>Hold an Event You Won't Soon Forget.<br>In a Venue Like No Other Around.</h2>
                     <img src="assets/content_header-img.jpg">
                         <img class="alignleft" src="assets/content_img1.jpg">
                     </div>
                 </div>    
             </footer>
-            <div class="row text-center">
+            <div id="partners" class="row text-center">
                 <div class="small-6 medium-4 large-offset-1 large-2 columns">
                     <a href="#"><img src="assets/naam-logo.png"></a>
                 </div>
                     <p>&copy; 2015 Gilmore Car Musuem &#8226; All Rights Reserved &#8226; Produced by Gaslight Media</p>
                 </div>
             </div>
+        <a class="exit-off-canvas"></a>
         </div><!--/inner-wrap-->
     </div><!--/off-canvas-wrap-->
 
index 71288ad..614e088 100644 (file)
@@ -52,7 +52,7 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // This is the default html and body font-size for the base rem value.
-// $rem-base: 16px;
+ $rem-base: 16px;
 
 // Allows the use of rem-calc() or lower-bound() in your settings
 @import "foundation/functions";
@@ -199,7 +199,7 @@ $include-html-global-classes: $include-html-classes;
 // $include-html-type-classes: $include-html-classes;
 
 // We use these to control header font styles
- $header-font-family: Copperplate, Copperplate Gothic Light;
+ $header-font-family: "Balthazar";
 // $header-font-weight: $font-weight-normal;
 // $header-font-style: normal;
  $header-font-color: $red;
@@ -1386,8 +1386,8 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-bg: $topbar-bg-color;
 
 // Height and margin
-// $topbar-height: rem-calc(45);
-// $topbar-margin-bottom: 0;
+ $topbar-height: rem-calc(40);
+ $topbar-margin-bottom: 0;
 
 // Controlling the styles for the title in the top bar
 // $topbar-title-weight: $font-weight-normal;
index 7b58418..06a5494 100644 (file)
@@ -25,9 +25,10 @@ header {
                 li {
                     display: inline;
                     a {
-                        font-size: 0.563em;
+                        font-size: 0.750em;
                         color: $white;
                         text-transform: uppercase;
+                        padding: 0 5px;
                     }
                 }
             }
@@ -75,6 +76,7 @@ header {
             }
         }
         h1 {
+            
             sup {
                 font-size: 0.563em;
             }
@@ -95,7 +97,7 @@ header {
                     background: transparent;
                     a {
                         color: $white;
-                        font-size: 1.125em;
+                        font-size: 0.938em;
                         background: transparent;
                         text-transform: uppercase;
                     }
@@ -122,6 +124,7 @@ header {
                             background: $white;
                             border-bottom-left-radius: 10px;
                             border-bottom-right-radius: 10px;
+                            min-height: 200px;
                             li {
                                 white-space: nowrap;
                                 background: $white;
@@ -132,6 +135,7 @@ header {
                                         left: 20px;
                                         top: 23px;
                                         border: 6px solid #fdefd4;
+                                        box-shadow: 2px 3px 9px 0px #ababab;
                                     }
                                 }
                                 &:not(.has-form):not(.active) {
@@ -161,6 +165,7 @@ header {
                             background: $white;
                             border-bottom-left-radius: 10px;
                             border-bottom-right-radius: 10px;
+                            min-height: 200px;
                             li {
                                 white-space: nowrap;
                                 background: $white;
@@ -170,6 +175,7 @@ header {
                                         left: 20px;
                                         top: 23px;
                                         border: 6px solid #fdefd4;
+                                        box-shadow: 2px 3px 9px 0px #ababab;
                                     }
                                 }
                                 &:not(.has-form):not(.active) {
@@ -198,9 +204,9 @@ header {
                     color: #fff;
                     content: "|";
                     position: absolute;
-                    top: 5px;
+                    top: 10px;
                     left: -13px;
-                    font-size: 20px;
+                    font-size: 15px;
                     font-weight: bold;
                     display:block;
                     padding: 0 10px;
@@ -211,6 +217,7 @@ header {
             }
             .has-dropdown > a {
                 padding-right: 15px !important;
+                margin-bottom: -4px;
                 &:after {
                     content: none;
                 }
@@ -292,7 +299,7 @@ header {
             width: 100%;
         }
         label {
-            margin-top: 85px;
+            margin-top: 55px;
         }
         text-align: center;
     }
@@ -308,6 +315,7 @@ header {
                 background: #9fa617;
                 border-radius: 8px;
                 padding: 5px 10px;
+                box-shadow: 0 3px 6px 0px #ababab;
                 &:hover {
                     background: $white;
                     color: #9fa617;
@@ -342,10 +350,11 @@ header {
         img {
             border: 6px solid #fdefd4;
             margin-bottom: 30px;
+            box-shadow: 2px 3px 9px 0px #ababab;
         }
     }
     .sidebar {
-        h2 {
+        h3 {
             color: $black;
             background: #9fa617;
             text-align: center;
@@ -358,9 +367,10 @@ header {
             li {
                 border-bottom: 1px solid $white;
                 background: #c5c974;
-                padding-left: 15px;
+                padding: 5px 0 5px 15px;
                 a {                    
                     color: $black;
+                    text-transform: uppercase;
                     &#active {
                         color: $red;
                     }
@@ -369,7 +379,7 @@ header {
         }
         .tab {
             background: #c8b776;
-            h2 {
+            h3 {
                 color: $white;
                 background: #c8b776;
                 text-align: center;
@@ -387,12 +397,20 @@ a.link {
     text-decoration: underline;
     text-decoration-color: $red;
 }
+#soc-bottom {
+    margin-bottom: 30px;
+}
 footer {
     background: #b9b8a3;
     img {
         padding: 25px 0;
     }
 }
+#partners {
+    img {
+        padding-top: 30px;
+    }
+}
 #copyright {
     margin-top: 32px;
     margin-bottom: 150px;