Make no-javascript warning non-scrolling, less obtrusive

This commit is contained in:
lostinlight 2018-11-03 20:47:04 +03:00
parent 1e2eef4584
commit fbfbb51dd7
3 changed files with 21 additions and 12 deletions

View file

@ -16,13 +16,15 @@
<%- partial('_partial/head') %>
<body>
<main class="container-wrapper">
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade</a>.</p>
<!--[if lt IE 11]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please, upgrade</a>.</p>
<![endif]-->
<noscript><small class="no-js">You disabled Javascript. Please, enable it for better experience.</small></noscript>
<%- partial('_partial/navbar', null, {cache: !config.relative_link}) %>
<%- partial('_partial/sidebar') %>
<div class="container <%= contType %>"><%- body %></div>
<div class="container <%= contType %>">
<noscript><small class="no-js">You disabled Javascript. Some things won't work.</small></noscript>
<%- body %>
</div>
<h1><%=page.title%></h1>
</main>
<!-- temporary https redirect hack -->

View file

@ -350,15 +350,14 @@ dfn {
.no-js {
position: absolute;
top: 6em;
top: .3em;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: $white;
color: $black;
padding: .4em 1em;
padding: .4em 1.3em;
text-align: center;
z-index: $zIndex--5;
z-index: $zIndex--3;
}
@media screen and (max-width: $mq-large) {
@ -424,10 +423,19 @@ dfn {
.section-hero span:last-child {
display: none;
}
.no-js {
width: 100%;
line-height: 1.3;
}
}
@media screen and (max-width: $mq-xsmall) {
body { font-size: 90%; }
body {
font-size: 90%;
}
.no-js {left: 0; transform: translate(0, 0); width: 100%; padding: .6em 14% .6em 2em;}
.no-js {
display: none;
}
}

View file

@ -3,6 +3,5 @@
$zIndex--1: 1; // footer
$zIndex--2: 2; // .main__container:after
$zIndex--3: 3; // .grid
$zIndex--3: 3; // .grid, no-js
$zIndex--4: 4; // navbar, trigger, aside
$zIndex--5: 5; // no-js