Updated theme directory and theme preview

This commit is contained in:
Sanne de Vries 2021-10-14 12:39:48 +02:00
parent a6a9ecad22
commit e4c10cbe6c
4 changed files with 73 additions and 21 deletions

View File

@ -25,7 +25,7 @@
}
.gh-browserpreview-browser {
background: var(--whitegrey-d1);
background: var(--whitegrey-l1);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
@ -49,12 +49,11 @@
display: block;
padding: 0;
margin: 0;
margin-right: 8px;
background: var(--midgrey);
border-radius: 999px;
width: 12px;
height: 12px;
opacity: 0.3;
margin-right: 10px;
background: var(--lightgrey);
border-radius: 50%;
width: 10px;
height: 10px;
}
.gh-browserpreview-browser .tabs div {
@ -66,7 +65,7 @@
display: flex;
align-items: center;
font-size: 1.25rem;
background: var(--whitegrey-l1);
background: var(--white);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

View File

@ -1004,7 +1004,8 @@
}
.gh-canvas-header {
margin: 0;
margin: 0 calc(-1 * var(--main-layout-content-sidepadding));
padding: 0 var(--main-layout-content-sidepadding);
position: sticky;
top: 0;
background: var(--main-bg-color);

View File

@ -1627,6 +1627,62 @@ p.theme-validation-details {
padding: 8px 0 0;
}
.theme-directory-labs {
display: grid;
justify-content: space-between;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 40px;
grid-row-gap: 64px;
max-width: 1320px;
margin: 0 0 24px;
}
.gh-theme-toolbar {
position: relative;
width: 100%;
height: 28px;
padding: 0 12px;
background: var(--whitegrey-l1);
border-radius: 3px 3px 0 0;
}
.gh-theme-toolbar-button {
position: relative;
top: 11px;
display: block;
width: 6px;
height: 6px;
background: var(--lightgrey);
border-radius: 50%;
}
.gh-theme-toolbar-button::before,
.gh-theme-toolbar-button::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: var(--lightgrey);
border-radius: 50%;
}
.gh-theme-toolbar-button::before {
left: 12px;
}
.gh-theme-toolbar-button::after {
left: 24px;
}
.td-item-screenshot-labs {
line-height: 0;
border-radius: 0 0 3px 3px;
}
.td-item-screenshot-labs img {
border-radius: 0 0 3px 3px;
}
.gh-theme-directory-footer-container {
width: 100%;
background: var(--main-color-content-greybg);
@ -1657,13 +1713,6 @@ p.theme-validation-details {
padding-bottom: 0;
}
.gh-theme-previewcontainer .site-frame {
width: 133.33333%;
height: 133.33333%;
transform: scale(0.75);
transform-origin: 0 0;
}
/* Membership */
@media (max-width: 1140px) {
.gh-setting-members-canvas::before {

View File

@ -15,10 +15,13 @@
{{/if}}
<div class="gh-theme-directory-container-labs">
<div class="theme-directory">
<div class="theme-directory-labs">
{{#each this.marketplaceThemes as |theme|}}
<LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
<div class="td-item-screenshot relative">
<div class="gh-theme-toolbar">
<span class="gh-theme-toolbar-button"></span>
</div>
<div class="td-item-screenshot-labs relative">
<img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
</div>
<div class="td-item-desc">
@ -33,7 +36,7 @@
</section>
<section class="gh-theme-directory-footer-container">
<a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="gh-theme-directory-footer">
See more themes, free and premium, in <span class="link">our official marketplace →</span>
</a>
<div class="gh-theme-directory-footer">
See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
</div>
</section>