diff --git a/.vuepress/public/frontpage/mockup-macbook-grey.png b/.vuepress/public/frontpage/mockup-macbook-grey.png
index 04c9a894..09b63d8f 100644
Binary files a/.vuepress/public/frontpage/mockup-macbook-grey.png and b/.vuepress/public/frontpage/mockup-macbook-grey.png differ
diff --git a/.vuepress/theme/Home.vue b/.vuepress/theme/Home.vue
index fee27d6f..735132b6 100644
--- a/.vuepress/theme/Home.vue
+++ b/.vuepress/theme/Home.vue
@@ -9,8 +9,8 @@
-
+
+
There are tons of options out there when it comes to self-hosted game management panels. However, you will find no panel that can compete with Pterodactyl in terms of features, customization, stability, and most of all: price.
@@ -105,20 +105,20 @@
We're committed to building the best software that we can, and have been working with game management panels for almost five years now. We've seen games change, and are committed to making the most flexible, lightweight, and future proof panel that we can.
-
+
-
-
MIT Licensed | Copyright © 2015 - 2018 Dane Everitt & Contributors.
+
diff --git a/.vuepress/theme/styles/home.css b/.vuepress/theme/styles/home.css
index bbac7213..670bdd54 100644
--- a/.vuepress/theme/styles/home.css
+++ b/.vuepress/theme/styles/home.css
@@ -23,7 +23,7 @@
}
.btn {
- @apply .inline-block .border .border-white .m-3 .py-4 .px-8 .uppercase .text-white .text-lg .rounded .font-light;
+ @apply .border .border-white .m-3 .py-4 .px-8 .uppercase .text-white .text-lg .rounded .font-light;
transition: all 100ms linear;
&:hover {
@@ -32,7 +32,7 @@
}
.feature {
- @apply .p-4 .my-4 .inline-block .w-1/2;
+ @apply .p-4 .my-4 .inline-block .w-full;
span {
@apply .block .rounded-full .bg-white .text-blue .text-center .w-24 .h-24 .mx-auto .py-6;
@@ -47,6 +47,12 @@
}
}
+ @screen md {
+ .feature {
+ @apply .w-1/2;
+ }
+ }
+
@screen lg {
.feature {
@apply .w-1/3;
@@ -56,14 +62,13 @@
.screenshots {
cursor: ew-resize;
- .item {
+ .slick-slide {
position: relative;
transform: scale(0.7);
transition: all .5s ease-in-out;
img {
- max-width: 90vw;
- max-height: 40rem;
+ @apply .max-w-xs;
}
&.slick-center {
@@ -72,6 +77,14 @@
}
}
+ @screen md {
+ .slick-slide {
+ img {
+ @apply .max-w-xl;
+ }
+ }
+ }
+
.slick-dots li {
button:before {
@apply .text-blue;
@@ -97,4 +110,11 @@
}
}
+ .footer {
+ @apply .p-8 .pb-0 .text-grey-dark .text-xs;
+
+ @screen md {
+ @apply .mt-8;
+ }
+ }
}