Updated Explore section on dashboard

No issue

ghost/admin/app/components/dashboard/resources/explore-feed.hbs

@@ -1,12 +1,9 @@
 <section class="gh-dashboard-section gh-dashboard-explore-feed" {{did-insert this.load}}>
     <article class="gh-dashboard-box">
-        <div class="gh-dashboard-resource-title is-large">
+        <div class="gh-dashboard-resource-title">
+            <h4>Featured publications</h4>
             <div>
-                <h4>Featured publications</h4>
+                <a href="https://ghost.org/explore/" target="_blank" rel="noopener noreferrer">Browse all</a>
-                <p>Explore great content being published on Ghost.</p>
-            </div>
-            <div>
-                <a href="https://ghost.org/explore/" target="_blank" rel="noopener noreferrer">Browse sites</a>
                 <LinkTo @route="explore" class="gh-dashboard-explore-add">Add your site to Explore <span>{{svg-jar "ghost-favicon-pink" alt="Ghost" class="w4 v-mid"}}</span></LinkTo>
             </div>
         </div>

ghost/admin/app/components/dashboard/resources/whats-new.hbs

@@ -1,6 +1,6 @@
 <section class="gh-dashboard-resource gh-dashboard-whats-new" {{did-insert this.load}}>
     <article class="gh-dashboard-resource-box">
-        <div class="gh-dashboard-resource-title has-border">
+        <div class="gh-dashboard-resource-title">
             <h4>{{svg-jar "gift" alt="Gift" class="v-mid"}}What's new</h4>
         </div>
         <div class="gh-dashboard-resource-body">

ghost/admin/app/styles/app-dark.css

@@ -1176,6 +1176,18 @@ kbd {
     background: #111213;
 }
 
+.gh-dashboard-explore-mrr {
+    color: var(--black);
+}
+
+.gh-dashboard-explore-feed .gh-dashboard-resource-title:hover a:not(.gh-dashboard-explore-add) {
+    color: var(--middarkgrey-l1);
+}
+
+.gh-dashboard-explore-add:hover {
+    color: var(--pink-l2);
+}
+
 .gh-dashboard-community .gh-dashboard-list-footer {
     border-color: transparent;
 }
@@ -1185,8 +1197,7 @@ kbd {
     background: linear-gradient(270deg, rgba(21,23,25,0) 0%, rgba(21,23,25,1) 100%);
 }
 
-.gh-dashboard-resource-box.is-secondary .gh-dashboard-resource-footer,
+.gh-dashboard-resource-box.is-secondary .gh-dashboard-resource-footer {
-.gh-dashboard-whats-new .gh-dashboard-resource-box {
     border-color: #26282b;
 }
 

ghost/admin/app/styles/layouts/dashboard.css

@@ -105,6 +105,11 @@ Dashboard Layout */
     margin-right: 24px;
 }
 
+.gh-dashboard-box.is-secondary {
+    background: var(--main-color-content-greybg);
+    border-color: var(--main-color-content-greybg);
+}
+
 .gh-dashboard-resource-box {
     background: var(--main-color-content-greybg);
     border-color: var(--main-color-content-greybg);
@@ -694,10 +699,6 @@ Dashboard List */
     background: linear-gradient(315deg,#fafafb 60%,#fff);
 }
 
-.gh-dashboard-resource .gh-dashboard-list-item:hover {
-    background: linear-gradient(315deg,rgba(249, 249, 250, 0.5) 60%,rgba(255, 255, 255, 0.5));
-}
-
 .gh-dashboard-list-text {
     font-weight: 600;
     font-size: 1.5rem;
@@ -763,6 +764,10 @@ Dashboard List */
     flex: 1;
 }
 
+.gh-dashboard-list-empty p {
+    color: var(--middarkgrey);
+}
+
 
 /* ---------------------------------
 Dashboard Overview */
@@ -1317,6 +1322,7 @@ Dashboard Resources */
 .gh-dashboard-resources .gh-dashboard-resource-footer a {
     display: inline-block;
     padding: 8px 0;
+    transition: color .3s;
 }
 
 
@@ -1430,7 +1436,7 @@ Dashboard What's New */
     fill: var(--pink);
     width: 1.8rem;
     height: auto;
-    margin-right: 10px;
+    margin: 0 8px 3px 0;
 }
 
 .gh-dashboard-whats-new .gh-dashboard-list-link span {
@@ -1480,6 +1486,7 @@ Dashboard Community */
 
 .gh-dashboard-community .gh-dashboard-resource-footer a {
     color: #fff;
+    font-weight: 500;
 }
 
 .gh-dashboard-community .gh-dashboard-resource-title:not(.is-large) h4 {
@@ -1586,10 +1593,10 @@ Dashboard Resource */
 }
 
 .gh-dashboard-resource-title p {
-    margin: 8px 0 16px;
+    margin: 8px 0 24px;
     padding: 0;
-    color: var(--middarkgrey);
+    color: var(--midlightgrey-d1);
-    font-size: 1.55rem;
+    font-size: 1.5rem;
 }
 
 .gh-dashboard-resource-body {
@@ -1606,12 +1613,12 @@ Dashboard Resource */
 .gh-dashboard-list-footer a,
 .gh-dashboard-resource-footer a {
     font-weight: 500;
-    color: #2bba3c;
+    color: var(--green);
 }
 
 .gh-dashboard-list-footer a:hover,
 .gh-dashboard-resource-footer a:hover {
-    color: #269a34;
+    color: var(--green-d1);
 }
 
 .gh-dashboard-resource-thumbnail {
@@ -1652,6 +1659,7 @@ Dashboard Resource */
 .gh-dashboard-resource-bigarticle p {
     font-size: 1.5rem;
     letter-spacing: 0;
+    line-height: 1.55;
     color: var(--middarkgrey);
     display: -webkit-box;
     line-clamp: 3;
@@ -1681,10 +1689,11 @@ Dashboard Resource */
 }
 
 .gh-dashboard-resource-secondary {
-    font-size: 1.3rem;
+    margin-top: .4rem;
+    font-size: 1.4rem;
     line-height: 1.5em;
     font-weight: 400;
-    color: var(--midlightgrey);
+    color: var(--midgrey);
     padding: 0;
     white-space: nowrap;
 }
@@ -1748,12 +1757,17 @@ Dashboard Resource */
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    min-width: 0;
+    color: var(--black);
     font-size: 1.45rem;
     font-weight: 600;
     line-height: 1.4em;
-    color: var(--black);
+}
-    padding: 12px 32px 12px 0;
+
-    min-width: 0;
+@media (max-width: 1000px) {
+    .gh-dashboard-resource .gh-dashboard-list-post {
+        padding: 12px 32px 12px 0;
+    }
 }
 
 .gh-dashboard-resource .gh-dashboard-list-body {
@@ -1762,21 +1776,51 @@ Dashboard Resource */
     transition: all .3s ease-in-out;
 }
 
+.gh-dashboard-explore-feed .gh-dashboard-resource-body {
+    padding-top: 24px;
+}
+
 .gh-dashboard-explore-feed .gh-dashboard-resource-title {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
+}
+
+.gh-dashboard-explore-feed .gh-dashboard-resource-title h4 {
+    margin: 0;
+    flex-shrink: 0;
 }
 
 .gh-dashboard-explore-feed .gh-dashboard-resource-title a:not(.gh-dashboard-explore-add) {
     color: var(--middarkgrey);
-    font-weight: 700;
+    font-weight: 500;
+}
+
+.gh-dashboard-explore-feed .gh-dashboard-resource-title:hover a:not(.gh-dashboard-explore-add) {
+    color: var(--darkgrey);
+}
+
+@media (max-width: 540px) {
+    .gh-dashboard-explore-feed .gh-dashboard-resource-title a:not(.gh-dashboard-explore-add) {
+        display: none;
+    }
+}
+
+@media (min-width: 800px) and (max-width: 880px) {
+    .gh-dashboard-explore-feed .gh-dashboard-resource-title a:not(.gh-dashboard-explore-add) {
+        display: none;
+    }
 }
 
 .gh-dashboard-explore-add {
+    margin-left: 12px;
     color: var(--pink);
-    margin-left: 10px;
+    font-weight: 500;
-    font-weight: 700;
+    white-space: nowrap;
+}
+
+.gh-dashboard-explore-add:hover {
+    color: var(--pink-d2);
 }
 
 .gh-dashboard-explore-add span {
@@ -1793,6 +1837,12 @@ Dashboard Resource */
     border-radius: 5px;
 }
 
+@media (min-width: 1120px) and (max-width: 1320px) {
+    .gh-dashboard-explore-card:last-child {
+        display: none;
+    }
+}
+
 .gh-dashboard-explore-header {
     flex-shrink: 1;
 }
@@ -1821,7 +1871,8 @@ Dashboard Resource */
     margin: 8px 0 16px;
     padding: 0;
     color: var(--middarkgrey);
-    font-size: 1.55rem;
+    font-size: 1.5rem;
+    line-height: 1.55;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -1844,15 +1895,20 @@ Dashboard Resource */
 
 .gh-dashboard-explore-footer p {
     margin: 0;
+    padding-right: 1.2rem;
     font-weight: 600;
     color: var(--black);
 }
 
+.gh-dashboard-explore-footer:hover p {
+    color: var(--darkgrey);
+}
+
 .gh-dashboard-explore-mrr,
 .gh-dashboard-explore-members {
     flex-shrink: 0;
     font-size: 1.2rem;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--white);
     padding: .4rem .8rem;
     border-radius: 5px;

ghost/core/content/themes/casper

@@ -1 +1 @@
-Subproject commit e2096ee731d071d9a32b4e0fab84272b14ba7203
+Subproject commit 005211ff8f58753cce794d4ef9924b99dfbedd3b