Agrego logo y mejoro responsiveness

Author: tomicapretto

_quarto.yml

@@ -9,6 +9,8 @@ website:
   page-navigation: true
   navbar:
     title: "Programación en Python"
+    background: light
+    foreground: dark
     pinned: true
     right:
       - text: Información
@@ -22,7 +24,7 @@ website:
       - text: Recursos
         file: recursos/tutoriales/instalacion_python.qmd
       - icon: github
-        href: none
+        href: https://github.com/ee-unr/programacion-python
   page-footer:
     right: "Esta página fue hecha con ❤️ y [Quarto](https://quarto.org/)."
 
@@ -60,10 +62,10 @@ website:
 
 format:
   html:
-    theme: styles.scss
+    theme:
+      light: styles.scss
     toc: false
     lang: es
-    highlight-style: arrow-light
 
 csl: citas/chicago-author-date.csl
 bibliography: citas/references.bib

imgs/favicon.png

@@ -200,7 +200,7 @@ div.sidebar-item-container {
 
   h2 {
     margin-top: 0;
-    font-size: 2.5rem;
+    font-size: 2.3rem;
   }
 
   ul {
@@ -220,9 +220,10 @@ div.sidebar-item-container {
 }
 
 .front-image {
-  width: 80%;
+  width: 90%;
 }
 
+
 .hero-img-container {
   display: flex;
   justify-content: center; /* horizontal */
@@ -232,7 +233,7 @@ div.sidebar-item-container {
 
 @media (max-width: 575px) {
   .front-image {
-    width: 50%;
+    width: 90%;
   }
 }
 
@@ -277,3 +278,18 @@ div.sidebar-item-container {
     }
 }
 
+
+.navbar-brand {
+  display: inline-block;
+  transition: transform 0.2s ease;
+}
+
+.navbar-brand:hover {
+  transform: scale(1.03);
+}
+
+@media (max-width: 576px) {
+  .navbar-brand .navbar-title {
+    display: none;
+  }
+}

imgs/favicon_original.png

@@ -20,7 +20,7 @@
 %>
 
 <div class="grid">
-  <div class="g-col-12 g-col-sm-8 order-2 order-sm-1 text-sm-start">
+  <div class="g-col-12 g-col-sm-6 order-2 order-sm-1 text-sm-start">
     <div class="course-meta">
       <% if (data.name) { %>
       <h2><%= data.name %></h2>
@@ -41,7 +41,7 @@
   </div>
 
   <% if (hasHeroImage) { %>
-  <div class="g-col-12 g-col-sm-4 order-1 order-sm-2 self-align-center hero-img-container">
+  <div class="g-col-12 g-col-sm-6 order-1 order-sm-2 self-align-center hero-img-container">
     <img src="<%= data.hero_image %>" class="front-image">
   </div>
   <% } %>