From 5262d2281bdba876c878cbb847831413aa96a8f7 Mon Sep 17 00:00:00 2001 From: clara7227 Date: Tue, 4 Jun 2024 14:02:52 +0200 Subject: [PATCH] =?UTF-8?q?Corregido,=20parcializado=20el=20c=C3=B3digo=20?= =?UTF-8?q?de=20header,=20preparado=20para=20modificar=20media=20queries?= =?UTF-8?q?=20en=20distintos=20idiomas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/page.js | 2 +- app/sass/lib/_mixins.sass | 227 ++++++++++++++++------- app/sass/main.scss | 282 +++++++++++++---------------- app/sass/partials/_headermenu.sass | 50 ++++- app/sass/partials/_home.sass | 32 ++-- constants/langs/es.js | 2 +- 6 files changed, 356 insertions(+), 239 deletions(-) diff --git a/app/page.js b/app/page.js index b188c38..68d8435 100644 --- a/app/page.js +++ b/app/page.js @@ -49,7 +49,7 @@ export default function Home() {

{t("front.awardH2")}

-

{t("front.awardTitle")}

+
{t("front.awardTitle")}
{t("front.awardBody")}
diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass index d937e85..013e291 100644 --- a/app/sass/lib/_mixins.sass +++ b/app/sass/lib/_mixins.sass @@ -7,10 +7,13 @@ -webkit-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18) -moz-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18) box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18) +@mixin drop-shadow-intermediate + box-shadow: 0px 4px 4px 0px rgba(29, 29, 27, 0.15) @mixin drop-shadow-lighter -webkit-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.08) -moz-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.08) box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.08) + //-------------------- //TAGS //------------------- @@ -139,79 +142,173 @@ //NAVEGACIÓN @mixin nav_bar - - width: 100% - display: flex - flex-flow: wrap row - justify-content: space-between - align-items: center - transition: 0.5s - padding: 1.5rem 0 1.5rem 0 - box-shadow: 0px 4px 4px 0px rgba(29, 29, 27, 0.15) - - .imagotype - width: 100% - display: flex - justify-content: center - flex-flow: wrap row - justify-content: space-between - align-items: center - // padding-left: 4rem; + //MÓVIL MEDIA QUERY + @media (max-width: 600px) + @include drop-shadow-intermediate + width: 100vw + display: flex + flex-flow: wrap row + justify-content: space-between + align-items: flex-start + transition: 0.5s + padding: 1rem 1.4rem 0.7rem 1.4rem - .isotype - display: flex - //width: 4rem - height: auto - margin: 0 0 0 2rem + .imagotype + width: 100% + display: flex + flex-flow: wrap row + justify-content: space-between + align-items: center - .logoheader - width: 2.75rem + .isotype + display: flex + width: auto + height: 2rem + //margin: 0 0 0 1.4rem + + .logotype + display: none + font-size: 1.7rem + font-weight: $extra-bold + font-family: $helvetica + color: $black + padding: 0 0 0 0.7rem + + - .logotype - display: flex - width: auto - font-size: 1.7rem - font-weight: $bold - font-family: $montserrat-alternates - color: $blue_primary + .menu_icon + padding: 0 + display: flex + align-items: center + min-height: 2rem - padding: 0 12rem 0 0.7rem + .close + position: absolute + display: none + top: 4% + right: 5% + cursor: pointer + - span - color: $ca-or-300 + .show + position: absolute + padding: 0 + display: unset + cursor: pointer + top: 30% + right: 5% + + .menu + width: 100% + font-weight: $semi-bold + margin: 0 + padding: 1rem 1.6rem 0 1.6rem + display: none + - .menu_icon - .close - display: none - + li + padding: 0.66rem 0 + width: 100% + text-align: center + border-bottom: 1px solid $ca-blue-300 + - .show - padding: 2% 0 0 0 - display: none + li:last-child + border-bottom: 0px + + @media (min-width: 601px) + @include drop-shadow-intermediate + width: 100% + display: flex + flex-flow: wrap row + justify-content: space-between + align-items: center + transition: 0.5s + padding: 1.5rem 2rem 1.5rem 2rem - .menu - //width: 55% - font-weight: $semi-bold - margin: 0 3rem 0 0 - display: flex - justify-content: space-between - flex-wrap: nowrap - align-items: center - ul - display: flex - flex-flow: row nowrap - justify-content: space-between - font-size: 1.2rem - li - //margin-left: 0.6rem - @media (min-width: 1400px) - .imagotype - .logotype - font-size: 2.4rem - .isotype - margin: 0 0 0 3.5rem - .logoheader - width: 3.25rem + .imagotype + width: 100% + display: flex + justify-content: center + flex-flow: wrap row + justify-content: space-between + align-items: center + // padding-left: 4rem; + + .isotype + display: flex + //width: 4rem + height: auto + margin: 0 0 0 0rem + + .logoheader + width: 2.75rem + + .logotype + display: flex + width: auto + font-size: 1.7rem + font-weight: $bold + font-family: $montserrat-alternates + color: $blue_primary + padding: 0 6rem 0 0.7rem + + span + color: $ca-or-300 + + .menu_icon + .close + display: none + + + .show + padding: 2% 0 0 0 + display: none + + + .menu + //width: 55% + font-weight: $semi-bold + margin: 0 3rem 0 0 + display: flex + justify-content: space-between + flex-wrap: nowrap + align-items: center + padding: 2rem 3rem 0 3rem + + ul + display: flex + flex-flow: row nowrap + justify-content: space-between + font-size: 1.2rem + li + //margin-left: 0.6rem + @media (min-width: 940px) + + //padding: 1.5rem 0 1.6rem 0; + + .menu + width: auto + font-weight: $semi-bold + margin: 0 + padding: 0rem + justify-content: right + + ul + display: flex + flex-flow: wrap row + justify-content: space-between + font-size: 1.2rem + + + + @media (min-width: 1400px) + .imagotype + .logotype + font-size: 2.4rem + .isotype + .logoheader + width: 3.25rem diff --git a/app/sass/main.scss b/app/sass/main.scss index 9284f7f..1dfa406 100644 --- a/app/sass/main.scss +++ b/app/sass/main.scss @@ -109,18 +109,6 @@ header { } } } - - a { - transition: 15ms; - - &:hover { - border-bottom: $border2 $black; - } - - &:active { - border-bottom: $border1 $black; - } - } } } @@ -131,11 +119,6 @@ header { left: 0; } -main { - // padding: 2rem 0 0 0; - // margin: 0.8rem; -} - .box-shadow { -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); @@ -143,9 +126,9 @@ main { background-color: $blue-primary; } -.lang_en { - font-weight: $extra-bold; -} +// .lang_en { +// font-weight: $extra-bold; +// } /*---- Scroll Bar ----*/ @@ -189,7 +172,6 @@ main { .head { display: flex; - justify-content: space-between; // border-bottom: solid 1.5px lighten($color: $black, $amount: 7); //padding: 6rem 6rem 2rem 0rem; @@ -573,14 +555,14 @@ main { flex-direction: column; gap: 2rem; - .header { - @apply w-auto; - display: block; + // .header { + // @apply w-auto; + // display: block; - image { - object-fit: contain; - } - } + // image { + // object-fit: contain; + // } + // } @@ -638,7 +620,7 @@ main { RESEARCH ========================================================================== */ .research { - padding-bottom: $spacing_lg; + main { display: flex; @@ -647,10 +629,8 @@ main { } } -// .research { -// color: inherit; - -// padding: 5rem 0 0 0; +.research { + color: inherit; // .nav_bar { @@ -666,26 +646,26 @@ main { // } // } -// li { -// &.li-selected { -// a { -// border-bottom: $border1 white; + li { + &.li-selected { + a { + border-bottom: $border1 blue; -// &:hover { -// border-bottom: $border1 white; -// } -// } -// } + &:hover { + border-bottom: $border1 blue; + } + } + } -// a { + a { -// &:hover { -// color: inherit; -// text-decoration: none; -// } -// } -// } -// } + &:hover { + color: inherit; + text-decoration: none; + } + } + } + } // main { // min-height: calc(100vh - 150px); @@ -1077,23 +1057,23 @@ RESPONSIVE ========================================================================== */ @media (max-width: 940px) { - header { - padding: 1.5rem 0 1.6rem 0; - - .menu { - width: 100%; - font-weight: $semi-bold; - margin: 0; - padding: 2rem 3rem 0 3rem; - - ul { - display: flex; - flex-flow: wrap row; - justify-content: space-between; - font-size: 1.2rem; - } - } - } + // header { + // //padding: 1.5rem 0 1.6rem 0; + + // .menu { + // width: 100%; + // font-weight: $semi-bold; + // margin: 0; + // padding: 2rem 3rem 0 3rem; + + // ul { + // display: flex; + // flex-flow: wrap row; + // justify-content: space-between; + // font-size: 1.2rem; + // } + // } + // } .home { //margin: 0 4rem 0 4rem; @@ -1101,10 +1081,10 @@ RESPONSIVE .body { - .carousel { - align-self: center; - margin-left: 13px; - } + // .carousel { + // align-self: center; + // margin-left: 13px; + // } // .latest_publications { // width: 90.2%; @@ -1171,98 +1151,92 @@ RESPONSIVE //MÓVIL MEDIA QUERY @media (max-width: 600px) { - .responsive-hidden { - display: none !important; - } - - .responsive-shown { - display: block !important; - } - - header { - width: 100vw; - display: flex; - flex-flow: wrap row; - justify-content: space-between; - align-items: flex-start; - transition: 0.5s; - padding: 1rem 0 0.7rem 0; + // .responsive-hidden { + // display: none !important; + // } - .imagotype { - width: 100%; - display: flex; - flex-flow: wrap row; - justify-content: space-between; - align-items: center; + // .responsive-shown { + // display: block !important; + // } - .isotype { - display: flex; - width: 4rem; - height: auto; - margin: 0 0 0 1.4rem; - } + // header { + // width: 100vw; + // display: flex; + // flex-flow: wrap row; + // justify-content: space-between; + // align-items: flex-start; + // transition: 0.5s; + // padding: 1rem 0 0.7rem 0; + + // .imagotype { + // width: 100%; + // display: flex; + // flex-flow: wrap row; + // justify-content: space-between; + // align-items: center; + + // .isotype { + // display: flex; + // width: 4rem; + // height: auto; + // margin: 0 0 0 1.4rem; + // } - .logotype { - display: none; - font-size: 1.7rem; - font-weight: $extra-bold; - font-family: $helvetica; - color: $black; - padding: 0 0 0 0.7rem; - } - } + // .logotype { + // display: none; + // font-size: 1.7rem; + // font-weight: $extra-bold; + // font-family: $helvetica; + // color: $black; + // padding: 0 0 0 0.7rem; + // } + // } - .menu_icon { - padding: 0; - display: flex; - align-items: center; - min-height: 2rem; - - .close { - position: absolute; - display: none; - top: 3%; - right: 6.5%; - cursor: pointer; - } + // .menu_icon { + // padding: 0; + // display: flex; + // align-items: center; + // min-height: 2rem; + + // .close { + // position: absolute; + // display: none; + // top: 3%; + // right: 6.5%; + // cursor: pointer; + // } - .show { - position: absolute; - padding: 0; - display: unset; - cursor: pointer; - top: 28%; // por qué son distintos los porcentajes de los iconos close y show? - right: 6.5%; - } - } + // .show { + // position: absolute; + // padding: 0; + // display: unset; + // cursor: pointer; + // top: 28%; // por qué son distintos los porcentajes de los iconos close y show? + // right: 6.5%; + // } + // } - .menu { - width: 100%; - font-weight: $semi-bold; - margin: 0; - padding: 1rem 1.6rem 0 1.6rem; - display: none; + // .menu { + // width: 100%; + // font-weight: $semi-bold; + // margin: 0; + // padding: 1rem 1.6rem 0 1.6rem; + // display: none; - ul { - display: flex; - flex-flow: wrap column; - align-items: center; - font-size: 1.5rem; - - li { - padding: 0.66rem 0; - width: 100%; - text-align: center; - border-bottom: 1px solid $ca-blue-300 - } + // li { + // padding: 0.66rem 0; + // width: 100%; + // text-align: center; + // border-bottom: 1px solid $ca-blue-300 + // } - li:last-child { - border-bottom: 0px - } - } - } - } + // li:last-child { + // border-bottom: 0px + // } + + // } + // } diff --git a/app/sass/partials/_headermenu.sass b/app/sass/partials/_headermenu.sass index f8da6bd..9cad66b 100644 --- a/app/sass/partials/_headermenu.sass +++ b/app/sass/partials/_headermenu.sass @@ -1,7 +1,26 @@ @import "../lib/_variables.sass" @import "../lib/_mixins.sass" -@media (min-width: 150px) +@media (min-width: 150px) + // header + // background-color: white + // @include nav_bar + // z-index: 200 + + // li + // &.li-selected + // a + // border-bottom: $border1 $ca-or-100 + + // &:hover + // border-bottom: $border1 $ca-or-100 + + // .nav_bar + // position: fixed + // top: 0 + // left: 0 + + .lang_switcher @apply text-gray-600 margin-left: 1.6rem @@ -24,8 +43,14 @@ left: 0 - -@media (min-width: 600px) +@media (max-width: 600px) + //responsive + .responsive-hidden + display: none !important + + .responsive-shown + display: block !important +@media (min-width: 601px) .lang_switcher position: absolute right: 2rem @@ -38,14 +63,27 @@ @media (min-width: 700px) - .menu - ul - gap: 1rem + // .menu + // gap: 1rem + // width: 100% + // font-weight: $semi-bold + // margin: 0 + // padding: 2rem 3rem 0 3rem + + @media (min-width: 900px) .lang_switcher position: relative right: 0rem top: 0rem + header + //padding: 1.5rem 0 1.6rem 0; + // ul + // display: flex + // flex-flow: wrap row + // justify-content: space-between + // font-size: 1.2rem + diff --git a/app/sass/partials/_home.sass b/app/sass/partials/_home.sass index 9f88049..803e10f 100644 --- a/app/sass/partials/_home.sass +++ b/app/sass/partials/_home.sass @@ -18,37 +18,45 @@ object-fit: cover object-position: 50% 0 .award_section - @include drop-shadow-lighter + display: flex flex-direction: row - background: #fef2cb + + background: #fff9e6 gap: 1rem border-radius:24px - padding: 1rem 1rem 2rem 1rem - //border: 8px $ca-or-100 solid + padding: 1rem 2rem 1rem 2rem + border: 2px $ca-or-100 solid @apply text-orange-500 + width:55% .award_icon + font-size: 7rem border-radius: 70px - width: 6rem + min-width: 6rem height: 6rem - padding: 1rem 0 0 1.5rem - + padding: 1.5rem + background: #ffe489 + border-radius:80px + @apply text-orange-400 + @include drop-shadow-lighter .award_card display: flex flex-direction: row align-self: center align-items: center h3 - @apply text-orange-600 - margin-bottom: 0.1rem - h4 + @apply text-slate-600 + margin-bottom: 0.6rem + h5 @apply text-gray-600 + font-weight: 500 + margin-bottom: 0.5rem small - @apply text-gray-600 + @apply text-slate-400 padding-bottom: 1rem display: block - width:70% + .award_card_text padding: 0 0 0 1rem diff --git a/constants/langs/es.js b/constants/langs/es.js index c82a111..19d4fa1 100644 --- a/constants/langs/es.js +++ b/constants/langs/es.js @@ -15,7 +15,7 @@ export const es = { "title": "Bienvenido a CyberAula", "title2": "grupo de innovación educativa de la UPM", "awardH2":"GIE PREMIADO EN 2017", - "awardTitle": "Premio a los grupos de innovación educativa", + "awardTitle": "Premio a los grupos de innovación educativa ", "awardBody": "Premio otorgado al GIE CyberAula, coordinado por el profesor Juan Quemada Vives (E.T.S. DE INGENIEROS DETELECOMUNICACIÓN) ", "latestPublicationsTitle": "Últimas publicaciones", "latestPublicationsButton": "Ver todas las publicaciones",