New identity

src/styles/_page.project.panel.settings.scss

@@ -4,48 +4,56 @@
 
 #settings {
 	#settings-panel {
+		gap: var.$block-spacing;
+
+		.settings-box {
+			background: color.$default-bg;
+			border-radius: var.$block-radius;
+			box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
+		}
+
 		.settings-header {
 			text-align: center;
-			flex: 0 1 auto;
 
 			.logo {
-				background: color.$default-bg;
-				padding: 2rem var.$block-spacing;
-				border-radius: var.$block-radius var.$block-radius 0 0;
+				display: block;
+				border-radius: var.$block-radius;
+				background: color.$default-bg-light;
+				padding: var.$block-spacing;
 
+				&:has(+ .last_update) {
+					padding: 2 * var.$block-spacing;
+				}
+				
 				img {
-					width: 100%;
-					height: auto;
-					max-width: 180px;
-					transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
+					width: 65%;
 				}
 			}
 
-			#last_update {
+			.last_update {
 				position: absolute;
-				margin-top: -2em;
+				margin-top: -2 * var.$block-spacing;
+				line-height: 2 * var.$block-spacing;
 				padding: 0 var.$block-spacing;
-				width: calc(100% - 2rem);
+				width: calc(100% - 2 * var.$block-spacing);
 
 				p {
-					text-align: center;
 					font-size: 0.8em;
 					margin: 0;
 					color: color.$subtitle;
-					transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
 
 					span {
-						margin-right: 0.5em;
+						margin-right: var.$elem-spacing;
 						img {
 							width: 12px;
-							vertical-align: middle;
+							vertical-align: center;
 							animation: spotlogo 20s infinite;
 						}
 					}
 
 					abbr {
 						text-decoration: none;
-						vertical-align: middle;
+						vertical-align: center;
 					}
 				}
 			}
@@ -55,8 +63,6 @@
 			flex: 0 1 auto;
 			display: flex;
 			justify-content: center;
-			background: color.$default-bg;
-			border-radius: 0 0 var.$block-radius var.$block-radius;
 			font-size: 0.7em;
 			padding: var.$text-spacing;
 			color: color.$default;
@@ -74,6 +80,7 @@
 		.settings-sections {
 			flex: 1 1 auto;
 			overflow: auto;
+			border-radius: var.$block-radius;
 
 			#settings-sections-scrollbox {
 				height: 100%;
@@ -82,20 +89,21 @@
 
 			.settings-section {
 				display: inline-block;
-				margin: 2rem var.$block-spacing 0 var.$block-spacing;
-				width: calc(100% - 2 * var.$block-spacing);
-
-				&:last-child {
-					margin-bottom: 2rem;
-				}
+				margin-bottom: var.$block-spacing;
+				width: 100%;
 
 				h1 {
-					margin: 0 0 var.$block-spacing;
+					margin: 0;
+					padding: var.$block-spacing;
+					border-radius: var.$block-radius var.$block-radius 0 0;
 					color: color.$title;
-					font-size: 1.5em;
+					font-size: 1.75em;
+					background: color.$default-bg-light;
 				}
 
 				.settings-section-body {
+					padding: var.$block-spacing;
+
 					.radio {
 						&:not(:first-child) {
 							margin-top: var.$elem-spacing;
@@ -168,4 +176,4 @@
 			}
 		}
 	}
-}
+}