Comentarios añadidos (CSS)

projecte-final/assets/css/style.css

@@ -1,15 +1,20 @@
+/*Reset básico: Eliminacion del padding y evita que el tamaño crezca por máargenes internos*/
 *
 {
   padding: 0;
   box-sizing: border-box;
   list-style: none;
 }
+
+/*Estilo básico del cuerpo*/
 body
 {
   font-family: 'Manjari', sans-serif;
   background: linear-gradient(135deg, #0f172a, #1e293b);
   color: white;
 }
+
+/*Barra de navegacion fija. Efecto "glassmorphism"*/
 .navbar
 {
   position:fixed;
@@ -22,6 +27,7 @@ body
   color: white;
   z-index: 64;
 
+  /*Efecto cristal difuminado*/
   backdrop-filter: blur(12px) saturate(180%);
   -webkit-backdrop-filter: blur(12px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.2);
@@ -31,12 +37,15 @@ body
   justify-content: space-between;
   align-items: center;
 }
+
+/*Contenedor del logo*/
 .logoContainer
 {
   display: flex;
   justify-content: center;
 }
 
+/*Estilo del texto e icono del logo*/
 .logoContainer a
 {
   color: white;
@@ -45,6 +54,7 @@ body
   margin-right: 1rem;
   text-decoration: none;
 }
+/*Aumenta el tamaño del logo en pantallas más grandes*/
 @media (min-width: 768px){
   .logoContainer a
   {
@@ -52,6 +62,7 @@ body
   }
 }
 
+/*Lista de links del menú*/
 .navbarLinks
 {
   list-style: none;
@@ -59,6 +70,7 @@ body
   padding: 0;
   flex-grow: 1;
 }
+/*En pantallas grandes, la lista se alinea de manera horizontal*/
 @media (min-width: 768px){
   .navbarLinks
   {
@@ -68,11 +80,12 @@ body
   }
 }
 
-
+/*Espacio entre items del menú*/
 .navbarLinks li
 {
   margin-right: 0.5rem;
 }
+/*En pantallas grandes, los items se muestran en línea con más espacio*/
 @media (min-width: 768px) {
   .navbarLinks li
   {
@@ -81,18 +94,22 @@ body
   }
 }
 
+/*Estilos de enlaces del navbar*/
 .navbarLinks a
 {
   text-decoration: none;
   color: white;
 }
 
+/*Contenedor general centrado*/
 .container
 {
   max-width: 1200px;
   margin: 0 auto;
 }
 
+
+/*Estilos del footer. Estilo glassmorphism*/
 .footer
 {
   bottom: 1rem;
@@ -103,6 +120,8 @@ body
   z-index: 50;
   border-radius: 20px;
 
+  /*Efecto cristal difuminado*/
+
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -114,18 +133,21 @@ body
   align-items: center;
 }
 
+/*Fila principal del footer (flex)*/
 .footerRow
 {
   display: flex;
   flex-wrap: wrap;
 }
 
+/*Cada columna del footer*/
 .footerLinks
 {
   width: 25%;
   padding: 0 15px;
 }
 
+/*Titulos de los bloques del footer*/
 .footerLinks h4
 {
   font-size: 20px;
@@ -137,6 +159,7 @@ body
   display: inline-block;
 }
 
+/*Enlaces dentro de las columnas del footer*/
 .footerLinks ul li a
 {
   font-size: 18px;
@@ -147,12 +170,14 @@ body
   transition: all .3s ease;
 }
 
+/*Hover del footer*/
 .footerLinks ul li a:hover
 {
   color:#ffffff;
   padding-left: 6px;
 }
 
+/*Iconos redondos de redes sociales*/
 .socialLinks a
 {
   display: inline-block;
@@ -171,7 +196,7 @@ body
 {
   background-color: #00C3FF
 }
-
+/*Footer responsive para moviles*/
 @media(max-width: 991px) {
   .footerRow
   {
@@ -184,6 +209,8 @@ body
   }
 }
 
+/*Zona de Creative Commons*/
+
 .creativeCommons
 {
   width: 100%;
@@ -219,6 +246,7 @@ body
   margin-left: 0.2em;
 }
 
+/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
 
 .content {
   padding-top: 7rem;