Replace font awesome font with svg

src/styles/_page.project.feed.scss

@@ -1,23 +1,29 @@
-@use "fa/variables";
 @use "var";
 @use "color";
-@use "fa";
 
 #feed {
 	#feed-panel {
 		#feed-header {
 			.poster {
-				textarea[name=post] {
-					margin-bottom: 1em;
-					width: calc(100% - 2em);
-				}
+				.poster-form {
+					display: flex;
+					flex-direction: column;
+					gap: var.$block-spacing;
 
-				input[name=name] {
-					width: calc(100% - 6em);
-				}
+					.poster-actions {
+						display: flex;
+						align-items: stretch;
+						gap: var.$block-spacing;
 
-				button[name=submit] {
-					margin-left: 1em;
+						input[name=name] {
+							flex: 1 1 auto;
+							min-width: 0;
+						}
+
+						button[name=submit] {
+							flex: 0 0 auto;
+						}
+					}
 				}
 			}
 
@@ -64,7 +70,6 @@
 						width: 25%;
 
 						.link {
-							margin-left: var.$elem-spacing;
 							padding: 0;
 							line-height: 1;
 						}
@@ -84,9 +89,6 @@
 			}
 
 			&.headerless {
-				.header {
-					display: none;
-				}
 				.body {
 					padding-top: var.$block-spacing;
 					text-align: center;
@@ -94,7 +96,7 @@
 					p {
 						margin: 0;
 						
-						.fa {
+						.spot-icon {
 							display: inline-block;
 							font-size: 2em;
 							margin: var.$elem-spacing 0;
@@ -126,18 +128,20 @@
 					line-height: 0;
 
 					.drill-icon {
-						transform: translate(-16px, -32px);
+
+						.drill-hover-icon {
+							display: none;
+							text-shadow: color.$over-img-shadow 3px 3px 3px;
+						}
 					}
 
 					&:hover {
-						.#{variables.$fa-css-prefix}-stack-2x {
-							@extend .#{variables.$fa-css-prefix}-drill-message;
-							top: 13px;
-							left: 3px;
-						}
-						.#{variables.$fa-css-prefix}-stack-1x {
+						.sub {
 							display: none;
 						}
+						.drill-hover-icon {
+							color: color.$message-flashy;
+						}
 					}
 				}
 
@@ -146,17 +150,23 @@
 					top: var.$block-spacing;
 					right: var.$block-spacing;
 					
-					.fa {
+					.spot-icon {
 						font-size: 1.3em;
 						vertical-align: middle;
-						line-height: 1rem;
+						height: 1rem;
 						background: color.$message;
 						color: color.$message-bg;
 						border-radius: var.$block-radius 0 0 var.$block-radius;
 						padding: var.$elem-spacing;
+
+						&.push {
+							margin-right: 0;
+						}
 					}
 
 					.temperature {
+						display: inline-block;
+						line-height: 1rem;
 						vertical-align: middle;
 						padding: var.$elem-spacing;
 						background: color.$message-bg;
@@ -173,7 +183,7 @@
 
 			&.post {
 				.body {
-					padding: 0em 1em 0.5em;
+					padding: 0 var.$block-spacing var.$elem-spacing;
 					
 					.message {
 						margin: 0;
@@ -218,19 +228,18 @@
 							}
 
 							.drill-icon {
-								font-size: 3em;
 
-								.fa-drill-image {
+								.drill-image {
 									color: transparent;
 								}
-								.fa-drill-video {
+								.drill-video {
 									color: color.$over-img-bg;
 								}
 							}
 
 							&:hover {
 								.drill-icon {
-									.fa-drill-image, .fa-drill-video {
+									.drill-image, .drill-video {
 										color: color.$media-bg;
 										text-shadow: color.$over-img-shadow 3px 3px 3px;
 									}