CIDWA/fes_acatlan
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Se realizan cambios en el responsive

Browse Source
This commit is contained in:
David19735
2024-09-03 16:35:04 -06:00
parent d329ec3651
commit 040fcb1d39
3 changed files with 92 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
posgrados/assets/css/posgrados.css
+34 -18
View File
@@ -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;
posgrados/assets/css/posgrados.less
+58 -22
View File
@@ -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{
posgrados/assets/js/bar.js
-3
View File
@@ -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);
});