Latest version 2.3.1

With a support for "retina display" screens; some amandements to the help file (thanks bici).

Author: cara-tm

README.textile

@@ -10,9 +10,9 @@ p. Fine handcrafted theme for your maintenance mode during your website developm
 
 h2. How to?
 
-p. Unzip the distribution and place the theme folder into your @/root/themes@ directory.
+p. Unzip the distribution and place the theme folder @wait-me@ into your @/root/themes@ directory.
 
-p. Upload an image named 0.jpg in your @/root/images@ directory (dimensions: 350 × 500 px).
+p. Upload an image of your choice, that must be named @0@, into your @/root/images@ directory (dimensions: 350 × 500 px). This will be the image that is displayed with the main page; set the extension image file with the corresponding TXP variable into the pages. To support the "Retina Display" screens, please download the same image of twice the size and named <code>0@2x</code> with the same file extension.
 
 p. The theme use only 2 pages: "default" and "error_default" where you could find some TXP variables to set accordingly to your needs. Finaly, activate it.
 

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "title": "Wait Me: a maintenance theme for new fresh installations",
-    "version": "2.3",
+    "version": "2.3.1",
     "description": "A single page layout to prevent indexation from search engine bots; custom informations; with optional social links and a simple contact modal box for major online messaging solutions.",
     "author": "Patrick LEFEVRE",
     "author_uri": "https://github.com/cara-tm/wait-me",

dist/pages/default.txp

@@ -371,6 +371,24 @@ button::-moz-focus-inner,
 
 }
 
+/*! Retina display */
+@media (min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2/1), (min-resolution:192dpi) {
+
+	.aside,
+	.aside .mask {
+		background-image: url(images/0@2x.<txp:variable name="img_ext" />);
+		background-size: 100% 100%;
+	}
+ 
+}
+
+/* Center all on very large screens */
+@media screen and (min-height: 900px) {
+
+	html .wrapper {top: calc(50vh - 250px)}
+
+}
+
 /*! Just because Safari Mac is ugly */
 @media not all and (min-resolution:.001dpcm) { @media {
 
@@ -385,6 +403,7 @@ button::-moz-focus-inner,
 		-webkit-filter: blur(0px);
 		filter: blur(0px)
 	}
+
 }}
 
 h1, h2, h3 {font-family: 'Abril Fatface', serif}
@@ -431,12 +450,11 @@ h2 {
 	html .aside {display: none}
 	.section {width: 100%; box-shadow: -5px 4px 25px rgba(0,0,0,.11)}
 	html h1 {letter-spacing: 0}
-	.svg-icon {margin: .2em 1em .2em 0; transform: scale(1.3)}
+	.svg-icon{margin: .2em 1em .2em 0; transform: scale(1.3)}
 
 }
 
-body .modal-dialog{font:normal normal normal 16px/1 Arial,"Helvetica Neue",Helvetica,sans-serif}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.modal-dialog:target {opacity:1;display:block;cursor:zoom-out;pointer-events:auto}.modal-dialog:target .modal{opacity:1;-webkit-animation:scale-up-center .1s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .1s cubic-bezier(.39,.575,.565,1) both}html .modal-dialog:target ~ .wrapper,a[class^="close"]:target ~ .wrapper{overflow:auto;position:absolute;z-index:-1;top:0;left:0;height:1px;margin:0;padding:0}#close:target ~ .wrapper,a[class^="close"]:target ~ .wrapper{position:static}.modal-dialog{display:none;opacity:0;position:absolute;position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0;height:0;background:#fff}@supports(display:flex){html .modal-dialog:target ~ .wrapper{overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;height:100vh}.modal-dialog{height:auto;transition:opacity 300ms ease}}html .modal-dialog.no--bg:target ~ .wrapper{height:0}.modal-dialog .modal{overflow:hidden;overflow:-moz-hidden-unscrollable;position:relative;z-index:1000;width:98%;max-width:36em;min-width:250px;margin:1.5% auto;margin:5vh auto;background:#fff;border:1px solid transparent;border-color:hsl(0, 0%, 93.3%);font-size:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);-moz-box-shadow:0 0 30px rgba(0,0,0,.3);-o-box-shadow:0 0 10px rgba(0,0,0,.3);-khtml-box-shadow:0 0 10px rgba(0,0,0,.3);-ms-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 -10px 17px rgba(0,0,0,.05),0 15px 17px rgba(0,0,0,.05),10px 5px 17px rgba(0,0,0,.05);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);*zoom:1}.modal-dialog:target{outline:none}.modal-dialog .close-span{float:right;position:relative;top:1.2em;right:0;margin:0 3em 0 0;color:inherit;font-size:smaller;font-weight:300}.modal-dialog .close{box-sizing:content-box;display:block;position:absolute;z-index:10000;top:-.3em;right:-2em;width:1.5em;height:1.5em;margin:0;padding:0;border:2px solid currentcolor;vertical-align:middle;align-self:center;text-align:center;text-decoration:none;line-height:1.5em}.modal-dialog .close strong{display:block;width:1.5em;height:1.5em;margin:0;padding:0;vertical-align:middle;line-height:1.5em;font-weight:400;cursor:pointer}.modal-dialog .close:hover,.inner-dialog .close:active{outline:none;border:none;-webkit-tap-highlight-color:transparent}.modal-dialog .close b{display:block;overflow:hidden;position:absolute;z-index: 10000;top:0;right:0;bottom:0;left:0;width:100%;margin:0;padding:0;vertical-align:middle;text-align:center;color: #333;font-size:100%;cursor:pointer;-webkit-animation:1s ease-in-out;-moz-animation:1s ease-in-out;animation:1s ease-in-out}.modal-dialog .close b:hover,.modal-dialog .close:hover svg{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);transform:scale(2,2)}.modal-dialog .header-modal{position:relative;z-index:1001;display:block;width:100%;height:4em;min-height:4rem;max-height:26vh;color:inherit;font-family:Arial,'Noto Sans',sans-serif;font-weight:300}.header-modal strong{display:block;float:left;width:90%;margin:1em 5% 0;text-align:center;letter-spacing:-1px;text-transform:capitalize;line-height:1;font-size:110%;font-weight:400}.modal-dialog .inner-dialog{overflow-y:auto;display:block;width:auto;max-height:14em;max-height:47vh;height:99%;margin:0;padding:5px 15px 30px 20px;color:inherit;-webkit-overflow-scrolling:touch}.modal-dialog .inner-dialog p{margin-top:2em;text-align:center;font-size:85%;line-height:1.5;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.modal-dialog .inner-dialog p a{display:inline-table;width:80px;height:auto;margin:1em .5em 1em;padding:.5em;background:inherit;border:2px solid #f0f8ff;hyphens:none}.modal-dialog p a strong{display:block;font-weight:normal}@media only screen and (max-width:520px),only screen and (max-height:350px){.modal-dialog:target{height:calc(100vh + 10vh + 70px)}.modal-dialog{position:absolute}}@media only screen and (max-width:720px){.modal-dialog .modal{width:80%}.header-modal{max-height:11vmax}.header-modal h3{font-size:80%;line-height:1}html .header-modal span{width:auto;margin:0}.header-modal a{float:none;width:24px;height:24px;margin:0 0 0 .5em;vertical-align:middle}.header-modal svg{width:22px;height:22px;vertical-align:baseline}.modal-dialog .modal{margin:5vh auto;margin:calc(15vh - 40px) auto;margin:5vmin auto}}:-o-prefocus,html .modal-dialog .inner-dialog{height:100%;max-height:100%}
-
+body .modal-dialog{font:normal normal normal 16px/1 Arial,"Helvetica Neue",Helvetica,sans-serif}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(0.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.modal-dialog:target {opacity:1;display:block;cursor:zoom-out;pointer-events:auto}.modal-dialog:target .modal {opacity:1;-webkit-animation:scale-up-center .1s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .1s cubic-bezier(.39,.575,.565,1) both}html .modal-dialog:target ~ .wrapper,a[class^="close"]:target ~ .wrapper{overflow:auto;position:absolute;z-index:-1;top:0;left:0;height:1px;margin:0;padding:0}#close:target ~ .wrapper,a[class^="close"]:target ~ .wrapper {position:static}.modal-dialog{display:none;opacity:0;position:absolute;position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0;height:0;background:#fff}@supports(display:flex){html .modal-dialog:target ~ .wrapper{overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;height:100vh}.modal-dialog{height:auto;transition:opacity 300ms ease}}html .modal-dialog.no--bg:target ~ .wrapper{height:0}.modal-dialog .modal{overflow:hidden;overflow:-moz-hidden-unscrollable;position:relative;z-index:1000;width:98%;max-width:36em;min-width:250px;margin:1.5% auto;margin:5vh auto;background:#fff;border:1px solid transparent;border-color:hsl(0, 0%, 93.3%);font-size:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);-moz-box-shadow:0 0 30px rgba(0,0,0,.3);-o-box-shadow:0 0 10px rgba(0,0,0,.3);-khtml-box-shadow:0 0 10px rgba(0,0,0,.3);-ms-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 -10px 17px rgba(0,0,0,.05),0 15px 17px rgba(0,0,0,.05),10px 5px 17px rgba(0,0,0,.05);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);*zoom:1}.modal-dialog:target{outline:none}.modal-dialog .close-span{float:right;position:relative;top:1.2em;right:0;margin:0 3em 0 0;color:inherit;font-size:smaller;font-weight:300}.modal-dialog .close{box-sizing:content-box;display:block;position:absolute;z-index:10000;top:-.3em;right:-2em;width:1.5em;height:1.5em;margin:0;padding:0;border:2px solid currentcolor;vertical-align:middle;align-self:center;text-align:center;text-decoration:none;line-height:1.5em}.modal-dialog .close strong{display:block;width:1.5em;height:1.5em;margin:0;padding:0;vertical-align:middle;line-height:1.5em;font-weight:400;cursor:pointer}.modal-dialog .close:hover,.inner-dialog .close:active{outline:none;border:none;-webkit-tap-highlight-color:transparent}.modal-dialog .close b{display:block;overflow:hidden;position:absolute;z-index: 10000;top:0;right:0;bottom:0;left:0;width:100%;margin:0;padding:0;vertical-align:middle;text-align:center;color: #333;font-size:100%;cursor:pointer;-webkit-animation:1s ease-in-out;-moz-animation:1s ease-in-out;animation:1s ease-in-out}.modal-dialog .close b:hover,.modal-dialog .close:hover svg{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);transform:scale(2,2)}.modal-dialog .header-modal{position:relative;z-index:1001;display:block;width:100%;height:4em;min-height:4rem;max-height:26vh;color:inherit;font-family:Arial,'Noto Sans',sans-serif;font-weight:300}.header-modal strong{display:block;float:left;width:90%;margin:1em 5% 0;text-align:center;letter-spacing:-1px;text-transform:capitalize;line-height:1;font-size:110%;font-weight:400}.modal-dialog .inner-dialog{overflow-y:auto;display:block;width:auto;max-height:14em;max-height:47vh;height:99%;margin:0;padding:5px 15px 30px 20px;color:inherit;-webkit-overflow-scrolling:touch}.modal-dialog .inner-dialog p{margin-top:2em;text-align:center;font-size:85%;line-height:1.5;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.modal-dialog .inner-dialog p a{display:inline-block;width:6em;height:auto;margin:1em .5em 1em;padding:.5em;background:inherit;border:2px solid #e2eaf0;hyphens:none}.modal-dialog p a strong{display:block;font-weight:normal}@media only screen and (max-width:520px),only screen and (max-height:350px){.modal-dialog:target{height:calc(100vh + 10vh + 70px);background:transparent}.modal-dialog{position:absolute}}@media only screen and (max-width:720px){.modal-dialog .modal{width:80%}.header-modal{max-height:11vmax}.header-modal h3{font-size:80%;line-height:1}html .header-modal span{width:auto;margin:0}.header-modal a{float:none;width:24px;height:24px;margin:0 0 0 .5em;vertical-align:middle}.header-modal svg{width:22px;height:22px;vertical-align:baseline}.modal-dialog .modal{margin:5vh auto;margin:calc(15vh - 40px) auto;margin:5vmin auto}}:-o-prefocus,html .modal-dialog .inner-dialog{height:100%;max-height:100%}
 </style>
 
 </head>
@@ -478,4 +496,4 @@ echo( ((int)$first < (int)$now ? $first.'-'.$now : $now) );
 
 
 <div role="dialog" aria-modal="true" aria-haspopup="true" aria-label="Dialog Window - Close (Press escape to close)" tabindex="-1" aria-live="assertive" aria-describedby="dialog-description" class="modal-dialog dialog" id="openContact" onclick="document.getElementById('openContact').style.display='none';return true;" hidden><div role="document" class="modal no-select"><span class="close-span"><strong>Close</strong> <a rel="noopener noreferrer" href="#close-modal?javascript:void(0);" role="button" aria-hidden="true" aria-label="Close (Press escape to close)" class="close" id="close-modal" onclick="document.getElementById('openContact').style.display='none';return true;"><svg aria-hidden="true" aria-labelledby="close-share" width="20" height="20" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" style="vertical-align:top"><switch><g><title id="close-share">Close</title><path d="m15.125 12.281l-2.8438 2.8438 9.9375 9.875-9.9375 9.875 2.8438 2.8438 9.9375-9.875 9.9375 9.875 2.8125-2.8438-9.9062-9.875 9.9062-9.875-2.8125-2.8438-9.9375 9.875z" fill="currentColor"></path></g><foreignObject width="0" height="0"><b>×</b></foreignObject></switch></svg></a></span> <div class="header-modal"><strong class="no-select" id="dialog-description">Compose new email<b class="colon">:</b></strong></div> <div class="inner-dialog" role="document"><p class="txt-c"> <a href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;to=<txp:variable name="email_encoded" />&amp;su=&amp;cc=&amp;bcc=&amp;body=" class="tooltip" target="_blank" title="Gmail" aria-haspopup="true" role="link"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> <strong>Gmail</strong></a> <a href="https://outlook.office.com/owa/?path=/mail/action/compose&amp;to=<txp:variable name="email_encoded" />&amp;subject=&amp;body=" class="tooltip" target="_blank" title="Outlook" aria-haspopup="true" role="link"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> <strong>Outlook</strong></a> <a href="https://compose.mail.yahoo.com/?to=<txp:variable name="email_encoded" />" class="tooltip" target="_blank" title="Yahoo!" aria-haspopup="true" role="link"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> <strong>Yahoo!</strong></a> <a href="mailto:<txp:variable name="email_encoded" />?subject=&amp;cc=&amp;bcc=&amp;body=" class="tooltip" target="_blank" title="Default" aria-haspopup="true" role="link"><svg aria-hidden="true" focusable="false" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.564 2.703l3.45 3.734-2.434 4.798 5.14-.921 2.34 5.646L24 2.926 5.564 2.703zm-.636 8.088l.957-.787-1.234.39-.126-.18.51-.495-.669.27C1.813 10.979 0 13.455 0 16.35c0 1.951.822 3.705 2.133 4.947-.563-.99-.885-2.134-.885-3.355 0-2.865 1.809-5.415 4.315-6.42l.315-.766-.75.331-.211-.285.011-.011zm4.364-1.97L10.89 6l9.398-2.201L9.292 8.821z" fill="currentColor"></path></svg> <strong>Default</strong></a></p></div> </div> </div>
-</body></html>
+</body></html>