Improve some modal styles

- use a similar font size for h1 than the rest (175% looked too big)
- use inherit color from `rst-content` class
- use h1 for modal title
- default modal title option when there is no h1 in the content of
modal
- add option for default modal title
- add option for modal prefix title
- change max-width on mobile devices
- add link to the content of the page in the title

Author: humitos

hoverxref/_static/css/micromodal.css

@@ -33,8 +33,7 @@
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1;
-  font-size: 100%;
-  color: #00449e;
+  font-size: 165%;
   box-sizing: border-box;
 }
 
@@ -43,13 +42,19 @@
   border: 0;
 }
 
+.modal__footer {
+  padding-bottom: 30px;
+  /* display: ruby does not look really good here. However, I didn't
+   find another way to merge footer padding with container padding
+   instead of sum them */
+  display: ruby;
+}
+
 .modal__header .modal__close:before { content: "\2715"; }
 
 .modal__content {
   margin-top: 2rem;
   margin-bottom: 2rem;
-  line-height: 1.5;
-  color: rgba(0,0,0,.8);
 }
 
 .modal__btn {
@@ -59,7 +64,6 @@
   padding-top: .5rem;
   padding-bottom: .5rem;
   background-color: #e6e6e6;
-  color: rgba(0,0,0,.8);
   border-radius: .25rem;
   border-style: none;
   border-width: 0;
@@ -102,7 +106,7 @@
 }
 
 @keyframes mmslideOut {
-    from { transform: translateY(0); }
+  from { transform: translateY(0); }
     to { transform: translateY(-10%); }
 }
 
@@ -134,3 +138,8 @@
 .micromodal-slide .modal__overlay {
   will-change: transform;
 }
+
+@media screen and (max-width: 480px) {
+    .modal__container {
+        max-width: 90%;
+    }

hoverxref/_static/js/hoverxref.js_t

@@ -110,7 +110,7 @@ $(document).ready(function() {
     <div class="modal__overlay" tabindex="-1" data-micromodal-close>
       <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="micromodal-title">
         <header class="modal__header">
-          <h2 class="modal__title" id="micromodal-title"></h2>
+          <h1 class="modal__title" id="micromodal-title"></h1>
           <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
         </header>
         <main class="modal__content" id="micromodal-content"></main>
@@ -147,10 +147,18 @@ $(document).ready(function() {
             var content = $('<div></div>');
             content.html(data['content'][0]);
 
-            var title = $('h1', content)[0] || '';
-            content.replaceWith('h1', '');
+            var h1 = $('h1:first', content);
+            var title = h1.text()
+            if (title) {
+                var link = $('a', h1).attr('href') || '#';
+                var a = $('<a></a>').attr('href', link).text('{{ hoverxref_modal_prefix_title }}' + title.replace('¶', ''));
+            }
+            else {
+                var a = '{{ hoverxref_modal_prefix_title }}{{ hoverxref_modal_default_title }}';
+            }
+            h1.replaceWith('');
 
-            $('#micromodal-title').html(title);
+            $('#micromodal-title').html(a);
             $('#micromodal-content').html(content);
             MicroModal.show('micromodal', {
                 disableScroll: false,

hoverxref/extension.py

@@ -124,6 +124,8 @@ def setup(app):
     app.add_config_value('hoverxref_modal', False, 'env')
     app.add_config_value('hoverxref_modal_hover_delay', 350, 'env')
     app.add_config_value('hoverxref_modal_class', 'rst-content', 'env')
+    app.add_config_value('hoverxref_modal_default_title', 'Note', 'env')
+    app.add_config_value('hoverxref_modal_prefix_title', '📝 ', 'env')
 
 
     app.set_translator('html', HoverXRefHTMLTranslator, override=True)