Merge pull request #1 from psemsari/codespace-psemsari-stunning-space…

…-pancake-957gpg5vr9cgw6 fix: better visibility of text and better structure
psemsari · May 1, 2023 · 0407c9d · 0407c9d
2 parents b5ed975 + 57c5f85
commit 0407c9d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 32 deletions.
diff --git a/src/Anim.js b/src/Anim.js
@@ -6,8 +6,9 @@ function Anim() {
     renderOnAddRemove: false,
     selection: false
     });
-    canvas.setHeight(document.body.clientHeight);
-    canvas.setWidth(document.body.clientWidth);
+    const appheader = document.getElementsByClassName('App-header')[0]
+    canvas.setHeight(appheader.offsetHeight);
+    canvas.setWidth(appheader.offsetWidth);
     fabric.Object.prototype.transparentCorners = false;
     fabric.Object.prototype.objectCaching = true;
 
@@ -32,7 +33,7 @@ function Anim() {
     fabric.loadSVGFromURL('https://api.iconify.design/fluent-emoji/party-popper.svg', function(objects, options) {
         var obj = fabric.util.groupSVGElements(objects, options);
 
-        for (let i = 0; i < 300; i++)
+        for (let i = 0; i < 100; i++)
         {
         obj.clone((clone) => {
             clone.scale = Math.ceil(Math.random() * 3) + 5
@@ -49,6 +50,12 @@ function Anim() {
         update()
     });
 
+    window.onresize = () => {
+        const appheader = document.getElementsByClassName('App-header')[0]
+        canvas.setHeight(appheader.offsetHeight);
+        canvas.setWidth(appheader.offsetWidth);
+    }
+
 }
 
 export default Anim;
diff --git a/src/App.css b/src/App.css
@@ -1,32 +1,32 @@
 .App {
-  text-align: center;
+  overflow: hidden;
 }
 
 .App-header {
   background-color: #9c0000;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-  z-index: -1;
+  width: 100vw;
+  height: 100vh;
 }
 
 .isFerie {
   background-color: #009c1f !important;
 }
 
 #c {
+}
+
+#block {
   position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(0,0,0,0.7185574058725053) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #text {
-  z-index: 1;
+  color: white;
+  text-align: center;
+  /* background: linear-gradient(to bottom, transparent 0%, black 100%); */
 }
diff --git a/src/App.js b/src/App.js
@@ -7,8 +7,7 @@ function compare(dates, actual) {
   {
     const date = new Date(day)
     if (date === actual)
-    return {day: dates[day]}
-    return {day: dates[day]}
+      return {day: dates[day]}
   }
   return {day: null}
 }
@@ -34,7 +33,23 @@ const Header = ({day}) => {
   if (day.day)
     return (
       <header className="App-header isFerie">
+        <div id="block">
+          <div id="text">
+            <h2>
+              Est ce un jour férié ?
+            </h2>
+            <h1>
+              <IsFerie day={day}></IsFerie>
+            </h1>
+          </div>
+        </div>
         <Canva></Canva>
+      </header>
+    )
+
+  return (
+    <header className="App-header">
+      <div id="block">
         <div id="text">
           <h2>
             Est ce un jour férié ?
@@ -43,18 +58,6 @@ const Header = ({day}) => {
             <IsFerie day={day}></IsFerie>
           </h1>
         </div>
-      </header>
-    )
-
-  return (
-    <header className="App-header">
-      <div id="text">
-        <h2>
-          Est ce un jour férié ?
-        </h2>
-        <h1>
-          <IsFerie day={day}></IsFerie>
-        </h1>
       </div>
     </header>
   )