Recommendations (#285)

* Added Recommendations support to Journal and Dope

assets/css/screen.css

@@ -252,6 +252,91 @@
     border-radius: 32px;
 }
 
+.gh-recommendations .recommendations {
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+.gh-recommendations .recommendation:first-child {
+    margin-top: 4px;
+}
+
+.gh-recommendations .recommendation a {
+    display: grid;
+    grid-template-columns: 24px auto;
+    gap: 4px 12px;
+}
+
+.gh-recommendations .recommendation a:hover {
+    opacity: 1;
+}
+
+.gh-recommendations .recommendation-favicon {
+    grid-row: span 2;
+    width: 100%;
+    border-radius: 4px;
+}
+
+.gh-recommendations .recommendation-title {
+    margin-top: -2px;
+    font-size: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -0.009em;
+}
+
+.gh-recommendations .recommendation a:hover .recommendation-title {
+    opacity: 0.8;
+}
+
+.gh-recommendations .recommendation-url {
+    order: 1;
+    overflow: hidden;
+    font-size: 1.4rem;
+    line-height: 1.25;
+    color: var(--color-secondary-text);
+    text-overflow: ellipsis;
+}
+
+.gh-recommendations .recommendation-description {
+    display: -webkit-box;
+    display: none;
+    grid-column: 2;
+    overflow-y: hidden;
+    font-size: 1.4rem;
+    line-height: 1.4;
+    color: var(--color-secondary-text);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.gh-recommendations button {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+    padding: 0;
+    margin-top: 24px;
+    font-size: 1.2rem;
+    font-weight: 550;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+}
+
+.gh-recommendations button svg {
+    width: 12px;
+    margin-top: -1px;
+}
+
+.gh-recommendations button:hover {
+    opacity: 0.8;
+}
+
 .gh-subscribe {
     padding: 7.2rem 0;
     margin: 12rem 0 8rem;