diff options
Diffstat (limited to '')
| -rw-r--r-- | static/js/fouc.js | 36 | ||||
| -rw-r--r-- | static/style.css | 11 | ||||
| -rw-r--r-- | templates/main/base.html | 9 | ||||
| -rw-r--r-- | templates/main/navigation.html | 2 | ||||
| -rw-r--r-- | templates/wiki/base.html | 8 |
5 files changed, 63 insertions, 3 deletions
diff --git a/static/js/fouc.js b/static/js/fouc.js new file mode 100644 index 00000000..190e8d37 --- /dev/null +++ b/static/js/fouc.js @@ -0,0 +1,36 @@ +function getScript(url, integrity, crossorigin){ + var script = document.createElement("script") + script.type = "text/javascript"; + script.src = url; + script.defer = true; + script.integrity = integrity; + script.crossOrigin = crossorigin; + document.getElementsByTagName("head")[0].appendChild(script); +} + +function setClass(selector, myClass) { + element = document.querySelector(selector); + console.log(element) + element.className = myClass; +} + +function removeClass(selector, myClass) { + element = document.querySelector(selector); + var reg = new RegExp('(^| )'+myClass+'($| )','g'); + element.className = element.className.replace(reg,' '); +} + +// hide the html when the page loads, but only if js is turned on. +setClass('html', 'prevent_fouc'); + +// when the DOM has finished loading, unhide the html +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + removeClass('html', 'prevent_fouc'); + getScript( + 'https://pro.fontawesome.com/releases/v5.0.9/js/all.js', + 'sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4', + 'anonymous' + ) + } +}
\ No newline at end of file diff --git a/static/style.css b/static/style.css index 9900a817..5c63f106 100644 --- a/static/style.css +++ b/static/style.css @@ -107,4 +107,15 @@ footer div.uk-section div.uk-text-center { .uk-button-darkish:hover { background: rgba(0, 0, 0, 0.22); +} + +/* Flash of Unstyled Content fixes */ +.prevent_fouc { + display: none; +} + +div.navbar-padding { + padding-left: 40px; + padding-right: 40px; + box-sizing: content-box; }
\ No newline at end of file diff --git a/templates/main/base.html b/templates/main/base.html index edd79fb5..cbdd937b 100644 --- a/templates/main/base.html +++ b/templates/main/base.html @@ -5,8 +5,15 @@ <title>Python Discord | {% block title %}{% endblock %}</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script> + + <!-- Prevent Flash of Unstyled Content --> + <script src="{{ static_file('js/fouc.js') }}"></script> + + <!-- Other JS loads --> +<!-- <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script> + + <!-- Stylesheets --> <link rel="shortcut icon" href="{{ static_file('favicon.ico') }}"> <link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/> <link rel="stylesheet" href="{{ static_file('style.css') }}"/> diff --git a/templates/main/navigation.html b/templates/main/navigation.html index 47c20d56..5dc78cc6 100644 --- a/templates/main/navigation.html +++ b/templates/main/navigation.html @@ -3,7 +3,7 @@ margin-left: -20px; } </style> -<div class="uk-container uk-container-expand uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> +<div class="navbar-padding uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; animation: uk-animation-slide-top; top: 400; bottom: #animation"> <nav data-uk-navbar class="uk-navbar-container uk-navbar-transparent" uk-navbar="boundary-align: true"> <div class="uk-navbar-left uk-padding-remove-left"> <a href="{{ url_for('main.index') }}" class="uk-navbar-item uk-logo uk-padding-remove-left"> diff --git a/templates/wiki/base.html b/templates/wiki/base.html index 4dce58d6..02ab1b55 100644 --- a/templates/wiki/base.html +++ b/templates/wiki/base.html @@ -5,8 +5,14 @@ <title>Python Discord | {% block title %}{% endblock %}</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script> + + <!-- Prevent Flash of Unstyled Content --> + <script src="{{ static_file('js/fouc.js') }}"></script> + + <!-- Other JS loads --> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script> + + <!-- Static stuff --> <link rel="shortcut icon" href="{{ static_file('favicon.ico') }}"> <link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/> <link rel="stylesheet" href="{{ static_file('style.css') }}"/> |