intermediate commit

1 files changed, 82 insertions, 0 deletions

diff --git a/public/assets/style.css b/public/assets/style.css
index 8a40e43..e7472ed 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -3,6 +3,10 @@ body {
   color: #000;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 
 .wrap {
   max-width: 1200px;
@@ -63,6 +67,22 @@ button:disabled, input[type="submit"]:disabled {
   background-image: url("/assets/img/icons/1F4E5.svg");
 }
 
+.icon-arrow-up {
+  background-image: url("/assets/img/icons/1F53A.svg");
+}
+.icon-arrow-down {
+  background-image: url("/assets/img/icons/1F53A.svg");
+  transform: rotate(180deg);
+}
+.icon-arrow-left {
+  background-image: url("/assets/img/icons/1F53A.svg");
+  transform: rotate(270deg);
+}
+.icon-arrow-right {
+  background-image: url("/assets/img/icons/1F53A.svg");
+  transform: rotate(90deg);
+}
+
 
 /* Village */
 
@@ -91,14 +111,76 @@ button:disabled, input[type="submit"]:disabled {
 
 /* Map */
 
+.map {
+  position: relative;
+  padding: 2rem;
+}
+
+.map__up, .map__down {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.map__up {
+  top: 0;
+  left: 0;
+}
+
+.map__down {
+  bottom: 0;
+  left: 0;
+}
+
+.map__left, .map__right {
+  position: absolute;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+}
+
+.map__left {
+  left: 0;
+  top: 0;
+}
+
+.map__right {
+  right: 0;
+  top: 0;
+}
+
+.map .icon {
+  font-size: 1.5rem;
+}
+
+
 .map__villages {
   --map-range: 1;
 
   display: grid;
+
+  background-image: url('/assets/img/map.jpg');
+  background-position: center;
+  background-size: cover;
+
+  min-height: 75vh;
 }
 
+
 .map__village {
   border: 1px solid #000;
   min-width: 1rem;
   min-height: 1rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.map__village a {
+  text-decoration: none;
+  border: 2px solid #fff;
+  padding: 0 0.25rem;
+  background: rgba(255, 255, 255, 0.8);
 }