From 85acce8f47badeda4262e1f151c39b26872fd6f3 Mon Sep 17 00:00:00 2001 From: Robert Marshall Date: Sat, 20 Jun 2020 09:22:51 +0100 Subject: [PATCH] Set opacity on body so that we have background when loading. --- src/Website/Views/Shared/_Layout.cshtml | 14 +++++++------- src/Website/wwwroot/css/style.scss | 14 +++++++++----- src/Website/wwwroot/js/javascript.js | 2 +- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Website/Views/Shared/_Layout.cshtml b/src/Website/Views/Shared/_Layout.cshtml index 8749974..6f5b192 100644 --- a/src/Website/Views/Shared/_Layout.cshtml +++ b/src/Website/Views/Shared/_Layout.cshtml @@ -1,5 +1,5 @@  - + @@ -7,12 +7,12 @@ + + diff --git a/src/Website/wwwroot/css/style.scss b/src/Website/wwwroot/css/style.scss index 22c4a1a..2c78e37 100644 --- a/src/Website/wwwroot/css/style.scss +++ b/src/Website/wwwroot/css/style.scss @@ -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"; $fa-font-path: "../webfonts"; @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; @@ -14,20 +14,25 @@ html { width: 100%; height: 100%; background: #252525 url(/images/background.png); - opacity: 0; + + &.loading { + body { + opacity: 0; + } + } } html, body { padding: 0; margin: 0; - font-family: 'Public Sans', sans-serif; + font-family: "Public Sans", sans-serif; color: #333; } ::selection { background: $primary; - color: white + color: white; } body { @@ -225,7 +230,6 @@ form { @import "blog.scss"; @import "home.scss"; - @media screen and (max-width: 992px) { #content { flex-direction: column-reverse; diff --git a/src/Website/wwwroot/js/javascript.js b/src/Website/wwwroot/js/javascript.js index 418b6f0..db72667 100644 --- a/src/Website/wwwroot/js/javascript.js +++ b/src/Website/wwwroot/js/javascript.js @@ -1,3 +1,3 @@ window.onload = () => { - document.querySelector("html").style.opacity = 1; + document.querySelector("html").classList.remove("loading"); }; \ No newline at end of file