From 040fcb1d395c5f00cb9acda9d7d8a50364249e4d Mon Sep 17 00:00:00 2001 From: David19735 Date: Tue, 3 Sep 2024 16:35:04 -0600 Subject: [PATCH] Se realizan cambios en el responsive --- posgrados/assets/css/posgrados.css | 52 ++++++++++++------- posgrados/assets/css/posgrados.less | 80 +++++++++++++++++++++-------- posgrados/assets/js/bar.js | 3 -- 3 files changed, 92 insertions(+), 43 deletions(-) diff --git a/posgrados/assets/css/posgrados.css b/posgrados/assets/css/posgrados.css index 601caf7..726ba60 100644 --- a/posgrados/assets/css/posgrados.css +++ b/posgrados/assets/css/posgrados.css @@ -566,6 +566,7 @@ Hero } #hero #hero_container { min-height: 80vh; + padding-top: 80px; } #hero #hero_container #information { min-height: 80vh; @@ -650,26 +651,41 @@ Hero } @media (max-width: 768px) { #hero #hero_container { - margin-top: 10rem; + margin-top: 2rem; } #hero #hero_container #information #box-information1 { padding-top: 2rem; - padding-bottom: 1.5rem; + padding-bottom: 1rem; } #hero #hero_container #information #box-information2 { padding-top: 1.3rem; - padding-bottom: 1.3rem; - word-wrap: break-word; + padding-bottom: 2rem; + } + #hero #hero_container #information #box-information2 #information-2-card { + padding-bottom: 3rem; + } +} +@media (max-width: 1195px) { + #hero #hero_container #information #box-information2 { + padding-top: 8rem; + } +} +@media (max-width: 991px) { + #hero #hero_container #information #box-information2 { + padding-top: 0.5rem; } } @media (max-width: 440px) { + #hero #hero_container #information #box-information1 h2 { + font-size: 1.3rem; + } #hero #hero_container #information #box-information2 #information-2-card { font-size: 15px; } } @media (max-width: 1200px) { - #hero #hero_container #information #box-information2 #information-2-card { - word-wrap: break-word; + #hero #hero_container #information #box-information2 { + margin-top: 0.1rem; } } /* ========== @@ -752,7 +768,6 @@ Main @media (max-width: 300px) { #main #main_container #main_information { margin-bottom: 2rem; - word-wrap: break-word; } #main #main_container #main_information #main_information_box1 h2 { font-size: 1.5rem; @@ -764,7 +779,6 @@ Main @media (max-width: 764px) { #main #main_container #main_information { margin-bottom: 2rem; - word-wrap: break-word; } } @media (max-width: 1414px) { @@ -884,35 +898,37 @@ Last section width: auto; height: auto; flex-direction: row; - border: 3px solid #bb8900b2; - padding: 15px; + padding-bottom: 3rem; + margin-bottom: 3rem; } #section #section_container #section_container_col #degree1 #parentDiv > div { flex: 0 0 auto; width: 25%; min-width: 200px; - margin-right: 15px; - padding: 15px; + margin-right: 1px; + padding: 5px; box-sizing: border-box; - border: 3px solid rgba(30, 60, 112, 0.6); - border-radius: 1rem; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + transition: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease; display: flex; justify-content: center; align-items: center; + border: none; } #section #section_container #section_container_col #degree1 #parentDiv > div p { color: rgba(30, 60, 112, 0.6); + font-size: 1.1rem; } #section #section_container #section_container_col #degree1 #parentDiv > div.active { - background-color: #1e3c70; - border-color: #1e3c70; + border-bottom: solid 2px rgba(30, 60, 112, 0.9); } #section #section_container #section_container_col #degree1 #parentDiv > div.active p { - color: #fff; + color: rgba(30, 60, 112, 0.9); } } @media (max-width: 540px) { + #section #section_container #section_container_col #degree1 #parentDiv > div { + min-width: 150px; + } #section #section_container #section_container_col #degree2 #infoDiv > div h2 { width: 90%; margin-bottom: 2rem; diff --git a/posgrados/assets/css/posgrados.less b/posgrados/assets/css/posgrados.less index 2b3c6ca..1337667 100644 --- a/posgrados/assets/css/posgrados.less +++ b/posgrados/assets/css/posgrados.less @@ -688,8 +688,10 @@ Hero flex-direction: column; justify-content: end; align-items: center; + #hero_container{ min-height: 80vh; + padding-top: 80px; #information{ min-height: 80vh; color: rgba(255,255,255,0.8); @@ -786,28 +788,58 @@ Hero @media(max-width:768px){ #hero{ #hero_container{ - margin-top: 10rem; + margin-top: 2rem; #information{ #box-information1{ padding-top: 2rem; - padding-bottom: 1.5rem; + padding-bottom: 1rem; } #box-information2{ padding-top: 1.3rem; - padding-bottom: 1.3rem; - word-wrap: break-word; - + padding-bottom: 2rem; + #information-2-card{ + padding-bottom: 3rem; + } } } } } } +@media(max-width:1195px){ + #hero{ + #hero_container{ + #information{ + #box-information2{ + padding-top: 8rem; + } + } + } + } +} + +@media(max-width:991px){ + #hero{ + #hero_container{ + #information{ + #box-information2{ + padding-top: 0.5rem; + } + } + } + } +} + @media(max-width:440px){ #hero{ #hero_container{ #information{ + #box-information1{ + h2{ + font-size: 1.3rem; + } + } #box-information2{ #information-2-card{ @@ -824,9 +856,7 @@ Hero #hero_container{ #information{ #box-information2{ - #information-2-card{ - word-wrap: break-word; - } + margin-top: 0.1rem; } } } @@ -923,7 +953,6 @@ Main #main_container{ #main_information{ margin-bottom: 2rem; - word-wrap: break-word; #main_information_box1{ h2{ font-size: 1.5rem; @@ -944,12 +973,13 @@ Main #main_container{ #main_information{ margin-bottom: 2rem; - word-wrap: break-word; } } } } + + @media(max-width:1414px){ #hero{ padding-top:150px; @@ -1099,32 +1129,29 @@ Last section width: auto; height: auto; flex-direction: row; - border: 3px solid #bb8900b2; - padding: 15px; - + padding-bottom: 3rem; + margin-bottom: 3rem; > div { flex: 0 0 auto; width: 25%; min-width: 200px; - margin-right: 15px; - padding: 15px; + margin-right: 1px; + padding: 5px; box-sizing: border-box; - border: 3px solid rgba(30, 60, 112, 0.6); - border-radius: 1rem; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + transition: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease; display: flex; justify-content: center; align-items: center; + border: none; p { color: rgba(30, 60, 112, 0.6); + font-size: 1.1rem; } &.active { - background-color: #1e3c70; - border-color: rgba(30, 60, 112, 1); - + border-bottom: solid 2px rgba(30, 60, 112, 0.9); p { - color: #fff; + color: rgba(30, 60, 112, 0.9); } } } @@ -1143,6 +1170,15 @@ Last section #section{ #section_container{ #section_container_col{ + + #degree1{ + #parentDiv{ + > div{ + min-width: 150px; + } + } + } + #degree2{ #infoDiv{ > div{ diff --git a/posgrados/assets/js/bar.js b/posgrados/assets/js/bar.js index 10a2ace..3a6976e 100644 --- a/posgrados/assets/js/bar.js +++ b/posgrados/assets/js/bar.js @@ -3,11 +3,9 @@ document.addEventListener('DOMContentLoaded', () => { const infoDivs = document.querySelectorAll('#infoDiv > div'); function setActiveDiv(index) { - // Remove active class from all parent divs and info divs parentDivs.forEach(div => div.classList.remove('active')); infoDivs.forEach(div => div.classList.remove('active')); - // Add active class to the corresponding parent div and info div if (parentDivs[index]) { parentDivs[index].classList.add('active'); } @@ -20,6 +18,5 @@ document.addEventListener('DOMContentLoaded', () => { parentDiv.addEventListener('click', () => setActiveDiv(index)); }); - // Set the first div as active on page load setActiveDiv(0); });