Update CSS Styles to show FontAwesome 5

assets/css/main.css

@@ -1,4 +1,4 @@
-@import url(fontawesome-all.min.css);
+@import url(font-awesome.min.css);
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
 /*
 	Future Imperfect by HTML5 UP
@@ -76,7 +76,7 @@ html {
   box-sizing: inherit; }
 
 body {
-  background: #d8d8d8; }
+  background: #f4f4f4; }
   body.is-preload *, body.is-preload *:before, body.is-preload *:after {
     -moz-animation: none !important;
     -webkit-animation: none !important;
@@ -1163,7 +1163,7 @@ form {
       text-rendering: auto;
       line-height: 1;
       text-transform: none !important;
-      font-family: 'Font Awesome 5 Free';
+      font-family: 'FontAwesome';
       font-weight: 900; }
     form.search:before {
       color: #838383;
@@ -1235,7 +1235,7 @@ textarea {
     text-rendering: auto;
     line-height: 1;
     text-transform: none !important;
-    font-family: 'Font Awesome 5 Free';
+    font-family: 'FontAwesome';
     font-weight: 900; }
   .select-wrapper:before {
     color: rgba(160, 160, 160, 0.3);
@@ -1310,7 +1310,7 @@ input[type="radio"] {
       text-rendering: auto;
       line-height: 1;
       text-transform: none !important;
-      font-family: 'Font Awesome 5 Free';
+      font-family: 'FontAwesome';
       font-weight: 900; }
     input[type="checkbox"] + label:before,
     input[type="radio"] + label:before {
@@ -1370,7 +1370,7 @@ input[type="radio"] + label:before {
     text-rendering: auto;
     line-height: 1;
     text-transform: none !important;
-    font-family: 'Font Awesome 5 Free';
+    font-family: 'FontAwesome';
     font-weight: 400; }
   .icon > .label {
     display: none; }
@@ -1379,7 +1379,7 @@ input[type="radio"] + label:before {
   .icon.solid:before {
     font-weight: 900; }
   .icon.brands:before {
-    font-family: 'Font Awesome 5 Brands'; }
+    font-family: 'FontAwesome'; }
   .icon.suffix:before {
     float: right; }
 
@@ -1708,7 +1708,6 @@ ul.posts {
       -webkit-flex-grow: 1;
       -ms-flex-grow: 1;
       flex-grow: 1;
-      flex: 1;
       -ms-flex: 1;
       padding: 3.75em 3em 3.3em 3em; }
       .post > header .title h2 {
@@ -1784,7 +1783,7 @@ ul.posts {
         .post > footer .stats li .icon {
           border-bottom: 0; }
           .post > footer .stats li .icon:before {
-            color: rgba(160, 160, 160, 0.3);
+            color: rgba(43, 43, 43, 0.785);
             margin-right: 0.75em; }
   @media screen and (max-width: 980px) {
     .post {
@@ -1800,7 +1799,6 @@ ul.posts {
         padding: 3.75em 3em 1.25em 3em ;
         border-left: 0; }
         .post > header .title {
-          flex: 0 1 auto;
           -ms-flex: 0 1 auto;
           margin: 0 0 2em 0;
           padding: 0;
@@ -1948,21 +1946,23 @@ table {
       border-top: 0; }
 
 /* Portofolio */
-.portfolio_item .image {
+.portfolio_item {
-  overflow: hidden;
+  padding: 0.5em; }
-  width: 100%;
+  .portfolio_item .image {
-  border-radius: 10px; }
+    overflow: hidden;
-  .portfolio_item .image img {
+    width: 100%;
-    -moz-transition: -moz-transform 0.2s ease-out;
+    border-radius: 10px; }
-    -webkit-transition: -webkit-transform 0.2s ease-out;
+    .portfolio_item .image img {
-    -ms-transition: -ms-transform 0.2s ease-out;
+      -moz-transition: -moz-transform 0.2s ease-out;
-    transition: transform 0.2s ease-out;
+      -webkit-transition: -webkit-transform 0.2s ease-out;
-    width: 100%; }
+      -ms-transition: -ms-transform 0.2s ease-out;
-  .portfolio_item .image:hover img {
+      transition: transform 0.2s ease-out;
-    -moz-transform: scale(1.05);
+      width: 100%; }
-    -webkit-transform: scale(1.05);
+    .portfolio_item .image:hover img {
-    -ms-transform: scale(1.05);
+      -moz-transform: scale(1.05);
-    transform: scale(1.05); }
+      -webkit-transform: scale(1.05);
+      -ms-transform: scale(1.05);
+      transform: scale(1.05); }
 
 /* Banner */
 #banner {
@@ -2053,8 +2053,10 @@ table {
   font-size: inherit;
   letter-spacing: 0em;
   line-height: inherit;
-  margin-top: -1em;
+  margin-top: 1em;
   text-transform: initial; }
+#features header h3 {
+  margin-top: 0em; }
 
 /* Logo */
 #header .logo {
@@ -2097,7 +2099,7 @@ table {
       list-style: none;
       display: none;
       line-height: normal;
-      background-color: #e6e6e6;
+      background-color: #333333;
       box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important; }
       #header .dropdown li ul li a {
         font-family: "Raleway", Helvetica, sans-serif;
@@ -2134,7 +2136,7 @@ table {
       flex-wrap: nowrap;
       min-width: 15em;
       border: solid 1px rgba(160, 160, 160, 0.3);
-      background-color: #d8d8d8;
+      background-color: #f4f4f4;
       box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important; }
 @media screen and (max-width: 980px) {
   #header .dropdown {
@@ -2147,6 +2149,12 @@ table {
     margin: 0; } }
 
 /* Sidebar menu */
+#sidebarmenu {
+  display: none; }
+
+@media screen and (max-width: 980px) {
+  #sidebarmenu {
+    display: block; } }
 .menulink {
   margin: 0;
   padding: 0; }
@@ -2166,7 +2174,7 @@ ul.menulink > li a.tags {
 
 ul.menulink > li a:hover.tags {
   background-color: #ba2e5d;
-  color: #d8d8d8 !important; }
+  color: #f4f4f4 !important; }
 
 ul.menulink > li > ul,
 ul.menulink > li a span {
@@ -2242,6 +2250,7 @@ body {
   justify-content: space-between;
   background-color: #ffffff;
   border-bottom: solid 1px rgba(160, 160, 160, 0.3);
+  box-shadow: 0 5px 6px -6px #333333;
   height: 3.5em;
   left: 0;
   line-height: 3.5em;
@@ -2298,7 +2307,7 @@ body {
             text-rendering: auto;
             line-height: 1;
             text-transform: none !important;
-            font-family: 'Font Awesome 5 Free';
+            font-family: 'FontAwesome';
             font-weight: 900; }
           #header .main ul li > a:before {
             display: block;
@@ -2420,7 +2429,7 @@ body {
   position: relative;
   width: 4em; }
   #intro .logo:before {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' preserveAspectRatio='none' zoomAndPan='disable'%3E%3Cpolygon points='0,0 100,0 100,25 50,0 0,25' style='fill:%23d8d8d8' /%3E%3Cpolygon points='0,100 100,100 100,75 50,100 0,75'  style='fill:%23d8d8d8' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' preserveAspectRatio='none' zoomAndPan='disable'%3E%3Cpolygon points='0,0 100,0 100,25 50,0 0,25' style='fill:%23f4f4f4' /%3E%3Cpolygon points='0,100 100,100 100,75 50,100 0,75'  style='fill:%23f4f4f4' /%3E%3C/svg%3E");
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -2463,9 +2472,9 @@ body {
 
 /* Footer */
 #footer .icons {
-  color: #3c3b3b; }
+  color: #2e2e2e; }
 #footer .copyright {
-  color: #3c3b3b;
+  color: #2e2e2e;
   font-family: "Raleway", Helvetica, sans-serif;
   font-size: 0.5em;
   font-weight: 400;
@@ -2544,3 +2553,5 @@ body.single #footer {
   @media screen and (max-width: 736px) {
     #menu > * {
       padding: 1.5em; } }
+
+/*# sourceMappingURL=main.css.map */