chris/bpb-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal mobile size

Browse Source
This commit is contained in:
chris 2025-02-20 11:35:21 -05:00
parent 58a3275a49
commit 664c95820f
5 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
gallery/centerpiece/index.html
View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="../../style.css"> <link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style> <style>
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; gap: 15px;
@ -49,21 +49,24 @@
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{
--bulma-modal-content-width: unset; .modal{
--bulma-modal-content-height: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 110%; /* Slightly larger max-width */ max-width: 90vw;
max-height: 98vh; /* Slightly larger max-height */ max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -72,6 +75,10 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

21
gallery/centerpiece/updateGallery.sh
View File

@ -33,7 +33,7 @@ cat > "$OUTPUT_FILE" <<EOL
<link rel="stylesheet" href="../../style.css"> <link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style> <style>
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; gap: 15px;
@ -64,21 +64,24 @@ cat > "$OUTPUT_FILE" <<EOL
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{
--bulma-modal-content-width: unset; .modal{
--bulma-modal-content-height: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 110%; /* Slightly larger max-width */ max-width: 90vw;
max-height: 98vh; /* Slightly larger max-height */ max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -87,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

18
gallery/classic/updateGallery.sh
View File

@ -33,7 +33,7 @@ cat > "$OUTPUT_FILE" <<EOL
<link rel="stylesheet" href="../../style.css"> <link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style> <style>
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; gap: 15px;
@ -65,21 +65,23 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -88,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

17
gallery/organic/updateGallery.sh
View File

@ -33,7 +33,7 @@ cat > "$OUTPUT_FILE" <<EOL
<link rel="stylesheet" href="../../style.css"> <link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style> <style>
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; gap: 15px;
@ -64,21 +64,24 @@ cat > "$OUTPUT_FILE" <<EOL
color: #4a4a4a; color: #4a4a4a;
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -87,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>

14
gallery/sculpture/updateGallery.sh
View File

@ -66,20 +66,22 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal{ .modal{
--bulma-modal-content-width: unset; --bulma-modal-content-width: 95vw;
--bulma-modal-content-height: unset; --bulma-modal-content-height: 95vh;
} }
.modal-image { .modal-image {
max-width: 90%; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
max-width: 90vw;
overflow: clip;
} }
.modal-content { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -88,6 +90,10 @@ cat > "$OUTPUT_FILE" <<EOL
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{
max-width: fit-content !important;
overflow: clip !important;
}
</style> </style>
</head> </head>
<body> <body>