diff --git a/ghost/admin/app/html/themes.html b/ghost/admin/app/html/themes.html
new file mode 100644
index 0000000000..72dc64bd83
--- /dev/null
+++ b/ghost/admin/app/html/themes.html
@@ -0,0 +1,223 @@
+
+
+
+
+
+ Themes
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ghost/admin/app/styles/layouts/packages.css b/ghost/admin/app/styles/layouts/packages.css
index 1ddeaceac2..108f9f9580 100644
--- a/ghost/admin/app/styles/layouts/packages.css
+++ b/ghost/admin/app/styles/layouts/packages.css
@@ -23,7 +23,75 @@
}
-/* Package Card
+/* Package Card Theme
+/* ---------------------------------------------------------- */
+
+.package-card-theme {
+ flex: 1 1 290px;
+ overflow: hidden;
+ margin: 10px;
+ max-width: 440px;
+ border: rgba(0,0,0,0.1) 1px solid;
+ border-radius: 5px;
+}
+
+.package-index .package-card-theme,
+.package-featured .package-card-theme {
+ flex: 1 1 240px;
+}
+
+.package-card-theme-image {
+ position: relative;
+ display: block;
+}
+
+.package-card-theme-image:hover img {
+ filter: grayscale(0.5) blur(1px);
+
+ -webkit-filter: grayscale(0.5) blur(1px);
+}
+
+.package-card-theme-image:hover .package-card-theme-overlay {
+ opacity: 1;
+ transition: all 0.2s ease;
+}
+
+.package-card-theme-image img {
+ display: block;
+ max-width: 100%;
+ line-height: 0;
+}
+
+.package-card-theme-overlay {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10%;
+ background: rgba(0,20,40,0.2);
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.4s ease;
+}
+
+.package-card-theme-title {
+ color: #fff;
+ font-size: 2rem;
+ line-height: 1.15em;
+ font-weight: 100;
+}
+
+.package-card-theme .package-card-footer {
+ margin: 0;
+ padding: 16px 20px;
+ border-top: rgba(0,0,0,0.1) 1px solid;
+}
+
+/* Package Card App
/* ---------------------------------------------------------- */
.package-card-app {
@@ -73,6 +141,10 @@
font-weight: normal;
}
+
+/* Package Card Meta
+/* ---------------------------------------------------------- */
+
.package-card-stats {
position: absolute;
top: -5px;
@@ -138,15 +210,6 @@
margin-top: 15px;
width: 100%;
}
-@media (max-width: 540px) {
- .package-card-footer {
- flex-direction: column;
- align-items: flex-start;
- }
- .package-card-footer .package-developer {
- display: none;
- }
-}
.package-developer {
display: flex;
@@ -221,7 +284,7 @@
/* ---------------------------------------------------------- */
@media (max-width: 800px) {
- .package-grid {
+ .package-grid-apps {
overflow: hidden;
margin: 0 0 4vw 0;
border: #e1e1e1 1px solid;
@@ -240,12 +303,19 @@
}
@media (max-width: 760px) {
- .package-developer {
+ .package-card-app {
+ padding: 15px;
+ }
+ .package-card-app .package-developer {
display: none;
}
- .package-card-footer {
+ .package-card-app .package-card-footer {
justify-content: flex-end;
}
+ .package-card-theme .package-card-footer {
+ margin: 0;
+ padding: 15px;
+ }
}
@media (max-width: 600px) {
@@ -254,3 +324,16 @@
border: none;
}
}
+
+@media (max-width: 540px) {
+ .package-card-footer {
+ justify-content: flex-end;
+ }
+ .package-card-app .package-card-footer {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .package-card-footer .package-developer {
+ display: none;
+ }
+}
+