diff --git a/css/site.css b/css/site.css index 4ade375..e4dbd70 100644 --- a/css/site.css +++ b/css/site.css @@ -1,56 +1,203 @@ /* Page Specific CSS */ -body {font-family: 'Lato', sans-serif; background: #fff; color: #333; font-size: 16px; margin: 0px; padding: 20px;} -h1 {font-size: 80px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px;} -h2 {font-size: 40px; font-family: 'Acme', sans-serif; font-weight: normal; margin: 0px 0px;} -h3 {font-family: 'Acme', sans-serif; font-size: 30px; margin: 10px 0px;} -h4 {font-family: 'Lato', sans-serif; font-size: 24px;} - -img {width: 100%;} -p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 1px #FD9393 solid;} -a:hover {color: #47CCFC;} -small {padding: 10px 0px; font-size: 10px;} -p {margin: 0px; padding: 0px; font-size: 12px;} -li {line-height: 19px; font-size: 12px;} -ol {line-height: 24px;} -.clearfix {clear: both;} - -#map {height: 500px; width: 550px; min-width: 300px; background: #FFFFFF; float: left; margin-left:-100px;} -#map a {border: none;} -.mapboxgl-popup-content {font-family: 'Lato', sans-serif; font-size: 14px; padding: 10px;} - -.container {margin: 24px 0px;} -#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Lato; color: #333; font-size: 13px; height: 22px;} - -ul.nav {list-style: none; margin: 0px; padding: 0px;} -ul.nav li {display: inline; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding-right: 4px;} -ul.nav li h2 {font-family: 'Lato'; display: inline; font-size: 10px; letter-spacing: .1em;} -ul.nav li a {border: none;} -ul.nav li a:hover {border-bottom: 1px #FD9393 solid;} - -#wrapper {margin: 0px auto; padding: 40px; max-width: 900px} - -.address {color: #FF4646; text-transform: uppercase; font-weight: 700;} - -#selected {max-width: 400px; width: 100%; float: left; padding: 5px 10px;} -#selected .description {font-size: 14px; padding: 4px 0px; line-height: 19px;} -#selected ul {list-style: none; margin: 15px 0px; padding: 0px;} - -#info {max-width: 400px; width: 100%; float: left; padding: 5px 10px;} -.store-details {text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-right: 6px;} - -#Stores {margin: 0 auto; width: 80%;} -#Stores tr {cursor: pointer;} -#Stores tr td {padding: 2px 10px;} - -#viewInfo {cursor: pointer;} -#info p {font-size: 14px; padding: 4px; line-height: 19px;} - -@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) { - h1{font-size: 60px;} - body {margin: 0px; padding: 5px;} - #wrapper {max-width: 460px; padding-top: 20px;} - #Stores, #map {min-width: 224px; width:100%;} - #map,#info,#selected{width:100%;margin:10px 0px;padding:0;} +body { + font-family: "Lato", sans-serif; + background: #fff; + color: #333; + font-size: 18px; + margin: 0px; + padding: 20px 0px; +} +h1 { + font-size: 80px; + font-family: "Acme", sans-serif; + font-weight: normal; + margin: 0px; +} +h2 { + font-size: 40px; + font-family: "Acme", sans-serif; + font-weight: normal; + margin: 0px 0px; +} +h3 { + font-family: "Acme", sans-serif; + font-size: 30px; + margin: 10px 0px; +} +h4 { + font-family: "Lato", sans-serif; + font-size: 24px; } +img { + width: 100%; +} +p a, +a { + color: #333; + text-decoration: none; + padding-bottom: 0px; + border-bottom: 1px #fd9393 solid; +} +a:hover { + color: #47ccfc; +} +small { + padding: 10px 0px; + font-size: 10px; +} +p { + margin: 0px; + padding: 0px; + font-size: 16px; +} +li { + line-height: 19px; + font-size: 15px; +} +ol { + line-height: 24px; +} +.clearfix { + clear: both; +} + +#map { + height: 500px; + width: 480px; + min-width: 300px; + background: #ffffff; + float: left; +} +#map a { + border: none; +} +.mapboxgl-popup-content { + font-family: "Lato", sans-serif; + font-size: 16px; + padding: 10px; +} + +#wrapper { + margin: 0px auto; + padding: 40px; + max-width: 1000px; +} + +.container { + margin: 24px 0px; +} + +ul.nav { + list-style: none; + margin: 0px; + padding: 0px; +} +ul.nav li { + display: inline; + font-size: 14px; + letter-spacing: 0.1em; + padding-right: 4px; +} +ul.nav li:not(:first-child) { + border-left: 1px #333 solid; + padding-left: 10px; +} +ul.nav li h2 { + font-family: "Lato"; + display: inline; + font-size: 14px; + letter-spacing: 0.1em; +} +ul.nav li a { + border: none; +} +ul.nav li a:hover { + border-bottom: 1px #fd9393 solid; +} +#viewInfo { + cursor: pointer; +} + +.address { + color: #ff4646; + text-transform: uppercase; + font-weight: 700; +} + +#selected { + max-width: 500px; + width: 100%; + float: left; + padding: 5px 10px; +} +#selected .description { + font-size: 16px; + padding: 4px 0px; + line-height: 22px; + text-align: justify; +} +#selected ul { + list-style: none; + margin: 15px 0px; + padding: 0px; +} + +#info { + max-width: 500px; + width: 100%; + float: left; + padding: 5px 10px; +} +.storeDetails { + font-size: 15px; + display: inline; + padding-right: 6px; +} +#info p { + font-size: 15px; + padding: 4px; + line-height: 22px; + text-align: justify; +} + +#Stores { + margin: 0 auto; + width: 80%; +} +#Stores tr { + cursor: pointer; +} +#Stores tr td { + padding: 4px 10px; +} +#Stores tr:not(:last-child) td { + border-bottom: 1px #ddd solid; +} + +@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) { + h1 { + font-size: 60px; + } + body { + margin: 0px; + padding: 5px; + } + #wrapper { + max-width: 480px; + padding-top: 20px; + } + #Stores, + #map { + min-width: 224px; + width: 100%; + } + #map, + #info, + #selected { + width: 100%; + margin: 10px 0px; + padding: 0; + } +} diff --git a/index.html b/index.html index 4dba462..703f6ac 100644 --- a/index.html +++ b/index.html @@ -69,12 +69,12 @@