initial commit

css/style.css

@@ -0,0 +1,292 @@
+
+
+@import "leaflet.css";
+* {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	font-family: "Cantarell";
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+input {
+	height: 40px;
+	border: solid;
+	border-style: dashed;
+	border-width: 1px;
+	border-color: #EAEAEA;
+	width: 90vw;
+	text-align: center;
+	margin: auto;
+	display: block;
+}
+
+.item-info {
+	display: none;
+}
+
+#main {
+	display: grid;
+	grid-template-rows: 30vh 70vh;
+	grid-template-areas: "map" "detail";
+	grid-gap: 0px;
+}
+
+#detail {
+	grid-area: detail;
+}
+
+#container {
+	display: grid;
+	grid-gap: 0px;
+	grid-template-rows: 10vh 10vh 50vh;
+	grid-template-areas: "header" "subheader" "content";
+}
+
+#header {
+	grid-area: header;
+	padding: 10px;
+}
+
+#name {
+	padding: 0px;
+	margin: 0px;
+	font-weight: bold;
+	text-align: center;
+}
+
+#description {
+	padding: 35px;
+	text-align: justify;
+}
+
+
+/* Categories */
+
+#subheader {
+	grid-area: subheader;
+}
+
+.flex {
+	width: 90vw;
+	display: flex;
+	margin: auto;
+	align-items: center;
+	overflow-x: auto;
+}
+
+.flex>* {
+	margin: 5px;
+	padding: 5px;
+}
+
+#categories {
+	margin: auto;
+}
+
+#categories>button {
+	border: solid;
+	width: 100%;
+	border-width: 1px;
+	border-radius: 5px;
+	border-color: #EAEAEA;
+	background-color: white;
+	max-height: 30px;
+	white-space: nowrap;
+}
+
+#categories>li:hover {
+	box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px;
+}
+
+#contact {
+	justify-content: center;
+}
+
+
+/* Items */
+
+#content {
+	grid-area: content;
+	overflow-y: auto;
+}
+
+#list>button {
+	width: 90vw;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: left;
+}
+
+#list>button>div {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.item {
+	display: flex;
+	padding: 10px;
+	margin: 10px;
+	text-align: left;
+	font-size:16px;
+}
+
+button {
+	background-color: white;
+	border: solid;
+	border-width: 1px;
+	border-radius: 5px;
+	border-color: #EAEAEA;
+}
+
+button:hover {
+	box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px;
+}
+
+button.selected {
+	border-color: #666 !important;
+	background-color: #666 !important;
+	color: white;
+}
+
+
+/* Leaflet */
+
+.leaflet-popup {
+	top: -102px;
+}
+
+
+/* Icons */
+
+#action {
+	position: absolute;
+	top: calc(30vh - 30px);
+	right: 10px;
+	width: 64px;
+	height: 64px;
+	border-radius: 50px;
+	z-index: 1000;
+	background-repeat: no-repeat;
+}
+
+.geo {
+	background: url(../images/icon-gps.svg);
+}
+
+.suggestion {
+	background: url(../images/icon-suggestion.svg);
+}
+
+.icon {
+	display: block;
+	height: 40px;
+	width: 40px;
+	margin: 5px;
+	background-repeat: no-repeat;
+}
+
+.icon-care {
+	background: url(../images/icon-care.svg);
+	background-repeat: no-repeat;
+}
+
+.icon-gps {
+	background-image: url(../images/icon-gps.svg);
+}
+
+.icon-phone {
+	background-image: url(../images/icon-phone.svg);
+}
+
+.icon-facebook {
+	background-image: url(../images/icon-facebook.svg);
+}
+
+.icon-mail {
+	background-image: url(../images/icon-mail.svg);
+}
+
+.icon-close {
+	border-style: none;
+	background-image: url(../images/icon-back.svg);
+}
+
+.icon-close:hover {
+	border-style: none;
+}
+
+
+/* Scrollbar */
+
+ ::-webkit-scrollbar {
+	width: 5px;
+	height: 5px;
+}
+
+ ::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 5px #C4C4C4;
+	border-radius: 2px;
+}
+
+ ::-webkit-scrollbar-thumb {
+	background: dimgrey;
+	border-radius: 10px;
+}
+
+ ::-webkit-scrollbar-thumb:hover {
+	background: #B5B5B5;
+}
+
+@media ( max-height: 500px) {
+	#main {
+		grid-template-rows: 0vh 100vh;
+	}
+	#action {
+		display: none;
+	}
+	#container {
+		grid-template-rows: 30vh 0vh 70vh;
+	}
+	#categories,
+	#contact {
+		display: none;
+	}
+}
+
+@media (min-width: 850px) {
+	#main {
+		grid-template-columns: 30vw 70vw;
+		grid-template-areas: "detail" "map";
+	}
+	#container {
+		grid-template-rows: 10vh 10vh 80vh;
+		grid-template-areas: "header" "subheader" "content";
+	}
+	#content,
+	#subheader,
+	#header {
+		width: 30vw;
+	}
+	input {
+		width: 25vw;
+	}
+	#list>button {
+		width: 25vw;
+	}
+	.flex {
+		width: 25vw;
+	}
+	#action {
+		top: 90px;
+		left: calc(30vw - 30px);
+	}
+	#map {
+		height: 100vh;
+	}
+}
+