Working on making the columns responsive.

Sub, subsub, and subsubsubs.
Logo on top in Small.
Toolbox images for Small
Contact form made responsive

diff --git a/css/contactform.css b/css/contactform.css
old mode 100644 (file)
new mode 100755 (executable)
index 9dedb38..2419e64
--- a/css/contactform.css
+++ b/css/contactform.css
@@ -34,17 +34,21 @@
        text-align: right;
        padding-right: 10px;
        padding-top: 3px;
-       white-space:nowrap;
-       width: 140px;
+       /*white-space:nowrap;
+        max-width: 140px; */
        }
 /*Right Cells */
 .fieldcell {
        padding-left: 4px;
-       width: 250px;
+       /* max-width: 250px; */
        }
 
 /* Misc */
-textarea {width: 95%; height: 100px; display:block;}
+textarea {
+    width: 95%;
+    height: 5em;
+    display:block;
+    }
 
 /* WARNINGS */
 #form-warning-top {

diff --git a/styles.css b/styles.css
index b8ee38d..183f674 100755 (executable)
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,8 @@
-.inner-wrap>section>#wrapper {\r
+nav.tab-bar a #logoTop {\r
+    margin-left: 60px;\r
+    max-height: 100%;}\r
+\r
+ShadowWhenNeeded {\r
     box-shadow: 0 0 10px rgba(0, 0, 0, .5);\r
     \r
 -webkit-box-shadow: 8px 0 6px -6px rgba(0, 0, 0, .5), -8px 0 6px -6px rgba(0, 0, 0, .5);\r
@@ -118,8 +122,17 @@ a:hover {
 #home #toolbox {\r
     margin-left: 45px;\r
     }\r
-#toolbox.nosideNav {\r
-    margin-left: 50px;\r
+/* For Small */\r
+@media only screen {\r
+    #toolbox.nosideNav {\r
+        margin-left: 0;\r
+        }\r
+    }\r
+/* For larger than Small */\r
+@media only screen and (min-width: 40.063em) {\r
+    #toolbox.nosideNav {\r
+        margin-left: 50px;\r
+        }\r
     }\r
 #toolbox h1,\r
 #toolbox h2 {\r
@@ -135,6 +148,12 @@ a:hover {
     margin: 0 0 20px 20px;\r
     float: right;\r
     }\r
+/* For Small */\r
+@media only screen {\r
+    .imageleft, .imageright {\r
+        float: none;\r
+        }\r
+    }\r
 .imagecaption {\r
     font-size: 12px;\r
     font-style: italic;\r
@@ -288,15 +307,14 @@ a:hover {
     }\r
 /* Subnav */\r
 #subnav {\r
-    width: 223px;\r
+    /* width: 223px; */\r
     background-color: rgb(43, 133, 168);\r
     border: 2px solid white;\r
     box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);\r
+    margin-bottom: 20px;\r
     }\r
 #subnav h2 {\r
     color: white;\r
-    font-family: 'Source Sans Pro', sans-serif;\r
-    font-weight: bold;\r
     font-size: 22px;\r
     text-align: center;\r
     }\r
@@ -304,13 +322,15 @@ a:hover {
     color: white;\r
     display: block;\r
     text-decoration: none;\r
+    line-height: 1.1em;\r
+    padding: 3px 0;\r
     }\r
 #subnav a:hover {\r
     color: #9dc6af;\r
     text-shadow: 1px 1px #000;\r
     }\r
 #subnav a#current {\r
-    background: url(assets/subnavMarker.png) no-repeat top left;\r
+    background: url(assets/subnavMarker.png) no-repeat left top;\r
     padding-left: 14px;\r
     }\r
 #subnav ul,\r
@@ -325,6 +345,30 @@ a:hover {
 #subnav li {\r
     display: block;\r
     }\r
+\r
+/* 2xsub */\r
+#subnav ul ul {\r
+    margin: 0;\r
+    }\r
+#subnav ul ul a {\r
+    padding-left: 25px;\r
+    }\r
+#subnav ul ul a#current {\r
+    padding-left: 25px;\r
+    background: url(assets/subnavMarker.png) no-repeat 11px top;\r
+    }\r
+/* 3xsub */\r
+#subnav ul ul ul {\r
+    margin: 0;\r
+    }\r
+#subnav ul ul ul a {\r
+    padding-left: 35px;\r
+    }\r
+#subnav ul ul ul a#current {\r
+    padding-left: 35px;\r
+    background: url(assets/subnavMarker.png) no-repeat 22px top;\r
+    }\r
+/* end subsub */\r
 #main {\r
     margin-top: 16px;\r
     }\r

diff --git a/templates/template.html b/templates/template.html
index 275e026..3af3270 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="{mediaBaseURL:h}css/foundation.css">
         <link rel="stylesheet" href="{mediaBaseURL:h}styles.css">
         {topScripts:h}
-        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+        
     </head>
     {if:isHomePage}
     <body id="home">
@@ -18,10 +18,11 @@
         {end:}
         <div class="off-canvas-wrap" data-offcanvas>
             <div class="inner-wrap">
-                <nav class="tab-bar show-for-small">
+                <nav class="tab-bar show-for-small" style="background: rgb(71,118,69);">
                     <section class="left-small">
                         <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                     </section>
+                    <a href="{homePageUrl:h}"><img src="{mediaBaseURL:h}assets/logo.png" id="logoTop"></a>
                 </nav>
 
                 <!-- Off Canvas Menu -->
@@ -33,10 +34,10 @@
 
 
                 <section>
-                <div id="wrapper">
+                <!--<div id="wrapper"> -->
                     <div class="row">
                         <div class="large-12 columns" id="header">
-                            <a href="{homePageUrl:h}">
+                            <a href="{homePageUrl:h}" class="hide-for-small-only">
                                 <img src="{mediaBaseURL:h}assets/logo.png" id="logo">
                             </a>
                             <div id="search">
@@ -45,7 +46,7 @@
                                     <input type="submit" id="searchSubmit">
                                 </form>
                             </div>
-                            <nav class="clearfix">
+                            <nav class="clearfix  hide-for-small-only">
                                 <ul class="clearfix">
                                     <li>
                                         <a href="{baseURLDefined:h}departments-2/">Departments</a>
@@ -112,14 +113,14 @@
                         <div class="large-12 columns" id="main">
                             <div class="row">
                                 {if:sideNav}
-                                <div class="large-3 columns">
+                                <div class="medium-4 large-3 columns hide-for-small-only">
                                     <div id="subnav">
                                         {sideNav:h}
                                     </div>
                                 </div>
-                                <div class="large-9 columns">
+                                <div class="small-12 medium-8 large-9 columns">
                                 {else:}
-                                <div class="large-12 columns">
+                                <div class="small-12 medium-12 large-12 columns">
                                 {end:}
                                 {if:sideNav}
                                     <div id="toolbox">
@@ -227,7 +228,7 @@
                             <p>Copyright&copy;2014 City of Mackinac Island. Produced by <a href="http://www.gaslightmedia.com">Gaslight Media</a>. All Rights Reserved.    </p>
                         </div>
                     </div>
-                </div><!-- /#wrapper -->
+                <!--</div> /#wrapper -->
                 </section>