Docs: Try to apply style for shields

Author: BornToBeRoot

Website/docs/introduction.md Website/docs/introduction.mdxWebsite/docs/introduction.md renamed to Website/docs/introduction.mdx

@@ -18,42 +18,42 @@ Connect and manage remote systems with Remote Desktop, PowerShell, PuTTY, TigerV
 
 ![NETworkManager Preview](/img/preview.gif)
 
-<div class="shieldsContainer">
+<div className={`${styles.shieldsContainer}`}>
   <p>
-    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
       <img alt="All releases" src="https://img.shields.io/github/downloads/BornToBeroot/NETworkManager/total.svg?style=for-the-badge&logo=github" />
     </a>    
-    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases/latest" target="_blank">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeroot/NETworkManager/releases/latest" target="_blank">
       <img alt="Latest release" src="https://img.shields.io/github/downloads/BornToBeroot/NETworkManager/latest/total.svg?style=for-the-badge&logo=github" />
     </a>
-    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
       <img alt="Latest pre-release" src="https://img.shields.io/github/downloads-pre/BornToBeroot/NETworkManager/latest/total.svg?label=downloads%40pre-release&style=for-the-badge&logo=github" />
     </a>
   </p>
   <p>
-    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/stargazers" target="_blank">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeroot/NETworkManager/stargazers" target="_blank">
       <img alt="GitHub stars" src="https://img.shields.io/github/stars/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>    
-    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/network" target="_blank">       
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeroot/NETworkManager/network" target="_blank">       
       <img alt="GitHub forks" src="https://img.shields.io/github/forks/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>
   </p>
   <p> 
-    <a class="shieldsLink" href="https://ci.appveyor.com/project/BornToBeRoot/NETworkManager/branch/main">
+    <a className={`${styles.shields}`} href="https://ci.appveyor.com/project/BornToBeRoot/NETworkManager/branch/main">
       <img alt="AppVeyor" src="https://img.shields.io/appveyor/ci/BornToBeRoot/NETworkManager/main.svg?style=for-the-badge&logo=appveyor&&label=main" />
     </a>   
-    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/blob/main/LICENSE">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeRoot/NETworkManager/blob/main/LICENSE">
       <img alt="AppVeyor" src="https://img.shields.io/github/license/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>     
   </p> 
   <p> 
-    <a class="shieldsLink" href="https://transifex.com/BornToBeRoot/NETworkManager/">
+    <a className={`${styles.shields}`} href="https://transifex.com/BornToBeRoot/NETworkManager/">
       <img alt="Transifex" src="https://img.shields.io/badge/transifex-translate-green.svg?style=for-the-badge" />
     </a>   
-    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Feature-Request&template=Feature_request.md">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Feature-Request&template=Feature_request.md">
       <img alt="Feature request" src="https://img.shields.io/badge/github-feature_request-green.svg?style=for-the-badge&logo=github" />
     </a>       
-    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Issue&template=Bug_report.md">
+    <a className={`${styles.shields}`} href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Issue&template=Bug_report.md">
       <img alt="Bug report" src="https://img.shields.io/badge/github-bug_report-red.svg?style=for-the-badge&logo=github" />
     </a>     
   </p> 

Website/docs/styles.module.css

@@ -0,0 +1,8 @@
+.shieldsContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.shields {
+  margin: 0rem 0.25rem;  
+}

Website/src/pages/index.module.css Website/src/pages/styles.module.cssWebsite/src/pages/index.module.css renamed to Website/src/pages/styles.module.css

@@ -124,15 +124,6 @@ table {
   font-size: 24px;
 }
 
-.shieldsContainer {
-  display: flex;
-  justify-content: center;
-}
-
-.shieldsLink {
-  margin: 0rem 2.5rem;
-}
-
 @media only screen and (max-width: 768px) {
   .hero {
     padding-left: 20px;