Change button style

Author: Daniel Precioso

_posts/2024-02-20-el-pais.md

@@ -15,8 +15,8 @@ tags:
 
 Today we would like to share with you the article on our weather routing project that was published in Diario EL PAÍS. This article has been written by David Gómez-Ullate and David Martín de Diego, both researchers of this project.
 
-[Read the full article (in Spanish)](https://elpais.com/ciencia/cafe-y-teoremas/2024-02-20/construyendo-el-google-maps-del-oceano.html)
-
 <img src="{{ page.featured_image }}" alt="El País" width="80%"/>
 
+<a href="https://elpais.com/ciencia/cafe-y-teoremas/2024-02-20/construyendo-el-google-maps-del-oceano.html" class="button">Read the full article (in Spanish)</a>
+
 We want to thank [Ágata A. Timón García-Longoria](https://elpais.com/autor/agata-a-timon-garcia-longoria/) for her help editing the article and to [Fundación BBVA](https://www.fbbva.es/) and [Agencia Estatal de Investigación](https://www.aei.gob.es/) for funding the project.

_posts/2024-05-10-demo.md

@@ -13,8 +13,8 @@ tags:
 
 After some months of hard work from our development team, we are proud to release an online demostration of our weather routing algorithms. This demo, publicly available through our landing page, showcases some sample routes and the savings achievable by mathematical optimization.
 
-<img src="{{ page.featured_image }}" alt="El País" width="80%"/>
+<img src="{{ page.featured_image }}" alt="El País" width="100%"/>
 
-<a href="https://demo.weathernavigation.com/" class="button" style="background-color: #00376D; color: #FFFFFF; width: 100%;">You can try the demo here</a>
+<a href="https://demo.weathernavigation.com/" class="button">You can try the demo here</a>
 
 We want to thank [Fundación BBVA](https://www.fbbva.es/) and [Agencia Estatal de Investigación](https://www.aei.gob.es/) for making this project possible through their funding and support.

assets/css/custom.css

@@ -41,7 +41,7 @@ transform: scale(1.05); /* Slight zoom effect on hover */
 position: absolute;
 bottom: 0; /* Position the title at the bottom of the image */
 width: 100%; /* Use the full width of the parent */
-background-color: rgba(0, 0, 255, 0.6); /* Blue background with 60% opacity for readability */
+background-color: #00376D99; /* Blue background with 60% opacity for readability */
 color: white; /* Text color set to white for visibility against the blue */
 padding: 10px 0; /* Padding at top and bottom */
 margin: 0; /* Remove any default margins */
@@ -99,7 +99,7 @@ flex: 60%; /* Adjust the width as needed (e.g., 60% for content) */
 
 /* Button */
 a.button {
-  background-color: #006EC1;
+  background-color: #00376D;
   border: none;
   color: white;
   padding: 8px 16px;
@@ -112,9 +112,10 @@ a.button {
   border-radius: 12px; /* Rounded corners */
   transition-duration: 0.4s; /* Transition effect when hovering over the button */
   text-decoration: none;  /* Removes underline */
+  width: 100%; /* Ensures the button takes up the full width of the container */
 }
 
 a.button:hover {
-  background-color: #009EE5; /* Slightly lighter color for hover effect */
+  background-color: #74B0D4; /* Slightly lighter color for hover effect */
   text-decoration: none;  /* Ensures underline is removed during hover as well */
 }