.layout__menu-toggle{/*OCULTO ESTOS ICONOS HASTA QUE LO PONGA EN UN MEDIA QUERY*/ display: none;/*OCULTO LA CAJA*/ } @media (max-width:1490px){ /*CAMBIA EL ESTILO DESDE EL PIXEL 0 AL PIXEL 1490*/ body{ /*ESTILO AL BODY*/ padding: 0; /*MARGEN INTERNO 0,PARA QUITAR CUALQUIER ESPACIADO SI LO TUVIERA*/ } .layout{ /*ESTILO A TODO EL LAYOUT*/ min-width:auto;/*ALTURA MINIMA AUTO*/ width:85% ;/*ANCHO DEL 85%*/ } } @media (max-width:1320px){ /*DE 0 PX HASTA 1320PX*/ .layout{ /*ESTILO AL LAYOUT*/ width: 89%; /*LE AUMENTO EL ANCHO A UN 89%*/ margin-left: 3rem;/*MARGEN IZ PARA QUE SE HACERQUE MAS A LA IZ AL REDUCIR LA PAGINA*/ } } @media (max-width:1160px){ /*DE 0 PX HASTA 1160PX*/ .layout{ /*ESTILO AL LAYOUT*/ width: 85%; /*LE REDUZCO EL ANCHO A UN 85%*/ margin-left: 4rem;/*MARGEN IZ PARA QUE SE ALEJE AHORA UN POCO MAS DE LA IZ AL REDUCIR LA PAGINA*/ } /*.certificates__certificate{ LO COMENTO PORQUE AUN NO LO HICE flex-basis:100%; }*/ } @media (max-width:1060px){ /*DE 0 PX HASTA 1060PX*/ body{ /*ESTILO AL BODY*/ background-image: none;/*LE QUITAMOS LA IMAGEN DE FONDO QUE TENIA*/ position: static;/*POSICION ESTATICA QUE ES LA QUE TIENE POR DEFECTO*/ } .layout{ /*ESTILO A TODO EL LAYOUT*/ width: 100%;/*PARA QUE OCUPE EL 100% DEL ANCHO DE TODA LA PAGINA*/ height:100%;/*QUE OCUPE LA ALTURA DEL 100% DE LA PAGINA*/ min-height: 100%;/*PARA QUE LA ALTURA SEA TAMBIEN ADAPTABLE EN ESE SENTIDO A NIVEL RESPONSIVE*/ margin: 0; /*PARA QUE NO TENGA NINGUN TIPO DE MARGEN*/ grid-template-areas: 'content';/*MODIFICO LAS AREAS,SOLO PONGO LA DE CONTENT PARA QUE SE VEA SOLO ESTA*/ grid-template-columns: 100%;/*QUE OCUPE ESTA AREA EL 100%*/ overflow-x: hidden;/*PARA QUE NO HAGA SCROOL POR LA PARTE HORIZONTAL,SE OCULTE TODO*/ } /*BOTON MENU HAMBURGUESA*/ .layout__menu-toggle{/*MENU HAMBURGUESA*/ z-index: 9999;/*LE METEMOS UN Z-INDEX SUPERIOR AL DEL LAYOUT__ASIDE QUE TIENE UN 999,PARA QUE ESTE POR ENCIMA SIEMPRE*/ display:block;/*(1º lo oculte con un (none) para trabajar con el menu)HAGO QUE APAREZCA A PARTIR DE ESTE PIXEL EL MENU HAMBURGUESA*/ position:absolute;/*PARA MOVERLA Y QUE LOS OTROS ELEMENTOS SE ADAPTEN A SU HUECO*/ width:4.8rem;/*ANCHO*/ height: 4.8rem;/*ALTURA*/ line-height: 4.8rem;/*ALTURA DE LINEA*/ text-align: center;/*TEXTO ALINEADO EN EL CENTRO*/ background-color: var(--color-secondary); right: 1rem;/*QUE SE COLOQUE EN EL PIXEL 0 A UN 1rem DE LA DERECHA/A LA DERECHA DE TODO PORQUE APARECIO POR DEFECTO EN LA PARTE SUPERIOR IZQUIERDA*/ top:1rem;/*DEL PIXEL 0 DE LA PARTE DE ARRIBA SE COLOQUE A UN REM*/ font-size: 2.5rem;/*TAMAÑO DE LA FUENTE*/ color:var(--color-principal); cursor:pointer;/*CUANDO PASE POR ENCIMA CON EL RATON,APAREZCA LA MANO CON DEDO SEÑALANDO*/ } .layout__menu-toggle{ transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; border-radius:3rem ; -webkit-border-radius:3rem ; -moz-border-radius:3rem ; -ms-border-radius:3rem ; -o-border-radius:3rem ; } .menu-toggle__icon{/*ICONOS DEL MENU HAMBURGUESA,LOS SITUO UNO ENCIMA DEL OTRO*/ color:var(--color-principal); display: block; position: absolute;/*SI SE MUEVE QUE LAS OTRAS CAJAS SE ADAPTEN Y OCUPEN SU SITIO*/ top:25%; left: 28%; transition:all 300ms ease-in-out ; -webkit-transition:all 300ms ease-in-out ; -moz-transition:all 300ms ease-in-out ; -ms-transition:all 300ms ease-in-out ; -o-transition:all 300ms ease-in-out ; } .fa-bars{ opacity: 1;/*1º ESTA VISIBLE EL ICONO HAMBURGUESA,LOS VOY CAMBIANDO CON JAVASCRIPT*/ } /*NOTA:TENGO QUE HACER QUE CUANDO ABRA EL MENU DESAPAREZCA EL ICONO BARS Y APAREZCA ICONO XMARK PARA CANCELARLO Y DESAPAREZCA EL MENU CUANDO LE DEA A LA X*/ .fa-xmark{/*VOY A OCULTAR EL ICONO X PERO( ES PROVISIONAL)*/ opacity: 0;/*ESTA OCULTO*/ } .layout__aside{/*BARRA LATERAL*/ z-index: 999;/*PARA QUE SIEMPRE ESTA CAJA ESTE POR ENCIMA DE LAYOUT__CONTENT,Y ASI AL JUGAR CON LA OPACIDAD, CUANDO LO HAGA VISIBLE CON EL BOTON HAMBURGUESA DANDOLE ORDENES CON JAVASCRIPT APAREZCA ENCIMA DEL LAYOUT__CONTENT,*/ display:block;/*PARA QUE APAREZCA LA CAJA BARRA LATERAL*/ position: absolute;/*PODER MOVERLA A LA DERECHA DE TODO Y QUE OTRAS CAJAS OCUPEN SU HUECO LIBRE*/ max-width: 33rem;/*ANCHO MAXIMO */ top:0;/*DESDE ARRIBA SE SITUE EN EL PIXEL 0(OCUPARA CON LOS TRES LADOS DE LA DERECHA)*/ right:0;/*DESDE EL PIXEL 0 DE LA DERECHA(OCUPARA CON LOS TRES LADOS DE LA DERECHA)*/ bottom: 0;/*DESDE EL PIXEL 0 DESDE ABAJO(OCUPARA CON LOS TRES LADOS DE LA DERECHA)*/ text-align: center;/*TEXTO ALINEADO EN EL CENTRO*/ overflow: auto;/*SI TIENE QUE HABER UN SCROLL QUE LO HAGA*/ /*PROVISIONAL*/ margin-right: -100%;/*SE OCULTARA A LA DERECHA DE TODO,FUERA DE LA PAGINA*/ opacity: 0;/*QUE NO SE VEA*/ } .layout__aside{ transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; } .layout{/*LE QUITO TODO EL LAYOUT EL BORDE REDONDEADO QUE TENIA AL PRINCIPIO CON LA PANTALLA COMPLETA*/ border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } /*CREAMOS DOS MODIFICADORES PARA LA BARRA LATERAL ,UNO VISIBLE Y OTRO HIDEN (OCULTO)PARA QUE APAREZCA Y DESAPAREZCA CUANDO LE DEMOS AL MENU HAMBURGUESA,ESTO LO HAREMOS CON JAVASCRIPT*/ .layout__aside--visible{/*LE METO A LA BARRA LATERAL UN MODIFICADOR(visible).*/ width: 100%;/*ANCHO */ margin-right:0;/*PARA QUE SE POSICIONE EN SU SITIO CUANDO SEA VISIBLE*/ opacity: 1;/*QUE SE VEA CUANDO SEA VISIBLE*/ } .layout__aside--hidden{/*LE METO A LA BARRA LATERAL UN MODIFICADOR(hidden).*/ margin-right: -100%;/*SE OCULTARA A LA DERECHA DE TODO,FUERA DE LA PAGINA*/ opacity: 0;/*QUE NO SE VEA*/ } .user-info__container-image{/*IMAGEN FOTO*/ width: 13rem;/*ANCHO*/ margin-top: 3rem;/*MARGEN SUPERIOR*/ display: inline-block;/*QUE SE COMPORTE COMO BLOQUE EN LINEA Y LA CAJA OCUPE A LO ANCHO LO NECESARIO DE SU CONTENIDO*/ } .user-info__name{/*NOMBRE DE LA IMAGEN*/ font-size: 3rem;/*TAMAÑO DE LA FUENTE*/ margin-top: 0.5rem;/*MARGEN SUPERIOR*/ margin-bottom: 1rem;/*MARGEN POR ABAJO*/ } .menu__list{/*ESTILO A LAS LISTAS DEL MENU*/ position: static;/*PARA QUE SE COMPORTE DE POSICION ESTATICA SIEMPRE*/ width: 100%;/*PARA QUE OCUPE TODO EL ANCHO*/ background-color: var(--color-secondary); box-shadow: none;/*QUITAR LAS SOMBRAS EN LA CAJA*/ margin-left: 0;/*SIN MARGEN IZQUIERDO*/ padding: 0; min-height: auto;/*ALTURA MINIMA AUTO */ } .menu__link{ text-decoration: none;/*QUITAMOS DECORACIONES*/ display: block;/*SE COMPORTE COMO UN BLOQUE*/ padding: 1.2rem 0;/*MARGEN INTERIOR SOLO POR ARRIBA Y POR ABAJO*/ } .menu__icon{/*ESTILO A LOS ICONOS DEL MENU*/ display: none;/*OCULTAMOS LOS ICONOS,PARA QUE SOLO SE MUESTREN LOS TEXTOS*/ } .menu__link--active .menu__overlay{/*CUANDO PULSE POR MENU__LINK HAGO UN ACTIVE A MENU__OVERLAY*/ opacity: 1;/*MAS OPACIDAD PARA CUANDO MARQUE LO PULSADO SE VEA MAS QUE EL OPACITY DE 0.7 QUE TENIA*/ } .links__social{ margin-top: 0; } .user-info__footer{/*ESTILO AL FOOTER*/ position: static; padding-bottom: 2rem;/*MARGEN INTERIOR POR ABAJO*/ } .menu__overlay{/*ANTES OCULTAMOS LA CAJA E ICONOS PERO AHORA MOSTRAMOS EL TEXTO DE LOS ICONOS */ position: static;/*QUE SE COMPORTE DE FORMA ESTATICA SIEMPRE*/ opacity: 0.7;/*COMO ESTABA TODO OCULTADO LE DAMOS UN POCO DE OPACIDAD PARA QUE SE VEAN LAS LETRAS SOLAS*/ margin-top: 0; padding: 0; box-shadow: none;/*QUITAMOS SOMBRAS*/ font-size: 1.6rem;/*TAMAÑO FUENTE*/ } .layout__menu{/*ESTILO AL MENU