updated noscript style

This commit is contained in:
Danny Coates 2018-02-19 23:10:03 -08:00
parent 343627eb82
commit afb099f9df
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 21 additions and 19 deletions

View File

@ -20,8 +20,6 @@ html {
background-size: 110%;
background-repeat: no-repeat;
background-position: center top;
height: 100%;
margin: auto;
}
body {
@ -31,7 +29,6 @@ body {
flex-direction: column;
margin: 0;
min-height: 100vh;
position: relative;
}
input,
@ -46,11 +43,8 @@ a {
text-decoration: none;
}
.all {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
.main {
flex: auto;
max-width: 650px;
margin: 0 auto;
padding: 0 20px;
@ -58,6 +52,12 @@ a {
width: 96%;
}
.noscript {
text-align: center;
border: 3px solid var(--errorColor);
border-radius: 6px;
}
.btn {
font-size: 15px;
font-weight: 500;

View File

@ -29,18 +29,20 @@ function body(template) {
const b = html`<body>
${banner(state, emit)}
${header(state)}
<div class="all">
<main class="main">
<noscript>
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
<div class="noscript">
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
${template(state, emit)}
</div>
</main>
${footer(state)}
</body>`;
if (state.layout) {

View File

@ -2,7 +2,7 @@ const html = require('choo/html');
const assets = require('../../../common/assets');
module.exports = function(state) {
return html`<div class="footer">
return html`<footer class="footer">
<div class="legalSection">
<a
href="https://www.mozilla.org"
@ -60,5 +60,5 @@ module.exports = function(state) {
alt="twitter"/>
</a>
</div>
</div>`;
</footer>`;
};