map.css (3258B)
1 /*body { 2 background-color: #BCCFB0; 3 color: #333333; 4 font-family: Roboto, sans-serif; 5 margin: 0; 6 padding: 0; 7 } 8 9 nav { 10 background-color: #333333; 11 width: 100%; 12 height: 15vw; 13 display: flex; 14 align-items: center; 15 } 16 17 nav ul { 18 margin: 0; 19 padding: 0; 20 width: 100%; 21 height: 15vw; 22 display: flex; 23 list-style-type: none; 24 align-items: center; 25 } 26 27 nav li { 28 font-weight: bold; 29 font-size: 4vw; 30 margin-right: 3vw; 31 } 32 33 nav ul li a { 34 color: #fff; 35 text-decoration: none; 36 padding: 0; 37 } 38 39 nav ul li a.active { 40 pointer-events: none; 41 color: gray; 42 } 43 44 nav ul li:first-child { 45 margin-right: auto; 46 } 47 48 .img-big-logo { 49 display: none; 50 } 51 52 .img-small-logo, 53 .img-big-logo { 54 height: 15vw; 55 width: auto; 56 vertical-align: middle; 57 } 58 59 .hide { 60 background-color: rgba(33, 33, 33, 0.8); 61 border-radius: 5px; 62 text-align: center; 63 position: absolute; 64 margin: 0 auto; 65 display: none; 66 color: white; 67 } 68 69 .dutch-harbor-txt { 70 top: 14%; 71 left: 2%; 72 } 73 74 .etreillers-txt { 75 top: 20%; 76 left: 40%; 77 } 78 79 .inuvik-txt { 80 top: 9%; 81 left: 10%; 82 } 83 84 .ko-samui-txt { 85 top: 47%; 86 right: 10%; 87 } 88 89 .kufstein-txt { 90 top: 20%; 91 left: 40%; 92 } 93 94 .nurburg-txt { 95 top: 19%; 96 left: 40%; 97 } 98 99 .oost-vlieland-txt { 100 top: 17%; 101 left: 35%; 102 } 103 104 .sapporo-txt { 105 top: 23%; 106 right: 2%; 107 } 108 109 .taipai-txt { 110 top: 37%; 111 right: 3%; 112 } 113 114 .woolgoolga-txt { 115 top: 75%; 116 right: 1%; 117 } 118 119 @media (min-width: 400px) { 120 nav { 121 height: 60px; 122 } 123 124 nav ul { 125 height: 60px; 126 } 127 128 nav li { 129 font-size: 16px; 130 margin-right: 12px; 131 } 132 133 .img-small-logo, 134 .img-big-logo { 135 height: 60px; 136 } 137 } 138 139 @media (min-width: 700px) { 140 .img-big-logo { 141 display: block; 142 } 143 144 .img-small-logo { 145 display: none; 146 } 147 148 nav ul li:first-child { 149 margin-right: 0; 150 } 151 152 nav ul li:nth-child(2) { 153 margin-right: auto; 154 } 155 } 156 */ 157 158 #map { 159 width: 100%; 160 height: 100%; 161 } 162 163 body, html { 164 height: 100%; 165 } 166 167 nav { 168 background-color: #333333; 169 width: 100%; 170 height: 15vw; 171 display: flex; 172 align-items: center; 173 } 174 175 nav ul { 176 margin: 0; 177 padding: 0; 178 width: 100%; 179 height: 15vw; 180 display: flex; 181 list-style-type: none; 182 align-items: center; 183 } 184 185 nav li { 186 font-weight: bold; 187 font-size: 4vw; 188 margin-right: 3vw; 189 } 190 191 nav ul li a { 192 color: #fff; 193 text-decoration: none; 194 padding: 0; 195 } 196 197 nav ul li a.active { 198 pointer-events: none; 199 color: gray; 200 } 201 202 nav ul li:first-child { 203 margin-right: auto; 204 } 205 206 .img-big-logo { 207 display: none; 208 } 209 210 .img-small-logo, 211 .img-big-logo { 212 height: 15vw; 213 width: auto; 214 vertical-align: middle; 215 } 216 217 @media (min-width: 400px) { 218 nav { 219 height: 60px; 220 } 221 222 nav ul { 223 height: 60px; 224 } 225 226 nav li { 227 font-size: 16px; 228 margin-right: 12px; 229 } 230 231 .img-small-logo, 232 .img-big-logo { 233 height: 60px; 234 } 235 } 236 237 @media (min-width: 700px) { 238 .img-big-logo { 239 display: block; 240 } 241 242 .img-small-logo { 243 display: none; 244 } 245 246 nav ul li:first-child { 247 margin-right: 0; 248 } 249 250 nav ul li:nth-child(2) { 251 margin-right: auto; 252 } 253 }