New version 2.5

Now display the image as a header within small screens.
Adds a new screenshot from Netscape Navigator 7.1.

Author: cara-tm

dist/manifest.json

@@ -1,6 +1,6 @@
 {
     "title": "Wait Me: a maintenance theme for new fresh installations",
-    "version": "2.4",
+    "version": "2.5",
     "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": "Textpattern Community",
     "author_uri": "https://github.com/textpattern",

dist/pages/default.txp

@@ -245,6 +245,10 @@ button::-moz-focus-inner,
 		box-shadow: none
 	}
 
+	doesnotexist:-o-prefocus, .aside {
+		box-shadow: 0 0 40px rgba(0, 0, 0, 0.5)
+	}
+
 	.aside .mask {
 		z-index: -1;
 		background: #eee url(images/photo.jpg) right center no-repeat;
@@ -289,7 +293,7 @@ button::-moz-focus-inner,
 @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(<txp:images id="1" limit="1" break=""><txp:php>
 
-/* Replace first image ID by adding @2x suffix name for retina display support, if image exists */
+/* Replace first image ID by adding @2x prefix name for retina display support, if image exists */
 
 $file = str_replace('1', '1@2x', image_url(array()));
 if (file_exists('images/1@2x'.image_info(array('type'=>'ext')))) {
@@ -300,7 +304,7 @@ echo image_url(array());
 
 </txp:php></txp:images>);background-size:cover}
 }
-/* Center all on very large screens */
+/*! Center all on very large screens */
 @media screen and (min-height: 900px) {
 
 	html .wrapper {top: calc(50vh - 250px)}
@@ -373,16 +377,23 @@ h2 {
 	color: #b0bfcc
 }
 
+.colon {font-weight:inherit}
+
+:lang(fr) .colon {margin-left:.25em}
+
 @media only screen and (max-width: 575px) {
 
-	html .wrapper {top: 0; margin-top:5%}
-	html .aside {display: none}
-	.section {width: 100%; box-shadow: -5px 4px 25px rgba(0,0,0,.11)}
+	html,body {height:100%}
+	html .wrapper {display:block;top: 0; margin-top:5%}
+	html .aside {display: block;width:100%;max-height:100%}
+	.section {overflow:hidden;display:block;width: 100%; box-shadow: -5px 4px 25px rgba(0,0,0,.11)}
+	.push,.footer {height:auto}
 	html h1 {letter-spacing: 0}
-	.socials a{margin-bottom:.5em;vertical-align: baseline}
-	.svg-icon{margin: .2em 1.5em .2em 0; transform: scale(1.3)}
+	.socials a {margin-bottom: .5em;vertical-align: baseline}
+	.svg-icon {margin: .2em 1.5em .2em 0; transform: scale(1.3)}
 
 }
+
 [class^="tooltip"]{position:relative;vertical-align:baseline;text-decoration:none;cursor:pointer}[class^="tooltip"]:before,[class^="tooltip"]:after,[class^="tooltip"] span{display:none;visibility:hidden;opacity:0;-webkit-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-transform .2s cubic-bezier(0.71,1.7,0.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-transform .2s cubic-bezier(.71,1.7,.77,1.24);-o-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-o-transform .2s cubic-bezier(.71,1.7,.77,1.24);-moz-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24),-moz-transform .2s cubic-bezier(.71,1.7,.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24),-webkit-transform .2s cubic-bezier(0.71,1.7,0.77,1.24),-moz-transform .2s cubic-bezier(.71,1.7,.77,1.24),-o-transform .2s cubic-bezier(.71,1.7,.77,1.24);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);font:smaller/1.2 Arial,sans-serif!important;outline:none}
 @media screen and (min-width: 620px){[class^="tooltip"]:before,[class^="tooltip"] span{content:attr(aria-label);overflow:hidden;display:block;position:absolute;z-index:200;top:25px;left:-1px;width:auto;min-width:99%;min-width:calc(100% - 14px);margin:4px 0;padding:7px;border:none;background-color:#000;background-color:hsla(0,0%,20%,.9);color:#fff;*color:#fff!important;text-align:center;text-transform:none;word-spacing:normal;letter-spacing:normal;border-radius:0;box-shadow:0 0 1px rgba(255,255,255,0.5)}.tooltip span{top:auto;bottom:115%}.tooltip:before,.tooltip:after{top:auto;bottom:115%;left:0}.tooltip:after{content:'';position:absolute;z-index:9999;top:24.4px;left:50%;width:0;height:0;margin:0 0 0 -6px;margin:0 0 0 calc(-5px);border-top:0;border-bottom:5px solid #000;border-color:hsla(0,0%,20%,.9);border-right:5px solid transparent;border-left:5px solid transparent;top:-34.2%;bottom:112.4%;border-top:5px solid #000;border-top-color:#000;border-top-color:hsla(0,0%,20%,.9);border-bottom:none}[class^="tooltip"]:hover:after,[class^="tooltip"]:hover span,[class^="tooltip"]:hover span:after,[class^="tooltip"]:focus:before,[class^="tooltip"]:focus:after,[class^="tooltip"]:focus span{display:inline;visibility:visible;opacity:1;text-decoration:none;font-size:initial}}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{*float:left;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);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><body><div class="wrapper"><div class="aside"><span class="mask"></span><div class="overlay"></div></div><div class="section"><div class="content table"><div class="content-inner table-cell"><main><h1><txp:variable name="title" /></h1><p><txp:variable name="text" /></p><p><txp:variable name="prefix_contact" /> <a href="<txp:site_url />#openContact" aria-label="contact" class="button" onclick="document.getElementById('openContact').style.display='block';return true;" aria-haspopup="true"><txp:variable name="contact" /></a></p></main><div class="push"></div><footer class="footer"><span class="socials">&copy; <txp:php>
 

dist/pages/error_default.txp

@@ -245,6 +245,10 @@ button::-moz-focus-inner,
 		box-shadow: none
 	}
 
+	doesnotexist:-o-prefocus, .aside {
+		box-shadow: 0 0 40px rgba(0, 0, 0, 0.5)
+	}
+
 	.aside .mask {
 		z-index: -1;
 		background: #eee url(images/photo.jpg) right center no-repeat;
@@ -289,7 +293,7 @@ button::-moz-focus-inner,
 @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(<txp:images id="1" limit="1" break=""><txp:php>
 
-/* Replace first image ID by adding @2x suffix name for retina display support, if image exists */
+/* Replace first image ID by adding @2x prefix name for retina display support, if image exists */
 
 $file = str_replace('1', '1@2x', image_url(array()));
 if (file_exists('images/1@2x'.image_info(array('type'=>'ext')))) {
@@ -300,7 +304,7 @@ echo image_url(array());
 
 </txp:php></txp:images>);background-size:cover}
 }
-/* Center all on very large screens */
+/*! Center all on very large screens */
 @media screen and (min-height: 900px) {
 
 	html .wrapper {top: calc(50vh - 250px)}
@@ -373,16 +377,23 @@ h2 {
 	color: #b0bfcc
 }
 
+.colon {font-weight:inherit}
+
+:lang(fr) .colon {margin-left:.25em}
+
 @media only screen and (max-width: 575px) {
 
-	html .wrapper {top: 0; margin-top:5%}
-	html .aside {display: none}
-	.section {width: 100%; box-shadow: -5px 4px 25px rgba(0,0,0,.11)}
+	html,body {height:100%}
+	html .wrapper {display:block;top: 0; margin-top:5%}
+	html .aside {display: block;width:100%;max-height:100%}
+	.section {overflow:hidden;display:block;width: 100%; box-shadow: -5px 4px 25px rgba(0,0,0,.11)}
+	.push,.footer {height:auto}
 	html h1 {letter-spacing: 0}
-	.socials a{margin-bottom:.5em;vertical-align: baseline}
-	.svg-icon{margin: .2em 1.5em .2em 0; transform: scale(1.3)}
+	.socials a {margin-bottom: .5em;vertical-align: baseline}
+	.svg-icon {margin: .2em 1.5em .2em 0; transform: scale(1.3)}
 
 }
+
 [class^="tooltip"]{position:relative;vertical-align:baseline;text-decoration:none;cursor:pointer}[class^="tooltip"]:before,[class^="tooltip"]:after,[class^="tooltip"] span{display:none;visibility:hidden;opacity:0;-webkit-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-transform .2s cubic-bezier(0.71,1.7,0.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-transform .2s cubic-bezier(.71,1.7,.77,1.24);-o-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-o-transform .2s cubic-bezier(.71,1.7,.77,1.24);-moz-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24),-moz-transform .2s cubic-bezier(.71,1.7,.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24);transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(.71,1.7,.77,1.24),-webkit-transform .2s cubic-bezier(0.71,1.7,0.77,1.24),-moz-transform .2s cubic-bezier(.71,1.7,.77,1.24),-o-transform .2s cubic-bezier(.71,1.7,.77,1.24);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);font:smaller/1.2 Arial,sans-serif!important;outline:none}
 @media screen and (min-width: 620px){[class^="tooltip"]:before,[class^="tooltip"] span{content:attr(aria-label);overflow:hidden;display:block;position:absolute;z-index:200;top:25px;left:-1px;width:auto;min-width:99%;min-width:calc(100% - 14px);margin:4px 0;padding:7px;border:none;background-color:#000;background-color:hsla(0,0%,20%,.9);color:#fff;*color:#fff!important;text-align:center;text-transform:none;word-spacing:normal;letter-spacing:normal;border-radius:0;box-shadow:0 0 1px rgba(255,255,255,0.5)}.tooltip span{top:auto;bottom:115%}.tooltip:before,.tooltip:after{top:auto;bottom:115%;left:0}.tooltip:after{content:'';position:absolute;z-index:9999;top:24.4px;left:50%;width:0;height:0;margin:0 0 0 -6px;margin:0 0 0 calc(-5px);border-top:0;border-bottom:5px solid #000;border-color:hsla(0,0%,20%,.9);border-right:5px solid transparent;border-left:5px solid transparent;top:-34.2%;bottom:112.4%;border-top:5px solid #000;border-top-color:#000;border-top-color:hsla(0,0%,20%,.9);border-bottom:none}[class^="tooltip"]:hover:after,[class^="tooltip"]:hover span,[class^="tooltip"]:hover span:after,[class^="tooltip"]:focus:before,[class^="tooltip"]:focus:after,[class^="tooltip"]:focus span{display:inline;visibility:visible;opacity:1;text-decoration:none;font-size:initial}}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{*float:left;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);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><body><div class="wrapper"><div class="aside"><span class="mask"></span><div class="overlay"></div></div><div class="section"><div class="content table"><div class="content-inner table-cell"><main><h1><txp:variable name="title" /></h1><p><txp:variable name="text" /></p><p><txp:variable name="prefix_contact" /> <a href="<txp:site_url />#openContact" aria-label="contact" class="button" onclick="document.getElementById('openContact').style.display='block';return true;" aria-haspopup="true"><txp:variable name="contact" /></a></p></main><div class="push"></div><footer class="footer"><span class="socials">&copy; <txp:php>