Added favicon

kevduc · kevduc · commit 54aeb59a8bed · 2020-08-20T05:07:40.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+favicon/*
diff --git a/css/main.css b/css/main.css
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -9,10 +9,13 @@
     <title>Kevin D. – Intro</title>
   </head>
   <body
-    class="d-flex flex-column justify-content-center align-items-center text-center bg-light w-100 h-100"
+    class="position-relative d-flex flex-column justify-content-center align-items-center text-center bg-light w-100 h-100"
   >
+    <div id="spinner" class="spinner-border text-dark" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
     <main
-      class="d-flex flex-column justify-content-center align-items-center text-center w-100 h-100 p-1"
+      class="invisible d-flex flex-column justify-content-center align-items-center text-center w-100 h-100 p-1"
     >
       <h1 class="display-1 mb-3 text-nowrap">Kévin Ducongé</h1>
       <ul class="list-inline">
diff --git a/script.js b/script.js
@@ -0,0 +1,12 @@
+// Wait for all the images to be loaded
+window.addEventListener("load", () => {
+  console.debug("window loaded");
+
+  // Hide loading spinner
+  document.querySelector("#spinner").classList.add("d-none");
+
+  // Start the fadein animation on main
+  let main = document.querySelector("main");
+  main.classList.add("fadein");
+  main.classList.remove("invisible");
+});
diff --git a/scss/main.scss b/scss/main.scss
@@ -18,6 +18,15 @@
   }
 }
 
-main {
-  animation: fadein 2s ease-out;
+.fadein {
+  animation: fadein 2s ease-out forwards;
+}
+
+#spinner {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,15 @@`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
`21`		`-main {`
`22`		`- animation: fadein 2s ease-out;`
	`21`	`+.fadein {`
	`22`	`+ animation: fadein 2s ease-out forwards;`
	`23`	`+}`
	`24`	`+`
	`25`	`+#spinner {`
	`26`	`+ position: absolute;`
	`27`	`+ margin: auto;`
	`28`	`+ top: 0;`
	`29`	`+ left: 0;`
	`30`	`+ bottom: 0;`
	`31`	`+ right: 0;`
`23`	`32`	`}`