update website

website/src/components/Footer.vue

@@ -1,7 +1,7 @@
 <template>
 	<div style="background-color: #1B1C1F">
 
-		<div ref="container" style="display: flex; justify-content: space-between; align-items: end; max-width: 1280px; margin: auto; padding: 0.8rem;" class="desktop">
+		<div ref="container" style="display: flex; justify-content: space-between; max-width: 1280px; margin: auto; padding: 0.8rem;" class="desktop">
 
 			<div style="display: inline-block; margin-right: 2rem;">
 				<p>

website/src/components/Header.vue

@@ -38,6 +38,12 @@
 </template>
 
 <script>
+
+function getActualElementWidth(element) {
+  const style = window.getComputedStyle(element);
+  return element.offsetWidth + parseFloat(style.getPropertyValue("margin-right")) + parseFloat(style.getPropertyValue("margin-left"));
+}
+
 export default {
 	name: 'Header',
 	mounted() {
@@ -60,7 +66,7 @@ export default {
 		updateWidth() {
 			let totalChildWidth = 0;
 			for (const child of this.$refs.container.children) {
-				totalChildWidth += child.clientWidth;
+				totalChildWidth += getActualElementWidth(child);
 			}
 			this.menu_visible = totalChildWidth >= this.$el.clientWidth
 		},

website/src/components/Settings.vue

@@ -6,9 +6,7 @@
 		Settings can be changed for the whole server (guild) or for individual channels. Channel settings take priority over server settings.
 	</p>
 
-	<h1>
-		Settings
-	</h1>
+  <hr>
 
 	<div v-for="(setting, index) in settings" v-bind:key="setting">
 		<code>{{ setting.name }}</code> - {{ setting.description }}