Merge branch 'main' of https://github.com/CyberAula/cyberaula.github.io

CyberAula · Jun 5, 2024 · 5cb5d2a · 5cb5d2a
2 parents c3e1c10 + 5262d22
commit 5cb5d2a
Show file tree

Hide file tree

Showing 6 changed files with 358 additions and 242 deletions.
diff --git a/app/page.js b/app/page.js
@@ -49,7 +49,7 @@ export default function Home() {
                   <div className="award_card">
                     <div className="award_card_text">
                       <h3> {t("front.awardH2")} </h3>
-                      <h4>{t("front.awardTitle")}</h4>
+                      <h5>{t("front.awardTitle")}</h5>
                       <small>{t("front.awardBody")}</small>
                     </div>
                   </div>

diff --git 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