Make published page look more like OrcasHub

common/common.scss

@@ -5,6 +5,7 @@
 
 html.anon {
     body:not(.category-resources) {
+
         // Display this message on all pages except in Community Resources
         #login-message {
             text-align: center;
@@ -48,42 +49,52 @@ html.anon {
     margin: 0 auto !important;
     max-width: unset;
     color: var(--secondary);
+
     h1 {
         font-size: 4em;
     }
+
     p {
         font-size: 1.25em !important;
         font-weight: bold;
         margin-bottom: 1em;
     }
+
     .btn {
         height: 100%;
     }
+
     .search-menu input[type="text"] {
         border: 1px solid transparent;
         border-radius: 0.25em;
         min-height: 40px;
+
         &:focus {
             outline: 3px solid rgba(var(--primary-rgb), 0.35);
         }
     }
+
     .widget-link.show-help {
         color: rgba(var(--primary-rgb), 0.75);
         border-radius: 0.5em;
         padding: 0.5em;
         background-color: rgba(var(--secondary-rgb), 0.25);
+
         &:hover {
             color: var(--primary);
         }
     }
+
     .search-menu .search-input {
         border-color: var(--tertiary-hover);
         outline: 1px solid var(--tertiary-hover);
     }
+
     .results {
         top: 43px;
         border-radius: 0.25em;
     }
+
     .search-context {
         top: 3.25em;
         right: 1em;
@@ -106,12 +117,15 @@ html.anon {
     .custom-search-banner-wrap {
         padding: 1em 0 2em;
         color: var(--tertiary);
+
         .mobile-view & {
             color: var(--secondary);
         }
+
         h1 {
             margin-bottom: 0;
         }
+
         .search-widget {
             margin-top: 2em;
         }
@@ -142,9 +156,11 @@ html.anon {
     .badge-category-bg {
         border-radius: 0.125em;
     }
+
     .badge-category-parent-bg {
         border-top-left-radius: 0.125em;
         border-bottom-left-radius: 0.125em;
+
         +.badge-category-bg {
             border-top-left-radius: 0px;
             border-bottom-left-radius: 0px;
@@ -164,6 +180,7 @@ html.anon {
     padding: 0.15em 0.25em 0.15em 0.35em;
     background-color: var(--primary-low);
     color: var(--primary) !important;
+
     &:hover {
         background-color: var(--primary-low-mid);
         color: var(--primary);
@@ -198,6 +215,7 @@ html.anon {
     .cm-header-links {
         display: none;
     }
+
     .list-controls .nav-pills .drop li:first-of-type {
         display: none;
     }
@@ -222,6 +240,7 @@ input[type="color"],
 div.ac-wrap {
     border-radius: 4px;
 }
+
 .d-header {
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 }
@@ -234,6 +253,7 @@ div.ac-wrap {
     border-radius: 0.25em;
     margin-left: 0.3em;
     border: 1px solid transparent;
+
     svg {
         font-size: 1.25em;
     }
@@ -251,6 +271,7 @@ div.ac-wrap {
 
 .drop-down-mode .d-header-icons .active .icon {
     border: 1px solid transparent;
+
     .d-icon {
         color: var(--tertiary);
     }
@@ -301,11 +322,9 @@ div.ac-wrap {
 
 html {
     body {
-    background: linear-gradient(
+        background: linear-gradient(0deg,
-        0deg,
                 rgba(var(--primary-rgb), 0.075) 0%,
-        rgba(var(--primary-rgb), 0.075) 100%
+                rgba(var(--primary-rgb), 0.075) 100%),
-      ),
             linear-gradient(0deg, var(--secondary) 100%, var(--secondary) 100%);
     }
 }
@@ -317,18 +336,23 @@ html body #main-outlet {
     border-radius: .5rem;
     padding: 3em 3em 5%;
     max-width: 1150px;
+
     .archetype-regular & {
         min-height: 500px;
     }
+
     @media screen and (max-width: 700px) {
         padding: 1.5em;
         margin-top: 0;
     }
+
     padding-bottom: 5% !important; //overriding inline style
     @include box-shadow;
+
     @media screen and (max-width: 1120px) {
         width: 80%;
     }
+
     @media screen and (max-width: 1075px) {
         width: 85%;
     }
@@ -366,6 +390,7 @@ html body #main-outlet {
     0% {
         background-color: var(--highlight-low);
     }
+
     100% {
         background-color: var(--secondary);
     }
@@ -375,35 +400,45 @@ html body #main-outlet {
     border-collapse: separate;
     border-spacing: 0 0.25em;
     display: contents;
+
     .topic-list-header {
         tr {
             display: flex;
             border-bottom: none;
         }
+
         display: contents;
+
         .topic-list-data.default {
             width: 63%;
         }
+
         .topic-list-data.posters {
             width: 7%;
         }
+
         .topic-list-data.posts {
             width: 15%;
         }
+
         .topic-list-data.activity {
             width: 15%;
         }
     }
+
     .topic-list-body {
         display: contents;
+
         .topic-list-item-separator {
             width: 100%;
             margin: 0.75em 0;
             display: flex;
+
             .topic-list-data {
                 width: 100%;
             }
         }
+
         .topic-list-item {
             width: 100%;
             display: flex;
@@ -415,31 +450,39 @@ html body #main-outlet {
             transition: box-shadow 100ms ease-in-out;
             box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
             overflow: hidden;
+
             &.visited {
                 border: 1px solid rgba(var(--primary-rgb), 0.1);
+
                 .discourse-tag {
                     opacity: 0.75;
                 }
+
                 &:hover {
                     border: 1px solid rgba(var(--primary-rgb), 0.25);
+
                     .discourse-tag {
                         opacity: 1;
                     }
                 }
             }
+
             &:hover {
                 background-color: var(--secondary);
                 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
                 border: 1px solid rgba(var(--primary-rgb), 0.3);
+
                 a.title:not(.badge-notification),
                 a.topic-excerpt {
                     color: var(--primary) !important;
                 }
             }
+
             .topic-list-data.main-link {
                 width: 63%;
                 order: 2;
             }
+
             .topic-list-data.posters {
                 width: 7%;
                 order: 1;
@@ -447,10 +490,12 @@ html body #main-outlet {
                 display: flex;
                 justify-content: center;
                 align-items: center;
+
                 a:not(.latest) {
                     display: none;
                 }
             }
+
             .topic-list-data.posts {
                 width: 15%;
                 order: 3;
@@ -458,6 +503,7 @@ html body #main-outlet {
                 justify-content: center;
                 align-items: center;
             }
+
             .topic-list-data.age {
                 width: 15%;
                 order: 4;
@@ -481,6 +527,7 @@ html body #main-outlet {
     justify-content: center;
     align-content: center;
     align-items: center;
+
     .avatar {
         margin-right: 0;
     }
@@ -491,19 +538,24 @@ html body #main-outlet {
         .main-link {
             min-height: 100%;
             min-height: 100%;
+
             .link-top-line {
                 display: block;
                 margin-bottom: 0.25em;
             }
+
             .title {
                 font-weight: bold;
             }
+
             .link-area {
                 display: flex;
+
                 .link-title-area {
                     margin-right: 1em;
                     font-size: $font-up-1;
                 }
+
                 .link-meta-area {
                     font-size: $font-down-3;
                     display: flex;
@@ -511,41 +563,50 @@ html body #main-outlet {
                 }
             }
         }
+
         .posters {
             .avatar {
                 width: 40px;
                 height: 40px;
                 border-radius: .375rem;
             }
+
             a.latest {
                 .avatar {
                     margin-right: 0;
                 }
             }
+
             a:not(.latest) {
                 margin-left: -22px;
+
                 .avatar {
                     border: 3px solid var(--secondary);
                 }
             }
         }
+
         .posts-map,
         .num.age.activity {
             a {
                 padding: 0;
             }
         }
+
         .posts-map {
             position: relative;
+
             .number {
                 margin-right: 0.25em;
             }
         }
+
         .post-activity {
             .d-icon-reply {
                 color: var(--primary-medium);
                 margin-right: 0.25em;
             }
+
             .relative-date {
                 color: var(--primary-medium);
             }
@@ -590,7 +651,8 @@ html body #main-outlet {
     .topic-map,
     .topic-avatar,
     .more-topics__container,
-    .names.trigger-user-card { // Hide the lock icon in the topic header of the post
+    .names.trigger-user-card {
+        // Hide the lock icon in the topic header of the post
         display: none !important;
     }
 
@@ -601,37 +663,29 @@ html body #main-outlet {
 }
 
 // published page additions
-.published-page-content-wrapper {
+.published-page-header {
-  max-width: 1000px;
+    background-color: unset;
-  margin-top: 30px;
+    box-shadow: unset;
-  margin-bottom: 50px;
+    top: unset;
-  background: var(--secondary);
+    position: unset;
-  border-radius: 1em;
+    margin-top: 10px;
-  padding: 3em 3em 5%;
+
-  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07),
+    .published-page-header-wrapper {
-    0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112),
+        justify-content: center;
-    0 4.50776px 10.0172px rgba(0, 0, 0, 0.035),
+
-    0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
+        a {
-  z-index: 1;
+            display: none;
-  position: relative;
         }
 
-.published-page {
+        .published-page-title {
-  &::before {
+            color: var(--primary);
-    background: linear-gradient(
-      90deg,
-      var(--tertiary-hover) 0%,
-      var(--tertiary) 100%
-    );
-    clip-path: ellipse(148% 70% at 91% -14%);
-    content: "";
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: fixed;
-    z-index: 0;
         }
     }
+}
+
+.published-page-author {
+    display: none !important;
+}
 
 .quote-button {
     background-color: var(--primary-low-mid);