components/Button.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.4em 0.75em;
+	padding: 0.7dvh 1.2dvw;
 	font-size: 1.1em;
 	transition: background-color 0.2s;
 

components/Channel.vue

@@ -23,14 +23,14 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link {
 	text-decoration: none;
 	color: inherit;
-	padding-left: .25em;
-	padding-right: .25em;
+	padding-left: .5dvw;
+	padding-right: .5dvw;
 }
 
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 1.5em;
+	height: 4dvh;
 	white-space: nowrap;
 	align-items: center;
 }

components/Message.vue

@@ -188,12 +188,12 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style module>
 .message-text ul, h1, h2, h3, h4, h5, h6 {
-	padding-top: .5em;
-	padding-bottom: .5em;
+	padding-top: 1dvh;
+	padding-bottom: 1dvh;
 	margin: 0;
 }
 
 .message-text ul  {
-	padding-left: 1em;
+	padding-left: 2dvw;
 }
 </style>

components/MessageArea.vue

@@ -246,7 +246,6 @@ router.beforeEach((to, from, next) => {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
-	flex-grow: 1;
 }
 
 #message-box {

layouts/client.vue

@@ -6,7 +6,6 @@
 				main bar
 			</div>
 		</div>
-		<div id = "page-content">
 		<div id="left-column">
 			<NuxtLink id="home-button" href="/">
 				<img class="sidebar-icon" src="/public/icon.svg"/>
@@ -23,7 +22,6 @@
 		</div>
 		<slot />
 	</div>
-	</div>
 </template>
 
 <script lang="ts" setup>
@@ -36,10 +34,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 <style>
 #client-root {
+	/* border: 1px solid white; */
 	height: 100dvh;
-	width: 100dvw;
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr 4fr 18fr 4fr;
+	grid-template-rows: 4dvh auto;
 	text-align: center;
 }
 
@@ -49,54 +48,37 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 .visible {
 	opacity: 100%;
-	transition: opacity 500ms;
+	transition-duration: 500ms;
 }
 
 #homebar {
-	min-height: 4dvh;
+	grid-row: 1;
+	grid-column: 1 / -1;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
-	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 }
 
-#page-content {
-	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
-    overflow: auto;
+#client-root>div:nth-child(-n+4) {
+	border-bottom: 1px solid var(--padding-color);
 }
 
-#left-column {
+#__nuxt {
 	display: flex;
-	flex-direction: column;
-	gap: .75em;
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-	padding-top: .5em;
+	flex-flow: column;
 }
 
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1em;
-	width: 3.2rem;	
+.grid-column {
+	padding-top: 1dvh;
 }
 
-#middle-left-column {
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	min-width: 10em;
-	overflow-y: scroll;
-	overflow-x: hidden;
+#home {
+	padding-left: .5dvw;
+	padding-right: .5dvw;
 }
 
 .sidebar-icon {
@@ -104,14 +86,43 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	height: 3rem;
 }
 
+#current-info {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#left-column {
+	display: flex;
+	flex-direction: column;
+	gap: 2dvh;
+	padding-left: .5dvw;
+	padding-right: .5dvw;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+	padding-top: 1.5dvh;
+}
+
+#middle-left-column {
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	border-right: 1px solid var(--padding-color);
+}
+
 #home-button {
 	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: .375em;
+	padding-bottom: 1dvh;
 }
 
 #settings-menu {
 	position: absolute;
-	bottom: .25em
+	bottom: .25dvh
+}
+
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
 }
 
 </style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -27,7 +27,6 @@
 		<div id="members-container">
 			<div id="members-list">
 				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -84,35 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>
 
 #middle-left-column {
-	padding-left: .5em;
-	padding-right: .5em;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
 	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
-	width: 12rem;
+	padding-top: 1dvh;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	border-left: 1px solid var(--padding-color);
 }
 
 #members-list {
 	display: flex;
 	flex-direction: column;
-	overflow-x: hidden;
 	overflow-y: scroll;
-	padding-left: 1.25em;
-	padding-right: 1.25em;
-	padding-top: 0.75em;
-	padding-bottom: 0.75em;
-	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
+	max-height: 92dvh;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	margin-top: 1dvh;
 }
 
 .member-item {
-	display: flex;
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: .5em;
+	gap: 1em;
 	align-items: center;
 	text-align: left;
 	cursor: pointer;
@@ -121,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: .5em;
+	gap: 1dvh;
 }
 
 .member-avatar {