map/style.css

@import url("ysabeau.css");

body {
  font-family: "Ysabeau Office";
  margin: 0;
}

:is(h1,h2,h3):first-child {
  margin-top: 0;
}

body > main {
  display: grid;
  grid-template:
    "text" auto
    "map" 1fr
  ;
  width: 100svw;
  height: 100svh;
  margin: 0;

}

.marker-detail {
  padding: 0 1em;
  max-height: 70svh;
  overflow: auto;
}

#name-form {
  display: inline;
  
  & input {
      border: none;
      padding: 0;
      font-size: inherit;
      border-bottom: thin solid;
  }
}

#marker-form {
  & label {
    margin: 0 0.5em;
  }

  & input {
    margin: 0.25em;
  }
  
  & textarea {
    width: 100%;
    height: 5em;
    resize: none;
    overflow: auto;
  }

  & #marker-icon {
    width: 5em;
  }
}

@media (orientation: landscape) {
  body > main {
    grid-template: 
      "text map" 1fr
      / min(20em,50svw) 1fr
      ;
  }
  .marker-detail {
    max-height: 100svh;
  }

  #marker-form {
    & textarea {
      height: 70svh;
    }
  }
}

#menu {

  & li ~ li {
    margin-top: 0.5em;
  }
}

leaflet-map {
  display: block;
  height: 100%;
}