From c0b6c5eba831ab57bcbd62e05bf6f8f8b0b4c3d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hendrik=20Bl=C3=B6=C3=9F?= <hendrik.bloess@googlemail.com>
Date: Thu, 8 Jun 2017 17:01:11 +0200
Subject: [PATCH] CSS Beautification

- fixed URL
---
 _config.yml  |   2 +-
 css/main.css | 282 ++++++++++++++++++++++++++++++---------------------
 2 files changed, 166 insertions(+), 118 deletions(-)

diff --git a/_config.yml b/_config.yml
index 35e97b88..73a46daf 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,7 +3,7 @@
 
 # NB! Set your site's url, otherwise stuff will break :)
 
-url: "https://hendrikbl.github.io"
+url: "https://hendrikbl.github.io/Vocaluxe"
 
 # If you're hosting your site at a Project repository on GitHub pages
 # (https://yourusername.github.io/repository-name)
diff --git a/css/main.css b/css/main.css
index 8a231f4b..6670a5df 100644
--- a/css/main.css
+++ b/css/main.css
@@ -18,32 +18,38 @@ body {
 }
 
 a {
-  color: #2576E5;
+  color: #428bca;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
 }
+
 a:hover {
-  color: #e76c3c;
+  color: #E74C3C;
 }
+
 .row {
   padding: 50px 0px;
 }
+
 .btn {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
 }
-.btn-lg{
+
+.btn-lg {
   border-radius: 25px;
 }
+
 .btn-common {
   background: transparent;
   color: #fff;
-  border: 1px solid white;
+  border: 1px solid #fff;
 }
+
 .btn-common:hover {
   border-color: #428bca;
   color: #428bca;
@@ -61,17 +67,19 @@ a:hover {
   font-weight: 100;
   padding-bottom: 25px;
   position: relative;
-  color: white;
+  color: #fff;
 }
 
+
 /**Navigation**/
+
 .navbar {
   margin-bottom: 0;
-  color: white;
+  color: #fff;
 }
 
 .navbar li {
-  color: white;
+  color: #fff;
 }
 
 .navbar-default {
@@ -84,18 +92,20 @@ a:hover {
   transition: all 0.2s linear;
 }
 
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
+.navbar-default .navbar-nav>.active>a,
+.navbar-default .navbar-nav>.active>a:hover,
+.navbar-default .navbar-nav>.active>a:focus {
   background: none;
   color: #fff;
 }
+
 .navbar-default .navbar-nav li a,
 .navbar-default .navbar-nav li a:hover {
   color: #fff;
   font-weight: 100;
 }
-.navbar-default .navbar-nav > .active,
+
+.navbar-default .navbar-nav>.active,
 .navbar-default .navbar-nav li:hover {
   border-bottom: 3px solid #428bca;
   color: #fff;
@@ -110,7 +120,7 @@ a:hover {
   transition: all 0.2s linear;
 }
 
-.navbar-default .faviconPng{
+.navbar-default .faviconPng {
   height: 16pt;
   width: 16pt;
   -webkit-transition: all 0.2s linear;
@@ -122,16 +132,19 @@ a:hover {
 .navbar-default .navbar-brand:hover {
   color: #eee;
 }
+
 .navbar-default .navbar-toggle .icon-bar {
   background: #fff;
 }
+
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
   background: transparent;
 }
+
 .affix.navbar-default {
   background: #2C3E50;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   padding-top: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
@@ -148,7 +161,7 @@ a:hover {
   transition: all 0.2s linear;
 }
 
-.affix.navbar-default .navbar-brand .faviconPng{
+.affix.navbar-default .navbar-brand .faviconPng {
   height: 16pt;
   width: 16pt;
   -webkit-transition: all 0.2s linear;
@@ -157,16 +170,14 @@ a:hover {
   transition: all 0.2s linear;
 }
 
-@media (min-width: 767px){
+@media (min-width: 767px) {
   .navbar-default {
     padding-top: 30px;
   }
-
   .navbar-default .navbar-brand {
     font-size: 25px;
   }
-
-  .navbar-default .faviconPng{
+  .navbar-default .faviconPng {
     height: 25pt;
     width: 25pt;
     -webkit-transition: all 0.2s linear;
@@ -176,7 +187,9 @@ a:hover {
   }
 }
 
+
 /**Hero area**/
+
 #hero-area {
   background: #2C3E50;
   color: #fff;
@@ -194,11 +207,10 @@ a:hover {
   padding-bottom: 100px;
 }
 
-@media (max-width: 992px){
+@media (max-width: 992px) {
   #hero-area img {
     display: none;
   }
-
   #hero-area .row {
     padding-top: 75px;
     padding-bottom: 50px;
@@ -208,11 +220,13 @@ a:hover {
 #hero-area .btn {
   margin-right: 20px;
 }
+
 #hero-area .title {
   font-size: 60pt;
   text-align: left;
   margin-bottom: 5px;
 }
+
 #hero-area .subtitle {
   font-size: 32pt;
   font-weight: 100;
@@ -221,31 +235,38 @@ a:hover {
   margin-bottom: 0px;
   padding-bottom: 0px;
 }
+
 #hero-area p {
   font-size: 14pt;
   font-weight: 100;
   padding: 25px 0;
 }
 
-
 #services h3 {
   margin-top: 0;
   font-size: 28px;
   color: #2576E5;
 }
 
+
 /*Portfolio*/
+
 #portfolio {
   background: #EEEEEE;
 }
+
+
 /*Portfolio Overlay */
+
 .portfolio-item {
   position: relative;
   margin-bottom: 15px;
 }
+
 .portfolio-item img {
   width: 100%;
 }
+
 .portfolio-item .overlay {
   position: absolute;
   top: 0;
@@ -255,6 +276,7 @@ a:hover {
   background-color: rgba(0, 0, 0, 0.8);
   display: none;
 }
+
 .portfolio-item:hover .overlay {
   position: absolute;
   top: 0;
@@ -264,6 +286,7 @@ a:hover {
   background-color: rgba(0, 0, 0, 0.8);
   display: block;
 }
+
 .portfolio-item .icons .preview {
   position: absolute;
   left: 40%;
@@ -276,12 +299,15 @@ a:hover {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
+
 .portfolio-item .icons .preview i {
   color: #2576E5;
 }
+
 #clients {
   background: #fff;
 }
+
 #about {
   background: #2C3E50;
   color: #fff;
@@ -290,18 +316,23 @@ a:hover {
 #contact {
   background: #f1f1f1;
 }
+
 #contact ::-webkit-input-placeholder {
   color: #ecf0f1;
 }
+
 #contact :-moz-placeholder {
   color: #ecf0f1;
 }
+
 #contact ::-moz-placeholder {
   color: #ecf0f1;
 }
+
 #contact :-ms-input-placeholder {
   color: #ecf0f1;
 }
+
 #contact .social i {
   color: #fff;
   padding: 10px;
@@ -311,39 +342,49 @@ a:hover {
   vertical-align: middle;
   background: #34495e;
 }
+
 #contact .social .social-links a:hover {
   color: #fff;
 }
+
 #contact .social .fa-facebook:hover {
   background: #3b5998;
   color: #fff;
 }
+
 #contact .social .fa-twitter:hover {
   background: #00CAFB;
   color: #fff;
 }
+
 #contact .social .fa-google-plus:hover {
   background: #D23A1D;
   color: #fff;
 }
+
 #contact .social .fa-linkedin:hover {
   background: #007bb6;
   color: #fff;
 }
+
 #contact .social .fa-dribbble:hover {
   background: #ea4c89;
   color: #fff;
 }
+
 #contact .social .fa-github:hover {
   background: #171515;
   color: #fff;
 }
+
 #contact .contact-info {
   margin: 40px 0;
 }
+
 #contact .contact-info p {
   font-size: 20px;
 }
+
 #contact .contact-form .form-control {
   box-shadow: none;
   font-size: 17px;
@@ -352,7 +393,9 @@ a:hover {
   border: none;
 }
 
+
 /*Scroll Top*/
+
 .to-top i {
   padding: 10px 15px;
   margin: 10px;
@@ -360,6 +403,7 @@ a:hover {
   color: #34495e;
   border: 2px solid #34495e;
 }
+
 .to-top i:hover {
   background: #34495e;
   color: #fff;
@@ -373,66 +417,68 @@ a:hover {
   background: #F1F1F1;
   color: #333;
 }
+
 #copyright a {
   color: #333;
 }
 
+
 /*Feature Section*/
 
 .feature {
-	padding: 0px;
-	position: relative;
-	overflow: hidden;
-	height: 250px;
-	background-color: white;
-	margin-bottom: 30px;
+  padding: 0px;
+  position: relative;
+  overflow: hidden;
+  height: 250px;
+  background-color: #fff;
+  margin-bottom: 30px;
   border-radius: 7px;
 }
 
 .feature:hover .caption {
-	opacity: 1;
-	transform: translateY(-250px);
-	-webkit-transform: translateY(-250px);
-	-moz-transform: translateY(-250px);
-	-ms-transform: translateY(-250px);
-	-o-transform: translateY(-250px);
+  opacity: 1;
+  transform: translateY(-250px);
+  -webkit-transform: translateY(-250px);
+  -moz-transform: translateY(-250px);
+  -ms-transform: translateY(-250px);
+  -o-transform: translateY(-250px);
 }
 
-.feature img{
-	z-index: 4;
+.feature img {
+  z-index: 4;
   height: 100px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
 }
 
-.feature .caption{
-	position: absolute;
-	top: 242px;
-	-webkit-transition:all 0.4s ease-in-out;
-	-moz-transition:all 0.4s ease-in-out;
-	-o-transition:all 0.4s ease-in-out;
-	-ms-transition:all 0.4s ease-in-out;
-	transition:all 0.4s ease-in-out;
-	width: 100%;
+.feature .caption {
+  position: absolute;
+  top: 242px;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  width: 100%;
 }
 
-.feature .blur{
-	background-color: #428bca;
-	height: 300px;
-	z-index: 5;
-	position: absolute;
-	width: 100%;
+.feature .blur {
+  background-color: #428bca;
+  height: 300px;
+  z-index: 5;
+  position: absolute;
+  width: 100%;
 }
 
-.feature .caption-text{
-	z-index: 10;
-  color: white;
-	position: absolute;
-	height: 300px;
-	text-align: center;
-	top:-20px;
-	width: 100%;
+.feature .caption-text {
+  z-index: 10;
+  color: #fff;
+  position: absolute;
+  height: 300px;
+  text-align: center;
+  top: -20px;
+  width: 100%;
   font-size: 12pt;
 }
 
@@ -456,8 +502,8 @@ a:hover {
 .feature .caption-text h4 {
   font-size: 20pt;
   color: #2C3E50;
-	padding: 0px;
-	margin-top: -40px;
+  padding: 0px;
+  margin-top: -40px;
   -webkit-transition: all 0.27s ease-in-out;
   -moz-transition: all 0.27s ease-in-out;
   -o-transition: all 0.27s ease-in-out;
@@ -465,8 +511,8 @@ a:hover {
 }
 
 .feature:hover .caption-text h4 {
-	margin-top: 40px;
-  color: white;
+  margin-top: 40px;
+  color: #fff;
   -webkit-transition: all 0.27s ease-in-out;
   -moz-transition: all 0.27s ease-in-out;
   -o-transition: all 0.27s ease-in-out;
@@ -474,17 +520,20 @@ a:hover {
 }
 
 .contribute-icon {
-	font-size:65px;
-	margin-top: 15px;
-	margin-bottom: 15px;
+  font-size: 65px;
+  margin-top: 15px;
+  margin-bottom: 15px;
 }
 
 .content-section {
-	text-align:center;
+  text-align: center;
 }
 
+
 /*Download Section*/
-#download, #help {
+
+#download,
+#help {
   background: #EEEEEE;
 }
 
@@ -492,7 +541,7 @@ a:hover {
   padding: 25px;
   margin: 25px;
   border-radius: 10px;
-  color: white;
+  color: #fff;
 }
 
 .card h2 {
@@ -531,7 +580,7 @@ a:hover {
 }
 
 .release-details {
-	text-align: center;
+  text-align: center;
 }
 
 .card .release-date {
@@ -541,9 +590,9 @@ a:hover {
 }
 
 .btnDownload {
-    margin: 5px;
-    background: rgba(255, 255, 255, 0.2);
-    border: none;
+  margin: 5px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
 }
 
 .btnDownload:hover {
@@ -551,78 +600,77 @@ a:hover {
 }
 
 .btnDownloadIcon {
-    /*flex: 0 0 auto;*/
-    padding-right: 5px;
-    /*font-size: 1em;*/
+  /*flex: 0 0 auto;*/
+  padding-right: 5px;
+  /*font-size: 1em;*/
 }
 
 .release-section {
-    display:flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-around;
 }
 
-@media (min-width: 992px){
-    .release-section {
-        flex-direction: row;
-    }
-
-    .card {
-      max-width: 27%;
-      min-width: 27%;
-    }
+@media (min-width: 992px) {
+  .release-section {
+    flex-direction: row;
+  }
+  .card {
+    max-width: 27%;
+    min-width: 27%;
+  }
 }
 
 .flex-box-col {
-    display:flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .flex-box-row {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .flex00a {
-    flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .flex11a {
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .flex11100 {
-    flex: 1 1 100%;
+  flex: 1 1 100%;
 }
 
 .no-release-text {
-    margin-top: 40px;
+  margin-top: 40px;
 }
 
 .stamp {
-    position: absolute;
-    display: inline-block;
-    color: red;
-    padding: 15px;
-    background-color: white;
-    box-shadow: inset 0px 0px 0px 10px red;
-    transform: rotate(30deg);
-    margin-top: 20%;
-    margin-left: 20%;
-    font-size: 25px;
-    width: 65%;
+  position: absolute;
+  display: inline-block;
+  color: red;
+  padding: 15px;
+  background-color: #fff;
+  box-shadow: inset 0px 0px 0px 10px red;
+  transform: rotate(30deg);
+  margin-top: 20%;
+  margin-left: 20%;
+  font-size: 25px;
+  width: 65%;
 }
 
 .stamp:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url("../img/stamp.jpg");
-    mix-blend-mode: lighten;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("../img/stamp.jpg");
+  mix-blend-mode: lighten;
 }