Skip to content

Commit 6cd3396

Browse files
minimaluminiumminimaluminium
authored
Added Recommendations support (#13)
1 parent ea08ce4 commit 6cd3396

File tree

3 files changed

+122
-21
lines changed

3 files changed

+122
-21
lines changed

‎assets/built/source.js

100644100755
File mode changed.

‎assets/css/screen.css

Lines changed: 94 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1830,15 +1830,18 @@ Search LOGO Login Subscribe
18301830
/* 13. Sidebar
18311831
/* ---------------------------------------------------------- */
18321832

1833-
.gh-about {
1833+
.gh-sidebar-inner {
18341834
position: sticky;
18351835
top: calc(var(--grid-gap) / 2);
1836+
}
1837+
1838+
.gh-about {
18361839
display: flex;
18371840
flex-direction: column;
18381841
justify-content: center;
18391842
align-items: center;
18401843
padding: 48px 24px;
1841-
min-height: 400px;
1844+
min-height: 380px;
18421845
text-align: center;
18431846
background-color: var(--color-lighter-gray);
18441847
}
@@ -1866,6 +1869,95 @@ Search LOGO Login Subscribe
18661869
margin-top: 32px;
18671870
}
18681871

1872+
.gh-recommendations {
1873+
margin-top: 48px;
1874+
}
1875+
1876+
.gh-recommendations .recommendations {
1877+
display: flex;
1878+
flex-direction: column;
1879+
gap: 26px;
1880+
margin: 0;
1881+
padding: 0;
1882+
list-style-type: none;
1883+
}
1884+
1885+
.gh-recommendations .recommendation:first-child {
1886+
margin-top: 4px;
1887+
}
1888+
1889+
.gh-recommendations .recommendation a {
1890+
display: grid;
1891+
grid-template-columns: 24px auto;
1892+
gap: 4px 12px;
1893+
}
1894+
1895+
.gh-recommendations .recommendation a:hover {
1896+
opacity: 1;
1897+
}
1898+
1899+
.gh-recommendations .recommendation-favicon {
1900+
grid-row: span 2;
1901+
width: 100%;
1902+
border-radius: 4px;
1903+
}
1904+
1905+
.gh-recommendations .recommendation-title {
1906+
margin-top: -2px;
1907+
font-size: 1.5rem;
1908+
font-weight: 650;
1909+
letter-spacing: -0.009em;
1910+
}
1911+
1912+
.gh-recommendations .recommendation a:hover .recommendation-title {
1913+
opacity: 0.8;
1914+
}
1915+
1916+
.gh-recommendations .recommendation-url {
1917+
order: 1;
1918+
overflow: hidden;
1919+
font-size: 1.4rem;
1920+
line-height: 1.25;
1921+
color: var(--color-secondary-text);
1922+
text-overflow: ellipsis;
1923+
}
1924+
1925+
.gh-recommendations .recommendation-description {
1926+
display: -webkit-box;
1927+
display: none;
1928+
overflow-y: hidden;
1929+
grid-column: 2;
1930+
font-size: 1.4rem;
1931+
line-height: 1.4;
1932+
color: var(--color-secondary-text);
1933+
-webkit-line-clamp: 2;
1934+
-webkit-box-orient: vertical;
1935+
}
1936+
1937+
.gh-recommendations button {
1938+
display: inline-flex;
1939+
align-items: center;
1940+
gap: 2px;
1941+
margin-top: 24px;
1942+
padding: 0;
1943+
cursor: pointer;
1944+
font-size: 1.2rem;
1945+
font-weight: 550;
1946+
letter-spacing: 0.025em;
1947+
text-transform: uppercase;
1948+
background-color: transparent;
1949+
border: 0;
1950+
}
1951+
1952+
.gh-recommendations button svg {
1953+
margin-top: -1px;
1954+
width: 12px;
1955+
}
1956+
1957+
.gh-recommendations button:hover {
1958+
opacity: 0.8;
1959+
}
1960+
18691961
/* 14. Post/page
18701962
/* ---------------------------------------------------------- */
18711963

‎partials/components/post-list.hbs

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -81,26 +81,35 @@
8181

8282
{{#if showSidebar}}
8383
<aside class="gh-sidebar">
84-
<section class="gh-about">
85-
{{#if @site.icon}}
86-
<img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
87-
{{/if}}
88-
<h3 class="gh-about-title is-title">{{@site.title}}</h3>
89-
{{#if @site.description}}
90-
<p class="gh-about-description is-body">{{@site.description}}</p>
91-
{{/if}}
92-
{{#if @site.members_enabled}}
93-
{{#unless @member}}
94-
<button class="gh-button" data-portal="signup">Subscribe</button>
95-
{{else}}
96-
{{#if @site.paid_members_enabled}}
97-
{{#unless @member.paid}}
98-
<button class="gh-button" data-portal="upgrade">Upgrade</button>
99-
{{/unless}}
100-
{{/if}}
101-
{{/unless}}
84+
<div class="gh-sidebar-inner">
85+
<section class="gh-about">
86+
{{#if @site.icon}}
87+
<img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
88+
{{/if}}
89+
<h3 class="gh-about-title is-title">{{@site.title}}</h3>
90+
{{#if @site.description}}
91+
<p class="gh-about-description is-body">{{@site.description}}</p>
92+
{{/if}}
93+
{{#if @site.members_enabled}}
94+
{{#unless @member}}
95+
<button class="gh-button" data-portal="signup">Subscribe</button>
96+
{{else}}
97+
{{#if @site.paid_members_enabled}}
98+
{{#unless @member.paid}}
99+
<button class="gh-button" data-portal="upgrade">Upgrade</button>
100+
{{/unless}}
101+
{{/if}}
102+
{{/unless}}
103+
{{/if}}
104+
</section>
105+
{{#if @site.recommendations_enabled}}
106+
<section class="gh-recommendations">
107+
<h4 class="gh-container-title">Recommendations</h4>
108+
{{recommendations}}
109+
<button data-portal="recommendations">See all {{> "icons/arrow"}}</button>
110+
</section>
102111
{{/if}}
103-
</section>
112+
</div>
104113
</aside>
105114
{{/if}}
106115

0 commit comments

Comments
 (0)