Designing /web layout + user nav

public/css/custom.css

@@ -21,6 +21,37 @@
 
 .bg-mastodon { background: #3088d4 !important }
 
+header#web table {
+  width: 100%;
+  margin: 0;
+}
+
+header#web table td {
+  padding: 0;
+  border: none !important;
+  vertical-align: middle;
+}
+
+header#web table div.profile {
+  border-radius: 50%;
+  padding: 3px;
+  background: linear-gradient(145deg, #ff008f, #f92592, #17f4ff, yellow);
+}
+
+header#web table div.profile > img {
+  border-radius: 50%;
+  box-shadow: 0px 0px .4em #00000063;
+  filter: contrast(30%) brightness(140%);
+}
+
+header#web table span.brand {
+  color: #3e78a2;
+  font-size: .9em;
+  word-wrap: anywhere;
+  line-height: 1.2em;
+  top: .4em;
+}
+
 /* Public
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 

public/web/index.php

@@ -1,3 +1,14 @@
 <?php
 
-echo 'web';
+?>
+<?php require '/src/views/head.php' ?>
+<?php require '/src/views/web/head.php' ?>
+
+<main id="web">
+	<div class="content">
+		WEB
+	</div>
+</main>
+
+<?php require '/src/views/web/foot.php' ?>
+<?php require '/src/views/foot.php' ?>

src/views/public/head.php

@@ -1,6 +1,6 @@
 <div id="loader" style="display: none"><div class="lds-ring">
   <div></div><div></div><div></div><div></div></div></div>
-<header>
+<header id="public">
 	<div class="icon">
 		<a href="/">
 			<img width="30" height="30" src="/img/favicon_tmp.png"/>

src/views/web/foot.php

@@ -0,0 +1,2 @@
+<?php
+

src/views/web/head.php

@@ -0,0 +1,19 @@
+<div id="loader" style="display: none"><div class="lds-ring">
+  <div></div><div></div><div></div><div></div></div></div>
+<header id="web">
+	<table><tbody>
+		<tr>
+			<td style="width: 0">
+				<a href="/"><img width="30" height="30" src="/img/favicon_tmp.png"/></a>
+			</td>
+			<td style="text-align: center; padding: 0 .5em">
+				<span class="brand"><?php echo $user->acct ?></span>
+			</td>
+			<td style="width: 0">
+				<a href="javascript:window.USER.action.showMenu()"><div class="profile">
+					<img width="40" height="40" src="<?php echo $user->account_data->avatar ?>"/>
+				</div></a>
+			</td>
+		</tr>
+	</tbody></table>
+</header>