Implimented good scaling, made css more organized and efficient.

3 files changed, 49 insertions, 75 deletions

diff --git a/src/_footer.html b/src/_footer.html
index 744324e..326f86e 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,15 +1,15 @@
 	</article>
 
-	<nav class="footer centered">
-                <a href="https://github.com/Syndamia" target="_blank" class="link-tab" title="GitHub">GitHub</a>
+	<nav class="footer">
+        <a href="https://github.com/Syndamia" target="_blank" class="link-tab" title="GitHub">GitHub</a>
 		<a href="https://stackoverflow.com/users/12036073/syndamia" target="_blank" class="link-tab" title="StackOverflow">StackOverflow</a>
 		<a href="https://bg.linkedin.com/in/kamen-mladenov-18563b1a3?trk=people-guest_people_search-card" target="_blank" class="link-tab" title="Linkedin">LinkedIn</a>
-                ||
-                <a href="https://github.com/Syndamia/syndamiadotcom/blob/master/LICENSE" target="_blank" class="link-tab">Website License</a>
+        ||
+        <a href="https://github.com/Syndamia/syndamiadotcom/blob/master/LICENSE" target="_blank" class="link-tab">Website License</a>
 
 		<br>
 
-                <a href="https://github.com/Syndamia/syndamiadotcom" target="_blank" class="link-tab">Powered by:</a>
+        <a href="https://github.com/Syndamia/syndamiadotcom" target="_blank" class="link-tab">Powered by:</a>
 		<a href="https://www.romanzolotarev.com/ssg.html" target="_blank" class="link-tab">ssg by Roman Zolotarev</a>
 		<a href="https://kristaps.bsd.lv/lowdown/" target="_blank" class="link-tab">lowdown by Kristaps Dzonsons</a>
 	</nav>
diff --git a/src/_header.html b/src/_header.html
index 482662f..cbe228b 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -14,13 +14,19 @@
 </head>
 <body>
 	<nav class="header">
-		<a href="/tutorials.html" class="link-tab">Tutorials</a>
-		<a href="/projects.html" class="link-tab">Projects</a>
-		<a href="/blog.html" class="link-tab">Blog</a> ||
-		<a href="/index.html" class="link-tab">Home</a> ||
-		<a href="/about.html" class="link-tab">About</a>
-		<a href="/contact.html" class="link-tab">Contact</a>
-		<a href="/resume.html" class="link-tab">Resume</a>
+        <span class="no-space-wrap">
+		    <a href="/tutorials.html" class="link-tab">Tutorials</a>
+		    <a href="/projects.html" class="link-tab">Projects</a>
+		    <a href="/blog.html" class="link-tab">Blog</a>
+        </span>
+        <span class="no-space-wrap">
+            || <a href="/index.html" class="link-tab">Home</a> || 
+        </span>
+        <span class="no-space-wrap">
+		    <a href="/about.html" class="link-tab">About</a>
+		    <a href="/contact.html" class="link-tab">Contact</a>
+		    <a href="/resume.html" class="link-tab">Resume</a>
+        </span>
 	</nav>
 
 	<article>
diff --git a/src/styles.css b/src/styles.css
index aa84661..663729e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -8,89 +8,57 @@ body, td, th {
   line-height: 1.5em;
 }
 
-.centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.header {
-  min-width: 716px;
-  margin-top: 17px;
-  text-align: center;
-  font: 23px Arial;
-  border-bottom: 5px solid var(--link-tab-bg-color);
-  padding-bottom: 13px;
-}
-
-.link-tab {
-  font-weight: normal;
-  padding: 10px;
-  color: white;
-  background-color: var(--link-tab-bg-color);
-  text-decoration: none;
-}
-
-.link-tab:hover {
-  background-color: var(--link-tab-bg-hover-color);
-}
-
-.footer {
-  min-width: 716px;
-  text-align: center;
-  line-height: 49px;
-  border-top: 5px solid var(--link-tab-bg-color);
-  font-family: Arial;
-}
-
 img {
-  max-width: 100%;
+  max-width: 99%;
+  border: 1px solid black;
 }
 
 a {
   text-decoration: none;
   font-weight: bold;
-  color: #004080;
+  color: var(--link-tab-bg-hover-color);
 }
 
 article {
-  min-width: 716px;
-  margin: 0;
+  max-width: 40em;
   overflow: auto;
 }
 
-@media (min-width: 760px) {
-  article {
-    margin-left: 5%;
-    margin-right: 5%;
-  }
+.centered, article {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header, .footer {
+  text-align: center;
+  font-family: Arial;
+  line-height: 49px;
+}
+
+.header {
+  font-size: 23px;
+  border-bottom: 5px solid var(--link-tab-bg-color);
+  padding-bottom: 3px;
 }
 
-@media (min-width: 960px) {
-  article {
-    margin-left: 10%;
-    margin-right: 10%;
-  }
+.footer {
+  border-top: 5px solid var(--link-tab-bg-color);
+  padding-top: 3px;
 }
 
-@media (min-width: 1100px) {
-  article {
-    margin-left: 15%;
-    margin-right: 15%;
-  }
+.no-space-wrap, .link-tab {
+  white-space: nowrap;
 }
 
-@media (min-width: 1300px) {
-  article {
-    margin-left: 20%;
-    margin-right: 20%;
-  }
+.link-tab {
+  font-weight: normal;
+  padding: 10px;
+  color: white;
+  background-color: var(--link-tab-bg-color);
 }
 
-@media (min-width: 1560px) {
-  article {
-    margin-left: 25%;
-    margin-right: 25%;
-  }
+.link-tab:hover {
+  background-color: var(--link-tab-bg-hover-color);
 }
 
 @font-face {