Adding credits

style/_fa.scss

@@ -59,6 +59,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); }
 .#{$fa-css-prefix}-success:before { content: fa-content($fa-var-check-circle); }
 .#{$fa-css-prefix}-unsubscribe:before { content: fa-content($fa-var-times); }
+.#{$fa-css-prefix}-credits:before { content: fa-content($fa-var-paw); }
 
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }

style/_mask_project.scss

@@ -70,7 +70,7 @@ $legend-color: $post-color;
 		}
 	}
 	&:not(.with-settings) {
-		#settings #settings-sections {
+		#settings #settings-panel {
 			left: -100%;
 		}
 	}
@@ -448,13 +448,11 @@ $legend-color: $post-color;
 		width: calc(#{$panel-width} + 3px); //Add box-shadow
 		max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
 		
-		#settings-sections {
-			width: calc(100% - 3rem - 3px); //Remove box-shadow
+		#settings-panel {
+			width: calc(100% - #{$block-spacing} - 3px); //Remove box-shadow
 			margin: $block-spacing;
-			padding: $block-spacing;
-			background: white;
 			border-radius: 3px;
-			box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5);
+			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
 			position: absolute;
 			transition: all 0.5s;
 			top: 0;
@@ -462,75 +460,105 @@ $legend-color: $post-color;
 			left: 0;
 			color: $post-color;
 			background: rgba(255, 255, 255, 0.8);
-				
-			.settings-section {
-				display: inline-block;
-				width: 100%;
-				margin-top: 1.5rem;
-				
-				h1 {
-					margin: 0 0 $block-spacing;
-				}
+			display: flex;
+			flex-direction: column;
 			
-				label {
-					margin-bottom: .3em;
-					display: block;
-					cursor: pointer;
-				}
+			.settings-header {
+				text-align: center;
+				flex: 0 1 auto;
 				
-				&.title {
-					margin: -#{$block-spacing} -#{$block-spacing} 0 -#{$block-spacing};
-					width: calc(100% + 2rem);
-					text-align: center;
+				.logo {
+					background: rgba(255, 255, 255, .4);
+					padding: 1.5rem;
+					border-radius: 3px 3px 0 0;
 					
-					.logo {
-						background: rgba(255, 255, 255, .4);
-						padding: 1.5rem;
-						border-radius: 3px 3px 0 0;
-						
-						img {
-							width: calc(100% - 3rem);
-							max-width: 180px;
-							transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
-						}
+					img {
+						width: 100%;
+						max-width: 180px;
+						transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
 					}
 				}
+			}
 				
-				&.newsletter {
-					input#email {
-						width: calc(100% - 6em);
-						
-						&:disabled {
-							color: #999;
-							background: rgba(255,255,255,0.2);
-						}
+			.settings-footer {
+				flex: 0 1 auto;
+				background: rgba(255, 255, 255, .4);
+				border-radius: 0 0 3px 3px;
+				font-size: 0.7em;
+				padding: 0.3rem;
+				text-align: center;
+				color: #888;
+				
+				a {
+					color: #777;
+					text-decoration: none;
+				}
+			}
+			
+			.settings-sections {
+				flex: 1 1 auto;
+				overflow: hidden;
+				
+				#settings-sections-scrollbox {
+					height: 100%;
+					width: 100%;
+				}
+				
+				.settings-section {
+					display: inline-block;
+					margin: 1.5rem 1rem 0 1rem;
+					width: calc(100% - 2 * #{$block-spacing});
+					
+					&:last-child {
+						margin-bottom: 1.5rem;
 					}
-					button#nl_btn {
-						margin-left: 1em;
-						margin-bottom: 1em;
-						
-						&.subscribe .fa {
-							@extend .fa-send;
+					
+					h1 {
+						margin: 0 0 $block-spacing;
+					}
+				
+					label {
+						margin-bottom: .3em;
+						display: block;
+						cursor: pointer;
+					}
+					
+					&.newsletter {
+						input#email {
+							width: calc(100% - 6em);
+							
+							&:disabled {
+								color: #999;
+								background: rgba(255,255,255,0.2);
+							}
 						}
-						&.unsubscribe .fa {
-							@extend .fa-unsubscribe;
-						}
-						&.loading {
-							background-color: $message-color;
-							color: white;
-							span {
-								@extend .flicker;
+						button#nl_btn {
+							margin-left: 1em;
+							margin-bottom: 1em;
+							
+							&.subscribe .fa {
+								@extend .fa-send;
+							}
+							&.unsubscribe .fa {
+								@extend .fa-unsubscribe;
+							}
+							&.loading {
+								background-color: $message-color;
+								color: white;
+								span {
+									@extend .flicker;
+								}
 							}
 						}
 					}
-				}
-				
-				#settings-projects {
-					a.fa-download {
-						color: $legend-color;
-						
-						&:hover {
-							color: #0078A8;
+					
+					#settings-projects {
+						a.fa-download {
+							color: $legend-color;
+							
+							&:hover {
+								color: #0078A8;
+							}
 						}
 					}
 				}