Styling of details similar to popup

src/index.js

@@ -259,16 +259,20 @@ window.showDetails = function (data, category) {
 
   dom.innerHTML = ''
 
-  div = document.createElement('h1')
-  div.className = 'title'
-  div.innerHTML = data.data.title || ''
-  dom.appendChild(div)
-  data.sublayer.updateAssets(div, data)
+  let header = document.createElement('div')
+  header.className = 'header'
+  dom.appendChild(header)
 
   div = document.createElement('div')
   div.className = 'description'
   div.innerHTML = data.data.popupDescription || data.data.description || ''
-  dom.appendChild(div)
+  header.appendChild(div)
+  data.sublayer.updateAssets(div, data)
+
+  div = document.createElement('div')
+  div.className = 'title'
+  div.innerHTML = data.data.title || ''
+  header.appendChild(div)
   data.sublayer.updateAssets(div, data)
 
   div = document.createElement('div')

style.css

@@ -117,6 +117,23 @@ a:active {
   display: block;
 }
 
+#contentDetails > .header > .title {
+  border-bottom: 1px solid #3f3f3f;
+  margin-bottom: 1em;
+  margin-top: 0.5em;
+}
+#contentDetails > .header > .title {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+#contentDetails > .header > .description {
+  display: block;
+  font-style: italic;
+  color: #7f7f7f;
+  font-size: 1.5em;
+  font-weight: normal;
+}
+
 
 /* Popups */
 .leaflet-popup-content ul.popup-footer li {