changement léger de style

mementomori.css

@@ -2,16 +2,14 @@ body{
     text-align: center; 
     background-color:#FCFBFA; 
     color:#4B4A4A;
-}
-.container{
-    
 }
 .decade{
     display: flex;
-    margin-top: 20px
+    margin-top: 20px;
 }
 .boxes{
     margin: auto;
+    margin-right: 10px;
     display: grid;
     grid-template-columns: repeat(53,auto);
     row-gap: 4px;
@@ -21,11 +19,22 @@ body{
 .box{
     width: 8px;
     height: 8px;
-    border: 1px solid #4B4A4A;
+    border: 1px solid #111111;
+    border-radius: 1px;
 }
 .enabled{
-    background-color: #252525;
+    background-color: #3a3a3a;
 }
 .box-break{
     margin-right: 20px;
+}
+.year{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-right: auto;
+}
+.paragraph{
+    margin: auto;
+    width: 50em;
 }

mementomori.html

@@ -12,7 +12,7 @@
                 <h1>Memento Mori</h1>
             </div>
             <div id="calendar"></div>
-            <div class="pragraph">
+            <div class="paragraph">
                 <p>“It is not that we have a short time to live, but that we waste a lot of it. Life is long enough, and a sufficiently generous amount has been given to us for the highest achievements if it were 
                     all well invested. But when it is wasted in heedless luxury and spent on no good activity, we are forced at last by death’s final constraint to realize that it has passed away before we knew it 
                     was passing. So it is: we are not given a short life but we make it short, and we are not ill-supplied but wasteful of it… Life is long if you know how to use it.”
@@ -23,28 +23,57 @@
     </body>
 </html>
 <script>
-    
+    const nbdecades = 8;
-    for(var i = 0; i < 10; i++)
+    const yearperbloc = 10;
+    const nbsemainesperyear = 52;
+    var nbsemaines = 100;
+    remplir(nbsemaines);
+    function remplir(nbsemaines)
     {
-        var body = document.getElementById('calendar');
+        var cptsemaine = 0;
-        var divboxes = document.createElement('div')
+        var cptyear = 0;
-        divboxes.classList.add("boxes");
+        for(var i = 0; i < nbdecades; i++)
-        var divdecade = document.createElement('div')
-        divdecade.classList.add("decade");
-    
-        body.append(divdecade);
-        divdecade.append(divboxes);
-
-        for(var a =0; a < 10; a++)
         {
-            for(var b = 0; b < 53; b++)
+            var body = document.getElementById('calendar');
+            var divboxes = document.createElement('div');
+            divboxes.classList.add("boxes");
+            var divdecade = document.createElement('div');
+            divdecade.classList.add("decade");
+            var divyear = document.createElement('div');
+            divyear.classList.add("year");
+            
+            body.append(divdecade);
+            divdecade.append(divboxes);
+            
+            for(var a = 0; a < yearperbloc; a++)
             {
-                var divbox = document.createElement('div')
+                for(var b = 0; b < nbsemainesperyear + 1; b++)
-                if(b == 26)
+                {
-                    divbox.classList.add("box-break");
+                    var divbox = document.createElement('div');
-                else
+                    if(b == nbsemainesperyear / 2)
-                    divbox.classList.add("box");
+                        divbox.classList.add("box-break");
-                divboxes.append(divbox);
+                    else
-            }}
+                        divbox.classList.add("box");
+                    if(cptsemaine < nbsemaines)
+                        divbox.classList.add("enabled");
+                    divboxes.append(divbox);
+                    cptsemaine++;
+                }
+            }
+            
+            divdecade.append(divyear);
+            
+            for(a = 0; a < 3; a++)
+            {
+                var spanyear = document.createElement('span');
+                
+                if(a != 0)
+                {
+                    cptyear += 5;
+                    spanyear.textContent = cptyear;
+                }
+                divyear.append(spanyear);
+            }
+        }
     }
 </script>