rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set opacity on body so that we have background when loading.

Browse source
This commit is contained in:
Robert Marshall 2020-06-20 09:22:51 +01:00
parent 2b26966328
commit 85acce8f47
3 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Website/Views/Shared/_Layout.cshtml
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="loading">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -8,7 +8,7 @@
<script type="text/javascript" src="/js/javascript.min.js"></script> <script type="text/javascript" src="/js/javascript.min.js"></script>
<noscript> <noscript>
<style> <style>
html { html.loading body {
opacity: 1; opacity: 1;
} }
</style> </style>

12
src/Website/wwwroot/css/style.scss
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Public+Sans&display=swap'); @import url("https://fonts.googleapis.com/css?family=Public+Sans&display=swap");
@import "colours.scss"; @import "colours.scss";
$fa-font-path: "../webfonts"; $fa-font-path: "../webfonts";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@ -14,20 +14,25 @@ html {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #252525 url(/images/background.png); background: #252525 url(/images/background.png);
&.loading {
body {
opacity: 0; opacity: 0;
} }
}
}
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Public Sans', sans-serif; font-family: "Public Sans", sans-serif;
color: #333; color: #333;
} }
::selection { ::selection {
background: $primary; background: $primary;
color: white color: white;
} }
body { body {
@ -225,7 +230,6 @@ form {
@import "blog.scss"; @import "blog.scss";
@import "home.scss"; @import "home.scss";
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
#content { #content {
flex-direction: column-reverse; flex-direction: column-reverse;

2
src/Website/wwwroot/js/javascript.js
View file

@ -1,3 +1,3 @@
window.onload = () => { window.onload = () => {
document.querySelector("html").style.opacity = 1; document.querySelector("html").classList.remove("loading");
}; };