Develop (#11)

* Revert change for img to classes due to Firefox bug for css content

* set colors for request

* Fix iframe for webgl responsive

* grammar en json

* fix request.html empty if no args

* add favico

* Rework header/footer behavior to be more dynamic

* Support v0 github-api page

* Fix for GithubPage

* load default navigator.language

* update bio

* Keep changes for lang

* Add Github API and rework generation of content

css/project.css

@@ -37,7 +37,7 @@
 }
 
 .grid figure figcaption {
-	padding-top: 3.2em;
+	padding-top: 3.21em;
     font-family: 'Raleway', Arial, sans-serif;
 	color: #fff;
 	font-size: 1em;

css/request.css

@@ -12,6 +12,9 @@
     transition: all 0.4s ease-out;
 }
 
+.navbar{
+    margin-bottom: 0px;
+}
 /* Body */
 .home-section{
     height:0px;
@@ -24,6 +27,7 @@
 .request-center {
     text-align: center;
 }
+
 .request-logo {
     font-size: 80px;
     color:var(--subText-color);  
@@ -41,16 +45,16 @@
     color:var(--primary-color);
 }
 
-/* Video */
-.video-container {
+/* Iframe */
+.iframe-container {
     position: relative;
     padding-bottom: 56.25%; 
     overflow: hidden;
 }
 
-.video-container iframe,
-.video-container object,
-.video-container embed {
+.iframe-container iframe,
+.iframe-container object,
+.iframe-container embed {
     position: absolute;
     left: 0;
     height: 90%;

css/style.css

@@ -23,8 +23,8 @@
 */
 
 /* 1. Import */
-@import url("../plugin/bootstrap/css/bootstrap.min.css");
-@import url("../plugin/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css");
+@import url('../plugin/bootstrap/3.3.7/css/bootstrap.min.css');
+@import url('../plugin/fontawesome/5.0.13/web-fonts-with-css/css/fontawesome-all.min.css');
 
 /* 2. Global Style */
 body {
@@ -550,7 +550,7 @@ body.loaded #preloader{
 
 .bio-section {
 	overflow: hidden;
-    background-color:var(--bio-bkg-color);
+    background-color:var(--bkg-color-secondary);
 }
 
 .bio-section img {
@@ -665,6 +665,8 @@ ul.portfolio li.active:hover {
 }
 
 .form-control {
+    background-color: var(--bkg-color-secondary);
+    color: var(--text-color);
 	border: 2px solid transparent;
 	height: 50px;
 	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px;
@@ -810,8 +812,8 @@ ul.portfolio li.active:hover {
 }
 
 /* 10. Theme */
-.primary-color{
-    color: var(--primary-color);
+tr.odd{
+    background-color: var(--bkg-color-secondary) !important
 }
 
 .primary-color{
@@ -823,16 +825,16 @@ ul.portfolio li.active:hover {
         --primary-color: #24b662; 
     }
     body {
-      --text-color: #eee;
-      --bkg-color: #0a0a0a;
-      --bio-bkg-color: #050505;
+      --text-color: #F2F0ED;
+      --bkg-color: #0f0f0f;
+      --bkg-color-secondary: #1f1e1e;
       --subText-color: #eee;
       --button-color:#000;
     }
     body.light-theme {
       --text-color: #222;
       --bkg-color: #fff;
-      --bio-bkg-color: #F9F9F9;
+      --bkg-color-secondary: #F9F9F9;
       --subText-color:#333;
       --button-color:#fff;
     }
@@ -841,8 +843,8 @@ ul.portfolio li.active:hover {
 /* 11 .Responsive */
 @media only screen and (min-width:1680px) and (max-width: 1922px) {
     .bio-section p {
-           line-height: 30px;
-           font-size: 18px;
+           line-height: 29px;
+           font-size: 16px;
     }
 }
 
@@ -856,8 +858,8 @@ ul.portfolio li.active:hover {
 @media only screen and (min-width:991px) and (max-width: 1366px) {
      .bio-section p {
         padding-top: 10px;
-            line-height: 18px;
-            font-size: 14px;
+        line-height: 17px;
+        font-size: 13px;
      }
 }
 
@@ -1260,4 +1262,238 @@ ul.portfolio li.active:hover {
 
 .margin-right-200 {
 	margin-right: 200px !important;
+}
+
+/* Padding */
+.padding-0 {
+	padding: 0px !important;
+}
+
+/* Padding Top */
+.padding-top-0 {
+	padding-top: 0px !important;
+}
+
+.padding-top-10 {
+	padding-top: 10px !important;
+}
+
+.padding-top-20 {
+	padding-top: 20px !important;
+}
+
+.padding-top-30 {
+	padding-top: 30px !important;
+}
+
+.padding-top-40 {
+	padding-top: 40px !important;
+}
+
+.padding-top-50 {
+	padding-top: 50px !important;
+}
+
+.padding-top-60 {
+	padding-top: 60px !important;
+}
+
+.padding-top-70 {
+	padding-top: 70px !important;
+}
+
+.padding-top-80 {
+	padding-top: 80px !important;
+}
+
+.padding-top-90 {
+	padding-top: 90px !important;
+}
+
+.padding-top-100 {
+	padding-top: 100px !important;
+}
+
+.padding-top-120 {
+	padding-top: 120px !important;
+}
+
+.padding-top-150 {
+	padding-top: 150px !important;
+}
+
+.padding-top-200 {
+	padding-top: 200px !important;
+}
+
+
+/* Padding Bottom */
+.padding-bottom-0 {
+	padding-bottom: 0px !important;
+}
+
+.padding-bottom-10 {
+	padding-bottom: 10px !important;
+}
+
+.padding-bottom-20 {
+	padding-bottom: 20px !important;
+}
+
+.padding-bottom-30 {
+	padding-bottom: 30px !important;
+}
+
+.padding-bottom-40 {
+	padding-bottom: 40px !important;
+}
+
+.padding-bottom-50 {
+	padding-bottom: 50px !important;
+}
+
+.padding-bottom-60 {
+	padding-bottom: 60px !important;
+}
+
+.padding-bottom-70 {
+	padding-bottom: 70px !important;
+}
+
+.padding-bottom-80 {
+	padding-bottom: 80px !important;
+}
+
+.padding-bottom-90 {
+	padding-bottom: 90px !important;
+}
+
+.padding-bottom-100 {
+	padding-bottom: 100px !important;
+}
+
+.padding-bottom-120 {
+	padding-bottom: 120px !important;
+}
+
+.padding-bottom-150 {
+	padding-bottom: 150px !important;
+}
+
+.padding-bottom-200 {
+	padding-bottom: 200px !important;
+}
+
+/* Padding Right */
+.padding-right-0 {
+	padding-right: 0px !important;
+}
+
+.padding-right-10 {
+	padding-right: 10px !important;
+}
+
+.padding-right-20 {
+	padding-right: 20px !important;
+}
+
+.padding-right-30 {
+	padding-right: 30px !important;
+}
+
+.padding-right-40 {
+	padding-right: 40px !important;
+}
+
+.padding-right-50 {
+	padding-right: 50px !important;
+}
+
+.padding-right-60 {
+	padding-right: 60px !important;
+}
+
+.padding-right-70 {
+	padding-right: 70px !important;
+}
+
+.padding-right-80 {
+	padding-right: 80px !important;
+}
+
+.padding-right-90 {
+	padding-right: 90px !important;
+}
+
+.padding-right-100 {
+	padding-right: 100px !important;
+}
+
+.padding-right-120 {
+	padding-right: 120px !important;
+}
+
+.padding-right-150 {
+	padding-right: 150px !important;
+}
+
+.padding-right-200 {
+	padding-right: 200px !important;
+}
+
+/* Padding Left */
+.padding-left-0 {
+	padding-left: 0px !important;
+}
+
+.padding-left-10 {
+	padding-left: 10px !important;
+}
+
+.padding-left-20 {
+	padding-left: 20px !important;
+}
+
+.padding-left-30 {
+	padding-left: 30px !important;
+}
+
+.padding-left-40 {
+	padding-left: 40px !important;
+}
+
+.padding-left-50 {
+	padding-left: 50px !important;
+}
+
+.padding-left-60 {
+	padding-left: 60px !important;
+}
+
+.padding-left-70 {
+	padding-left: 70px !important;
+}
+
+.padding-left-80 {
+	padding-left: 80px !important;
+}
+
+.padding-left-90 {
+	padding-left: 90px !important;
+}
+
+.padding-left-100 {
+	padding-left: 100px !important;
+}
+
+.padding-left-120 {
+	padding-left: 120px !important;
+}
+
+.padding-left-150 {
+	padding-left: 150px !important;
+}
+
+.padding-left-200 {
+	padding-left: 200px !important;
 }