diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-28 16:18:30 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-28 17:21:35 +0200 |
| commit | 766b5d723cbfb001d075805ba35fa3da9eea9f88 (patch) | |
| tree | 066f7812dba576e1abbbf4088744ae0fb95b31c0 /htdocs | |
| parent | 5e6a81af7948dbd742e349dbb43f435de944f4e4 (diff) | |
chore: add a noscript tag
Since this website use mostly Javascript, users need to know that
scripts must be enabled.
Diffstat (limited to 'htdocs')
| -rw-r--r-- | htdocs/index.html | 6 | ||||
| -rw-r--r-- | htdocs/src/scss/layout/_main.scss | 27 |
2 files changed, 30 insertions, 3 deletions
diff --git a/htdocs/index.html b/htdocs/index.html index 561e42d..a2e1c02 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -46,6 +46,12 @@ Select an app inside menu to see a live preview and app details (description, technologies, repositories). </div> + <noscript> + <span class="no-js"> + This website needs Javascript to work. It shows JS/React applications. + Please activate scripts in your browser or use a compatible browser. + </span> + </noscript> </main> <footer class="footer"> <div class="copyright"> diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss index 71a67f4..8ab842b 100644 --- a/htdocs/src/scss/layout/_main.scss +++ b/htdocs/src/scss/layout/_main.scss @@ -19,13 +19,34 @@ } } +// NoScript extension seems to replace noscript tag with a span. +.main > span, +.instructions, +noscript { + background: fun.get-var(color-bg); + padding: fun.get-var(spacing-md); + text-align: center; + + @include mix.media("screen") { + @include mix.dimensions("lg") { + grid-column: 1 / -1; + } + } +} + .instructions { align-items: center; - background: fun.get-var(color-bg); display: flex; - height: 100%; justify-content: center; - padding: fun.get-var(spacing-md); +} + +.legal-notice { + height: 100%; + overflow-y: auto; + padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); + scrollbar-color: fun.get-var(color-primary-light-opacity) + fun.get-var(color-bg-tertiary); + width: 100%; @include mix.media("screen") { @include mix.dimensions("lg") { |