mirrors/fediparty
1
0
Fork 0
mirror of https://codeberg.org/fediverse/fediparty.git synced 2024-11-25 10:01:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make no-javascript warning non-scrolling, less obtrusive

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
themes/starter/layout/layout.ejs
View file

@ -16,13 +16,15 @@
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body> <body>
<main class="container-wrapper"> <main class="container-wrapper">
<!--[if lt IE 9]> <!--[if lt IE 11]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade</a>.</p> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please, upgrade</a>.</p>
<![endif]--> <![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/navbar', null, {cache: !config.relative_link}) %>
<%- partial('_partial/sidebar') %> <%- 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> <h1><%=page.title%></h1>
</main> </main>
<!-- temporary https redirect hack --> <!-- temporary https redirect hack -->

20
themes/starter/source/assets/scss/partials/_layout.scss
View file

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

3
themes/starter/source/assets/scss/partials/_z-index.scss
View file

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