feat: update brand guidelines with new logo assets and adjust references in documentation

docs/Miscellaneous/Brand-Guidelines.md

@@ -3,7 +3,7 @@ We’ve put together some guidelines for those anyone who wants to use our name
 ## The Logo
 
 <div align="center">
-  <img src="../../resources/romm/logo.svg" height="180px" width="180px" alt="RomM logo">
+  <img src="../../resources/romm/isotipo.svg" width="180px" height="auto" alt="romm isotipo">
   <br />
   <br />
 
@@ -15,27 +15,27 @@ The logo should always be used in its standard colors:
       <th>Hex Code</th>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/371f69.png" height="16px" width="16px" alt="#371f69"></td>
+      <td><img src="../../resources/romm/brand_guidelines/371f69.png" height="16px" width="16px" alt="#371f69"></td>
       <td>#371f69</td>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/553e98.png" height="16px" width="16px" alt="#553e98"></td>
+      <td><img src="../../resources/romm/brand_guidelines/553e98.png" height="16px" width="16px" alt="#553e98"></td>
       <td>#553e98</td>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/ede5f8.png" height="16px" width="16px" alt="#ede5f8"></td>
+      <td><img src="../../resources/romm/brand_guidelines/ede5f8.png" height="16px" width="16px" alt="#ede5f8"></td>
       <td>#ede5f8</td>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/bea4e1.png" height="16px" width="16px" alt="#bea4e1"></td>
+      <td><img src="../../resources/romm/brand_guidelines/bea4e1.png" height="16px" width="16px" alt="#bea4e1"></td>
       <td>#bea4e1</td>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/e6c7a7.png" height="16px" width="16px" alt="#e6c7a7"></td>
+      <td><img src="../../resources/romm/brand_guidelines/e6c7a7.png" height="16px" width="16px" alt="#e6c7a7"></td>
       <td>#e6c7a7</td>
     </tr>
     <tr>
-      <td><img src="../../resources/romm/e1a38d.png" height="16px" width="16px" alt="#e1a38d"></td>
+      <td><img src="../../resources/romm/brand_guidelines/e1a38d.png" height="16px" width="16px" alt="#e1a38d"></td>
       <td>#e1a38d</td>
     </tr>
   </table>

docs/index.md

@@ -5,8 +5,8 @@ hide:
     - toc
 ---
 
-<img src="./resources/romm/logo.svg" height="200px" width="200px" alt="romm isotipo">
-<img src="./resources/romm/logotype.png" height="250px" width="250px" alt="romm logotipo" style="margin-top: 10px;">
+<img src="./resources/romm/isotipo.svg" height="200px" width="200px" alt="romm isotipo">
+<img src="./resources/romm/logotipo.png" height="250px" width="250px" alt="romm logotipo" style="margin-top: 10px;">
 /// caption
 Welcome to the **RomM Project**, the premier self-hosted, open source ROM manager.
 ///

mkdocs.yml

@@ -8,8 +8,8 @@ repo_name: rommapp/romm
 edit_uri: "edit/main/docs/"
 theme:
     name: material
-    logo: resources/romm/logo.png
-    favicon: resources/romm/logo.png
+    logo: resources/romm/isotipo.png
+    favicon: resources/romm/isotipo.png
     features:
         - navigation.instant
         - navigation.instant.prefetch
@@ -48,10 +48,11 @@ plugins:
     - asciinema-player
     - social:
           cards_layout_options:
+              image: docs/resources/romm/social-preview.png
               font_family: Roboto
               background_color: "#371f69"
               color: "#ede5f8"
-              logo: docs/assets/images/romm-logo.png
+              logo: docs/resources/romm/isotipo.png
               title: RomM Docs
               description: Your beautiful, powerful, self-hosted rom manager
     - glightbox: