header half complete

diff --git a/assets/email_signup-img.png b/assets/email_signup-img.png
index ae82ade..f9766df 100644 (file)
Binary files a/assets/email_signup-img.png and b/assets/email_signup-img.png differ

diff --git a/index.html b/index.html
index b7e4625..9f334e9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -11,35 +11,42 @@
     <header>
         <div class="row">
             <div class="small-12 medium-4 columns">
-                <a href="#"><img src="assets/logo.png"</a>
+                <a id="logo" href="#"><img src="assets/logo.png"></a>
             </div>
             <div class="small-12 medium-8 columns right">
-                <div class="small-6 columns show-for-medium-up">
+                <div class="small-8 columns show-for-medium-up">
                     <nav class="sec_nav">
                         <ul>
-                            <li><a href="#">VOLUNTEER / EMPLOYMENT</a></li>
-                            <li><a href="#">DONATE</a></li>
-                            <li><a href="#">MEDIA</a></li>
-                            <li><a href="#">CONTACT</a></li>
+                            
+                            <li><a href="#">Volunteer/Employment</a></li>
+                            <li><a href="#">Donate</a></li>
+                            <li><a href="#">Media</a></li>
+                            <li><a href="#">Contact</a></li>
+                        
                         </ul>
                     </nav>
                 </div>
-                <div id="soc-top" class="small-6 columns show-for-medium-up social">
-                    <p>Connect With Us</p>
-                    <a href="#"><img src="assets/facebook.png"></a>
-                    <a href="#"><img src="assets/pin.jpg"></a>
-                    <a href="#"><img src="assets/twitt.jpg"></a>
-                    <a href="#"><img src="assets/flickr-icon.jpg"></a>
-                    <a href="#"><img src="assets/youtube_icon.jpg"></a>
-                    <a href="#"><img src="assets/google.png"></a>
-                    <a href="#"><img src="assets/share-icon.jpg"></a>
+                <div class="small-4 columns show-for-medium-up social">
+                    <div id="soc-top">
+                        <p>Connect With Us</p>
+                        <a href="#"><img src="assets/facebook.png"></a>
+                        <a href="#"><img src="assets/pin.jpg"></a>
+                        <a href="#"><img src="assets/twitt.jpg"></a>
+                        <a href="#"><img src="assets/flickr-icon.jpg"></a>
+                        <a href="#"><img src="assets/youtube_icon.jpg"></a>
+                        <a href="#"><img src="assets/google.png"></a>
+                        <a href="#"><img src="assets/share-icon.jpg"></a>
+                    </div>
+                    <div class="search">
+                        <input type="text" placeholder="SEARCH"><img src="assets/search_button.jpg">
+                    </div>
                 </div>
                 <div class="small-12 columns">
                     <h1>America's Signature Collection<sup>&trade;</sup></h1>
                 </div>
             </div>
         </div>
-        <nav class="top-bar text-center" role="navigation" data-topbar>
+            <nav class="top-bar text-center show-for-medium-up" data-topbar role="navigation">
             <section class="top-bar-section">
                 <ul>
                     <li><a href="#">Vist & Explore</a></li>

diff --git a/scss/_settings.scss b/scss/_settings.scss
index 3394e6e..e98a1de 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -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, sans-serif;
+ $header-font-family: Copperplate, Copperplate Gothic Light, sans-serif;
 // $header-font-weight: $font-weight-normal;
 // $header-font-style: normal;
  $header-font-color: $red;
@@ -209,10 +209,10 @@ $include-html-global-classes: $include-html-classes;
 // $header-text-rendering: optimizeLegibility;
 
 // We use these to control header font sizes
- $h1-font-size: rem-calc(35);
- $h2-font-size: rem-calc(32);
- $h3-font-size: rem-calc(24);
- $h4-font-size: rem-calc(20);
+ $h1-font-size: rem-calc(32);
+ $h2-font-size: rem-calc(24);
+ $h3-font-size: rem-calc(18);
+// $h4-font-size: rem-calc(20);
 // $h5-font-size: rem-calc(18);
 // $h6-font-size: 1rem;
 

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 8505f6a..ba7b032 100644 (file)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -3,33 +3,90 @@
     background: -moz-linear-gradient(center top, $from 5%, $to 100%);
     filter: progid:DXIm-ageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr'#{$to}');
 }
+h1, h2, h3, h4 {
+    text-transform: uppercase;
+}
 header {
     background: $black;
     .row {
-        padding: 0;
+        #logo {
+            img {
+                padding: 30px 0;
+            }
+        }
         .sec_nav {
+            position: relative;
+            text-align: right;
+            padding: 30px 0;
             ul {
                 li {
+                    display: inline;
                     a {
-                        font-size: 0.813em;
+                        font-size: 0.563em;
                         color: $white;
+                        text-transform: uppercase;
                     }
                 }
             }
+            & > ul > li {
+                position: relative;
+                &:before {
+                    color: #fff;
+                    content: "|";
+                    position: absolute;
+                    top: 2px;
+                    left: -13px;
+                    font-size: 12px;
+                    font-weight: bold;
+                    display:block;
+                    padding: 0 10px;
+                }
+                &:first-child:before {
+                    content: none;
+                }
+            }
         }
         #soc-top {
+            padding: 10px 0;
             p {
                 font-size: 0.813em;
                 color: $white;
                 margin: 0;
             }
         }
+        .search {
+            padding-bottom: 25px;
+            padding-top: 5px;
+            input {
+                width: 150px;
+                height: 24px;
+                font-size: 0.5rem;
+                padding: 0 34px 0 10px;
+                margin: 0;
+                border-radius: 10px;
+            }
+            img {
+                float: right;
+                margin-top: -24px;
+                margin-right: 34px;
+                border-radius: 10px;
+            }
+        }
+        h1 {
+            sup {
+                font-size: 0.563em;
+            }
+        }
     }
     .top-bar {
         @include gradient(#c54d38, #b71b1f);
         border-bottom: 4px solid $white;
         .top-bar-section {
             background: transparent;
+            float: none;
+            margin-left: auto;
+            margin-right: auto;
+            display: inline-block;
             ul {
                 li {
                     background: transparent;
@@ -37,9 +94,7 @@ header {
                         color: $white;
                         font-size: 1.125em;
                         background: transparent;
-                        &:hover {
-                            background: #9fa617;
-                        }
+                        text-transform: uppercase;
                     }
                     &:not(.has-form) {
                         a:not(.button) {
@@ -48,6 +103,23 @@ header {
                     }
                 }
             }
+            & > ul > li {
+                position: relative;
+                &:before {
+                    color: #fff;
+                    content: "|";
+                    position: absolute;
+                    top: 5px;
+                    left: -13px;
+                    font-size: 20px;
+                    font-weight: bold;
+                    display:block;
+                    padding: 0 10px;
+                }
+                &:first-child:before {
+                    content: none;
+                }
+            }
         }
     }
 }
\ No newline at end of file

diff --git a/scss/_wordpress.scss b/scss/_wordpress.scss
new file mode 100644 (file)
index 0000000..7bc8b3a
--- /dev/null
+++ b/scss/_wordpress.scss
@@ -0,0 +1,124 @@
+/* Images */
+
+img.aligncenter {
+    display: block;
+    clear: both;
+    float:none;
+    padding:0;
+    margin-left: auto;
+    margin-right: auto;
+    }
+
+img.alignright {
+    padding: 0;
+    margin: 0 0 6px 11px;
+    display: inline;
+    }
+    
+blockquote.alignleft,
+img.alignleft,
+.wp-caption.alignleft {
+    margin: rem-calc(7) rem-calc(35) rem-calc(7) 0;
+}
+
+blockquote.alignright,
+img.alignright,
+.wp-caption.alignright {
+    margin: rem-calc(7) 0 rem-calc(7) rem-calc(35);
+}
+img.alignleft {
+    padding: 0;
+/*    margin: 0 11px 6px 0;*/
+    display: inline;
+    }
+/*img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
+    border: 1px solid #008000;
+}*/
+
+.alignright {
+    float: right;
+}
+.alignnone {
+    float: none;
+}
+.alignleft {
+    float: left;
+}
+.wp-caption {
+    background: #008000;
+    width: auto;
+}
+.wp-caption-text {
+    font-family: Open Sans, sans-serif;
+    font-size: 9px !important;
+    color: #fff;
+    font-style: italic;
+    margin: 0;
+    padding: 0 5px;
+}
+.gallery-one-title {
+    height: 45px;
+    font-size: 0.8em;
+    text-align: center;
+    font-family: sans-serif;
+    padding: 5px;
+}
+.gallery-holder {
+    margin: 10px 0 20px 0;
+}
+@media (max-width:640px) {
+    img.alignright, img.alignleft, img.aligncenter {
+        /*width: 70% !important;*/
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        float: none;
+        text-align: center;
+    }
+    div.wp-caption.alignright, div.wp-caption.alignleft {
+        width: 44% !important;
+        margin-left: auto;
+        margin-right: auto;
+        float: none;
+        text-align: center;
+    }
+    div.wp-caption.aligncenter {
+        width: 85% !important;
+        margin-left: auto;
+        margin-right: auto;
+        float: none;
+        text-align: center;
+    }
+    div.wp-caption.alignnone {
+        width: 85% !important;
+        float: none;
+    }
+    div.wp-caption.alignright, div.wp-caption.alignleft, div.wp-caption.aligncenter {
+        width: 100%;
+    }
+}
+@media (min-width:40.063em) {
+    img.aligncenter, img.alignnone {
+        /*width: 70% !important;*/
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        float: none;
+        text-align: center;
+    }
+    div.wp-caption.aligncenter {
+        width: 74% !important;
+        margin-left: auto;
+        margin-right: auto;
+        float: none;
+        text-align: center;
+    }
+    div.wp-caption.aligncenter {
+        width: 100%;
+    }
+    div.wp-caption.alignnone {
+        width: 73% !important;
+        float: none;
+    }
+}
+/* End Images */

diff --git a/scss/app.scss b/scss/app.scss
index 13db37c..ef23c8c 100644 (file)
--- a/scss/app.scss
+++ b/scss/app.scss
@@ -1,6 +1,7 @@
 @import "settings";
 @import "foundation";
 @import "structure";
+@import "wordpress";
 
 // Or selectively include components
 // @import