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

CyberAula · May 28, 2024 · 713ea42 · 713ea42
2 parents 526f64c + 3078740
commit 713ea42
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 172 deletions.
diff --git a/app/courses/page.js b/app/courses/page.js
@@ -24,9 +24,7 @@ export default function Courses() {
         <h1>Courses</h1>
       </div>
       <main>
-        <section className="lg:mx-36 md:mx-14 sm:mx-8 lg:my-12 md:my-8 sm:my-4 xl:mx-44 2xl:mx-60">
-
-
+        <section className="lg:mx-36 md:mx-14 sm:mx-8 mx-4 lg:my-12 md:my-8 sm:my-4 my-4 xl:mx-44 2xl:mx-60">
           <div className=" grid gap-4 md:grid-cols-2 sm:grid-cols-1">
             {courses.map(({ date, gradient, edition, title, description, route }) => {
               return (
@@ -37,20 +35,20 @@ export default function Courses() {
                   <div className="course_main transition">
                     <div className="course_content">
                       <div className="card_container_top">
-                        <div className="flex gap-2">
-                        <div className="year_tag">
-                          <div>{date}</div>
+                        <div className="flex gap-3">
+                        <div className="course_tag">
+                          <small>{date}</small>
                         </div>
-                        <div className="year_tag">
-                          <div> {edition}</div>
+                        <div className="course_tag">
+                          <small> {edition}</small>
                         </div>
                         </div>
-                        <div className="course_route">
+                        <button className="course_route">
                         <CreateLink route={route}>
                         <FontAwesomeIcon className="award_icon" icon={faArrowRight} />
                           <div>{t('courses.button')}</div>
                         </CreateLink>
-                        </div>
+                        </button>
                       </div>
                       <div className="course_text_block">
                         <div className="course_title">

diff --git a/app/research/page.js b/app/research/page.js
@@ -113,18 +113,18 @@ export default function Research() {
                             <h4>{title}</h4>
                           </div>
                           <div className="paper_subtitle">
-                            {author}. {journal}
+                           <p> {author}. {journal}</p>
                           </div>
                         </div>
                       </div>
-                      <div className="links text-nowrap">
+                      <button className="paper_link text-nowrap">
 
                         <a rel="noopener noreferrer" target="_blank" href={doi}>
                           {" "}
-                          <p>{t('publications.button')} </p>
+                          {t('publications.button')} 
                           <FontAwesomeIcon icon={faArrowRight} />
                         </a>
-                      </div>
+                      </button>
                     </div>
                   );
                 })}

diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass
@@ -2,26 +2,26 @@
 //Correcciones: añadir media queries a mixins para ajustar tamaños
 // quizá no sea necesario si los paddings etc están en ems (con rems se quedan igual)
 
-//eliminar estilo por defecto de botón
-@mixin button
-    outline: none
-    border: none
-//tags
+//--------------------
+//TAGS
+//-------------------
+
 @mixin border-tag
     @media (min-width: 150px)
         color: black
         border: 1px solid black
         display: flex
         align-items: center
-        padding: 1px 8px 
+        padding: 0.16em 0.33em 
         font-weight: 600
         border-radius: 4px
     @media (min-width: 640px)
         border: 1px solid to-black
         // height: 24px
-        padding: 0.4em 0.66em 
+        padding: 0.34em 0.66em 
         border-radius:4px
         font-weight: 600
+        height: 1.8em
 
 //añadir mas media queries a mixins
 
@@ -39,18 +39,48 @@
         height: 24px
         padding: 4px 10px 
         border-radius:4px
-        font-size: 1rem
         font-weight: 600
 
-//buttons
+@mixin tag-black-transparent
+    @media (min-width: 150px)
+        background-color: rgb(0, 0, 0,0.3)
+        display: flex
+        align-items: center
+        padding: 0.3rem 0.7rem 
+        font-weight: 500
+        border-radius: 4px
+    @media (min-width: 770px)   
+    // responsive hecho
+ 
+
+//--------------------
+//BUTTONS
+//-------------------
+
+//eliminar estilo por defecto de botón
+@mixin button
+    outline: none
+    border: none
+    background: none
+
+@mixin icon-button-left
+    svg 
+        align-self: center
+        margin-left: 0.6rem
+
+@mixin icon-button-right
+    svg 
+        align-self: center
+        margin-right: 0.6rem
+
+
 @mixin button-load-more
     @include button
     border-radius: 24px
     padding: 0.5rem 1.2rem 0.7rem 1.4rem
     color: $ca-blue-600
     background: $ca-blue-200
     cursor: pointer
-    font-size: 14px
     &:hover
         background: $ca-blue-300
         color: $ca-blue-700
@@ -60,12 +90,18 @@
     @include button
     border: 1px solid white
     border-radius: 24px
-    padding: 0.2rem 1rem 0.6rem 0.8rem
+    padding: 0.3rem 1rem 0.4rem 0.8rem
+    color: white
+    p 
+        margin-bottom: 0
 @mixin big-border-button-blue
     border: 1px solid $ca-blue-700
+    color: $ca-blue-700
     border-radius: 24px
     padding: 0.5rem 1.2rem 0.7rem 1.4rem
     transition: 200ms ease-in-out
+    p 
+        font-weight: 500
     &:hover
         color: white
         transition: 200ms ease-in-out
@@ -81,7 +117,6 @@
     color: $ca-blue-900
     background: $ca-blue-200
     cursor: pointer
-    font-size: 14px
     &:hover
         background: $ca-blue-300
         color: #0e1131

diff --git a/app/sass/lib/_type.sass b/app/sass/lib/_type.sass
@@ -12,9 +12,9 @@
 // 5to atributo: alto de linea
 // 6to atributo: margen bajo
 
-$xs-text: 13px, 14px, 16px, 400, 140%, 1rem, 0.6rem //small
+$xs-text: 16px, 14px, 18px, 400, 140%, 1rem, 0.6rem //small
 $body-text: 14px, 16px, 19px, 400, 140%, 1rem, 0.6rem
-$button: 16px, 14px, 20px, semibold //buttons
+$button: 16px, 14px, 18px, semibold //buttons
 $sm-text: 14px, 16px, 19px, 600, 140%, 1rem, 0.6rem //h5
 $md-text: 18px, 20px, 24px, bold, 140%, 1rem //h4
 $lg-text: 22px, 24px, 28px, bold,140%, 1rem  //h3
@@ -113,41 +113,41 @@ h5
 
 
 
-// parrafos
-p
+// parrafos, etiquetas e inputs
+p, label, input, select
     @media screen and (min-width: 150px)
         font-family: "Montserrat", sans-serif
         font-size: nth($body-text,1)
         line-height: nth($body-text,5)
-        margin-bottom: nth($body-text,6)
+        //margin-bottom: nth($body-text,6)
     @media screen and (min-width: 640px)
         font-family: "Montserrat", sans-serif
         font-size: nth($body-text,2)
         line-height: nth($body-text,5)
-        margin-bottom: nth($body-text,6)
+        //margin-bottom: nth($body-text,6)
     @media screen and (min-width: 1400px)
         font-family: "Montserrat", sans-serif
         font-size: nth($body-text,3)
         line-height: nth($body-text,5)
-        margin-bottom: nth($body-text,6)
+        //margin-bottom: nth($body-text,6)
 
 // parrafos
 small
     @media screen and (min-width: 150px)
         font-family: "Montserrat", sans-serif
         font-size: nth($xs-text,1)
         line-height: nth($xs-text,5)
-        margin-bottom: nth($xs-text,6)
+        //margin-bottom: nth($xs-text,6)
     @media screen and (min-width: 640px)
         font-family: "Montserrat", sans-serif
         font-size: nth($xs-text,2)
         line-height: nth($xs-text,5)
-        margin-bottom: nth($xs-text,6)
+        //margin-bottom: nth($xs-text,6)
     @media screen and (min-width: 1400px)
         font-family: "Montserrat", sans-serif
         font-size: nth($xs-text,3)
         line-height: nth($xs-text,5)
-        margin-bottom: nth($xs-text,6)
+        //margin-bottom: nth($xs-text,6)
 
 
 // botones + botones con links

diff --git a/app/sass/main.scss b/app/sass/main.scss
@@ -81,9 +81,7 @@ TYPOGRAPHY
 
 body,
 html {
-  h2 {
-    font-weight: lighter;
-  }
+
 
   color: black;
   @apply text-primary;
@@ -126,6 +124,9 @@ html {
   // }
 }
 
+button {
+  @include button 
+}
 // .button_filter {
 //   background-color: #3302bf;
 //   font-weight: 400;

diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass
@@ -29,30 +29,23 @@ $windowWidth: 100vw
         justify-content: space-between 
         height: 24px
         font-size: 1rem
-        .year_tag 
+        .course_tag 
             display: flex
-            div
-                background-color: rgb(0, 0, 0,0.3)
-                display: flex
-                align-items: center
-                padding: 1px 8px 
-                font-weight: 500
-                border-radius: 4px
+            margin-bottom: 0.1rem
+            @include tag-black-transparent
+
+
         .course_route
             @include border-button-white
+            @include icon-button-right
             transition: 200ms ease-in-out
             &:hover
                 background: white
                 transition: 200ms ease-in-out
                 @apply text-blue-950
             a 
                 display: flex
-            svg
-                margin-top: 0.1rem
-            div
-                font-weight:400
-                font-size: 1rem
-                margin-left: 0.6rem
+                align-items: center
 
 
 @media (min-width: 770px)
@@ -67,18 +60,12 @@ $windowWidth: 100vw
             align-items: center
             div
                 font-size: 1rem
-            .year_tag 
-                div
-                    margin: auto
-                    padding: 6px 12px 
-                    border-radius:4px
+
             .course_route
                 margin-top:2px
                 display: flex
                 align-items: center
                 padding: auto
-                svg
-                    margin-top: 0.2rem
                 div
                     margin-top: 0.14rem
         .course_text_block
@@ -120,15 +107,6 @@ $windowWidth: 100vw
                         -webkit-box-orient: vertical
                         overflow: hidden
                         text-overflow: ellipsis
-    .year_tag 
-        display: flex
-        p
-            background-color: rgb(0, 0, 0,0.4)
-            justify-contet: flex-end
-            border-radius:20px
-            padding: 4px 12px 
-            font-size: 1.2em
-            font-weight: 500