fix: fixed typos, roadmap design improvement and some small fixes overall

assets/css/style.css

@@ -605,6 +605,80 @@ h3 {
 .roadmap {
   margin-left: 3rem;
   margin-right: 3rem;
+  margin-bottom: 3rem;
+  padding: 30px;
+  background-color: #000;
+  border-radius: 10px;
+  width: 100%;
+}
+
+.roadmap h3 {
+  margin-bottom: 25px;
+  color: #fff;
+  border-bottom: 2px solid var(--fosscord);
+}
+
+#roadmap_api > * input[type="checkbox"] {
+  visibility: hidden;
+  line-height: 15px;
+  margin-right: 15px;
+}
+
+#roadmap_api ul li {
+  font-weight: 700;
+  margin-bottom: 2px;
+}
+
+#roadmap_api ul li ul li {
+  font-weight: normal;
+}
+
+#roadmap_api ul li ul li a {
+  cursor: pointer;
+  transition: all 0.25s;
+  border: 1px solid var(--fosscord);
+  font-weight: 700;
+  border-radius: 1em;
+  color: var(--fosscord);
+  padding: 5px;
+  font-size: 12px;
+}
+
+#roadmap_api > * input[type="checkbox"]:checked::after {
+  content: "✔";
+  color: #00ff00;
+  border: 1px solid #00ff007e;
+  padding: 0 3px;
+  font-size: 20px;
+  position: relative;
+  visibility: visible !important;
+}
+
+#roadmap_api > * input[type="checkbox"]:not(:checked)::after {
+  content: "-";
+  color: #ff0000;
+  border: 1px solid #ff00007e;
+  padding: 0 6.5px;
+  font-size: 20px;
+  position: relative;
+  visibility: visible !important;
+}
+
+ul {
+  display: flex;
+  flex-flow: wrap column;
+  list-style-type: none;
+  list-style-position: inside;
+}
+
+li {
+  list-style-type: none;
+  list-style-position: inside;
+}
+
+ul::marker,
+li::marker {
+  display: none;
 }
 
 .roadmap_container {
@@ -782,9 +856,7 @@ h3 {
     flex-direction: column;
   }
   .roadmap {
-    margin: 0;
-    padding: 0;
-    padding-left: 0.5rem;
+    margin: 15px 0;
   }
   .navbar_right {
     flex-direction: column !important;

components/about.vue

@@ -30,13 +30,13 @@
           <div class="mt-1 mb-35 f-22 color-heading text-adaptive description">
             <ul>
               <li>
-                Because we benefit from the large user base of discord, thus more
-                users, making the switch easier for new users & keeping workflows
-                intact.
+                Because we benefit from the large user base of Discord, thus
+                more users, making the switch easier for new users & keeping
+                workflows intact.
               </li>
               <li>
-                No disadvantage for the users who use fosscord, so that they can
-                still communicate with all their peers who use discord.
+                No disadvantage for the users who use Fosscord, so that they can
+                still communicate with all their peers who use Discord.
               </li>
               <li>
                 Discord has already built a great and stable protocol (don't
@@ -84,7 +84,7 @@
               class="about_links"
               target="_blank"
               href="https://docs.fosscord.com/resources/"
-              >Fosscord contribution ressources</a
+              >Fosscord contribution resources</a
             >
           </div>
         </div>

components/callToAction.vue

@@ -1,51 +1,59 @@
 <template>
-	<div class="container px-xl-0 container-feature" id="contribute">
-		<div class="row" id="contribution_container">
-			<div class="col-lg-6 col-md-12">
-				<img src="../assets/images/sections/version_control.svg" class="img-fluid rounded-3" />
-			</div>
-			<div class="col-lg-6 col-md-10" id="contribute_text">
-				<h2 class="small">Contribute now!</h2>
-				<div class="mt-25 mb-35 f-22 color-heading text-adaptive description">
-					Currently, Fosscord is in development, with <span class="fg-fosscord">30</span> active members.
-					If Fosscord is interesting to you, we heavily recommend checking out any of the
-					<a href="/instances">community instances</a>,
-					the <a href="https://docs.fosscord.com">documentation</a> or the
-					<a href="https://github.com/fosscord">GitHub repositories</a>.
-					We would highly appreciate any and all support.
-				</div>
-				<a href="https://github.com/fosscord/fosscord/issues/10"
-					class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1" id="button_">Contribute</a>
-			</div>
-		</div>
-	</div>
+  <div class="container px-xl-0 container-feature" id="contribute">
+    <div class="row" id="contribution_container">
+      <div class="col-lg-6 col-md-12">
+        <img
+          src="../assets/images/sections/version_control.svg"
+          class="img-fluid rounded-3"
+        />
+      </div>
+      <div class="col-lg-6 col-md-10" id="contribute_text">
+        <h2 class="small">Contribute now!</h2>
+        <div class="mt-25 mb-35 f-22 color-heading text-adaptive description">
+          Currently, Fosscord is in development, with
+          <span class="fg-fosscord">30</span> active members. If Fosscord is
+          interesting to you, we heavily recommend checking out any of the
+          <a href="/instances">community instances</a>, the
+          <a href="https://docs.fosscord.com">documentation</a> or the
+          <a href="https://github.com/fosscord">GitHub repositories</a>. We
+          would highly appreciate any and all support.
+        </div>
+        <a
+          href="https://github.com/fosscord/fosscord/issues/10"
+          class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1"
+          id="button_"
+          >Contribute</a
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .container-feature {
-	margin: 7rem auto;
+  margin: 7rem auto;
 }
 
 #contribute_text {
-	padding-right: 9rem;
+  padding-right: 9rem;
 }
 
 @media screen and (max-width: 600px) {
-	#contribute_text {
-		padding-right: 0;
-	}
+  #contribute_text {
+    padding-right: 0;
+  }
 
-	.container-feature img {
-		margin-top: 2rem;
-	}
+  .container-feature img {
+    margin-top: 2rem;
+  }
 
-	#faq {
-		text-align: justify;
-	}
+  #faq {
+    text-align: justify;
+  }
 
-	#button-docs {
-		margin-bottom: 0.5rem;
-	}
+  #button-docs {
+    margin-bottom: 0.5rem;
+  }
 }
 
 /* .buttons {
@@ -54,17 +62,17 @@
 	} */
 
 #button-docs {
-	margin-right: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 ul {
-	line-height: 1.5;
-	margin-top: 20px;
-	margin-bottom: 20px;
+  line-height: 1.5;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
-ul>li {
-	margin-top: 10px;
-	margin-bottom: 10px;
+ul > li {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
-</style>
+</style>

components/fossfooter.vue

@@ -45,6 +45,24 @@
               />
             </svg>
           </a>
+          <a
+            href="https://github.com/fosscord/fosscord/"
+            target="_blank"
+            class="link color-dark f-32 mx-20 social_link"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="white"
+              class="bi bi-github icons"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+              />
+            </svg>
+          </a>
         </div>
       </div>
       <div class="footer_links">

components/instances.vue

@@ -10,13 +10,11 @@
         <a v-bind:href="instance.url">
           <img
             v-if="instance.name !== 'fosscord.com'"
-
             class="instance_img"
             v-bind:src="instance.image"
           />
           <img
             v-else
-
             class="instance_img"
             src="../assets/images/Fosscord-Icon-OfficialInstance.png"
           />
@@ -49,28 +47,28 @@
     <a
       href="https://github.com/fosscord/fosscord-community-instances/pulls"
       class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1"
-      >Add your own Instance</a
+      >Add your own instance</a
     >
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
-      instances: []
+      instances: [],
     };
   },
   async fetch() {
     let res = await fetch(
       "https://raw.githubusercontent.com/fosscord/fosscord-community-instances/main/instances.json"
     );
     res = await res.json();
-    this.instances = res.map(i => {
+    this.instances = res.map((i) => {
       if (!i.image)
         i.image =
           "https://raw.githubusercontent.com/fosscord/fosscord/master/assets-rebrand/png/Fosscord-Icon-NoImage.png";
       return i;
     });
-  }
+  },
 };
 </script>

components/roadmapapi.vue

@@ -1,17 +1,18 @@
 <!--this shizzle doesnt work frick nuxt and vue-->
 <!--language!-->
+<!--take the children out of the room-->
 
 <template>
   <div class="roadmap">
-    <h4>API:</h4>
+    <h3>API</h3>
     <div id="roadmap_api" v-html="$md.render(content)"></div>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
-      content: ""
+      content: "",
     };
   },
   async fetch() {
@@ -28,6 +29,6 @@ export default {
         /#(\d+)/g,
         '<a href="https://github.com/fosscord/fosscord-server/issues/$1">#$1</a>'
       );
-  }
+  },
 };
 </script>

components/roadmapclient.vue

@@ -2,15 +2,15 @@
 
 <template>
   <div class="roadmap">
-    <h4>Client:</h4>
+    <h3>Client</h3>
     <div id="roadmap_client" v-html="$md.render(content)"></div>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
-      content: ""
+      content: "",
     };
   },
   async fetch() {
@@ -20,13 +20,17 @@ export default {
     res = await res.json();
     let { body } = res;
 
-    this.content = body
-      .replace(/\[ \]/g, "<input type='checkbox' disabled/>")
-      .replace(/\[x\]/g, "<input type='checkbox' checked disabled/>")
-      .replace(
-        /#(\d+)/g,
-        '<a href="https://github.com/fosscord/fosscord-client/issues/$1">#$1</a>'
-      );
-  }
+    if (body) {
+      this.content = body
+        .replace(/\[ \]/g, "<input type='checkbox' disabled/>")
+        .replace(/\[x\]/g, "<input type='checkbox' checked disabled/>")
+        .replace(
+          /#(\d+)/g,
+          '<a href="https://github.com/fosscord/fosscord-client/issues/$1">#$1</a>'
+        );
+    } else {
+      this.content = "<p>We don't have any roadmap for the client yet.</p>";
+    }
+  },
 };
 </script>