Replace font awesome font with svg

package-lock.json

@@ -8,6 +8,9 @@
       "name": "spot",
       "version": "2.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.2.0",
+        "@fortawesome/free-solid-svg-icons": "^7.2.0",
+        "@fortawesome/vue-fontawesome": "^3.2.0",
         "@uppy/core": "^5.2.0",
         "@uppy/xhr-upload": "^5.2.0",
         "autosize": "^6.0.1",
@@ -1554,6 +1557,49 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
+      "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
+      "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.2.0.tgz",
+      "integrity": "sha512-7BwGjTZn8QDvVEIu8fvkHhsDRRv//tq7jtsldaDhF3dE1fyWLIQcEg3zvIzy33su7kcppWsZZ6XRYP5wp3UCgQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

package.json

@@ -21,6 +21,9 @@
   "keywords": [],
   "author": "Franzz",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.2.0",
     "@uppy/core": "^5.2.0",
     "@uppy/xhr-upload": "^5.2.0",
     "autosize": "^6.0.1",

src/components/admin.vue

@@ -138,7 +138,7 @@ export default {
 						<td><AdminInput :type="'text'" :name="'codename'" :elem="project" /></td>
 						<td><AdminInput :type="'date'" :name="'active_from'" :elem="project" /></td>
 						<td><AdminInput :type="'date'" :name="'active_to'" :elem="project" /></td>
-						<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(project)" /></td>
+						<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(project)" /></td>
 					</tr>
 				</tbody>
 			</table>
@@ -168,7 +168,7 @@ export default {
 						<td>{{ feed.name }}</td>
 						<td>{{ feed.status }}</td>
 						<td>{{ feed.last_update }}</td>
-						<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(feed)" /></td>
+						<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(feed)" /></td>
 					</tr>
 				</tbody>
 			</table>
@@ -215,7 +215,7 @@ export default {
 						<td>{{ user.language }}</td>
 						<td>{{ user.timezone }}</td>
 						<td><AdminInput :type="'number'" :name="'clearance'" :elem="user" /></td>
-						<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(user)" /></td>
+						<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(user)" /></td>
 					</tr>
 				</tbody>
 			</table>

src/components/project.vue

@@ -158,7 +158,7 @@ export default {
 		initLightbox() {
 			lightbox.option({
 				alwaysShowNavOnTouchDevices: true,
-				albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',
+				albumLabel: 'Media %1 / %2',
 				fadeDuration: 300,
 				imageFadeDuration: 400,
 				positionFromTop: 0,
@@ -303,7 +303,7 @@ export default {
 			this.markers.messages.forEach(msg => {
 				const el = document.createElement('div');
 				
-				const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'message-in', iconSubClasses:'fa-rotate-270'});
+				const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'message-in', iconSubRotation: 270});
 				app.mount(el);
 
 				new Marker({element: el, anchor: 'bottom'})
@@ -646,7 +646,9 @@ export default {
 	<div id="projects" :class="projectClasses">
 		<div id="background"></div>
 		<div id="submap">
-			<div class="loader fa fa-fw fa-map flicker"></div>
+			<div class="loader">
+				<SpotIcon :icon="'map'" :classes="'flicker'" fixed-width />
+			</div>
 		</div>
 		<div id="map"></div>
 		<div id="settings" class="map-container map-container-left" ref="settings">
@@ -660,7 +662,7 @@ export default {
 				<div class="settings-sections">
 					<Simplebar id="settings-sections-scrollbox">
 						<div class="settings-section">
-							<h1><SpotIcon :icon="'project'" :classes="'fa-fw'" :text="lang.get('hikes')" /></h1>
+							<h1><SpotIcon :icon="'project'" fixed-width :text="lang.get('hikes')" /></h1>
 							<div class="settings-section-body">
 								<div class="radio" v-for="project in projects" :key="'project-'+project.id">
 									<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="$parent.hash.items[0]" />
@@ -674,7 +676,7 @@ export default {
 							</div>
 						</div>
 						<div class="settings-section">
-							<h1><SpotIcon :icon="'map'" :classes="'fa-fw'" :text="lang.get('maps')" /></h1>
+							<h1><SpotIcon :icon="'map'" fixed-width :text="lang.get('maps')" /></h1>
 							<div class="settings-section-body">
 								<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
 									<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMap" />
@@ -683,9 +685,11 @@ export default {
 							</div>
 						</div>
 						<div class="settings-section newsletter">
-							<h1><SpotIcon :icon="'newsletter'" :classes="'fa-fw'" :text="lang.get('newsletter')" /></h1>
+							<h1><SpotIcon :icon="'newsletter'" fixed-width :text="lang.get('newsletter')" /></h1>
+							<div class="newsletter-form">
 								<input type="email" name="email" id="email" :placeholder="lang.get('nl_email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
-							<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('nl_'+nlAction)" @click="manageSubs" />
+								<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('nl_'+nlAction)" :icon="nlAction" @click="manageSubs" />
+							</div>
 							<div id="settings-feedback" class="feedback">
 								<p v-for="feedback in nlFeedbacks" :class="feedback.type">
 									<SpotIcon :icon="feedback.type" :text="feedback.msg" />
@@ -694,10 +698,12 @@ export default {
 							{{ lang.get(subscribed?'nl_subscribed_desc':'nl_unsubscribed_desc') }}
 						</div>
 						<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
-							<h1><SpotIcon :icon="'admin fa-fw'" :text="lang.get('admin')" /></h1>
+							<h1><SpotIcon :icon="'admin'" fixed-width :text="lang.get('admin')" /></h1>
+							<div class="admin-actions">
 								<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin_config')" /></a>
 								<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin_upload')" /></a>
 							</div>
+						</div>
 					</Simplebar>
 				</div>
 				<div class="settings-footer">

src/components/projectMediaLink.vue

@@ -55,7 +55,7 @@ export default {
 	</a>
 	<div style="display:none">
 		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
-			<spotIcon :icon="'post'" :classes="'fa-lg fa-fw push'" :text-classes="'comment-text'" :text="options.comment" />
+			<spotIcon :icon="'post'" fixed-width size="lg" :text-classes="'comment-text'" :text="options.comment" />
 		</span>
 		<span ref="postedon" class="lb-caption-line">
 			<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />

src/components/projectPopup.vue

@@ -31,24 +31,24 @@ export default {
 	<div :class="'info-window '+type">
 		<div class="header" v-if="type=='message'">
 			<h1>
-				<spotIcon :icon="'message'" :classes="'fa-lg'" :text="lang.get('post_message')+' '+lang.get('counter', options.displayed_id)" />
+				<spotIcon :icon="'message'" size="lg" :text="lang.get('post_message')+' '+lang.get('counter', options.displayed_id)" />
 				<span class="message-type">({{ options.type }})</span>
 			</h1>
 			<div class="separator"></div>
 		</div>
 		<p class="coordinates">
-			<spotIcon :icon="'coords'" :classes="'fa-fw fa-lg'" :margin="true" />
+			<spotIcon :icon="'coords'" fixed-width size="lg" :margin="true" />
 			<projectMapLink :options="options" />
 		</p>
 		<p class="altitude" v-if="options.altitude">
-			<spotIcon :icon="'altitude'" :classes="'fa-fw fa-lg'" :text="options.altitude+'m'" />
+			<spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" />
 		</p>
 		<p class="time">
 			<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
 			<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
 		</p>
 		<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get(options.weather_cond)">
-			<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
+			<spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" />
 		</p>
 		<div v-if="medias.length > 0">
 			<div class="separator"></div>

src/components/projectPost.vue

@@ -32,6 +32,7 @@
 				anchorTitle: this.lang.get('copy_to_clipboard'),
 				anchorIcon: 'link',
 				popupRequested: false,
+				mouseOverDrill: false,
 				postMessage: '',
 				sending: false,
 				focusZoomLevel: 15
@@ -51,6 +52,9 @@
 			displayedId() {
 				return this.options.displayed_id?(this.lang.get('counter', this.options.displayed_id)):'';
 			},
+			drillMainIcon() {
+				return this.mouseOverDrill?'drill-message':'marker';
+			},
 			anchorLink() {
 				return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.consts.hash_sep);
 			},
@@ -139,11 +143,11 @@
 
 <template>
 	<div :class="postClass" :id="postId">
-		<div class="header">
+		<div class="header" v-if="!options.headerless">
 			<div class="index">
 				<spotIcon :icon="subType" :text="displayedId" />
 				<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="anchorLink" :title="anchorTitle">
-					<spotIcon :icon="anchorIcon" />
+					<spotIcon :icon="anchorIcon" :classes="'push-left'" />
 				</a>
 			</div>
 			<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?lang.get('local_time', absTimeLocal):''">
@@ -156,19 +160,18 @@
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
 				<p>
-					<spotIcon :icon="'coords'" :classes="'push'" />
+					<spotIcon :icon="'coords'" :classes="'push'" size="lg" />
 					<projectMapLink :options="options" />
 				</p>
 				<p v-if="timeDiff">
 					<projectRelTime :icon="'time'" :iconClasses="'push'" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
 				</p>
-				<a class="drill" @click.prevent="executeMainAction">
+				<a class="drill" @click.prevent="executeMainAction" @mouseenter="mouseOverDrill = true" @mouseleave="mouseOverDrill = false">
 					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
-						<spotIcon :icon="options.weather_icon" />
+						<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
-						<span class="temperature">{{ options.weather_temp+'°C' }}</span>
 					</span>
 					<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
-					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="'marker'" :iconSub="'footprint'" :iconSubClasses="'fa-rotate-270'" />
+					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
 				</a>
 			</div>
 			<div v-else-if="options.type == 'media'" class="body-box">
@@ -182,11 +185,13 @@
 					<span>{{ options.formatted_name }}</span>
 				</p>
 			</div>
-			<div v-else-if="options.type == 'poster'">
+			<div v-else-if="options.type == 'poster'" class="poster-form">
 				<textarea ref="post" name="post" :placeholder="lang.get('post_message')" class="autoExpand" rows="1" v-model="postMessage"></textarea>
+				<div class="poster-actions">
 					<input type="text" name="name" :placeholder="lang.get('post_name')" v-model="user.name" />
 					<spotButton name="submit" :aria-label="lang.get('send')" :title="lang.get('send')" :icon="'send'" @click="send()" :iconClasses="sending?'flicker':''" />
 				</div>
+			</div>
 			<div v-else-if="options.type == 'archived'">
 				<p><spotIcon :icon="'success'" /></p>
 				<p>{{ lang.get('mode_histo') }}</p>

src/components/projectRelTime.vue

@@ -17,15 +17,12 @@ export default {
 	computed: {
 		title() {
 			if(this.localTime != this.siteTime) return this.lang.get('your_time', this.siteTime.slice(-5)) + ((this.offset != '0')?' ('+this.lang.get('unit_d')+this.offset+')':'');
-		},
-		spotIconClasses() {
-			return this.iconClasses || 'fa-fw fa-lg';
 		}
 	}
 }
 </script>
 
 <template>
-	<spotIcon v-if="icon" :icon="icon" :classes="spotIconClasses" :title="title" :text="localTime" />
+	<spotIcon v-if="icon" :icon="icon" :classes="iconClasses" :title="title" :text="localTime" fixed-width size="lg" />
 	<span v-else :class="classes" :title="title">{{ localTime }}</span>
 </template>

src/components/spotButton.vue

@@ -9,10 +9,11 @@ export default {
 		classes: String,
 		text: String,
 		icon: String,
-		iconClasses: String
+		iconClasses: String,
+		iconSize: String
 	}
 }
 </script>
 <template>
-	<button :class="classes"><SpotIcon :icon="icon" :text="text" :classes="iconClasses" /></button>
+	<button :class="classes"><SpotIcon :icon="icon" :text="text" :classes="iconClasses" :size="iconSize" /></button>
 </template>

src/components/spotIcon.vue

@@ -1,24 +1,58 @@
 <script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { getIcon } from '../scripts/icons.js';
+
 export default {
+	components: {
+		FontAwesomeIcon
+	},
 	props: {
 		icon: String,
+		fixedWidth: Boolean,
+		rotation: [Number, String],
+		size: String,
+		classes: String,
 		title: String,
 		text: String,
 		margin: Boolean,
-		classes: String,
+		textClasses: String,
-		textClasses: String
+		transform: String
 	},
 	computed: {
 		classNames() {
-			return 'fa fa-'+this.icon+((this.margin || this.hasText)?' push':'')+(this.classes?' '+this.classes:'')
+			return [
+				'spot-icon',
+				this.icon,
+				...(this.classes || '').split(/\s+/).filter(Boolean),
+				...(this.margin || this.hasText ? ['push'] : [])
+			].filter(Boolean).join(' ');
+		},
+		resolvedFixedWidth() {
+			return this.fixedWidth || null;
 		},
 		hasText() {
 			return this.text && this.text != '';
+		},
+		iconDefinition() {
+			return getIcon(this.icon);
+		},
+		resolvedRotation() {
+			return this.rotation || null;
+		},
+		resolvedSize() {
+			return this.size || null;
+		},
+		resolvedTransform() {
+			return this.transform || null;
 		}
 	}
 }
 </script>
 
 <template>
-	<span :title="title"><i :class="classNames"></i><span v-if="hasText" :class="textClasses">{{ text }}</span></span>
+	<span :title="title" v-if="title || hasText">
+		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
+		<span v-if="hasText" :class="textClasses">{{ text }}</span>
+	</span>
+	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
 </template>

src/components/spotIconStack.vue

@@ -1,20 +1,41 @@
 <script>
+import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
 import spotIcon from './spotIcon.vue';
 
 export default {
 	components: {
+		FontAwesomeLayers,
 		spotIcon
 	},
 	props: {
 		mainClasses: String,
 		iconMain: String,
 		iconMainClasses: String,
+		iconMainTransform: String,
 		iconSub: String,
 		iconSubClasses: String,
+		iconSubTransform: String
 	},
 	computed: {
 		mainClass() {
-			return 'icon-stack fa-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
+			return 'spot-icon-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
+		},
+		iconMainClass() {
+			return this.mergeClasses('main clickable', this.iconMainClasses);
+		},
+		iconSubClass() {
+			return this.mergeClasses('sub', this.iconSubClasses);
+		},
+		iconSubTransformValue() {
+			return this.mergeClasses('shrink-8 up-2', this.iconSubTransform);
+		}
+	},
+	methods: {
+		mergeClasses(sClassesA, sClassesB) {
+			return [
+				...(sClassesA || '').split(/\s+/),
+				...(sClassesB || '').split(/\s+/)
+			].filter(Boolean).join(' ');
 		}
 	}
 }
@@ -22,7 +43,9 @@ export default {
 
 <template>
 	<span :class="mainClass">
-		<spotIcon :icon="iconMain" :classes="'fa-stack-2x clickable'+(iconMainClasses?' '+iconMainClasses:'')" />
+		<FontAwesomeLayers>
-		<spotIcon :icon="iconSub" :classes="'fa-stack-1x'+(iconSubClasses?' '+iconSubClasses:'')" />
+			<spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
+			<spotIcon :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
+		</FontAwesomeLayers>
 	</span>
 </template>

src/masks/project.html

@@ -1,57 +0,0 @@
-<div id="projects">
-	<div id="background"></div>
-	<div id="submap">
-		<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
-	</div>
-	<div id="map"></div>
-	<div id="settings">
-		<div id="settings-panel">
-			<div class="settings-header">
-				<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
-				<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
-			</div>
-			<div class="settings-sections">
-				<div id="settings-sections-scrollbox">
-					<div class="settings-section">
-						<h1><i class="fa fa-fw push fa-project"></i>[#]lang:hikes[#]</h1>
-						<div id="settings-projects"></div>
-					</div>
-					<div class="settings-section">
-						<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
-						<div id="layers"></div>
-					</div>
-					<div class="settings-section newsletter">
-						<h1><i class="fa fa-fw push fa-newsletter"></i>[#]lang:newsletter[#]</h1>
-						<input type="email" name="email" id="email" placeholder="[#]lang:nl_email_placeholder[#]" /><button id="nl_btn"><span><i class="fa"></i></span></button>
-						<div id="settings-feedback" class="feedback"></div>
-						<div id="nl_desc"></div>
-					</div>
-					<div class="settings-section admin" id="admin_link">
-						<h1><i class="fa fa-fw push fa-admin"></i>[#]lang:admin[#]</h1>
-						<a class="button" id="admin_config" name="admin_config" href="#admin"><i class="fa fa-config push"></i>[#]lang:admin_config[#]</a>
-						<a class="button" id="admin_upload" name="admin_upload" href="#upload"><i class="fa fa-upload push"></i>[#]lang:admin_upload[#]</a>
-					</div>
-				</div>
-			</div>
-			<div class="settings-footer"><a href="https://git.lutran.fr/franzz/spot" title="[#]lang:credits_git[#]" target="_blank" rel="noopener"><i class="fa fa-credits push"></i>[#]lang:credits_project[#]</a> [#]lang:credits_license[#]</div>
-		</div>
-	</div>
-	<div id="feed">
-		<div id="feed-panel">
-			<div id="poster"></div>
-			<div id="posts_list"></div>
-			<div id="loading"></div>
-		</div>
-	</div>
-	<div id="elems">
-		<div id="settings-button" class="spot-control"><i class="fa fa-menu"></i></div>
-		<div id="feed-button" class="spot-control"><i class="fa"></i></div>
-		<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
-			<div class="track"><span class="line main"></span><span class="desc">[#]lang:track_main[#]</span></div>
-			<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_off-track[#]</span></div>
-			<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
-		</div>
-		<div id="title" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded leaflet-control-inline"><span id="project_name" class=""></span></div>
-	</div>
-</div>
-<div id="mobile" class="mobile"></div>

src/masks/upload.html

@@ -1,10 +0,0 @@
-<div id="upload">
-	<a name="back" class="button" href="[#]server[#]"><i class="fa fa-back push"></i>[#]lang:nav_back[#]</a>
-	<h1>[#]lang:upload_title[#]</h1>
-	<input id="fileupload" type="file" name="files[]" multiple>
-	<div id="progress">
-    	<div class="bar" style="width: 0%;"></div>
-	</div>
-	<div id="comments"></div>
-	<div id="status"></div>
-</div>

src/scripts/icons.js

@@ -0,0 +1,168 @@
+import {
+	faArrowsRotate,
+	faBars,
+	faCamera,
+	faCarSide,
+	faChartArea,
+	faCheck,
+	faChevronLeft,
+	faChevronRight,
+	faCircleCheck,
+	faCircleDown,
+	faCirclePlay,
+	faCircleRight,
+	faCircleUp,
+	faCircleXmark,
+	faCloudArrowUp,
+	faCloudBolt,
+	faCloudMoon,
+	faCloudMoonRain,
+	faCloudRain,
+	faCloudSun,
+	faCloudSunRain,
+	faComment,
+	faCompass,
+	faFileArrowDown,
+	faFilm,
+	faFloppyDisk,
+	faGear,
+	faGlobe,
+	faImage,
+	faLayerGroup,
+	faLink,
+	faLocationPin,
+	faMagnifyingGlass,
+	faMagnifyingGlassLocation,
+	faMapLocationDot,
+	faMountain,
+	faPaperPlane,
+	faPaw,
+	faPersonHiking,
+	faPhotoFilm,
+	faPlus,
+	faScrewdriverWrench,
+	faShoePrints,
+	faSun,
+	faTemperatureThreeQuarters,
+	faTriangleExclamation,
+	faVideo,
+	faWifi,
+	faWind,
+	faClock
+} from '@fortawesome/free-solid-svg-icons';
+
+function customIcon(iconName, width, height, hex, path) {
+	return {
+		prefix: 'fas',
+		iconName,
+		icon: [width, height, [], hex, path]
+	};
+}
+
+const faCloudBoltMoon = customIcon('cloud-bolt-moon', 640, 512, 'f76d', 'M399.1 48.4c34.7 19.6 59.3 54.8 64.2 96.1 38.8 22 64.9 63.6 64.9 111.4 35.6 .6 63.5-10.3 89.7-31.2 3.5-2.8 6.9-5.8 10.1-8.9 4.1-4 5.3-10.1 3-15.3s-7.7-8.4-13.4-7.9c-4 .3-7.9 .4-11.9 .3-55.5-1.9-99.9-47.5-99.9-103.4 0-36.3 18.7-68.3 47.1-86.8 3.3-2.2 6.8-4.1 10.3-5.9 5.1-2.5 8.1-8 7.4-13.7s-4.9-10.3-10.4-11.6c-10.5-2.4-21.2-3.5-31.9-3.5-56.7 0-105.8 32.8-129.3 80.5zM206.8 416L175.5 520.1c-3.6 11.9 5.3 23.9 17.8 23.9 4.6 0 9-1.7 12.4-4.7L346.9 412.9c3.5-3.1 5.5-7.6 5.5-12.4 0-9.2-7.4-16.6-16.6-16.6l-61.8 0 31.2-104.1c3.6-11.9-5.3-23.9-17.8-23.9-4.6 0-9 1.7-12.4 4.7L133.9 387.1c-3.5 3.1-5.5 7.6-5.5 12.4 0 9.2 7.4 16.6 16.6 16.6l61.8 0zm193.5-80.1c44.2 0 80-35.8 80-80 0-39.3-28.4-72.1-65.8-78.7 1.2-5.6 1.9-11.3 1.9-17.2 0-44.2-35.8-80-80-80-17 0-32.8 5.3-45.8 14.4-16.8-27.8-47.3-46.4-82.2-46.4-53.1 0-96.3 44.5-96 97.3-45.4 7.6-80 47.1-80 94.6 0 50 38.3 91.1 87.2 95.6L243.1 225c12.2-10.9 28-17 44.4-17 44.6 0 76.5 43 63.7 85.7l-12.7 42.2 61.8 0z');
+const faCloudBoltSun = customIcon('cloud-bolt-sun', 576, 512, 'f76e', 'M248.5-31c-4.2-1.7-8.9-1.3-12.6 1.2L176 9.9 116.2-29.8c-3.7-2.5-8.5-2.9-12.6-1.2s-7.2 5.4-8.1 9.8L81.2 49.2 10.8 63.4c-4.4 .9-8.1 3.9-9.8 8.1S-.2 80.4 2.3 84.2L41.9 144 2.3 203.8c-2.5 3.7-2.9 8.5-1.2 12.6s5.4 7.2 9.8 8.1l69.3 14c.5-47.2 26.5-88.2 64.9-110 7.3-60.8 57.3-108.5 119.1-112.3l-7.6-37.4c-.9-4.4-3.9-8.1-8.1-9.8zM128 239.9c0 44.2 35.8 80 80 80l6.7 0 124-111c12.2-10.9 28-17 44.4-17 44.6 0 76.5 43 63.7 85.7l-12.7 42.2 45.8 0c53 0 96-43 96-96 0-47.6-34.6-87-80-94.6 .4-52.8-42.9-97.3-96-97.3-34.9 0-65.4 18.6-82.2 46.4-13-9.1-28.8-14.4-45.8-14.4-44.2 0-80 35.8-80 80 0 5.9 .6 11.7 1.9 17.2-37.4 6.7-65.8 39.4-65.8 78.7zM302.4 400L271.2 504.1c-3.6 11.9 5.3 23.9 17.8 23.9 4.6 0 9-1.7 12.4-4.7L442.5 396.9c3.5-3.1 5.5-7.6 5.5-12.4 0-9.2-7.4-16.6-16.6-16.6l-61.8 0 31.2-104.1c3.6-11.9-5.3-23.9-17.8-23.9-4.6 0-9 1.7-12.4 4.7L229.5 371.1c-3.5 3.1-5.5 7.6-5.5 12.4 0 9.2 7.4 16.6 16.6 16.6l61.8 0z');
+const faCloudFog = customIcon('cloud-fog', 576, 512, 'f74e', 'M32 224c0 53 43 96 96 96l320 0c53 0 96-43 96-96s-43-96-96-96c-.5 0-1.1 0-1.6 0 1.1-5.2 1.6-10.5 1.6-16 0-44.2-35.8-80-80-80-24.3 0-46.1 10.9-60.8 28-18.7-35.7-56.1-60-99.2-60-61.9 0-112 50.1-112 112 0 7.1 .7 14.1 1.9 20.8-38.3 12.6-65.9 48.7-65.9 91.2zM512 392c0-13.3-10.7-24-24-24L24 368c-13.3 0-24 10.7-24 24s10.7 24 24 24l464 0c13.3 0 24-10.7 24-24zM88 464c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0zm176 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l288 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-288 0z');
+const faCloudHail = customIcon('cloud-hail', 512, 512, 'f739', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm0 80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm160-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM32 480a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm160-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z');
+const faCloudSleet = customIcon('cloud-sleet', 512, 512, 'f741', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm80 48c13.3 0 24 10.7 24 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24zm272 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zM86.8 399.6l-32 96C50.6 508.2 37 515 24.4 510.8S5 493 9.2 480.4l32-96C45.4 371.8 59 365 71.6 369.2S91 387 86.8 399.6zm248 0l-32 96c-4.2 12.6-17.8 19.4-30.4 15.2S253 493 257.2 480.4l32-96c4.2-12.6 17.8-19.4 30.4-15.2S339 387 334.8 399.6z');
+const faCloudSnow = customIcon('cloud-snow', 512, 512, 'f742', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm0 72l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zm184 32l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zm160-56c13.3 0 24 10.7 24 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24z');
+const faClouds = customIcon('clouds', 576, 512, 'e47d', 'M112.4 276.4c-5.6 3.5-11 7.4-16 11.6l-.4 0c-53 0-96-43-96-96S43 96 96 96l1.1 0c7.8-54.3 54.4-96 110.9-96 47.9 0 88.8 30.1 104.8 72.4 12-5.4 25.2-8.4 39.2-8.4 53 0 96 43 96 96 0 1.3 0 2.7-.1 4-10.2-2.6-20.9-4-31.9-4-14 0-27.4 2.2-40 6.4-27.9-23.9-64.3-38.4-104-38.4-84.4 0-153.6 65.4-159.6 148.4zM184 480c-48.6 0-88-39.4-88-88 0-40.9 27.8-75.2 65.6-85.1-1-6.1-1.6-12.4-1.6-18.9 0-61.9 50.1-112 112-112 39 0 73.3 19.9 93.3 50.1 13.8-11.3 31.4-18.1 50.7-18.1 44.2 0 80 35.8 80 80 0 .4 0 .9 0 1.3 45.4 7.6 80 47.1 80 94.7 0 53-43 96-96 96l-296 0z');
+const faCommentPen = customIcon('comment-pen', 512, 512, 'f4ae', 'M256 480c141.4 0 256-107.5 256-240S397.4 0 256 0 0 107.5 0 240c0 54.3 19.2 104.3 51.6 144.5L2.8 476.8c-4.8 9-3.3 20 3.6 27.5s17.8 9.8 27.1 5.8l118.4-50.7C183.7 472.6 218.9 480 256 480zM144.4 334.3l12.3-49.4c2.1-8.4 6.5-16.2 12.6-22.3L290.7 141.3c8.5-8.5 20-13.3 32-13.3 25 0 45.3 20.3 45.3 45.3 0 12-4.8 23.5-13.3 32L233.4 326.6c-6.2 6.2-13.9 10.5-22.3 12.6l-49.4 12.3c-1.1 .3-2.3 .4-3.5 .4-7.9 0-14.2-6.4-14.2-14.2 0-1.2 .1-2.3 .4-3.5z');
+const faMoonStars = customIcon('moon-stars', 512, 512, 'f755', 'M439.8 89.8c1 3.6 4.4 6.2 8.2 6.2s7.1-2.5 8.2-6.2l11-38.6 38.6-11c3.6-1 6.2-4.4 6.2-8.2s-2.5-7.1-6.2-8.2l-38.6-11-11-38.6c-1-3.6-4.4-6.2-8.2-6.2s-7.1 2.5-8.2 6.2l-11 38.6-38.6 11c-3.6 1-6.2 4.4-6.2 8.2s2.5 7.1 6.2 8.2l38.6 11 11 38.6zM224 64C100.3 64 0 164.3 0 288S100.3 512 224 512c60.2 0 114.9-23.8 155.1-62.4 6.4-6.1 8.2-15.7 4.6-23.8s-12-13-20.8-12.3c-4.3 .3-8.6 .5-12.9 .5-88.9 0-161-72.1-161-161 0-63.1 36.3-117.8 89.3-144.2 7.9-4 12.6-12.5 11.5-21.3s-7.6-16-16.2-18C257.6 65.9 241 64 224 64zM355.2 268.8l16.6 58c1.6 5.5 6.6 9.2 12.2 9.2s10.7-3.8 12.2-9.2l16.6-58 58-16.6c5.5-1.6 9.2-6.6 9.2-12.2s-3.8-10.7-9.2-12.2l-58-16.6-16.6-58c-1.6-5.5-6.6-9.2-12.2-9.2s-10.7 3.8-12.2 9.2l-16.6 58-58 16.6c-5.5 1.6-9.2 6.6-9.2 12.2s3.8 10.7 9.2 12.2l58 16.6z');
+
+const ICONS = {
+	/* Navigation */
+	menu: faBars,
+	error: faTriangleExclamation,
+	warning: faTriangleExclamation,
+	success: faCircleCheck,
+	new: faPlus,
+	refresh: faArrowsRotate,
+	cancel: faImage,
+	prev: faChevronLeft,
+	back: faChevronLeft,
+	next: faChevronRight,
+	close: faCircleXmark,
+
+	/* Map */
+	map: faMapLocationDot,
+	marker: faLocationPin,
+	footprint: faShoePrints,
+	'message-in': faShoePrints,
+	'track-off-track': faPersonHiking,
+	'track-main': faPersonHiking,
+	'track-hitchhiking': faCarSide,
+	'track-start': faPersonHiking,
+	'track-end': faPersonHiking,
+	layers: faLayerGroup,
+	'elev-chart': faChartArea,
+	distance: faCircleRight,
+	'elev-drop': faCircleDown,
+	'elev-gain': faCircleUp,
+	download: faFileArrowDown,
+
+	/* Admin */
+	newsletter: faWifi,
+	project: faPersonHiking,
+	unsubscribe: faCircleXmark,
+	credits: faPaw,
+	admin: faScrewdriverWrench,
+	config: faGear,
+	upload: faCloudArrowUp,
+
+	/* Upload */
+	save: faFloppyDisk,
+
+	/* Feed */
+	post: faComment,
+	media: faPhotoFilm,
+	video: faFilm,
+	image: faImage,
+	message: faLocationPin,
+	time: faClock,
+	coords: faCompass,
+	altitude: faMountain,
+	'drill-video': faCirclePlay,
+	'drill-image': faMagnifyingGlass,
+	'drill-message': faMagnifyingGlassLocation,
+	'video-shot': faVideo,
+	'image-shot': faCamera,
+	link: faLink,
+	copied: faCheck,
+
+	/* Feed - Poster */
+	poster: faCommentPen,
+	send: faPaperPlane,
+	subscribe: faPaperPlane,
+
+	/* Lightbox */
+	timezone: faGlobe,
+
+	/* Weather */
+	temperature: faTemperatureThreeQuarters,
+	'clear-day': faSun,
+	'clear-night': faMoonStars,
+	cloudy: faClouds,
+	fog: faCloudFog,
+	hail: faCloudHail,
+	'partly-cloudy-day': faCloudSun,
+	'partly-cloudy-night': faCloudMoon,
+	'rain-snow-showers-day': faCloudSunRain,
+	'rain-snow-showers-night': faCloudMoonRain,
+	'rain-snow': faCloudSleet,
+	rain: faCloudRain,
+	'showers-day': faCloudSunRain,
+	'showers-night': faCloudMoonRain,
+	sleet: faCloudSleet,
+	snow: faCloudSnow,
+	'snow-showers-day': faCloudSnow,
+	'snow-showers-night': faCloudSnow,
+	'thunder-rain': faCloudBolt,
+	'thunder-showers-day': faCloudBoltSun,
+	'thunder-showers-night': faCloudBoltMoon,
+	thunder: faCloudBolt,
+	wind: faWind
+};
+
+export function getIcon(iconName) {
+	return ICONS[iconName] || null;
+}

src/styles/_fa.scss

@@ -1,119 +1,9 @@
-
+.spot-icon {
-
-
-@use 'fa/solid' with (
-  $fa-css-prefix: fa,
-  $fa-font-path: "fonts"
-);
-@use 'fa/mixins';
-@use 'fa/core';
-@use 'fa/sizing';
-@use 'fa/fixed-width';
-@use 'fa/list';
-@use 'fa/bordered-pulled';
-@use 'fa/animated';
-@use 'fa/rotated-flipped';
-@use 'fa/stacked';
-@use "fa/functions";
-@use "fa/variables";
-
-
-.fa {
 	&.push {
-		margin-right: 0.5rem;
+		margin-right: 0.3rem;
 	}
+
 	&.push-left {
-		margin-left: 0.5rem;
+		margin-left: 0.3rem;
 	}
 }
-
-/* Navigation */
-.#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); }
-.#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); }
-.#{variables.$fa-css-prefix}-warning:before { content: functions.fa-content(variables.$fa-var-exclamation-triangle); }
-.#{variables.$fa-css-prefix}-success:before { content: functions.fa-content(variables.$fa-var-check-circle); }
-.#{variables.$fa-css-prefix}-new:before { content: functions.fa-content(variables.$fa-var-plus); }
-.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
-.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
-.#{variables.$fa-css-prefix}-cancel:before { content: functions.fa-content(variables.$fa-var-image); }
-.#{variables.$fa-css-prefix}-prev:before,
-.#{variables.$fa-css-prefix}-back:before { content: functions.fa-content(variables.$fa-var-chevron-left); }
-.#{variables.$fa-css-prefix}-next:before { content: functions.fa-content(variables.$fa-var-chevron-right); }
-.#{variables.$fa-css-prefix}-close:before { content: functions.fa-content(variables.$fa-var-times-circle); }
-
-/* Map */
-.#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
-.#{variables.$fa-css-prefix}-marker:before { content: functions.fa-content(variables.$fa-var-map-marker); }
-.#{variables.$fa-css-prefix}-footprint:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
-.#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
-.#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
-.#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
-.#{variables.$fa-css-prefix}-track-start:before { content: functions.fa-content(variables.$fa-var-hiking);}
-.#{variables.$fa-css-prefix}-track-end:before { content: functions.fa-content(variables.$fa-var-hiking);}
-.#{variables.$fa-css-prefix}-layers:before { content: functions.fa-content(variables.$fa-var-layer-group); }
-.#{variables.$fa-css-prefix}-elev-chart:before { content: functions.fa-content(variables.$fa-var-chart-area); }
-.#{variables.$fa-css-prefix}-distance:before { content: functions.fa-content(variables.$fa-var-arrow-circle-right); }
-.#{variables.$fa-css-prefix}-elev-drop:before { content: functions.fa-content(variables.$fa-var-arrow-circle-down); }
-.#{variables.$fa-css-prefix}-elev-gain:before { content: functions.fa-content(variables.$fa-var-arrow-circle-up); }
-.#{variables.$fa-css-prefix}-download:before { content: functions.fa-content(variables.$fa-var-file-download); }
-
-/* Admin */
-.#{variables.$fa-css-prefix}-newsletter:before { content: functions.fa-content(variables.$fa-var-wifi); }
-.#{variables.$fa-css-prefix}-project:before { content: functions.fa-content(variables.$fa-var-hiking); }
-.#{variables.$fa-css-prefix}-unsubscribe:before { content: functions.fa-content(variables.$fa-var-times); }
-.#{variables.$fa-css-prefix}-credits:before { content: functions.fa-content(variables.$fa-var-paw); }
-.#{variables.$fa-css-prefix}-admin:before { content: functions.fa-content(variables.$fa-var-tools); }
-.#{variables.$fa-css-prefix}-config:before { content: functions.fa-content(variables.$fa-var-cogs); }
-.#{variables.$fa-css-prefix}-upload:before { content: functions.fa-content(variables.$fa-var-cloud-upload); }
-
-/* Upload */
-.#{variables.$fa-css-prefix}-save:before { content: functions.fa-content(variables.$fa-var-floppy-disk); }
-
-/* Feed */
-.#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
-.#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
-.#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
-.#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
-.#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
-.#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
-.#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
-.#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }
-.#{variables.$fa-css-prefix}-drill-video:before { content: functions.fa-content(variables.$fa-var-play-circle); }
-.#{variables.$fa-css-prefix}-drill-image:before { content: functions.fa-content(variables.$fa-var-search); }
-.#{variables.$fa-css-prefix}-drill-message:before { content: functions.fa-content(variables.$fa-var-magnifying-glass-location); }
-.#{variables.$fa-css-prefix}-video-shot:before { content: functions.fa-content(variables.$fa-var-camcorder); }
-.#{variables.$fa-css-prefix}-image-shot:before { content: functions.fa-content(variables.$fa-var-camera-alt); }
-.#{variables.$fa-css-prefix}-link:before { content: functions.fa-content(variables.$fa-var-link); }
-.#{variables.$fa-css-prefix}-copied:before { content: functions.fa-content(variables.$fa-var-check); }
-
-/* Feed - Poster */
-.#{variables.$fa-css-prefix}-poster:before { content: functions.fa-content(variables.$fa-var-comment-edit); }
-.#{variables.$fa-css-prefix}-send:before { content: functions.fa-content(variables.$fa-var-paper-plane); }
-
-/* Lightbox */
-.#{variables.$fa-css-prefix}-timezone:before { content: functions.fa-content(variables.$fa-var-globe); }
-
-/* Weather */
-.#{variables.$fa-css-prefix}-temperature:before { content: functions.fa-content(variables.$fa-var-thermometer-three-quarters); }
-.#{variables.$fa-css-prefix}-clear-day:before { content: functions.fa-content(variables.$fa-var-sun); }
-.#{variables.$fa-css-prefix}-clear-night:before { content: functions.fa-content(variables.$fa-var-moon-stars); }
-.#{variables.$fa-css-prefix}-cloudy:before { content: functions.fa-content(variables.$fa-var-clouds); }
-.#{variables.$fa-css-prefix}-fog:before { content: functions.fa-content(variables.$fa-var-fog); }
-.#{variables.$fa-css-prefix}-hail:before { content: functions.fa-content(variables.$fa-var-cloud-hail); }
-.#{variables.$fa-css-prefix}-partly-cloudy-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun); }
-.#{variables.$fa-css-prefix}-partly-cloudy-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon); }
-.#{variables.$fa-css-prefix}-rain-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
-.#{variables.$fa-css-prefix}-rain-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
-.#{variables.$fa-css-prefix}-rain-snow:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
-.#{variables.$fa-css-prefix}-rain:before { content: functions.fa-content(variables.$fa-var-cloud-rain); }
-.#{variables.$fa-css-prefix}-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
-.#{variables.$fa-css-prefix}-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
-.#{variables.$fa-css-prefix}-sleet:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
-.#{variables.$fa-css-prefix}-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
-.#{variables.$fa-css-prefix}-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
-.#{variables.$fa-css-prefix}-snow:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
-.#{variables.$fa-css-prefix}-thunder-rain:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
-.#{variables.$fa-css-prefix}-thunder-showers-day:before { content: functions.fa-content(variables.$fa-var-thunderstorm-sun); }
-.#{variables.$fa-css-prefix}-thunder-showers-night:before { content: functions.fa-content(variables.$fa-var-thunderstorm-moon); }
-.#{variables.$fa-css-prefix}-thunder:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
-.#{variables.$fa-css-prefix}-wind:before { content: functions.fa-content(variables.$fa-var-wind); }

src/styles/_lightbox.scss

@@ -1,13 +1,26 @@
 @use "common";
-@use "fa/variables";
-@use "fa";
 @use "color";
 
 @mixin lightbox-icon($icon) {
 	background: none;
 	font-size: 2em;
-	@extend .fa;
+	display: inline-block;
-	@extend .#{variables.$fa-css-prefix}-#{$icon};
+	line-height: 1;
+
+	&:before {
+		@if $icon == prev {
+			content: "‹";
+		}
+		@else if $icon == next {
+			content: "›";
+		}
+		@else if $icon == close {
+			content: "×";
+		}
+		@else if $icon == cancel {
+			content: "□";
+		}
+	}
 }
 
 body.lb-disable-scrolling {
@@ -89,7 +102,7 @@ body.lb-disable-scrolling {
 					line-height: 1.33333333em;
 
 					&.comment {
-						.fa {
+						.spot-icon {
 							vertical-align: center;
 						}
 						.comment-text {
@@ -263,12 +276,12 @@ body.lb-disable-scrolling {
 
 			.lb-closeContainer .lb-close {
 				@include lightbox-icon(close);
-				@extend .fa-lg;
-				@extend .fa-fw;
 				@extend .clickable;
 				height: auto;
 				font-size: 1.3333333333em;
 				line-height: 1em;
+				text-align: center;
+				width: 1.25em;
 
 				&:hover {
 					color: color.$default-inv-hover;

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] {
+				.poster-form {
-					margin-bottom: 1em;
+					display: flex;
-					width: calc(100% - 2em);
+					flex-direction: column;
-				}
+					gap: var.$block-spacing;
+
+					.poster-actions {
+						display: flex;
+						align-items: stretch;
+						gap: var.$block-spacing;
 
 						input[name=name] {
-					width: calc(100% - 6em);
+							flex: 1 1 auto;
+							min-width: 0;
 						}
 
 						button[name=submit] {
-					margin-left: 1em;
+							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 {
+						.sub {
-							@extend .#{variables.$fa-css-prefix}-drill-message;
-							top: 13px;
-							left: 3px;
-						}
-						.#{variables.$fa-css-prefix}-stack-1x {
 							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;
 									}

src/styles/_page.project.map.scss

@@ -62,15 +62,15 @@ $thumbnail-max-size: 60px;
 				&.drill {
 					font-size: 2em;
 
-					.fa-drill-image {
+					.drill-image {
 						color: transparent;
 					}
-					.fa-drill-video {
+					.drill-video {
 						color: color.$over-img-bg;
 					}
 
 					&:hover {
-						.fa-drill-video, .fa-drill-image {
+						.drill-video, .drill-image {
 							color: color.$default-bg;
 						}
 					}

src/styles/_page.project.panel.scss

@@ -1,7 +1,6 @@
 @use "common";
 @use "var";
 @use "color";
-@use "fa";
 
 $panel-width: 30vw;
 $panel-width-max: "400px + 3 * #{var.$block-spacing}";
@@ -91,9 +90,6 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 				text-decoration: none;
 			}
 	
-			&+ button, &+ a.button {
-				margin-left: var.$elem-spacing;
-			}
 		}
 	}
 
@@ -141,15 +137,14 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 		&.map-control-icon {
 			cursor: pointer;
 
-			.fa {
+			.spot-icon {
-				@extend .fa-fw;
 				color: color.$default;
 			}
 
 			&:hover {
 				background-color: color.$default-inv-bg;
 
-				.fa {
+				.spot-icon {
 					color: color.$default-inv;
 				}
 			}

src/styles/_page.project.scss

@@ -1,4 +1,3 @@
-@use "fa/variables";
 @use "var";
 @use "color";
 
@@ -28,9 +27,15 @@
 			display: inline-block;
 			top: 50%;
 			left: 50%;
-			transform: translate(-50%,-50%);
+			transform: translate(-50%, -50%);
+			font-size: 2.5em;
+			filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
 
-			i {
+			&.message {
+				transform: translate(-50%, -100%);
+			}
+			
+			.spot-icon {
 				transition: color 0.3s, text-shadow 0.3s;
 			}
 		}
@@ -38,43 +43,35 @@
 
 	/* Icon Stack */
 
-	.icon-stack {
+	.spot-icon-stack {
-		.#{variables.$fa-css-prefix}-stack-2x {
+		&:not(.drill-icon) {
-			font-size: 32px;
+			font-size: 2.5em;
-			text-shadow: color.$over-img-shadow 3px 3px 3px;
+			filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
-		}
-		
-		.#{variables.$fa-css-prefix}-stack-1x {
-			font-size: 13px;
 		}
 
 		&.message {
-			.#{variables.$fa-css-prefix}-stack-2x {
+			.main {
 				color: color.$message-flashy;
 			}
-			.#{variables.$fa-css-prefix}-stack-1x {
+			.sub {
 				color: color.$message;
 			}
 		}
 
 		&.media {
-			.#{variables.$fa-css-prefix}-stack-2x {
+			.main {
 				color: color.$media-flashy;
 			}
-			.#{variables.$fa-css-prefix}-stack-1x {
+			.sub {
 				color: color.$media;
 			}
 		}
 
 		&.track {
-			.#{variables.$fa-css-prefix}-stack-1x {
+			.track-start {
-				font-size: 14px;
-				top: 1px;
-			}
-			.#{variables.$fa-css-prefix}-track-start {
 				color: color.$track-start;
 			}
-			.#{variables.$fa-css-prefix}-track-end {
+			.track-end {
 				color: color.$track-end;
 			}
 		}

src/styles/_page.project.settings.scss

@@ -1,7 +1,6 @@
 @use "common";
 @use "var";
 @use "color";
-@use "fa";
 
 #settings {
 	#settings-panel {
@@ -114,24 +113,25 @@
 				}
 
 				&.newsletter {
+					.newsletter-form {
+						display: flex;
+						align-items: stretch;
+						gap: var.$block-spacing;
+						margin-bottom: var.$block-spacing;
+
 						input#email {
-						width: calc(100% - 6em);
+							flex: 1 1 auto;
+							min-width: 0;
 
 							&:disabled {
 								color: color.$default-disabled;
 								background: color.$default-bg-trans-disabled;
 							}
 						}
-					button#nl_btn {
-						margin-left: 1em;
-						margin-bottom: 1em;
 
-						&.subscribe .fa {
+						button#nl_btn {
-							@extend .fa-send;
+							flex: 0 0 auto;
-						}
+
-						&.unsubscribe .fa {
-							@extend .fa-unsubscribe;
-						}
 							&.loading {
 								background-color: color.$message;
 								color: color.$post-input-bg;
@@ -142,6 +142,20 @@
 						}
 					}
 				}
+
+				&.admin {
+					.admin-actions {
+						display: flex;
+						flex-wrap: wrap;
+						gap: var.$block-spacing;
+
+						a.button {
+							flex: 0 0 auto;
+							min-width: 0;
+						}
+					}
+				}
+			}
 		}
 	}
 }

src/styles/fa/_animated.scss

@@ -1,155 +0,0 @@
-@use "variables";
-
-// animating icons
-// --------------------------
-
-.#{variables.$fa-css-prefix}-beat {
-  animation-name: #{variables.$fa-css-prefix}-beat;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
-}
-
-.#{variables.$fa-css-prefix}-bounce {
-  animation-name: #{variables.$fa-css-prefix}-bounce;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
-}
-
-.#{variables.$fa-css-prefix}-fade {
-  animation-name: #{variables.$fa-css-prefix}-fade;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
-}
-
-.#{variables.$fa-css-prefix}-beat-fade {
-  animation-name: #{variables.$fa-css-prefix}-beat-fade;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
-}
-
-.#{variables.$fa-css-prefix}-flip {
-  animation-name: #{variables.$fa-css-prefix}-flip;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
-}
-
-.#{variables.$fa-css-prefix}-shake {
-  animation-name: #{variables.$fa-css-prefix}-shake;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
-}
-
-.#{variables.$fa-css-prefix}-spin {
-  animation-name: #{variables.$fa-css-prefix}-spin;
-  animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 2s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
-}
-
-.#{variables.$fa-css-prefix}-spin-reverse {
-  --#{variables.$fa-css-prefix}-animation-direction: reverse;
-}
-
-.#{variables.$fa-css-prefix}-pulse,
-.#{variables.$fa-css-prefix}-spin-pulse {
-  animation-name: #{variables.$fa-css-prefix}-spin;
-  animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, steps(8));
-}
-
-// if agent or operating system prefers reduced motion, disable animations
-// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
-// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-@media (prefers-reduced-motion: reduce) {
-  .#{variables.$fa-css-prefix}-beat,
-  .#{variables.$fa-css-prefix}-bounce,
-  .#{variables.$fa-css-prefix}-fade,
-  .#{variables.$fa-css-prefix}-beat-fade,
-  .#{variables.$fa-css-prefix}-flip,
-  .#{variables.$fa-css-prefix}-pulse,
-  .#{variables.$fa-css-prefix}-shake,
-  .#{variables.$fa-css-prefix}-spin,
-  .#{variables.$fa-css-prefix}-spin-pulse {
-    animation-delay: -1ms;
-    animation-duration: 1ms;
-    animation-iteration-count: 1;
-    transition-delay: 0s;
-    transition-duration: 0s;
-  }
-}
-
-@keyframes #{variables.$fa-css-prefix}-beat {
-  0%, 90% { transform: scale(1); }
-  45% { transform: scale(var(--#{variables.$fa-css-prefix}-beat-scale, 1.25)); }
-}
-
-@keyframes #{variables.$fa-css-prefix}-bounce {
-  0%   { transform: scale(1,1) translateY(0); }
-  10%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{variables.$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
-  30%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{variables.$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{variables.$fa-css-prefix}-bounce-height, -0.5em)); }
-  50%  { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{variables.$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
-  57%  { transform: scale(1,1) translateY(var(--#{variables.$fa-css-prefix}-bounce-rebound, -0.125em)); }
-  64%  { transform: scale(1,1) translateY(0); }
-  100% { transform: scale(1,1) translateY(0); }
-}
-
-@keyframes #{variables.$fa-css-prefix}-fade {
-  50% { opacity: var(--#{variables.$fa-css-prefix}-fade-opacity, 0.4); }
-}
-
-@keyframes #{variables.$fa-css-prefix}-beat-fade {
-  0%, 100% {
-    opacity: var(--#{variables.$fa-css-prefix}-beat-fade-opacity, 0.4);
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(var(--#{variables.$fa-css-prefix}-beat-fade-scale, 1.125));
-  }
-}
-
-@keyframes #{variables.$fa-css-prefix}-flip {
-  50% {
-    transform: rotate3d(var(--#{variables.$fa-css-prefix}-flip-x, 0), var(--#{variables.$fa-css-prefix}-flip-y, 1), var(--#{variables.$fa-css-prefix}-flip-z, 0), var(--#{variables.$fa-css-prefix}-flip-angle, -180deg));
-  }
-}
-
-@keyframes #{variables.$fa-css-prefix}-shake {
-  0% { transform: rotate(-15deg); }
-  4% { transform: rotate(15deg); }
-  8%, 24% { transform: rotate(-18deg); }
-  12%, 28% { transform: rotate(18deg); }
-  16% { transform: rotate(-22deg); }
-  20% { transform: rotate(22deg); }
-  32% { transform: rotate(-12deg); }
-  36% { transform: rotate(12deg); }
-  40%, 100% { transform: rotate(0deg); }
-}
-
-@keyframes #{variables.$fa-css-prefix}-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-

src/styles/fa/_bordered-pulled.scss

@@ -1,22 +0,0 @@
-@use "variables";
-
-// bordered + pulled icons
-// -------------------------
-
-.#{variables.$fa-css-prefix}-border {
-  border-color: var(--#{variables.$fa-css-prefix}-border-color, #{variables.$fa-border-color});
-  border-radius: var(--#{variables.$fa-css-prefix}-border-radius, #{variables.$fa-border-radius});
-  border-style: var(--#{variables.$fa-css-prefix}-border-style, #{variables.$fa-border-style});
-  border-width: var(--#{variables.$fa-css-prefix}-border-width, #{variables.$fa-border-width});
-  padding: var(--#{variables.$fa-css-prefix}-border-padding, #{variables.$fa-border-padding});
-}
-
-.#{variables.$fa-css-prefix}-pull-left { 
-  float: left;
-  margin-right: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin}); 
-}
-
-.#{variables.$fa-css-prefix}-pull-right { 
-  float: right;
-  margin-left: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin}); 
-}

src/styles/fa/_core.scss

@@ -1,78 +0,0 @@
-@use "mixins";
-@use "variables";
-
-// base icon class definition
-// -------------------------
-
-.#{variables.$fa-css-prefix} {
-  font-family: var(--#{variables.$fa-css-prefix}-style-family, '#{variables.$fa-style-family}');
-  font-weight: var(--#{variables.$fa-css-prefix}-style, #{variables.$fa-style});
-}
-
-.#{variables.$fa-css-prefix},
-.#{variables.$fa-css-prefix}-classic,
-.#{variables.$fa-css-prefix}-sharp,
-.fas,
-.#{variables.$fa-css-prefix}-solid,
-.far,
-.#{variables.$fa-css-prefix}-regular,
-.fasr,
-.fal,
-.#{variables.$fa-css-prefix}-light,
-.fasl,
-.fat,
-.#{variables.$fa-css-prefix}-thin,
-.fast,
-.fad,
-.#{variables.$fa-css-prefix}-duotone,
-.fass,
-.#{variables.$fa-css-prefix}-sharp-solid,
-.fab,
-.#{variables.$fa-css-prefix}-brands {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: var(--#{variables.$fa-css-prefix}-display, #{variables.$fa-display});
-  font-style: normal;
-  font-variant: normal;
-  line-height: 1;
-  text-rendering: auto;
-}
-
-.fas,
-.#{variables.$fa-css-prefix}-classic,
-.#{variables.$fa-css-prefix}-solid,
-.far,
-.#{variables.$fa-css-prefix}-regular,
-.fal,
-.#{variables.$fa-css-prefix}-light,
-.fat,
-.#{variables.$fa-css-prefix}-thin {
-  font-family: 'Font Awesome 6 Pro';
-}
-
-.fab,
-.#{variables.$fa-css-prefix}-brands {
-  font-family: 'Font Awesome 6 Brands';
-}
-
-.fad,
-.#{variables.$fa-css-prefix}-classic.#{variables.$fa-css-prefix}-duotone,
-.#{variables.$fa-css-prefix}-duotone {
-  font-family: 'Font Awesome 6 Duotone';
-}
-
-.fass,
-.fasr,
-.fasl,
-.fast,
-.#{variables.$fa-css-prefix}-sharp {
-  font-family: 'Font Awesome 6 Sharp';
-}
-.fass,
-.#{variables.$fa-css-prefix}-sharp {
-  font-weight: 900;
-}
-
-%fa-icon {
-  @include mixins.fa-icon;
-}

src/styles/fa/_duotone-icons.scss

@@ -1,12 +0,0 @@
-// specific duotone icon class definition
-// -------------------------
-
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */
-
-
-@each $name, $icon in $fa-icons {
-  .fad.#{$fa-css-prefix}-#{$name}::after, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
-    content: unquote("\"#{ $icon }#{ $icon }\"");
-  }
-}
-

src/styles/fa/_fixed-width.scss

@@ -1,9 +0,0 @@
-@use "variables";
-
-// fixed-width icons
-// -------------------------
-
-.#{variables.$fa-css-prefix}-fw {
-  text-align: center;
-  width: variables.$fa-fw-width;
-}

src/styles/fa/_functions.scss

@@ -1,59 +0,0 @@
-@use "sass:math";
-@use "sass:string";
-// functions
-// --------------------------
-
-// fa-content: convenience function used to set content property
-@function fa-content($fa-var) {
-  @return string.unquote("\"#{ $fa-var }\"");
-}
-
-// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
-//
-// Licensed under: The MIT License (MIT)
-//
-// Copyright (c) 2011-2021 Twitter, Inc.
-// Copyright (c) 2011-2021 The Bootstrap Authors
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-@function fa-divide($dividend, $divisor, $precision: 10) {
-  $sign: if(sass($dividend > 0 and $divisor > 0): 1; else: -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.abs($divisor);
-  $quotient: 0;
-  $remainder: $dividend;
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  @if $divisor == 1 {
-    @return $dividend;
-  }
-  @while $remainder >= $divisor {
-    $quotient: $quotient + 1;
-    $remainder: $remainder - $divisor;
-  }
-  @if $remainder > 0 and $precision > 0 {
-    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
-  }
-  @return ($quotient + $remainder) * $sign;
-}

src/styles/fa/_icons.scss

@@ -1,10 +0,0 @@
-// specific icon class definition
-// -------------------------
-
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
-
-@each $name, $icon in $fa-icons {
-  .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
-}
-

src/styles/fa/_list.scss

@@ -1,20 +0,0 @@
-@use "variables";
-
-// icons in a list
-// -------------------------
-
-.#{variables.$fa-css-prefix}-ul {
-  list-style-type: none;
-  margin-left: var(--#{variables.$fa-css-prefix}-li-margin, #{variables.$fa-li-margin});
-  padding-left: 0;
-
-  > li { position: relative; }
-}
-
-.#{variables.$fa-css-prefix}-li {
-  left: calc(var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width}) * -1);
-  position: absolute;
-  text-align: center;
-  width: var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width});
-  line-height: inherit;
-}

src/styles/fa/_mixins.scss

@@ -1,152 +0,0 @@
-@use "sass:string";
-@use "functions";
-@use "variables";
-
-// mixins
-// --------------------------
-
-// base rendering for an icon
-@mixin fa-icon {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-}
-
-// sets relative font-sizing and alignment (in _sizing)
-@mixin fa-size ($font-size) {
-  font-size: functions.fa-divide($font-size, variables.$fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
-  line-height: functions.fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
-  vertical-align: (functions.fa-divide(6, $font-size) - functions.fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
-}
-
-// only display content to screen readers
-// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin fa-sr-only() {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-// use in conjunction with .sr-only to only display content when it's focused
-@mixin fa-sr-only-focusable() {
-  &:not(:focus) {
-    @include fa-sr-only();
-  }
-}
-
-// sets a specific icon family to use alongside style + icon mixins
-@mixin fa-family-classic() {
-  font-family: 'Font Awesome 6 Pro';
-}
-
-@mixin fa-family-sharp() {
-  font-family: 'Font Awesome 6 Sharp';
-}
-
-// convenience mixins for declaring pseudo-elements by CSS variable,
-// including all style-specific font properties, and both the ::before
-// and ::after elements in the duotone case.
-@mixin fa-icon-solid($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-solid;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-regular($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-regular;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-light($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-light;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-thin($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-thin;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-duotone($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-duotone;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-  &::after {
-    content: string.unquote("\"#{ $fa-var }#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-sharp-solid($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-sharp-solid;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-sharp-regular($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-sharp-regular;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-sharp-light($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-sharp-light;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-sharp-thin($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-sharp-thin;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-
-@mixin fa-icon-brands($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-brands;
-
-  &::before {
-    content: string.unquote("\"#{ $fa-var }\"");
-  }
-}
-

src/styles/fa/_rotated-flipped.scss

@@ -1,33 +0,0 @@
-@use "variables";
-
-// rotating + flipping icons
-// -------------------------
-
-.#{variables.$fa-css-prefix}-rotate-90 {
-  transform: rotate(90deg);
-}
-
-.#{variables.$fa-css-prefix}-rotate-180 {
-  transform: rotate(180deg);
-}
-
-.#{variables.$fa-css-prefix}-rotate-270 {
-  transform: rotate(270deg);
-}
-
-.#{variables.$fa-css-prefix}-flip-horizontal {
-  transform: scale(-1, 1);
-}
-
-.#{variables.$fa-css-prefix}-flip-vertical {
-  transform: scale(1, -1);
-}
-
-.#{variables.$fa-css-prefix}-flip-both,
-.#{variables.$fa-css-prefix}-flip-horizontal.#{variables.$fa-css-prefix}-flip-vertical { 
-  transform: scale(-1, -1);
-}
-
-.#{variables.$fa-css-prefix}-rotate-by {
-  transform: rotate(var(--#{variables.$fa-css-prefix}-rotate-angle, none));
-}

src/styles/fa/_screen-reader.scss

@@ -1,14 +0,0 @@
-// screen-reader utilities
-// -------------------------
-
-// only display content to screen readers
-.sr-only,
-.#{$fa-css-prefix}-sr-only {
-  @include fa-sr-only;
-}
-
-// use in conjunction with .sr-only to only display content when it's focused
-.sr-only-focusable,
-.#{$fa-css-prefix}-sr-only-focusable {
-  @include fa-sr-only-focusable;
-}

src/styles/fa/_sizing.scss

@@ -1,19 +0,0 @@
-@use "mixins";
-@use "variables";
-
-// sizing icons
-// -------------------------
-
-// literal magnification scale
-@for $i from 1 through 10 {
-  .#{variables.$fa-css-prefix}-#{$i}x {
-    font-size: $i * 1em;
-  }
-}
-
-// step-based scale (with alignment)
-@each $size, $value in variables.$fa-sizes {
-  .#{variables.$fa-css-prefix}-#{$size} {
-     @include mixins.fa-size($value);
-  }
-}

src/styles/fa/_stacked.scss

@@ -1,34 +0,0 @@
-@use "variables";
-
-// stacking icons
-// -------------------------
-
-.#{variables.$fa-css-prefix}-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
-  position: relative;
-  vertical-align: variables.$fa-stack-vertical-align;
-  width: variables.$fa-stack-width;
-}
-
-.#{variables.$fa-css-prefix}-stack-1x,
-.#{variables.$fa-css-prefix}-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-  z-index: var(--#{variables.$fa-css-prefix}-stack-z-index, #{variables.$fa-stack-z-index});
-}
-
-.#{variables.$fa-css-prefix}-stack-1x {
-  line-height: inherit;
-}
-
-.#{variables.$fa-css-prefix}-stack-2x {
-  font-size: 2em;
-}
-
-.#{variables.$fa-css-prefix}-inverse {
-  color: var(--#{variables.$fa-css-prefix}-inverse, #{variables.$fa-inverse});
-}

src/styles/fa/brands.scss

@@ -1,30 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
-  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Brands';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
-}
-
-.fab,
-.#{$fa-css-prefix}-brands {
-  font-weight: 400;
-}
-
-@each $name, $icon in $fa-brand-icons {
-  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
-}

src/styles/fa/duotone.scss

@@ -1,65 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
-  --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Duotone';
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
-}
-
-.fad,
-.#{$fa-css-prefix}-duotone {
-  position: relative;
-  font-weight: 900;
-  letter-spacing: normal;
-}
-
-.fad::before,
-.#{$fa-css-prefix}-duotone::before {
-  position: absolute;
-  color: var(--#{$fa-css-prefix}-primary-color, inherit);
-  opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
-}
-
-.fad::after,
-.#{$fa-css-prefix}-duotone::after {
-  color: var(--#{$fa-css-prefix}-secondary-color, inherit);
-  opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
-}
-
-.#{$fa-css-prefix}-swap-opacity .fad::before,
-.#{$fa-css-prefix}-swap-opacity .fa-duotone::before,
-.fad.#{$fa-css-prefix}-swap-opacity::before,
-.fa-duotone.#{$fa-css-prefix}-swap-opacity::before {
-  opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
-}
-
-.#{$fa-css-prefix}-swap-opacity .fad::after,
-.#{$fa-css-prefix}-swap-opacity .fa-duotone::after,
-.fad.#{$fa-css-prefix}-swap-opacity::after,
-.fa-duotone.#{$fa-css-prefix}-swap-opacity::after {
-  opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
-}
-
-.fad.#{$fa-css-prefix}-inverse,
-.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-inverse {
-  color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
-}
-
-.fad.#{$fa-css-prefix}-stack-1x, .fad.#{$fa-css-prefix}-stack-2x,
-.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x {
-  position: absolute;
-}

src/styles/fa/fontawesome.scss

@@ -1,21 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-// Font Awesome core compile (Web Fonts-based)
-// -------------------------
-
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'sizing';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';

src/styles/fa/light.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
-  --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
-}
-
-.fal,
-.#{$fa-css-prefix}-light {
-  font-weight: 300;
-}

src/styles/fa/regular.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
-  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
-}
-
-.far,
-.#{$fa-css-prefix}-regular {
-  font-weight: 400;
-}

src/styles/fa/sharp-light.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
-  --#{$fa-css-prefix}-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Sharp';
-  font-style: normal;
-  font-weight: 300;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-sharp-light-300.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-sharp-light-300.ttf') format('truetype');
-}
-
-.fasl,
-.#{$fa-css-prefix}-light {
-  font-weight: 300;
-}

src/styles/fa/sharp-regular.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
-  --#{$fa-css-prefix}-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Sharp';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-sharp-regular-400.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-sharp-regular-400.ttf') format('truetype');
-}
-
-.fasr,
-.#{$fa-css-prefix}-regular {
-  font-weight: 400;
-}

src/styles/fa/sharp-solid.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
-  --#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Sharp';
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-sharp-solid-900.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-sharp-solid-900.ttf') format('truetype');
-}
-
-.fass,
-.#{$fa-css-prefix}-solid {
-  font-weight: 900;
-}

src/styles/fa/sharp-thin.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
-  --#{$fa-css-prefix}-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Sharp';
-  font-style: normal;
-  font-weight: 100;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-sharp-thin-100.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-sharp-thin-100.ttf') format('truetype');
-}
-
-.fast,
-.#{$fa-css-prefix}-thin {
-  font-weight: 100;
-}

src/styles/fa/solid.scss

@@ -1,27 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@use 'functions';
-@forward 'variables' show $fa-css-prefix, $fa-font-path;
-@use 'variables';
-
-:root, :host {
-  --#{variables.$fa-css-prefix}-style-family-classic: '#{ variables.$fa-style-family }';
-  --#{variables.$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ variables.$fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: variables.$fa-font-display;
-  src: url('#{variables.$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-    url('#{variables.$fa-font-path}/fa-solid-900.ttf') format('truetype');
-}
-
-.fas,
-.#{variables.$fa-css-prefix}-solid {
-  font-weight: 900;
-}

src/styles/fa/thin.scss

@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
-  --#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Pro';
-  font-style: normal;
-  font-weight: 100;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
-}
-
-.fat,
-.#{$fa-css-prefix}-thin {
-  font-weight: 100;
-}

src/styles/fa/v4-shims.scss

@@ -1,11 +0,0 @@
-/*!
- * Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2023 Fonticons, Inc.
- */
-// V4 shims compile (Web Fonts-based)
-// -------------------------
-
-@import 'functions';
-@import 'variables';
-@import 'shims';

src/styles/spot.scss

@@ -1,6 +1,5 @@
 /* Site Global CSS */
 @use "sass:meta";
-@use 'fonts';
 @use 'common';
 
 /* Modules */