Visually separate header.

lib/pleroma/web/static_fe/static_fe_controller.ex

@@ -34,17 +34,17 @@ def get_counts(%Activity{} = activity) do
     }
   end
 
-  def represent(%Activity{} = activity, selected) do
+  def represent(%Activity{object: %Object{data: data}} = activity, selected) do
     {:ok, user} = User.get_or_fetch(activity.object.data["actor"])
 
     %{
       user: user,
       title: get_title(activity.object),
-      content: activity.object.data["content"] || nil,
-      attachment: activity.object.data["attachment"],
+      content: data["content"] || nil,
+      attachment: data["attachment"],
       link: Helpers.o_status_url(Pleroma.Web.Endpoint, :notice, activity.id),
-      published: activity.object.data["published"],
-      sensitive: activity.object.data["sensitive"],
+      published: data["published"],
+      sensitive: data["sensitive"],
       selected: selected,
       counts: get_counts(activity)
     }

lib/pleroma/web/static_fe/static_fe_view.ex

@@ -8,6 +8,7 @@ defmodule Pleroma.Web.StaticFE.StaticFEView do
   alias Calendar.Strftime
   alias Pleroma.Emoji.Formatter
   alias Pleroma.User
+  alias Pleroma.Web.Endpoint
   alias Pleroma.Web.Gettext
   alias Pleroma.Web.MediaProxy
   alias Pleroma.Formatter

lib/pleroma/web/templates/static_fe/static_fe/conversation.html.eex

@@ -1,7 +1,11 @@
-<h1><%= link @instance_name, to: "/" %></h1>
+<header>
+  <h1><%= link @instance_name, to: "/" %></h1>
+</header>
 
-<div class="conversation">
-  <%= for activity <- @activities do %>
-    <%= render("_notice.html", activity) %>
-  <% end %>
-</div>
+<main>
+  <div class="conversation">
+    <%= for activity <- @activities do %>
+      <%= render("_notice.html", activity) %>
+    <% end %>
+  </div>
+</main>

lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex

@@ -1,16 +1,22 @@
-<h1><%= link @instance_name, to: "/" %></h1>
+<header>
+  <h1><%= link @instance_name, to: "/" %></h1>
 
-<h3>
-  <form class="pull-right collapse" method="POST" action="<%= Helpers.util_path(@conn, :remote_subscribe) %>">
-    <input type="hidden" name="nickname" value="<%= @user.nickname %>">
-    <input type="hidden" name="profile" value="">
-    <button type="submit" class="collapse">Remote follow</button>
-  </form>
-  <%= raw (@user.name |> Formatter.emojify(emoji_for_user(@user))) %>
-</h3>
-<p><%= raw @user.bio %></p>
-<div class="activity-stream">
-  <%= for activity <- @timeline do %>
-    <%= render("_notice.html", Map.put(activity, :selected, false)) %>
-  <% end %>
-</div>
+  <h3>
+    <form class="pull-right collapse" method="POST" action="<%= Helpers.util_path(@conn, :remote_subscribe) %>">
+      <input type="hidden" name="nickname" value="<%= @user.nickname %>">
+      <input type="hidden" name="profile" value="">
+      <button type="submit" class="collapse">Remote follow</button>
+    </form>
+    <%= raw Formatter.emojify(@user.name, emoji_for_user(@user)) %> |
+    <%= link "@#{@user.nickname}@#{Endpoint.host()}", to: User.profile_url(@user) %>
+  </h3>
+  <p><%= raw @user.bio %></p>
+</header>
+
+<main>
+  <div class="activity-stream">
+    <%= for activity <- @timeline do %>
+      <%= render("_notice.html", Map.put(activity, :selected, false)) %>
+    <% end %>
+  </div>
+</main>

priv/static/static/static-fe.css

@@ -4,7 +4,7 @@ body {
     color: white;
 }
 
-.container {
+main {
     margin: 50px auto;
     max-width: 960px;
     padding: 40px;
@@ -13,7 +13,11 @@ .container {
 }
 
 header {
-    border-bottom: 2em solid #282c37;
+    margin: 50px auto;
+    max-width: 960px;
+    padding: 40px;
+    background-color: #313543;
+    border-radius: 4px;
 }
 
 .activity {
@@ -57,11 +61,11 @@ .h-card {
     margin-bottom: 8px;
 }
 
-.h-card a {
+header a, .h-card a {
     text-decoration: none;
 }
 
-.h-card a:hover {
+header a:hover, .h-card a:hover {
     text-decoration: underline;
 }