From 19fe067fdf8341dccd2f8a61c7694aebe688c7a3 Mon Sep 17 00:00:00 2001
From: duncan <zuricato2001@hotmail.com>
Date: Fri, 22 Nov 2024 15:00:11 -0600
Subject: [PATCH] =?UTF-8?q?Agregaci=C3=B3n=20de=20comentarios=20y=20arregl?=
 =?UTF-8?q?os=20de=20estilos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/main.css  | 53 ++++++++++++++++--------
 assets/css/main.less | 95 +++++++++++++++++++++++++-------------------
 wallPapers.html      | 85 +++++++++++++++++++--------------------
 3 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 0eeecad..f01cd79 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -58,9 +58,16 @@ section .section-h h2:after {
   left: calc(50% - 75px);
 }
 /* Sección home */
+.home {
+  /* Contendor principal para todos los archivos */
+}
 .home .cont-prin {
   text-align: center;
-  /* .content-galery  */
+  /* Contenedor ocupado en el index */
+  /* Contenedor para las presentación de imegenes */
+  /* Contenedor utilizado para himnos */
+  /* row para logotipos */
+  /* divisón flexible para wallpapers  */
 }
 .home .cont-prin .content-home {
   border-radius: 12px;
@@ -110,17 +117,6 @@ section .section-h h2:after {
   opacity: 0;
   transition: opacity 200ms ease-in-out;
 }
-.home .cont-prin .content-galery .description {
-  padding: 10px 0px;
-}
-.home .cont-prin .content-galery .description a {
-  text-decoration: none;
-  color: #1e3c70;
-  font-size: 22px;
-}
-.home .cont-prin .content-galery .description a:hover {
-  color: #bb8800;
-}
 .home .cont-prin .cont-center {
   padding: 0;
   justify-content: center;
@@ -141,6 +137,9 @@ section .section-h h2:after {
     width: 650px;
   }
 }
+.home .cont-prin .row {
+  /* división flexible para el responsive del tab de logotipos */
+}
 .home .cont-prin .row .div-flex .nav-item a {
   color: #1e3c70;
 }
@@ -194,35 +193,55 @@ section .section-h h2:after {
 }
 .home .cont-prin .d-flex .flex-column button {
   border: solid 1px #1e3c70;
+  background-color: #1e3c70;
+  color: white;
 }
 .home .cont-prin .d-flex .flex-column button:hover {
   color: #bb8800;
+  background-color: white;
+}
+.home .cont-prin .d-flex .modal {
+  background: url("../img/bg/Fondo1.png");
+  background-size: cover;
+  background-position: center;
+}
+.home .cont-prin .d-flex .modal .modal-content {
+  background: rgba(255, 255, 255, 0);
+}
+.home .cont-prin .d-flex .modal .modal-content .modal-body .text-right {
+  text-align: right !important;
+}
+.home .cont-prin .d-flex .modal .modal-content .modal-body .text-right .btn-close {
+  padding: 5px;
+  border-radius: 50%;
+  background-color: #bb8900;
 }
 @media (max-width: 576px) {
-  .home .cont-prin .d-flex .modal-body .bg-phone {
+  .home .cont-prin .d-flex .modal .modal-content .modal-body .bg-phone {
     margin: 10px 55px;
     padding: 0px;
     border-radius: 13px;
   }
 }
 @media (min-width: 577px) {
-  .home .cont-prin .d-flex .modal-body .bg-phone {
+  .home .cont-prin .d-flex .modal .modal-content .modal-body .bg-phone {
     margin: 10px 55px;
     padding: 0px;
     border-radius: 13px;
   }
 }
-.home .cont-prin .d-flex .modal-body a {
+.home .cont-prin .d-flex .modal .modal-content .modal-body a {
   text-decoration: none;
   border-radius: 5px;
   background-color: #bb8800;
   padding: 6px 30px;
   color: white;
-  border: 1px solid #1e3c70;
+  border: 1px solid white;
 }
-.home .cont-prin .d-flex .modal-body a:hover {
+.home .cont-prin .d-flex .modal .modal-content .modal-body a:hover {
   color: #bb8800;
   background-color: white;
+  border: 1px solid #1e3c70;
 }
 /* Globales */
 .nav-g a {
diff --git a/assets/css/main.less b/assets/css/main.less
index 97cd419..c865768 100644
--- a/assets/css/main.less
+++ b/assets/css/main.less
@@ -69,8 +69,10 @@ section {
 /* Sección home */
 
 .home {
+  /* Contendor principal para todos los archivos */
   .cont-prin {
     text-align: center;
+    /* Contenedor ocupado en el index */
     .content-home {
       border-radius: 12px;
       box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
@@ -99,7 +101,7 @@ section {
       }
     }
 
-    /* .content-galery  */
+    /* Contenedor para las presentación de imegenes */
     .content-galery {
       padding: 0;
       border-radius: 12px;
@@ -123,18 +125,8 @@ section {
         opacity: 0;
         transition: opacity 200ms ease-in-out;
       }
-      .description {
-        padding: 10px 0px;
-        a {
-          text-decoration: none;
-          color: #1e3c70;
-          font-size: 22px;
-          &:hover {
-            color: #bb8800;
-          }
-        }
-      }
     }
+    /* Contenedor utilizado para himnos */
     .cont-center {
       padding: 0;
       justify-content: center;
@@ -155,7 +147,9 @@ section {
         }
       }
     }
+    /* row para logotipos */
     .row {
+      /* división flexible para el responsive del tab de logotipos */
       .div-flex {
         .nav-item a {
           color: #1e3c70;
@@ -172,10 +166,10 @@ section {
           }
           a {
             background-color: #bb8800;
-            padding: 2px 10px; 
-            color:white !important; 
+            padding: 2px 10px;
+            color: white !important;
             &:hover {
-              color:#bb8800 !important;
+              color: #bb8800 !important;
               background-color: white;
               border: solid 1px #1e3c70;
             }
@@ -201,6 +195,7 @@ section {
         }
       }
     }
+    /* divisón flexible para wallpapers  */
     .d-flex {
       .flex-column {
         img {
@@ -210,37 +205,57 @@ section {
         }
         button {
           border: solid 1px #1e3c70;
+          background-color: #1e3c70;
+          color: white;
           &:hover {
             color: #bb8800;
+            background-color: white;
           }
         }
       }
 
-      .modal-body {
-        @media (max-width: 576px) {
-          .bg-phone {
-            margin: 10px 55px;
-            padding: 0px;
-            border-radius: 13px;
-          }
-        }
-        @media (min-width: 577px) {
-          .bg-phone {
-            margin: 10px 55px;
-            padding: 0px;
-            border-radius: 13px;
-          }
-        }
-        a {
-          text-decoration: none;
-          border-radius: 5px;
-          background-color: #bb8800;
-          padding: 6px 30px;
-          color: white;
-          border: 1px solid #1e3c70;
-          &:hover {
-            color: #bb8800;
-            background-color: white;
+      .modal {
+        background: url("../img/bg/Fondo1.png");
+        background-size: cover;
+        background-position: center;
+        .modal-content {
+          background: rgba(255, 255, 255, 0);
+          .modal-body {
+            .text-right {
+              text-align: right !important;
+              .btn-close {
+                padding: 5px;
+                border-radius: 50%;
+                background-color: #bb8900;
+              }
+            }
+            @media (max-width: 576px) {
+              .bg-phone {
+                margin: 10px 55px;
+                padding: 0px;
+                border-radius: 13px;
+              }
+            }
+            @media (min-width: 577px) {
+              .bg-phone {
+                margin: 10px 55px;
+                padding: 0px;
+                border-radius: 13px;
+              }
+            }
+            a {
+              text-decoration: none;
+              border-radius: 5px;
+              background-color: #bb8800;
+              padding: 6px 30px;
+              color: white;
+              border: 1px solid white;
+              &:hover {
+                color: #bb8800;
+                background-color: white;
+                border: 1px solid #1e3c70;
+              }
+            }
           }
         }
       }
diff --git a/wallPapers.html b/wallPapers.html
index 29f0354..49d8adc 100644
--- a/wallPapers.html
+++ b/wallPapers.html
@@ -176,16 +176,15 @@
             >
               <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content">
-                  <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="wp1Label">Wallpapers</h1>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
                   <div class="modal-body">
+                    <div class="text-right">
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                      ></button>
+                    </div>
                     <div class="row">
                       <div class="col-12 d-flex flex-column align-items-center">
                         <img
@@ -232,16 +231,15 @@
             >
               <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content">
-                  <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="wp2Label">Wallpapers</h1>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
                   <div class="modal-body">
+                    <div class="text-right">
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                      ></button>
+                    </div>
                     <div class="row">
                       <div class="col-12 d-flex flex-column align-items-center">
                         <img
@@ -288,16 +286,15 @@
             >
               <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content">
-                  <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="wp4Label">Wallpapers</h1>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
                   <div class="modal-body">
+                    <div class="text-right">
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                      ></button>
+                    </div>
                     <div class="row">
                       <div class="col-12 d-flex flex-column align-items-center">
                         <img
@@ -344,16 +341,15 @@
             >
               <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content">
-                  <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="wp5Label">Wallpapers</h1>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
                   <div class="modal-body">
+                    <div class="text-right">
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                      ></button>
+                    </div>
                     <div class="row">
                       <div class="col-12 d-flex flex-column align-items-center">
                         <img
@@ -400,16 +396,15 @@
             >
               <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content">
-                  <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="wp3Label">Wallpapers</h1>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
                   <div class="modal-body">
+                    <div class="text-right">
+                      <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                      ></button>
+                    </div>
                     <div class="row">
                       <div class="col-12 d-flex flex-column align-items-center">
                         <img