Improve style of popups and list entries

src/CategoryOverpass.js

@@ -32,9 +32,11 @@ var defaultValues = {
   },
   layouts: {
     popup:
-      '<h1>{{ object.popupTitle|default(object.title) }}</h1>' +
+      '<div class="content">' +
+      '{% if object.popupDetails or object.details %}<div class="details">{{ object.popupDetails|default(object.details) }}</div>{% endif %}' +
       '{% if object.popupDescription or object.description %}<div class="description">{{ object.popupDescription|default(object.description) }}</div>{% endif %}' +
-      '{% if object.popupBody or object.body %}<div class="body">{{ object.popupBody|default(object.body) }}</div>{% endif %}',
+      '{% if object.popupTitle or object.title %}<div class="title">{{ object.popupTitle|default(object.title) }}</div>{% endif %}' +
+      '</div>',
     list:
       '<a href="{{ object.appUrl|default("#") }}">' +
       '<div class="marker">' +

style.css

@@ -295,16 +295,23 @@ a:active {
   color: red;
 }
 
-.description,
 .leaflet-popup-content .description {
   display: block;
-  text-align: right;
   font-style: italic;
+  color: #7f7f7f;
+  font-size: 1.5em;
+  font-weight: normal;
 }
-.description:after,
-.leaflet-popup-content .description:after {
-  content: '';
-  clear: right;
+.leaflet-popup-content .title {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+.leaflet-popup-content .details {
+  float: right;
+  max-width: 50%;
+  text-align: right;
+  color: #7f7f7f;
+  word-wrap: break-word;
 }
 
 .body ul,
@@ -469,17 +476,22 @@ ul.overpass-layer-list > li > a > .content {
 ul.overpass-layer-list > li > a > .content > .description {
   display: block;
   text-align: left;
-  font-style: normal;
+  font-style: italic;
+  color: #3f3f3f;
+  font-weight: normal;
 }
 ul.overpass-layer-list > li > a > .content > .title {
   display: block;
-  font-style: italic;
+  font-style: normal;
+  font-weight: normal;
 }
 ul.overpass-layer-list > li > a > .content > .details {
   float: right;
   display: block;
   font-style: italic;
-  color: #7f7f7f;
+  color: #3f3f3f;
+  max-width: 50%;
+  text-align: right;
 }
 
 .leaflet-popup-content h1 .title {