pterodactyl/documentation
1
0
Fork 0
mirror of https://github.com/pterodactyl/documentation.git synced 2025-12-13 20:23:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

Completed home page, mobile friendly

Browse Source
This commit is contained in:
Dane Everitt 2018-07-28 22:49:36 -07:00
parent c50c4815a0
commit be648d3967
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
3 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.vuepress/public/frontpage/mockup-macbook-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 292 KiB

After

Width:  |  Height:  |  Size: 243 KiB

36
.vuepress/theme/Home.vue
View File

@ -9,8 +9,8 @@
</div> </div>
<h2 class="font-light text-3xl border-0">The open-source server management solution.</h2> <h2 class="font-light text-3xl border-0">The open-source server management solution.</h2>
<div class="mt-4"> <div class="mt-4">
<a class="btn" href="https://demo.pterodactyl.io" target="_blank" rel="nofollow noopener">Demo</a> <a class="btn hidden md:inline-block" href="https://demo.pterodactyl.io" target="_blank" rel="nofollow noopener">Demo</a>
<router-link class="btn" to="/panel/getting_started.html">Get started</router-link> <router-link class="btn inline-block" to="/panel/getting_started.html">Get started</router-link>
</div> </div>
</div> </div>
</div> </div>
@ -68,15 +68,15 @@
<h1>Screenshots</h1> <h1>Screenshots</h1>
<div class="screenshots"> <div class="screenshots">
<slick ref="slick" :options="slickOptions"> <slick ref="slick" :options="slickOptions">
<a :href="$withBase('frontpage/gallery/screenshot-1.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-1.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-1.png')"><img :src="$withBase('frontpage/gallery/screenshot-1.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-2.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-2.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-2.png')"><img :src="$withBase('frontpage/gallery/screenshot-2.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-3.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-3.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-3.png')"><img :src="$withBase('frontpage/gallery/screenshot-3.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-4.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-4.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-4.png')"><img :src="$withBase('frontpage/gallery/screenshot-4.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-5.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-5.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-5.png')"><img :src="$withBase('frontpage/gallery/screenshot-5.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-6.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-6.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-6.png')"><img :src="$withBase('frontpage/gallery/screenshot-6.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-7.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-7.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-7.png')"><img :src="$withBase('frontpage/gallery/screenshot-7.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-8.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-8.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-8.png')"><img :src="$withBase('frontpage/gallery/screenshot-8.png')"></a>
<a :href="$withBase('frontpage/gallery/screenshot-9.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-9.png')"></a> <a :href="$withBase('frontpage/gallery/screenshot-9.png')"><img :src="$withBase('frontpage/gallery/screenshot-9.png')"></a>
</slick> </slick>
</div> </div>
</div> </div>
@ -86,8 +86,8 @@
<h1>Get Started</h1> <h1>Get Started</h1>
<p class="m-4">Ready to fly on the Pterodactyl?</p> <p class="m-4">Ready to fly on the Pterodactyl?</p>
<div class="mt-4"> <div class="mt-4">
<router-link class="btn" to="/project/introduction.html">About the project</router-link> <router-link class="btn inline-block" to="/project/introduction.html">About the project</router-link>
<a class="btn" href="https://pterodactyl.io/discord">Discord</a> <a class="btn inline-block" href="https://pterodactyl.io/discord">Discord</a>
</div> </div>
</div> </div>
</div> </div>
@ -96,8 +96,8 @@
<div> <div>
<img class="w-16" :src="$withBase('pterodactyl-flat.svg')"> <img class="w-16" :src="$withBase('pterodactyl-flat.svg')">
</div> </div>
<div class="text-left flex"> <div class="text-left md:flex">
<div class="flex-none w-1/2 pr-12"> <div class="flex-none w-full md:w-1/2 md:pr-12">
<p class="my-4"> <p class="my-4">
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. 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.
</p> </p>
@ -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. 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.
</p> </p>
</div> </div>
<div class="flex-1 pr-12"> <div class="hidden md:block md:flex-1 md:pr-12">
<p><a class="text-grey-lightest" href="https://blog.pterodactyl.io/">Blog</a></p> <p><a class="text-grey-lightest" href="https://blog.pterodactyl.io/">Blog</a></p>
<p><a class="text-grey-lightest" href="https://github.com/pterodactyl">Github</a></p> <p><a class="text-grey-lightest" href="https://github.com/pterodactyl">Github</a></p>
<p><a class="text-grey-lightest" href="/panel/getting_started.html">Documentation</a></p> <p><a class="text-grey-lightest" href="/panel/getting_started.html">Documentation</a></p>
<p><a class="text-grey-lightest" href="/panel/troubleshooting.html">Troubleshooting</a></p> <p><a class="text-grey-lightest" href="/panel/troubleshooting.html">Troubleshooting</a></p>
<p><a class="text-grey-lightest" href="https://github.com/parkervcp/eggs">Additional Game Configurations</a></p> <p><a class="text-grey-lightest" href="https://github.com/parkervcp/eggs">Additional Game Configurations</a></p>
</div> </div>
<div class="flex-1"> <div class="text-center mt-8 md:flex-1 md:mt-0">
<a href="https://pterodactyl.io/discord" target="_blank" rel="nofollow noopener"> <a href="https://pterodactyl.io/discord" target="_blank" rel="nofollow noopener">
<img src="https://cdn.pterodactyl.io/site-assets/discord.png" class="w-3/4"> <img src="https://cdn.pterodactyl.io/site-assets/discord.png" class="w-3/4">
</a> </a>
</div> </div>
</div> </div>
<div class="mt-8 pt-8 px-8 text-grey-dark text-xs">MIT Licensed | Copyright © 2015 - 2018 Dane Everitt & Contributors.</div> <div class="footer">MIT Licensed | Copyright © 2015 - 2018 Dane Everitt & Contributors.</div>
</div> </div>
</div> </div>
</div> </div>

30
.vuepress/theme/styles/home.css
View File

@ -23,7 +23,7 @@
} }
.btn { .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; transition: all 100ms linear;
&:hover { &:hover {
@ -32,7 +32,7 @@
} }
.feature { .feature {
@apply .p-4 .my-4 .inline-block .w-1/2; @apply .p-4 .my-4 .inline-block .w-full;
span { span {
@apply .block .rounded-full .bg-white .text-blue .text-center .w-24 .h-24 .mx-auto .py-6; @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 { @screen lg {
.feature { .feature {
@apply .w-1/3; @apply .w-1/3;
@ -56,14 +62,13 @@
.screenshots { .screenshots {
cursor: ew-resize; cursor: ew-resize;
.item { .slick-slide {
position: relative; position: relative;
transform: scale(0.7); transform: scale(0.7);
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
img { img {
max-width: 90vw; @apply .max-w-xs;
max-height: 40rem;
} }
&.slick-center { &.slick-center {
@ -72,6 +77,14 @@
} }
} }
@screen md {
.slick-slide {
img {
@apply .max-w-xl;
}
}
}
.slick-dots li { .slick-dots li {
button:before { button:before {
@apply .text-blue; @apply .text-blue;
@ -97,4 +110,11 @@
} }
} }
.footer {
@apply .p-8 .pb-0 .text-grey-dark .text-xs;
@screen md {
@apply .mt-8;
}
}
} }