web: destory fa, because it's not awesome

Note the loss of some colors in icons. This is because I need to change
them at the SVG level. I will think about best way to do this later as
some animation transitions will need to be thought for.

web/css/styles.css

@@ -224,12 +224,9 @@ button.nav > img.icon {
 	object-fit: contain;
 }
 
-.action-bar {
-}
 .action-bar > button {
 	margin-right: 25px;
-	color: var(--clrTextLighter);
-	font-size: var(--fsNormal);
+	opacity: 0.5;
 }
 .reactions {
 	margin-bottom: 15px;
@@ -261,13 +258,13 @@ button.nav > img.icon {
 }
 
 .action-bar button.icon {
-	transition:	color 0.3s linear;
+	transition:	opacity 0.3s linear;
 }
 .action-bar button.icon:hover {
-	color: var(--clrText);
+	opacity: 1;
 }
 .action-bar button.heart:hover {
-	color: var(--clrHeart);
+	/* TODO fix heart color */
 }
 
 details.cw summary {
@@ -351,11 +348,10 @@ textarea.post-input {
 }
 .post-tools > button.icon {
 	margin-right: 10px;
-	font-size: var(--fsEnlarged);
-	color: var(--clrTextLight);
+	opacity: 0.5;
 }
 .post-tools > button.icon.cw.active {
-	color: var(--clrWarn);
+	opacity: 1.0;
 }
 input[type="text"].cw {
 	border: none;

web/css/utils.css

@@ -42,10 +42,16 @@ button.action {
 	color: white;
 	font-weight: 800;
 }
+
 img.icon {
 	width: var(--iconSize);
 	height: var(--iconSize);
 }
+img.icon.small {
+	width: var(--iconSizeSmall);
+	height: var(--iconSizeSmall);
+}
+
 .float-right {
 	float: right;
 }

web/css/vars.css

@@ -30,4 +30,5 @@
 
 	/* Icon */
 	--iconSize: 24px;
+	--iconSizeSmall: 15px;
 }