Merge branch 'master' into marijn-chat

website/styles/footer.css

@@ -0,0 +1,12 @@
+footer {
+    width: calc(100% - 256px);
+    margin-left: 256px;
+
+    background-color: rgba(0,0,0,0.4);
+}
+
+footer p {
+    padding: 5px;
+
+    font-size: 14px;
+}

website/styles/header.css

@@ -13,10 +13,12 @@ header {
 }
 
 
-#header-logo img {
+#header-logo, #header-logo img {
     height: 80px;
 
     vertical-align: middle;
+    line-height: 80px;
+    padding-left: 5px;
 }
 
 #header-search {
@@ -43,6 +45,12 @@ header div {
     display: inline-block;
 }
 
+#open-chat {
+    font-size: 32px;
+    line-height: 80px;
+    margin-right: 50px;
+}
+
 .profile-menu {
     font-size: 21px;
 }
@@ -52,3 +60,16 @@ header div {
     height: 64px;
     width: 64px;
 }
+
+#own-profile-picture, #profile-menu-popup span {
+    cursor: pointer;
+}
+
+#profile-menu-popup {
+    padding: 5px;
+
+    background: white;
+    color: #666;
+
+    border-radius: 3px;
+}

website/styles/main.css

@@ -13,15 +13,31 @@ Website:        myhyvesbookplus.tk
     vertical-align: middle;
 }
 
+.group-picture {
+    border-radius: 5px;
+    height: 42px;
+    width: 42px;
+    object-fit: cover;
+    vertical-align: middle;
+}
+
+html {
+    height: 100%;
+}
+
 body {
+    height: 100%;
+
     background-color: #B78996;
     color: #333;
+
     font-family: Arial, sans-serif;
 }
 
 .content {
     margin-top: 80px;
     margin-left: 256px;
+    min-height: 100%;
 }
 
 ::selection {

website/styles/menu.css

@@ -1,5 +1,6 @@
 .menu {
     position: fixed;
+    z-index: 50;
 
     left: 0;
     top: 80px;
@@ -14,6 +15,12 @@
     padding: 10px;
 }
 
-.friend-item {
+.nav-list li {
     padding: 5px 20px;
 }
+
+.more-item {
+    padding: 5px 20px;
+    color: #666;
+    font-size: 14px;
+}