Improve formatting in README (#6)

README.md

@@ -1,33 +1,48 @@
-# MaterialTube
+<p align="center">
-
+  <img src="src/svg/logo.svg" height="96"/>
-![Deploy site](https://github.com/Guusvanmeerveld/MaterialTube/actions/workflows/deploy.yml/badge.svg)
+</p>
-![CodeQL](https://github.com/Guusvanmeerveld/MaterialTube/actions/workflows/codeql-analysis.yml/badge.svg)
+
-
+<h1 align="center">MaterialTube</h1>
-![Docker pulls](https://shields.io/docker/pulls/guusvanmeerveld/materialtube)
+
-
+<p align="center">
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/Guusvanmeerveld/MaterialTube)
+  <img src="https://github.com/Guusvanmeerveld/MaterialTube/actions/workflows/deploy.yml/badge.svg" alt="Deploy Site" />
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Guusvanmeerveld/MaterialTube)
+  <img src="https://github.com/Guusvanmeerveld/MaterialTube/actions/workflows/codeql-analysis.yml/badge.svg" alt="CodeQL" />
-
+  <a href="https://hub.docker.com/r/guusvanmeerveld/materialtube">
-
+    <img src="https://shields.io/docker/pulls/guusvanmeerveld/materialtube" alt="Docker pulls" />
-MaterialTube is a simple client-side only web-client for Invidious servers. It supports using an Invidious account, but also allows you to store all of your data locally. It's main goal is to provide an even greater level of privacy and improve on the current Invidious UI.
+  </a>
-
+</p>
-Made using
+
-
+<p align="center">
-![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+  <a href="https://heroku.com/deploy?template=https://github.com/Guusvanmeerveld/MaterialTube">
-![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+    <img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku">
+  </a>
+  <a href="https://app.netlify.com/start/deploy?repository=https://github.com/Guusvanmeerveld/MaterialTube">
+    <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify">
+  </a>
+</p>
+
+<p align="center">
+  MaterialTube is a simple client-side only web-client for Invidious servers. It supports using an Invidious account, but also allows you to store all of your data locally. It's main goal is to provide an even greater level of privacy and improve on the current Invidious UI.
+</p>
+
+<p align="center">Made using</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="Typescript" />
+  <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React" />
+</p>
 
 ## Index
-- [MaterialTube](#materialtube)
+- [Index](#index)
-  - [Index](#index)
+- [(Current) Features](#current-features)
-  - [(Current) Features](#current-features)
+- [Configuration](#configuration)
-  - [Configuration](#configuration)
+- [Deploy](#deploy)
-  - [Deploy](#deploy)
+  - [Using Node.js](#using-nodejs)
-    - [Using Node.js](#using-nodejs)
+  - [Using Docker](#using-docker)
-    - [Using Docker](#using-docker)
+    - [Locally](#locally)
-      - [Locally](#locally)
+    - [Using Docker Hub](#using-docker-hub)
-      - [Using Docker Hub](#using-docker-hub)
+  - [Using Heroku](#using-heroku)
-    - [Using Heroku](#using-heroku)
+  - [Using Netlify](#using-netlify)
-    - [Using Netlify](#using-netlify)
 
 ## (Current) Features
 - Browse trending