update bulma modal

This commit is contained in:
chris 2025-02-20 11:13:15 -05:00
parent 797acae974
commit 58a3275a49
7 changed files with 33 additions and 7 deletions

View File

@ -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-height: 95vh; /* Slightly larger max-height */
max-width: 110%; /* Slightly larger max-width */
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>

View File

@ -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-height: 95vh; /* Slightly larger max-height */
max-width: 110%; /* Slightly larger max-width */
max-height: 98vh; /* Slightly larger max-height */
display: block;
margin: 0 auto;
border-radius: 10px;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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"

View File

@ -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 */
@ -122,4 +122,5 @@ form{
#top:hover {
background-color: #aedad3; /* Add a dark-grey background on hover */
}
}