diff --git a/css/phone.css b/css/phone.css index b44f5dd..fec14a8 100644 --- a/css/phone.css +++ b/css/phone.css @@ -2,6 +2,9 @@ .menu,.footerWrap,.tooltip{display:none !important;} .filterWrap{display:none;} a.action-large.addResource{display:none;} +.searchWrap{-webkit-box-shadow:0 3px 0 0 #ccc;box-shadow:0 3px 0 0 #ccc;} +.filterWrap{position:relative;z-index:2;background:#112F49;} +.filterWrap table{-webkit-box-shadow:0 3px 0 0 #ccc;box-shadow:0 3px 0 0 #ccc;} .searchWrap .searchIcon{display:none;} .aboutWrap .searchAction{display:none;} .about h1,.about h2{display:none;} @@ -10,7 +13,8 @@ a.action-large.addResource{display:none;} .about p,.mapActions a.action{font-size:.8em;} .menuToggle,.filterHeader .icon-caret-up{display:block;} .searchWrap .searchIcon{left:0;} -.header{padding:15px 0 10px;} -.brand{font-size:1.5em;} +.header{padding:15px 0 10px;padding:4px 0 6px;} +.brand{font-size:2em;text-shadow:none;} .searchWrap{height:50px;} #search input[type="text"]{font-size:1.2em;padding:15px 4% 10px;} +.filters td label{padding:10px 8px 8px;} diff --git a/css/screen.css b/css/screen.css index c4bcd4e..49841d5 100644 --- a/css/screen.css +++ b/css/screen.css @@ -315,10 +315,11 @@ body{margin:0;padding:0;font-family:'PT Sans',sans-serif;} #map-wrapper{width:100%;height:100%;position:fixed;z-index:1;top:0;left:0;} #map-canvas{height:100%;width:100%;overflow:hidden;} #map-canvas img{max-width:none;} -#controlWrap{background-color:#162640;color:#ffffff;width:95%;position:relative;margin:10px 0 0 10px;max-width:320px;z-index:3;-webkit-box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);} -.header{text-align:center;padding:20px 0 15px;border-bottom:1px solid #1E3F60;font-family:'PT Sans Narrow',sans-serif;position:relative;} -.brand{font-size:2.5em;line-height:1em;text-transform:uppercase;} -.menuToggle{display:none;border:1px solid #1E3F60;position:absolute;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;text-align:center;margin:0;right:9px;top:9px;padding:4px 9px 2px;} +#controlWrap{background-color:#112f49;color:#ffffff;width:95%;position:relative;margin:10px 0 0 10px;max-width:320px;z-index:3;} +.header{text-align:center;padding:15px 0 13px;border-bottom:1px solid #1E3F60;font-family:'PT Sans Narrow',sans-serif;position:relative;} +.brand{font-size:3em;line-height:1em;text-transform:uppercase;text-shadow:0 -1px 0 #858585,0 1px 10px rgba(0, 0, 0, 0.6),0 6px 1px rgba(0, 0, 0, 0.1),0 0 5px rgba(0, 0, 0, 0.2),0 1px 3px rgba(0, 0, 0, 0.3),0 3px 5px rgba(0, 0, 0, 0.2),0 7px 10px rgba(0, 0, 0, 0.25),0 15px 10px rgba(0, 0, 0, 0.2);color:#ffffff;text-shadow:0 0.015em 0 #ffffff,0 0.03em 0.015em #e6e6e6,0 0.045em 0.03em #e3e3e3,0 0.06em 0.03em #dedede;} +.brand span{font-size:.4em;vertical-align:super;margin-right:-4px;margin-left:-16px;text-shadow:none;} +.menuToggle{display:none;border:1px solid #1E3F60;position:absolute;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;text-align:center;margin:0;right:9px;top:6px;padding:4px 9px 2px;} .menuToggle [class^="icon-"],.menuToggle [class*=" icon-"]{font-size:1.5em;} .menu{text-align:center;padding:10px 0 14px;} .aboutWrap{display:none;} @@ -326,37 +327,42 @@ body{margin:0;padding:0;font-family:'PT Sans',sans-serif;} .about h1{font-size:2em;margin:0 0 5px;line-height:1em;text-transform:uppercase;} .about h2{line-height:1em;margin:0;font-size:1.8em;font-weight:300;} .about p{font-size:1.1em;line-height:1.3em;margin:1em 0;} -.footerWrap{padding:10px 0 0;text-align:center;} +.footerWrap{padding:10px 0 0;text-align:center;background:#112f49;-webkit-box-shadow:0 3px 0 0 #0c1d2d;box-shadow:0 3px 0 0 #0c1d2d;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;} .socialite{display:inline-block;margin:0 0 5px;color:#ffffff;}.socialite.facebook-like{min-width:105px;position:relative;top:-3px;} -.filterHeader{margin:0 auto;padding:8px 10px;font-size:0.9em;position:relative;} -.filterHeader .icon-caret-up{display:none;color:#162640;font-size:27px;position:absolute;right:21px;top:-17px;z-index:10;} +.filterWrap{position:relative;z-index:4;} +.filterHeader{margin:0 auto;padding:8px 10px;font-size:0.9em;} +.filterHeader .icon-caret-up{display:none;color:#112f49;font-size:27px;position:absolute;right:21px;top:-17px;z-index:10;} #filter{margin-bottom:0;} -ul.filters{list-style-type:none;margin:0;padding:0;} -ul.filters li{background-color:#F6F6F6;color:#162640;font-weight:600;border-bottom:1px solid #DEDEDE;cursor:pointer;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;} -ul.filters li:hover{background-color:#ffffff;} -ul.filters li label{cursor:pointer;padding:10px 10px 8px;display:block;font-weight:600;margin:0;} -ul.filters li label input[type="checkbox"]{float:right;margin:4px 0;padding:0;} +.filters td{background-color:#ffffff;border:1px solid #dedede;} +.filters td:last-child{border-right:none;} +.filters td:first-child{border-left:none;} +.filters label{color:#0c1d2d;cursor:pointer;display:block;font-weight:600;font-size:.85em;margin:0;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;padding:6px 8px 4px;} +.filters td:hover label{background-color:#F6F6F6;} +.filters label input[type="checkbox"]{margin:4px 6px 4px 0;padding:0;} #search{width:100%;margin:0;} .searchWrap{background:#ffffff;height:60px;position:relative;} #search input[type="text"]{font-family:'PT Sans',sans-serif;margin:0 auto;border:none;font-size:1.5em;padding:16px 4% 12px;width:92%;display:block;font-weight:300;outline:none;line-height:1.5em;height:100%;} -.filterIcon{display:none;background:#ffffff;height:100%;width:53px;position:absolute;top:0;right:0;text-align:center;border-left:1px solid #DEDEDE;} +.filterIcon{display:none;background:#ffffff;height:100%;width:53px;position:absolute;top:0;right:0;text-align:center;border-left:1px solid #DEDEDE;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px;} .searchIcon{height:100%;width:40px;display:table;position:absolute;top:0;right:0;text-align:center;background:#ffffff;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;} .searchIcon .icon-search,.filterIcon .icon-tags{color:#0082c8;font-size:1.5em;vertical-align:middle;display:table-cell;} -a.action{background-color:#0082C8;color:#ffffff;text-decoration:none;font-size:0.9em;padding:12px 10px 8px;display:inline-block;border-color:#0082C8;border-style:solid;border-width:1px;width:38%;text-align:center;position:relative;text-shadow:0 1px 0 rgba(0, 0, 0, 0.3);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 0 0 #0b62a8;box-shadow:0 3px 0 0 #0b62a8;} +a.action{background-color:#0082C8;color:#ffffff;text-decoration:none;font-size:0.9em;padding:7px 10px 8px;display:inline-block;border-color:#0082C8;border-style:solid;border-width:1px;width:38%;text-align:center;position:relative;text-shadow:0 1px 0 rgba(0, 0, 0, 0.3);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 3px 0 0 #0b62a8;box-shadow:0 3px 0 0 #0b62a8;} a.action-large.addResource{position:absolute;z-index:2;bottom:30px;left:40%;width:240px;padding:24px 20px 18px;font-size:1.8em;line-height:1em;text-align:left;-webkit-box-shadow:0 3px 0 0 #0b62a8;box-shadow:0 3px 0 0 #0b62a8;} a.action-large.addResource:active{bottom:29px;-webkit-box-shadow:0 2px 0 0 #0b62a8;box-shadow:0 2px 0 0 #0b62a8;} +.menu a.action{padding:7px 10px 5px;} .menu a.action.addResource{margin:0 2% 0 0;} a.action:hover{background-color:#0082E1;} a.action:active{-webkit-box-shadow:0 2px 0 0 #0b62a8;box-shadow:0 2px 0 0 #0b62a8;} .menu a.action:active,.mapActions a.action:active{top:1px;} a.action [class^="icon-"],a.action [class*=" icon-"]{font-size:1.8em;} a.action-large [class^="icon-"],a.action-large [class*=" icon-"]{font-size:1.2em;} +.menu a.action [class^="icon-"],.menu a.action [class*=" icon-"]{font-size:1.4em;margin:1px 0 0 ;} .mapActions a.action{width:30%;margin:0 0.5%;padding:12px 0 8px;} .searchAction{background:#ffffff;color:#dedede;font-size:1.5em;text-align:left;padding:0 15px 0;height:2.6em;line-height:2.7em;border-color:#0082C8;border-style:solid;border-width:1px;cursor:pointer;width:88%;margin:0 auto 2%;position:relative;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;} .searchAction:hover{color:#162640;} .searchAction [class^="icon-"],.searchAction [class*="icon-"]{font-size:1.2em;} .searchAction .searchIcon{width:50px;} -.locateMe{background:#ffffff;height:40px;width:40px;position:fixed;z-index:2;bottom:30px;right:10px;cursor:pointer;text-align:center;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);} +.locateMe{background:#ffffff;height:40px;width:40px;position:fixed;z-index:2;bottom:30px;right:10px;cursor:pointer;text-align:center;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);box-shadow:0px 0px 3px 1px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0 3px 0 0 #ccc;box-shadow:0 3px 0 0 #ccc;} .locateMe [class^="icon-"],.locateMe [class*="icon-"]{color:#0082c8;font-size:1.5em;vertical-align:middle;display:table-cell;} +.locateMe:active{-webkit-box-shadow:0 2px 0 0 #ccc;box-shadow:0 2px 0 0 #ccc;bottom:29px;} .locateMe.active [class^="icon-"],.locateMe.active [class*="icon-"]{color:#0082c8;} #aboutModal button.close{z-index:10;font-size:3em;position:absolute;right:15px;top:15px;color:#0082c8;opacity:0.7;filter:alpha(opacity=70);} diff --git a/index.html b/index.html index 7f19ad4..1b0a067 100644 --- a/index.html +++ b/index.html @@ -21,12 +21,12 @@
- The Maker Map + The MakerMap
-
Add a Resource -
About the Map +
Add a Resource +
About the Map
@@ -53,54 +53,60 @@

Join the Maker Movement

-
Filter By Business Type
-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
+
Filter By Business Type
+ + + + + + + + + + + + + + + + + + + +
- - - - - - + data-href="http://themakermap.com" + data-send="false" + data-layout="button_count" + data-width="100" + data-show-faces="false" + data-font="segoe ui" + rel="nofollow" + target="_blank">Share on Facebook + Fork on GitHub - - - - + data-user="hwstartup" + data-repo="TheMakerMap.com" + data-type="fork" + data-count="true">Fork on GitHub + + +
diff --git a/js/index.js b/js/index.js index 5987509..13ee4a9 100644 --- a/js/index.js +++ b/js/index.js @@ -117,8 +117,8 @@ */ function initMaps () { map = new google.maps.Map(document.getElementById('map-canvas'), { - center: new google.maps.LatLng(37.65, -122.25), - zoom: 9, + center: new google.maps.LatLng(39.50, -98.35), + zoom: 4, disableDefaultUI: true, zoomControl: true, zoomControlOptions: { diff --git a/less/phone.less b/less/phone.less index 817879d..166e8b4 100644 --- a/less/phone.less +++ b/less/phone.less @@ -26,6 +26,22 @@ a.action-large.addResource { display:none; } +.searchWrap { + -webkit-box-shadow: 0 3px 0 0 #ccc; + box-shadow: 0 3px 0 0 #ccc; +} + +.filterWrap { + position:relative; + z-index:2; + background:#112F49; +} + +.filterWrap table { + -webkit-box-shadow: 0 3px 0 0 #ccc; + box-shadow: 0 3px 0 0 #ccc; +} + .searchWrap .searchIcon { display:none; } @@ -47,7 +63,7 @@ a.action-large.addResource { } .about p,.mapActions a.action { -font-size: .8em; + font-size: .8em; } .menuToggle,.filterHeader .icon-caret-up { display:block; @@ -59,15 +75,14 @@ font-size: .8em; .header { padding: 15px 0 10px; + padding:4px 0 6px; } .brand { - font-size: 1.5em; + font-size: 2em; + text-shadow:none; } - - - .searchWrap { height:50px; } @@ -75,4 +90,8 @@ font-size: .8em; #search input[type="text"] { font-size: 1.2em; padding: 15px 4% 10px; +} + +.filters td label{ + padding: 10px 8px 8px; } \ No newline at end of file diff --git a/less/screen.less b/less/screen.less index bf5bf24..32ac0ca 100644 --- a/less/screen.less +++ b/less/screen.less @@ -16,7 +16,8 @@ @black: #000; @white: #fff; -@darkBlue: #162640; +@darkBlue: #0C1D2D; +@mediumBlue: #112F49; @lightBlue: #0082C8; @font-primary: 'PT Sans', sans-serif; @@ -29,7 +30,6 @@ .btnReg (@borderLarge:0 3px 0 0 #0B62A8) { -webkit-box-shadow: @borderLarge; box-shadow: @borderLarge; - } .btnActive (@borderSmall:0 2px 0 0 #0B62A8) { @@ -62,6 +62,15 @@ transition: @transitions; } +.extrude(@color,@depth) { + color:@color; + text-shadow: + 0 (@depth*0.01em) 0 lighten(@color,3.3%), + 0 (@depth*0.02em) (@depth*0.01em) darken(@color,10%), + 0 (@depth*0.03em) (@depth*0.02em) darken(@color,11%), + 0 (@depth*0.04em) (@depth*0.02em) darken(@color,13%) +} + /** * Start CSS */ @@ -98,28 +107,46 @@ body { } #controlWrap { - background-color: @darkBlue; + background-color: @mediumBlue; color: @white; width: 95%; position: relative; margin: 10px 0 0 10px; max-width: 320px; z-index: 3; - .shadow; + /*.shadow;*/ } .header { text-align: center; - padding: 20px 0 15px; + padding: 15px 0 13px; border-bottom: 1px solid #1E3F60; font-family:@font-secondary; position:relative; } .brand { - font-size: 2.5em; + font-size: 3em; line-height: 1em; text-transform:uppercase; + text-shadow: + 0 -1px 0 #858585, + 0 1px 10px rgba(0,0,0,.6), + 0 6px 1px rgba(0,0,0,.1), + 0 0 5px rgba(0,0,0,.2), + 0 1px 3px rgba(0,0,0,.3), + 0 3px 5px rgba(0,0,0,.2), + 0 7px 10px rgba(0,0,0,.25), + 0 15px 10px rgba(0,0,0,.2); + .extrude(rgb(255,255,255),1.5); +} + +.brand span { + font-size: .4em; + vertical-align: super; + margin-right: -4px; + margin-left: -16px; + text-shadow:none; } .menuToggle { @@ -130,7 +157,7 @@ body { text-align:center; margin: 0; right: 9px; - top: 9px; + top: 6px; padding: 4px 9px 2px; } @@ -141,7 +168,6 @@ body { .menu { text-align: center; padding: 10px 0 14px; - } .aboutWrap { @@ -182,6 +208,11 @@ body { .footerWrap { padding: 10px 0 0; text-align: center; + + background:@mediumBlue; + -webkit-box-shadow: 0 3px 0 0 @darkBlue; + box-shadow: 0 3px 0 0 @darkBlue; + .rounded-corners; } .socialite { @@ -200,19 +231,19 @@ body { /* filters */ .filterWrap { - + position:relative; + z-index:4; } .filterHeader { margin: 0 auto; padding: 8px 10px; font-size: 0.9em; - position:relative; } .filterHeader .icon-caret-up { display:none; - color:@darkBlue; + color:@mediumBlue; font-size: 27px; position: absolute; right: 21px; @@ -224,36 +255,40 @@ body { margin-bottom: 0; } -ul.filters { - list-style-type: none; - margin: 0; - padding: 0; +.filterWrap table { } -ul.filters li { - background-color: #F6F6F6; - color: @darkBlue; - font-weight: 600; - border-bottom: 1px solid #DEDEDE; - cursor: pointer; - .animate; +.filters td { + background-color: @white; + border:1px solid #dedede; } -ul.filters li:hover { - background-color:@white; +.filters td:last-child { + border-right:none; } -ul.filters li label { +.filters td:first-child { + border-left:none; +} + +.filters label { + color: @darkBlue; + font-weight: 600; cursor:pointer; - padding: 10px 10px 8px; display:block; font-weight: 600; + font-size:.85em; margin: 0; + .animate; + padding: 6px 8px 4px; +} + +.filters td:hover label { + background-color:#F6F6F6; } -ul.filters li label input[type="checkbox"] { - float: right; - margin: 4px 0; +.filters label input[type="checkbox"] { + margin: 4px 6px 4px 0; padding: 0; } @@ -268,7 +303,7 @@ ul.filters li label input[type="checkbox"] { background: @white; height: 60px; /*overflow: hidden;*/ - position: relative; + position:relative; } #search input[type="text"] { @@ -295,6 +330,9 @@ ul.filters li label input[type="checkbox"] { right: 0; text-align: center; border-left: 1px solid #DEDEDE; + -webkit-border-bottom-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + border-bottom-right-radius: 3px; } .searchIcon { @@ -324,7 +362,7 @@ a.action { color:@white; text-decoration:none; font-size: 0.9em; - padding: 12px 10px 8px; + padding: 7px 10px 8px; display:inline-block; border-color:#0082C8; border-style:solid; @@ -356,6 +394,10 @@ a.action-large.addResource:active{ .btnActive; } +.menu a.action { + padding: 7px 10px 5px; +} + .menu a.action.addResource { margin: 0 2% 0 0; } @@ -380,6 +422,11 @@ a.action-large [class^="icon-"],a.action-large [class*=" icon-"] { font-size:1.2em; } +.menu a.action [class^="icon-"],.menu a.action [class*=" icon-"] { + font-size:1.4em; + margin: 1px 0 0 ; +} + .mapActions a.action { width: 30%; margin: 0 0.5%; @@ -431,6 +478,8 @@ a.action-large [class^="icon-"],a.action-large [class*=" icon-"] { display:none; .rounded-corners; .shadow; + -webkit-box-shadow: 0 3px 0 0 #ccc; + box-shadow: 0 3px 0 0 #ccc; } .locateMe [class^="icon-"],.locateMe [class*="icon-"]{ @@ -440,6 +489,12 @@ a.action-large [class^="icon-"],a.action-large [class*=" icon-"] { display: table-cell; } +.locateMe:active { + -webkit-box-shadow: 0 2px 0 0 #ccc; + box-shadow: 0 2px 0 0 #ccc; + bottom:29px; +} + .locateMe.active [class^="icon-"],.locateMe.active [class*="icon-"] { color:@lightBlue; }