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

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

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

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";
$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);
&.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;

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

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