Added about section

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>

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>
 

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;
     }
 }