updated noscript style
This commit is contained in:
parent
343627eb82
commit
afb099f9df
16
app/base.css
16
app/base.css
|
@ -20,8 +20,6 @@ html {
|
||||||
background-size: 110%;
|
background-size: 110%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
height: 100%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -31,7 +29,6 @@ body {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
|
@ -46,11 +43,8 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all {
|
.main {
|
||||||
flex: 1;
|
flex: auto;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
max-width: 650px;
|
max-width: 650px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
@ -58,6 +52,12 @@ a {
|
||||||
width: 96%;
|
width: 96%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.noscript {
|
||||||
|
text-align: center;
|
||||||
|
border: 3px solid var(--errorColor);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
@ -29,18 +29,20 @@ function body(template) {
|
||||||
const b = html`<body>
|
const b = html`<body>
|
||||||
${banner(state, emit)}
|
${banner(state, emit)}
|
||||||
${header(state)}
|
${header(state)}
|
||||||
<div class="all">
|
<main class="main">
|
||||||
<noscript>
|
<noscript>
|
||||||
|
<div class="noscript">
|
||||||
<h2>${state.translate('javascriptRequired')}</h2>
|
<h2>${state.translate('javascriptRequired')}</h2>
|
||||||
<p>
|
<p>
|
||||||
<a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
|
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
|
||||||
${state.translate('whyJavascript')}
|
${state.translate('whyJavascript')}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p>${state.translate('enableJavascript')}</p>
|
<p>${state.translate('enableJavascript')}</p>
|
||||||
|
</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
${template(state, emit)}
|
${template(state, emit)}
|
||||||
</div>
|
</main>
|
||||||
${footer(state)}
|
${footer(state)}
|
||||||
</body>`;
|
</body>`;
|
||||||
if (state.layout) {
|
if (state.layout) {
|
||||||
|
|
|
@ -2,7 +2,7 @@ const html = require('choo/html');
|
||||||
const assets = require('../../../common/assets');
|
const assets = require('../../../common/assets');
|
||||||
|
|
||||||
module.exports = function(state) {
|
module.exports = function(state) {
|
||||||
return html`<div class="footer">
|
return html`<footer class="footer">
|
||||||
<div class="legalSection">
|
<div class="legalSection">
|
||||||
<a
|
<a
|
||||||
href="https://www.mozilla.org"
|
href="https://www.mozilla.org"
|
||||||
|
@ -60,5 +60,5 @@ module.exports = function(state) {
|
||||||
alt="twitter"/>
|
alt="twitter"/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</footer>`;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue