UI: Styling for Published Page (#10335)

* UI: Styling for Published Page

Styling to look more visually connected to Discourse

app/assets/stylesheets/publish.scss

@@ -1,17 +1,47 @@
 @import "common";
 
-.published-page-wrapper {
+.published-page-content-wrapper {
   margin: 2em auto;
   max-width: 800px;
 }
 
+.pp-header {
+  width: 100%;
+  top: 0;
+  z-index: z("header");
+  background-color: $secondary;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
+  position: sticky;
+  top: 0;
+  .pp-header-wrapper {
+    width: 925px;
+    display: flex;
+    margin: 0em auto;
+    padding: 0.5em 0;
+    align-items: center;
+    .pp-logo {
+      height: 45px;
+      margin-right: 1em;
+      line-height: 1em;
+    }
+    .pp-title {
+      color: $header_primary;
+      font-size: 3em;
+      margin: 0;
+      max-height: 1.25em;
+    }
+  }
+}
+
 .published-page {
   background-color: $secondary;
   color: $primary;
-}
 
-.published-page-title {
-  color: $header_primary;
+  blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    padding: 12px;
+  }
 }
 
 .published-page-author {
@@ -21,12 +51,16 @@
 
   .avatar {
     margin-right: 1em;
+    height: 45px;
+    width: 45px;
+    border: 4px solid rgba($tertiary, 0.75);
   }
   .topic-created-at {
     color: $primary-medium;
   }
 }
 
-.published-page-body {
+.published-page-content-body {
   font-size: 1.25em;
+  padding-bottom: 2em;
 }

app/controllers/published_pages_controller.rb

@@ -31,6 +31,9 @@ class PublishedPagesController < ApplicationController
 
     @topic = pp.topic
     @canonical_url = @topic.url
+    @logo = SiteSetting.logo_small
+    @site_url = Discourse.base_url
+    @border_color = "#" + ColorScheme.base_colors["tertiary"]
 
     @body_classes = Set.new([
       'published-page',

app/views/published_pages/show.html.erb

@@ -1,9 +1,15 @@
-<div class="published-page-wrapper">
-  <div class="published-page-header">
-    <h1 class="published-page-title"><%= @topic.title %></h1>
-
+<div class="pp-header">
+    <div class="pp-header-wrapper">
+      <a href="<%= @site_url %>">
+        <img class="pp-logo" src="<%=@logo.url%>"/>
+      </a>
+      <h1 class="pp-title"><%= @topic.title %></h1>
+    </div>
+  </div>
+<div class="published-page-content-wrapper">
+  <div class="published-page-content-header">
     <div class="published-page-author">
-      <img width="45" height="45" src="<%= @topic.user.avatar_template.gsub('{size}', '90') %>" class="avatar">
+      <img class="avatar" src="<%= @topic.user.avatar_template.gsub('{size}', '90') %>">
       <div class="published-page-author-details">
         <div class="username"><%= @topic.user.username %></div>
         <div class="topic-created-at"><%= short_date(@topic.created_at) %></div>
@@ -11,8 +17,8 @@
     </div>
   </div>
   <%- if @topic.first_post.present? %>
-    <div class="published-page-body">
+    <div class="published-page-content-body">
       <%= @topic.first_post.cooked.html_safe %>
     </div>
   <%- end -%>
-</div>
+</div>