Improve the main page when javascript is disabled

This commit is contained in:
yflory
2017-01-31 12:43:28 +01:00
parent 39c85ca3f7
commit d926b69f8b
12 changed files with 155 additions and 58 deletions

View File

@@ -1,7 +1,7 @@
{{fork}}
<div id="main">
<div id="overlay"></div>
<div class="mainOverlay"></div>
<div id="main-container">
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>

View File

@@ -1,5 +1,7 @@
<center>
<noscript>
<div id="noscriptContainer">
<div class="mainOverlay"></div>
<div id="noscript">
<noscript>
<p>
<strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
</p>
@@ -7,6 +9,7 @@
<p>
<strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
</p>
</noscript>
</center>
</noscript>
</div>
</div>

View File

@@ -237,24 +237,57 @@ body.html {
background-color: #d8d8d8;
}
}
#main {
background-image: url('/customize/bg3.jpg');
.mainOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.3;
}
#mainBlock {
&.hidden {
display: none;
}
}
#noscriptContainer {
color: black;
position: absolute;
top: @topbar-height;
left: 0;
bottom: 0;
right: 0;
#noscript {
width: 1000px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
noscript {
font-size: 25px;
width: 1000px;
text-align: center;
position: absolute;
top: 50%;
left: 0;
color: @main-color;
transform: translateY(-50%);
}
}
background: @main-bg;
background-size: cover;
}
#main {
background: @main-bg;
background-size: cover;
background-position: center center;
}
#main_other {
padding: 0 @main-border-width;
}
#main, #main_other {
#overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.3;
}
position: relative;
left: 0;
right: 0;

View File

@@ -81,3 +81,5 @@
@main-block-bg: rgba(200, 200, 200, 0.3);
@main-color: #fff;
@main-bg: url('/customize/bg3.jpg') no-repeat center center;

View File

@@ -20,9 +20,11 @@
<body class="html">
{{topbar}}
{{noscript}}
{{noscript}}
{{main}}
<div id="mainBlock" class="hidden">
{{main}}
</div>
</body>
</html>