From 6ae4dfcf213f87d1b31490492d47588dc730b7ac Mon Sep 17 00:00:00 2001
From: Stone-Red-Code <56473591+StoneRed5@users.noreply.github.com>
Date: Mon, 4 Jan 2021 01:58:04 +0100
Subject: [PATCH] Added about section

---
 index.html | 11 ++++++---
 nav.html   |  2 +-
 style.css  | 72 ++++++++++++++++++++++++++++++++++++++++++------------
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 5553adc..32a6ddb 100644
--- a/index.html
+++ b/index.html
@@ -37,13 +37,18 @@
                <a href="http://github.com/Stone-Red-Code"><img class="stats" src="https://github-readme-stats.vercel.app/api?username=Stone-Red-Code&show_icons=true&bg_color=40444B&theme=dark&hide_border=true&count_private=true"></a>
             </div>
             <div class="col d-flex justify-content-start">
-               <a href="http://github.com/Stone-Red-Code"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Stone-Red-Code&bg_color=40444B&theme=dark&hide_border=true)](https://github.com/anuraghazra/github-readme-stats"></a>
+               <a href="http://github.com/Stone-Red-Code"><img class="mostUsedLangs" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Stone-Red-Code&bg_color=40444B&theme=dark&hide_border=true)](https://github.com/anuraghazra/github-readme-stats"></a>
             </div>
             </div>
             <div class="row">
                 <div class="col">
                     <div class="jumbotron">
-                        <h2>Sources:</h2>
+                        <h2>About this site</h2>
+                        <p>This site is not finished and it's still being worked on.<br>
+                            Keep in mind, some things here are just placeholders and will be replaced or removed.
+                            On this page I will post all my current projects and updates.
+                        </p>
+                        <h4>Icons:</h4>
                         <ul style="list-style-type: none; padding: 0; margin: 0;">
                             <li><a href="https://icons8.de">https://icons8.de</a></li>
                         </ul>
@@ -57,7 +62,7 @@
 
         <footer class="page-footer font-small">
             <div class="row">
-                <div class="container-fluid ml-3 mr-3 p-3 d-flex align-items-center orange">
+                <div class="container-fluid ml-3 mr-3 p-3 d-flex align-items-center fg-theme">
                     <div class="col">
                         <div>Get in contact:</div>
                     </div>
diff --git a/nav.html b/nav.html
index 1bdf02f..faa7357 100644
--- a/nav.html
+++ b/nav.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-sm navbar-light sticky-top orange">
+<nav class="navbar navbar-expand-sm navbar-light sticky-top fg-theme">
     
      <a class="navbar-brand" href="http://github.com/Stone-Red-Code"><img class="rounded" src="http://github.com/Stone-Red-Code.png" height="45"></a>
 
diff --git a/style.css b/style.css
index 19e1271..f14c764 100644
--- a/style.css
+++ b/style.css
@@ -1,33 +1,37 @@
+
+:root
+{
+    --fg-theme: gray;
+}
+
 .header {
     background: url("Images/code.png");
     height: 100px;
-    background-size:auto;
-    background-position:top;
+    background-size: auto;
+    background-position: top;
 }
 
-.orange {
-    background-color:gray;
+.fg-theme {
+    background-color: var(--fg-theme);
 }
 
 body {
     background-color: #40444B;
-    
 }
 
 h1 {
     color: white;
-    font-family:Verdana, Geneva, Tahoma, sans-serif;
-    word-wrap:break-word;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    word-wrap: break-word;
 }
 
-h2
-{
-    word-wrap:break-word;
+h2 {
+    word-wrap: break-word;
 }
 
 h3 {
     color: white;
-    word-wrap:break-word;
+    word-wrap: break-word;
 }
 
 .contact>p {
@@ -40,15 +44,51 @@ h3 {
     color: black;
 }
 
-@media screen and (max-width: 768px) 
+
+
+a:link {
+    color: gray;
+    text-decoration: underline;
+}
+
+/* visited link */
+a:visited {
+    color: gray;
+}
+
+/* mouse over link */
+a:hover {
+    color: rgb(0, 0, 0);
+}
+
+/* selected link */
+a:active {
+    color: rgb(180, 180, 180);
+}
+
+.nav-link
 {
-    h2
-    {
+    text-decoration: var(--fg-theme);
+}
+
+@media screen and (max-width: 768px) {
+    h2 {
         font-size: 20px;
     }
+    h4 {
+        font-size: 18px;
+    }
+    .stats {
+        display: none;
+    }
+}
 
-    .stats
-    {
+@media screen and (max-width: 360px) 
+{
+    h1{
+        font-size: 30px;
+    }
+    .mostUsedLangs {
         display: none;
     }
 }
\ No newline at end of file