mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
✨ Added new theme directory links to Ghost Admin (#1078)
* Add new theme directory links to Ghost Admin * Dark mode fixes
This commit is contained in:
John O'Nolan
Fabien O'Carroll
parent
83aeea7892
commit
e36f8ca0c1
@ -339,3 +339,10 @@ input,
|
||||
.subscribers-table table .gh-btn svg {
|
||||
fill: var(--darkgrey);
|
||||
}
|
||||
|
||||
.id-mailchimp img,
|
||||
.id-typeform img,
|
||||
.id-buffer img,
|
||||
.id-more img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
text-decoration: none;
|
||||
color: var(--darkgrey);
|
||||
border: var(--lightgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
transition: all .8s ease;
|
||||
}
|
||||
|
||||
@ -131,6 +131,212 @@
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
/* Theme Directory
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-theme-directory-container {
|
||||
border-top: var(--lightgrey) 1px solid;
|
||||
padding: 25px 0 0;
|
||||
}
|
||||
|
||||
.theme-directory {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
max-width: 1200px;
|
||||
margin: 0 0 4vw;
|
||||
}
|
||||
|
||||
.td-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--darkgrey);
|
||||
transition: all .8s ease;
|
||||
}
|
||||
|
||||
.td-item:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.td-item img {
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.02), 0 8px 26px -5px rgba(0,0,0,.2);
|
||||
transition: all .8s ease;
|
||||
}
|
||||
|
||||
.td-item:hover {
|
||||
transform: translateY(-1.5%);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.td-item:hover img {
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.02), 0 10px 40px -5px rgba(0,0,0,.15);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.td-item-desc {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.td-item-desc span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-transform: none;
|
||||
font-weight: 300;
|
||||
font-size: 0.9em;
|
||||
color: color-mod(var(--midgrey) l(-5%));
|
||||
}
|
||||
|
||||
.td-cta {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
margin: 2vw 0 4vw;
|
||||
}
|
||||
|
||||
.td-cta-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
text-decoration: none;
|
||||
color: var(--darkgrey);
|
||||
border: var(--lightgrey) 1px solid;
|
||||
border-radius: 6px;
|
||||
transition: all .8s ease;
|
||||
}
|
||||
|
||||
.td-cta-box:hover {
|
||||
transform: translateY(-2%);
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.02), 0 8px 26px -4px rgba(0,0,0,.08);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.td-cta-icon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background: var(--midgrey);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.td-cta-icon svg {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.td-cta-marketplace .td-cta-icon {
|
||||
background: var(--purple);
|
||||
}
|
||||
|
||||
.td-cta-marketplace .td-cta-icon svg path {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.td-cta-docs .td-cta-icon {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.td-cta-content-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-cta-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0 14px;
|
||||
}
|
||||
|
||||
.td-cta-content p {
|
||||
margin: 0;
|
||||
color: color-mod(var(--midgrey) l(-5%));
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.td-cta-arrow {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.td-cta-arrow svg {
|
||||
margin-left: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.td-cta-arrow svg path {
|
||||
fill: var(--midgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.theme-directory {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.td-item:nth-child(5),
|
||||
.td-item:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.td-cta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.theme-directory {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.td-item:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.theme-directory {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.td-item:nth-child(4),
|
||||
.td-item:nth-child(5),
|
||||
.td-item:nth-child(6) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.theme-directory {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.td-item:nth-child(5),
|
||||
.td-item:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
.td-cta {
|
||||
margin: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
{{/if}}
|
||||
|
||||
<section class="view-container">
|
||||
|
||||
<div class="gh-setting-header">Navigation</div>
|
||||
<div class="gh-blognav-container">
|
||||
<form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
|
||||
@ -28,8 +29,90 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Themes</div>
|
||||
<div class="gh-setting-header">Theme Directory</div>
|
||||
<div class="gh-theme-directory-container">
|
||||
<div class="theme-directory">
|
||||
<a class="td-item" href="https://github.com/TryGhost/Massively" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/massively.jpg" alt="Massively Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Massively <span>— Free</span></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-item" href="https://themeforest.net/item/nurui-multipurpose-ghost-blog-theme/22243886" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/nurui.jpg" alt="Nurui Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Nurui <span>— Premium</span></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-item" href="https://themeforest.net/item/pacific-big-bold-photographydriven-theme/19774541" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/pacific.jpg" alt="Pacific Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Pacific <span>— Premium</span></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-item" href="https://www.hauntedthemes.com/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/farafra.jpg" alt="Farafra Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Farafra <span>— Premium</span></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-item" href="https://themeforest.net/item/valkyrie-a-highly-visual-ghost-blog/22576630" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/valkyrie.jpg" alt="Valkyrie Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Valkyrie <span>— Premium</span></div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-item" href="https://themeforest.net/item/sente-magazine-ghost-blog-theme/21019644" target="_blank" rel="noopener noreferrer">
|
||||
<div class="td-item-screenshot">
|
||||
<img style="object-fit:contain;" src="assets/img/themes/sente.jpg" alt="Sente Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
<div>Sente <span>— Premium</span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="td-cta">
|
||||
<a class="td-cta-box td-cta-marketplace" href="https://marketplace.ghost.org" target="_blank" rel="noopener">
|
||||
<div class="td-cta-icon">{{svg-jar "store"}}</div>
|
||||
<div class="td-cta-content-wrapper">
|
||||
<div class="td-cta-content">
|
||||
<h4>Theme Marketplace</h4>
|
||||
<p>Explore a huge range of free and premium themes for Ghost with a range of design and layout options</p>
|
||||
</div>
|
||||
<div class="td-cta-arrow">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="td-cta-box td-cta-docs" href="https://marketplace.ghost.org" target="_blank" rel="noopener">
|
||||
<div class="td-cta-icon">{{svg-jar "book-open"}}</div>
|
||||
<div class="td-cta-content-wrapper">
|
||||
<div class="td-cta-content">
|
||||
<h4>Developer Docs</h4>
|
||||
<p>Build your own custom Ghost theme from scratch using our comprehensive Handlebars.js SDK</p>
|
||||
</div>
|
||||
<div class="td-cta-arrow">
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Installed Themes</div>
|
||||
<div class="gh-themes-container">
|
||||
|
||||
{{gh-theme-table
|
||||
themes=themes
|
||||
activateTheme=(action "activateTheme")
|
||||
|
||||
@ -5,49 +5,49 @@
|
||||
|
||||
<div class="integrations-directory">
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/disqus/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-disqus">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/disqus.svg" alt="Disqus Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Disqus</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/google-analytics/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-analytics">
|
||||
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/google-analytics.png" alt="Google Analytics Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Analytics</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/mailchimp/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/mailchimp.png" alt="Mailchimp Icon" />
|
||||
<div class="id-item-logo id-mailchimp">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/mailchimp.svg" alt="Mailchimp Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Mailchimp</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/typeform/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-typeform">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/typeform.svg" alt="Typeform Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Typeform</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/youtube/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-youtube">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/youtube.png" alt="YouTube Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">YouTube</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/buffer/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-buffer">
|
||||
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/buffer.png" alt="Buffer Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Buffer</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/revue/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-revue">
|
||||
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/revue.svg" alt="Revue Icon" />
|
||||
</div>
|
||||
<div class="f8 mt1">Revue</div>
|
||||
</a>
|
||||
<a class="id-item" href="https://docs.ghost.org/integrations/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo">
|
||||
<div class="id-item-logo id-more">
|
||||
<img class="w-100 h-100" style="object-fit:contain;padding:0 8px;" src="assets/img/more.png" alt="Three dots" />
|
||||
</div>
|
||||
<div class="f8 mt1">More</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M21.502 10.333v12.167h-19v-12.187"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M4.502 13.5h8v6h-8zM14.502 13.5h5v9h-5zM21.502 2.5h-19l-2 4h23zM23.502 7.5c0 1.657-1.343 3-3 3-.826 0-1.457-.46-2-1-.708 1.125-2.073 2-3.5 2-1.196 0-2.267-.528-3-1.36-.732.833-1.804 1.36-3 1.36-1.427 0-2.792-.875-3.5-2-.542.54-1.174 1-2 1-1.657 0-3-1.343-3-3v-1h23v1zM5.502 9.5v-3l1-4M12.002 10.146v-7.646M18.502 9.5v-3l-1-4"/><path d="M17.502 18c-.276 0-.5.224-.5.5 0 .277.224.5.5.5s.5-.223.5-.5c0-.276-.224-.5-.5-.5z"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M21.502 10.333v12.167h-19v-12.187"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M4.502 13.5h8v6h-8zM14.502 13.5h5v9h-5zM21.502 2.5h-19l-2 4h23zM23.502 7.5c0 1.657-1.343 3-3 3-.826 0-1.457-.46-2-1-.708 1.125-2.073 2-3.5 2-1.196 0-2.267-.528-3-1.36-.732.833-1.804 1.36-3 1.36-1.427 0-2.792-.875-3.5-2-.542.54-1.174 1-2 1-1.657 0-3-1.343-3-3v-1h23v1zM5.502 9.5v-3l1-4M12.002 10.146v-7.646M18.502 9.5v-3l-1-4"/><path d="M17.502 18c-.276 0-.5.224-.5.5 0 .277.224.5.5.5s.5-.223.5-.5c0-.276-.224-.5-.5-.5z"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 763 B After Width: | Height: | Size: 764 B |
1
ghost/admin/public/assets/img/mailchimp.svg
Normal file
1
ghost/admin/public/assets/img/mailchimp.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
BIN
ghost/admin/public/assets/img/themes/farafra.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/farafra.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
ghost/admin/public/assets/img/themes/massively.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/massively.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
ghost/admin/public/assets/img/themes/nurui.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/nurui.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
ghost/admin/public/assets/img/themes/pacific.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/pacific.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
ghost/admin/public/assets/img/themes/sente.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/sente.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
ghost/admin/public/assets/img/themes/valkyrie.jpg
Executable file
BIN
ghost/admin/public/assets/img/themes/valkyrie.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Loading…
Reference in New Issue
Block a user