recent pubs maquetacion

CyberAula · May 14, 2024 · e4fa165 · e4fa165
2 parents 29056e7 + d0f8f28
commit e4fa165
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 58 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -26,6 +26,38 @@
 @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @media (min-width: 150px) {
   .course {
     height: 100%;
@@ -70,7 +102,7 @@
   .card_container_top .course_route {
     border: 1px solid white;
     border-radius: 24px;
-    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
+    padding: 0.2rem 1rem 0.6rem 0.8rem;
     transition: 200ms ease-in-out;
   }
   .card_container_top .course_route:hover {
@@ -485,17 +517,16 @@
     padding-left: 0px;
   }
   .papers .paper {
-    margin-top: 32px;
+    margin: 16px 0;
     display: flex;
     flex-direction: column;
+    border-bottom: #5441ff;
   }
   .papers .paper_main {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 48px;
-    gap: 32px;
-    flex-grow: 1;
+    gap: 16px;
   }
   .papers .paper_main .paper_date {
     display: flex;
@@ -529,18 +560,33 @@
   .papers .paper_main .paper_title {
     @apply text-black;
   }
+  .papers .paper_main .paper_title h4 {
+    font-size: 1.2rem;
+    margin-bottom: 0.6rem;
+  }
   .papers .paper_main .paper_doi {
     font-weight: 600;
   }
   .papers .links {
     display: flex;
     flex-direction: row;
     align-content: center;
-    justify-content: right;
+    justify-content: left;
+  }
+  .papers .links a {
+    border: 1px solid #4f1be4;
+    border-radius: 24px;
+    padding: 0.5rem 1.2rem 0.7rem 1.4rem;
+    display: flex;
+    align-content: center;
+    margin-top: 16px;
   }
   .papers .links p {
     font-weight: 600;
-    text-decoration: underline;
+  }
+  .papers .links svg {
+    align-self: center;
+    margin-left: 0.6rem;
   }
 }
 @media (min-width: 600px) {
@@ -608,10 +654,6 @@
   }
 }
 @media (min-width: 600px) {
-  .papers .paper_main .paper_content {
-    gap: 32px;
-    flex-grow: 1;
-  }
   .papers .paper_main .paper_title {
     @apply text-black;
   }
@@ -719,6 +761,17 @@ ul li {
   margin: 0 1.3rem 0 0;
 }
 
+.article {
+  display: flex;
+}
+.article .article_content {
+  display: flex;
+  flex-direction: column;
+}
+.article .article_content .article_title {
+  font-weight: 700;
+}
+
 @media screen and (min-width: 641px) {
   html h1, body h1 {
     font-family: "Montserrat", sans-serif;
@@ -1882,7 +1935,7 @@ body :not(.menu) a:hover {
   .card_container_top .course_route {
     border: 1px solid white;
     border-radius: 24px;
-    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
+    padding: 0.2rem 1rem 0.6rem 0.8rem;
     transition: 200ms ease-in-out;
   }
   .card_container_top .course_route:hover {
@@ -2352,17 +2405,16 @@ body :not(.menu) a:hover {
     padding-left: 0px;
   }
   .papers .paper {
-    margin-top: 32px;
+    margin: 16px 0;
     display: flex;
     flex-direction: column;
+    border-bottom: #5441ff;
   }
   .papers .paper_main {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 48px;
-    gap: 32px;
-    flex-grow: 1;
+    gap: 16px;
   }
   .papers .paper_main .paper_date {
     display: flex;
@@ -2396,18 +2448,33 @@ body :not(.menu) a:hover {
   .papers .paper_main .paper_title {
     @apply text-black;
   }
+  .papers .paper_main .paper_title h4 {
+    font-size: 1.2rem;
+    margin-bottom: 0.6rem;
+  }
   .papers .paper_main .paper_doi {
     font-weight: 600;
   }
   .papers .links {
     display: flex;
     flex-direction: row;
     align-content: center;
-    justify-content: right;
+    justify-content: left;
+  }
+  .papers .links a {
+    border: 1px solid #4f1be4;
+    border-radius: 24px;
+    padding: 0.5rem 1.2rem 0.7rem 1.4rem;
+    display: flex;
+    align-content: center;
+    margin-top: 16px;
   }
   .papers .links p {
     font-weight: 600;
-    text-decoration: underline;
+  }
+  .papers .links svg {
+    align-self: center;
+    margin-left: 0.6rem;
   }
 }
 @media (min-width: 600px) {
@@ -2475,10 +2542,6 @@ body :not(.menu) a:hover {
   }
 }
 @media (min-width: 600px) {
-  .papers .paper_main .paper_content {
-    gap: 32px;
-    flex-grow: 1;
-  }
   .papers .paper_main .paper_title {
     @apply text-black;
   }

diff --git a/app/globals.css.map b/app/globals.css.map
diff --git a/app/projects/page.js b/app/projects/page.js
@@ -6,6 +6,8 @@ import Footer from "@/components/Footer";
 import Link from "next/link";
 import ProjectCard from "@/components/projectCard";
 import { myprojectCards } from "@/constants/projectsCards.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 export default function Projects() {
   const [projects, setProjects] = useState(myprojectCards);

diff --git a/app/research/page.js b/app/research/page.js
@@ -7,7 +7,7 @@ import Filters from "@/components/ResearchFilter";
 import Link from "next/link";
 import { mypublications } from "@/constants/publications";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 export default function Research() {
   const [state, setState] = useState({
@@ -121,9 +121,7 @@ export default function Research() {
                         <a rel="noopener noreferrer" target="_blank" href={doi}>
                           {" "}
                           <p>Read publication </p>
-                          <FontAwesomeIcon
-                            icon={faArrowUpRightFromSquare}
-                          />{" "}
+                          <FontAwesomeIcon icon={faArrowRight} />
                         </a>
                       </div>
                     </div>

diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass
@@ -1,3 +1,4 @@
+@import "./_variables.sass"
 @mixin border-tag
     @media (min-width: 150px)
         color: black
@@ -31,4 +32,11 @@
         border-radius:4px
         font-size: 1rem
         font-weight: 600
-
+@mixin border-button-white
+    border: 1px solid white
+    border-radius: 24px
+    padding: 0.2rem 1rem 0.6rem 0.8rem
+@mixin big-border-button-blue
+    border: 1px solid $ca-blue-700
+    border-radius: 24px
+    padding: 0.5rem 1.2rem 0.7rem 1.4rem
diff --git a/app/sass/main.css b/app/sass/main.css
@@ -14,6 +14,26 @@
 @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @media (min-width: 150px) {
   .course {
     height: 100%;
@@ -58,7 +78,7 @@
   .card_container_top .course_route {
     border: 1px solid white;
     border-radius: 24px;
-    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
+    padding: 0.2rem 1rem 0.6rem 0.8rem;
     transition: 200ms ease-in-out;
   }
   .card_container_top .course_route:hover {
@@ -473,17 +493,16 @@
     padding-left: 0px;
   }
   .papers .paper {
-    margin-top: 32px;
+    margin: 16px 0;
     display: flex;
     flex-direction: column;
+    border-bottom: #5441ff;
   }
   .papers .paper_main {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 48px;
-    gap: 32px;
-    flex-grow: 1;
+    gap: 16px;
   }
   .papers .paper_main .paper_date {
     display: flex;
@@ -517,18 +536,33 @@
   .papers .paper_main .paper_title {
     @apply text-black;
   }
+  .papers .paper_main .paper_title h4 {
+    font-size: 1.2rem;
+    margin-bottom: 0.6rem;
+  }
   .papers .paper_main .paper_doi {
     font-weight: 600;
   }
   .papers .links {
     display: flex;
     flex-direction: row;
     align-content: center;
-    justify-content: right;
+    justify-content: left;
+  }
+  .papers .links a {
+    border: 1px solid #4f1be4;
+    border-radius: 24px;
+    padding: 0.5rem 1.2rem 0.7rem 1.4rem;
+    display: flex;
+    align-content: center;
+    margin-top: 16px;
   }
   .papers .links p {
     font-weight: 600;
-    text-decoration: underline;
+  }
+  .papers .links svg {
+    align-self: center;
+    margin-left: 0.6rem;
   }
 }
 @media (min-width: 600px) {
@@ -596,10 +630,6 @@
   }
 }
 @media (min-width: 600px) {
-  .papers .paper_main .paper_content {
-    gap: 32px;
-    flex-grow: 1;
-  }
   .papers .paper_main .paper_title {
     @apply text-black;
   }
@@ -707,6 +737,17 @@ ul li {
   margin: 0 1.3rem 0 0;
 }
 
+.article {
+  display: flex;
+}
+.article .article_content {
+  display: flex;
+  flex-direction: column;
+}
+.article .article_content .article_title {
+  font-weight: 700;
+}
+
 @media screen and (min-width: 641px) {
   html h1, body h1 {
     font-family: "Montserrat", sans-serif;

diff --git a/app/sass/main.css.map b/app/sass/main.css.map
diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass
@@ -1,3 +1,5 @@
+@import "../lib/_mixins.sass"
+
 $bg-img: "/assets/img/courses/fondo-cursos.png"
 $windowHeight: 100vh
 $windowWidth: 100vw
@@ -37,9 +39,7 @@ $windowWidth: 100vw
                 font-weight: 500
                 border-radius: 4px
         .course_route
-            border: 1px solid white
-            border-radius: 24px
-            padding: 0.2rem 0.8rem 0.6rem 0.8rem
+            @include border-button-white
             transition: 200ms ease-in-out
             &:hover
                 background: white