common/common.scss

@@ -5,7 +5,6 @@
 
 html.anon {
     body:not(.category-resources) {
-
         // Display this message on all pages except in Community Resources
         #login-message {
             text-align: center;
@@ -49,52 +48,42 @@ 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;
@@ -117,15 +106,12 @@ 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;
     }
@@ -156,12 +142,10 @@ 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 {
-        +.badge-category-bg {
       border-top-left-radius: 0px;
       border-bottom-left-radius: 0px;
       border-top-right-radius: 0.125em;
@@ -180,7 +164,6 @@ 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);
@@ -215,7 +198,6 @@ html.anon {
   .cm-header-links {
     display: none;
   }
-
   .list-controls .nav-pills .drop li:first-of-type {
     display: none;
   }
@@ -240,7 +222,6 @@ input[type="color"],
 div.ac-wrap {
   border-radius: 4px;
 }
-
 .d-header {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 }
@@ -253,7 +234,6 @@ div.ac-wrap {
   border-radius: 0.25em;
   margin-left: 0.3em;
   border: 1px solid transparent;
-
   svg {
     font-size: 1.25em;
   }
@@ -271,7 +251,6 @@ div.ac-wrap {
 
 .drop-down-mode .d-header-icons .active .icon {
   border: 1px solid transparent;
-
   .d-icon {
     color: var(--tertiary);
   }
@@ -322,9 +301,11 @@ div.ac-wrap {
 
 html {
   body {
-        background: linear-gradient(0deg,
+    background: linear-gradient(
+        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%);
   }
 }
@@ -336,30 +317,25 @@ 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%;
   }
 }
 
-.nav-pills:not(.user-nav)>li a.active,
+.nav-pills:not(.user-nav) > li a.active,
-.nav-pills:not(.user-nav)>li>a {
+.nav-pills:not(.user-nav) > li > a {
   border-radius: 0.5em;
 }
 
@@ -390,7 +366,6 @@ html body #main-outlet {
   0% {
     background-color: var(--highlight-low);
   }
-
   100% {
     background-color: var(--secondary);
   }
@@ -400,45 +375,35 @@ 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;
@@ -450,39 +415,31 @@ 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;
@@ -490,12 +447,10 @@ 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;
@@ -503,7 +458,6 @@ html body #main-outlet {
         justify-content: center;
         align-items: center;
       }
-
       .topic-list-data.age {
         width: 15%;
         order: 4;
@@ -527,7 +481,6 @@ html body #main-outlet {
   justify-content: center;
   align-content: center;
   align-items: center;
-
   .avatar {
     margin-right: 0;
   }
@@ -538,24 +491,19 @@ 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;
@@ -563,50 +511,41 @@ 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);
       }
@@ -651,8 +590,7 @@ html body #main-outlet {
     .topic-map,
     .topic-avatar,
     .more-topics__container,
-    .names.trigger-user-card {
+    .names.trigger-user-card { // Hide the lock icon in the topic header of the post
-        // Hide the lock icon in the topic header of the post
         display: none !important;
     }
 
@@ -663,28 +601,36 @@ html body #main-outlet {
 }
 
 // published page additions
-.published-page-header {
+.published-page-content-wrapper {
-    background-color: unset;
+  max-width: 1000px;
-    box-shadow: unset;
+  margin-top: 30px;
-    top: unset;
+  margin-bottom: 50px;
-    position: unset;
+  background: var(--secondary);
-    margin-top: 10px;
+  border-radius: 1em;
-
+  padding: 3em 3em 5%;
-    .published-page-header-wrapper {
+  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07),
-        justify-content: center;
+    0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112),
-
+    0 4.50776px 10.0172px rgba(0, 0, 0, 0.035),
-        a {
+    0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
-            display: none;
+  z-index: 1;
-        }
+  position: relative;
-
-        .published-page-title {
-            color: var(--primary);
-        }
-    }
 }
 
-.published-page-author {
+.published-page {
-    display: none !important;
+  &::before {
+    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;
+  }
 }
 
 .quote-button {
@@ -706,7 +652,7 @@ html body #main-outlet {
   box-shadow: none;
 }
 
-.topic-list .main-link.focused+.posters {
+.topic-list .main-link.focused + .posters {
   box-shadow: inset 3px 0 0 var(--tertiary);
 }