update bulma modal

gallery/centerpiece/index.html

@@ -49,10 +49,14 @@
             color: #4a4a4a;
             font-family: 'Autour One', cursive;
         }
+        .modal{
+        --bulma-modal-content-width: unset;
+        --bulma-modal-content-height: unset;
 
+        }
         .modal-image {
-             max-width: 95%; /* Slightly larger max-width */
+             max-width: 110%; /* Slightly larger max-width */
-            max-height: 95vh; /* Slightly larger max-height */
+            max-height: 98vh; /* Slightly larger max-height */
             display: block;
             margin: 0 auto;
             border-radius: 10px;
@@ -109,7 +113,7 @@
             <div class="gallery">
                 <div class="gallery-item">
                     <figure class="image is-square">
-                        <img src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="" data-target="modal1" aria-haspopup="true">
+                        <img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="" data-target="modal1" aria-haspopup="true">
                     </figure>
                     <p class="caption"></p>
                 </div>

gallery/centerpiece/updateGallery.sh

@@ -64,10 +64,14 @@ cat > "$OUTPUT_FILE" <<EOL
             color: #4a4a4a;
             font-family: 'Autour One', cursive;
         }
+        .modal{
+        --bulma-modal-content-width: unset;
+        --bulma-modal-content-height: unset;
 
+        }
         .modal-image {
-             max-width: 95%; /* Slightly larger max-width */
+             max-width: 110%; /* Slightly larger max-width */
-            max-height: 95vh; /* Slightly larger max-height */
+            max-height: 98vh; /* Slightly larger max-height */
             display: block;
             margin: 0 auto;
             border-radius: 10px;

gallery/classic/updateGallery.sh

@@ -65,6 +65,11 @@ cat > "$OUTPUT_FILE" <<EOL
             font-family: 'Autour One', cursive;
         }
 
+  .modal{
+        --bulma-modal-content-width: unset;
+        --bulma-modal-content-height: unset;
+
+        }
         .modal-image {
             max-width: 90%;
             max-height: 90vh;

gallery/organic/updateGallery.sh

@@ -64,7 +64,11 @@ cat > "$OUTPUT_FILE" <<EOL
             color: #4a4a4a;
             font-family: 'Autour One', cursive;
         }
+          .modal{
+        --bulma-modal-content-width: unset;
+        --bulma-modal-content-height: unset;
 
+        }
         .modal-image {
             max-width: 90%;
             max-height: 90vh;

gallery/sculpture/updateGallery.sh

@@ -65,6 +65,11 @@ cat > "$OUTPUT_FILE" <<EOL
             font-family: 'Autour One', cursive;
         }
 
+          .modal{
+        --bulma-modal-content-width: unset;
+        --bulma-modal-content-height: unset;
+
+        }
         .modal-image {
             max-width: 90%;
             max-height: 90vh;

index.html

@@ -65,7 +65,10 @@
 
           </div>
         </div>
+ 
       </nav>
+
+
        <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
       <!-- <div>
         <img class="image is-16by9" id="heroImg"

style.css

@@ -111,7 +111,7 @@ form{
   z-index: 99; /* Make sure it does not overlap */
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
-  background-color: #0dc9ba; /* Set a background color */
+  background-color: #94d601; /* Set a background color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 15px; /* Some padding */
   border-radius: 10px; /* Rounded corners */
@@ -123,3 +123,4 @@ form{
 #top:hover {
   background-color: #aedad3; /* Add a dark-grey background on hover */
 }
+