Reuse favicon for site logo

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

@@ -14,56 +14,35 @@
 		}
 
 		.settings-header {
-			text-align: center;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: var.$elem-spacing;
+			padding: var.$block-spacing;
+			background:
+				radial-gradient(
+					circle farthest-side at center bottom,
+					color.$default-bg-light 40%,
+					sass-color.adjust(color.$default-bg-light, $alpha: -0.3) 100%
+				),
+				url(../images/logo_bg.webp)
+				50% 50%;
 
-			.logo {
-				display: block;
-				border-radius: var.$block-radius;
-				padding: var.$block-spacing;
-				background:
-					radial-gradient(
-						circle farthest-side at center bottom,
-						color.$default-bg-light 40%,
-						sass-color.adjust(color.$default-bg-light, $alpha: -0.3) 100%
-					),
-					url(../images/logo_bg.webp)
-					50% 50%
-				;
-
-				&:has(+ .last_update) {
-					padding-bottom: 3 * var.$block-spacing;
-				}
-				
-				img {
-					width: 65%;
-				}
+			.logo-icon {
+				width: 40%;
+			}
+			.logo-title {
+				width: 70%;
 			}
 
 			.last_update {
-				position: absolute;
-				margin-top: -3 * var.$block-spacing;
-				line-height: 3 * var.$block-spacing;
-				padding: 0 var.$block-spacing;
-				width: calc(100% - 2 * var.$block-spacing);
+				margin-top: var.$block-spacing - var.$elem-spacing; //Gap counts for 1 $elem-spacing
+				font-size: 0.8em;
+				color: color.$subtitle;
 
-				p {
-					font-size: 0.8em;
-					margin: 0;
-					color: color.$subtitle;
-
-					span {
-						margin-right: var.$elem-spacing;
-						img {
-							width: 12px;
-							vertical-align: center;
-							animation: spin 20s infinite;
-						}
-					}
-
-					abbr {
-						text-decoration: none;
-						vertical-align: center;
-					}
+				.find-me-spot {
+					color: color.$spot;
+					animation: spin 20s infinite;
 				}
 			}
 		}