topaLE
/
theme.park.app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added dracula theme to theme-park.dev

pull/242/head
Marius 3 years ago
parent
503685e926
commit
d3edba4998
4 changed files with 122 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      Resources/landing-page/assets/img/dracula-small.jpg
  2. BIN
      Resources/landing-page/assets/img/dracula.png
  3. 14
      Resources/landing-page/css/custom.css
  4. 199
      index.html

BIN
Resources/landing-page/assets/img/dracula-small.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
Resources/landing-page/assets/img/dracula.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

14
Resources/landing-page/css/custom.css
View File

@ -221,7 +221,8 @@ header.masthead {
font-family: var(--font-family-sans-serif); font-family: var(--font-family-sans-serif);
} }
#services { #services,
#themes {
background: rgba(87, 109, 117, 1.0); background: rgba(87, 109, 117, 1.0);
color: white; color: white;
padding: 0rem 0 8rem 0; padding: 0rem 0 8rem 0;
@ -276,12 +277,7 @@ p {
} */ } */
/* EXAMPLE IMAGES*/ /* EXAMPLE IMAGES*/
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.aquamarine-hover, #portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption[class*="-hover"] {
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.hotline-hover,
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.space-gray-hover,
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.organizr-dark-hover,
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.dark-hover,
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.plex-hover {
opacity: .9; opacity: .9;
border-radius: 5px; border-radius: 5px;
} }
@ -308,4 +304,8 @@ p {
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover { #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
}
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover {
background: #282a36;
} }

199
index.html
View File

@ -21,7 +21,7 @@
<!-- Core theme CSS (includes Bootstrap)--> <!-- Core theme CSS (includes Bootstrap)-->
<link href="Resources/landing-page/css/styles.css?v=1" rel="stylesheet" /> <link href="Resources/landing-page/css/styles.css?v=1" rel="stylesheet" />
<link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css"> <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.2"> <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.3">
</head> </head>
<body id="page-top"> <body id="page-top">
@ -62,7 +62,7 @@
<hr class="divider my-4" /> <hr class="divider my-4" />
</div> </div>
<div class="col-lg-8 align-self-baseline"> <div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for 50 selfhosted <p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for over 40 selfhosted
apps! apps!
</p> </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
@ -75,9 +75,9 @@
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8 text-center"> <div class="col-lg-8 text-center">
<h2 class="text-white mt-0">50 themed apps</h2> <h2 class="text-white mt-0">Over 40 themed applications!</h2>
<hr class="divider light my-4" /> <hr class="divider light my-4" />
<p class="text-white-50 mb-1">theme.park contains 50 themed applications, with css <a <p class="text-white-50 mb-1">theme.park contains 44 themed applications, with css <a
href="https://docs.theme-park.dev/themes/addons/sonarr/">addons</a> on certain themes. </p> href="https://docs.theme-park.dev/themes/addons/sonarr/">addons</a> on certain themes. </p>
<p class="text-white-50 mb-1">Installation methods include custom <a <p class="text-white-50 mb-1">Installation methods include custom <a
href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a> href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
@ -85,6 +85,9 @@
<p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a> <p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a>
containers containers
and multiple examples of subfiltering using webservers like Nginx and Apache</p> and multiple examples of subfiltering using webservers like Nginx and Apache</p>
<p class="text-white-50 mb-5">Choose between <a class="js-scroll-trigger" href="#themes">7 different
styles!</a> With the possibility to easily create your own themes using the defined <a
href="https://docs.theme-park.dev/custom/">variables</a>. </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a>
</div> </div>
@ -113,7 +116,8 @@
<p>Readarr</p> <p>Readarr</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/prowlarr"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/prowlarr">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" /> <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" />
</p> </p>
<p>Prowlarr</p> <p>Prowlarr</p>
</a> </a>
@ -127,6 +131,12 @@
</p> </p>
<p>Plex</p> <p>Plex</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/synclounge">
<p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/synclounge/logo.png" />
</p>
<p>Synclounge</p>
</a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p>
@ -138,8 +148,8 @@
<p>Jellyfin</p> <p>Jellyfin</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/emby"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/emby">
<p><img class="app-container-image" <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/emby/logo.png" />
src="https://docs.theme-park.dev/site_assets/emby/logo.png" /></p> </p>
<p>Emby</p> <p>Emby</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli">
@ -163,8 +173,8 @@
<p>Organizr</p> <p>Organizr</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/deluge"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/deluge">
<p><img class="app-container-image" <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/deluge/logo.png" />
src="https://docs.theme-park.dev/site_assets/deluge/logo.png" /></p> </p>
<p>deluge</p> <p>deluge</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent">
@ -193,26 +203,28 @@
<p>NZBGet</p> <p>NZBGet</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbhydra2"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbhydra2">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" /> <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" />
</p> </p>
<p>NZBHydra 2</p> <p>NZBHydra 2</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jackett"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jackett">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/jackett/logo.png" /> <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/jackett/logo.png" />
</p> </p>
<p>jackett</p> <p>Jackett</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana"> <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p>
<p>Grafana</p> <p>Grafana</p>
</a> </a> -->
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p>
<p>Netdata</p> <p>Netdata</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr"> <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p>
<p>Monitorr</p> <p>Monitorr</p>
@ -221,7 +233,7 @@
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" /> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" />
</p> </p>
<p>Logarr</p> <p>Logarr</p>
</a> </a> -->
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/portainer"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/portainer">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p>
@ -242,21 +254,21 @@
src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" /></p>
<p>Filebrowser</p> <p>Filebrowser</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp"> <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plpp/logo.png" /> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plpp/logo.png" />
</p> </p>
<p>PLPP</p> <p>PLPP</p>
</a> </a> -->
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p>
<p>Librespeed</p> <p>Librespeed</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge"> <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p>
<p>The Lounge</p> <p>The Lounge</p>
</a> </a> -->
<a class="col app-container text-center p-2 m-1" <a class="col app-container text-center p-2 m-1"
href="https://docs.theme-park.dev/themes/lazylibrarian"> href="https://docs.theme-park.dev/themes/lazylibrarian">
<p><img class="app-container-image" <p><img class="app-container-image"
@ -288,11 +300,11 @@
</p> </p>
<p>Kitana</p> <p>Kitana</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools"> <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/webtools/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/webtools/logo.png" /></p>
<p>Webtools</p> <p>Webtools</p>
</a> </a> -->
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/resilio-sync"> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/resilio-sync">
<p><img class="app-container-image" <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" /></p>
@ -330,7 +342,8 @@
</a> </a>
<a class="col align-self-center app-container text-center p-2 m-1" <a class="col align-self-center app-container text-center p-2 m-1"
href="https://docs.theme-park.dev/themes/vuetorrent"> href="https://docs.theme-park.dev/themes/vuetorrent">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" /> <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" />
</p> </p>
<p>VueTorrent</p> <p>VueTorrent</p>
</a> </a>
@ -342,7 +355,8 @@
</a> </a>
<a class="col align-self-center app-container text-center p-2 m-1" <a class="col align-self-center app-container text-center p-2 m-1"
href="https://docs.theme-park.dev/themes/xbackbone"> href="https://docs.theme-park.dev/themes/xbackbone">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" /> <p><img class="app-container-image"
src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" />
</p> </p>
<p>Xbackbone</p> <p>Xbackbone</p>
</a> </a>
@ -368,7 +382,8 @@
<div class="mt-5"> <div class="mt-5">
<i class="fab fa-4x fa-github text-primary mb-4"></i> <i class="fab fa-4x fa-github text-primary mb-4"></i>
<h3 class="h4 mb-2">Find us on Github</h3> <h3 class="h4 mb-2">Find us on Github</h3>
<p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a href="https://github.com/gilbn/theme.park">Github!</a></p> <p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a
href="https://github.com/gilbn/theme.park">Github!</a></p>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 text-center"> <div class="col-lg-3 col-md-6 text-center">
@ -389,67 +404,83 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Portfolio--> <!-- Portfolio-->
<div id="portfolio" class="theme-overview"> <section class="page-section pb-1" id="themes">
<div class="container-fluid p-0"> <div class="container">
<div class="row no-gutters"> <h2 class="text-center mt-0">Available theme options</h2>
<div class="col-lg-4 col-sm-6 p-1"> <hr class="divider my-4" />
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png"> </div>
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." /> </section>
<div class="portfolio-box-caption aquamarine-hover"> <div id="portfolio" class="theme-overview">
<div class="project-category text-white-50">Theme</div> <div class="container-fluid p-0">
<div class="project-name">Aquamarine</div> <div class="row no-gutters d-flex justify-content-center">
</div> <div class="col-lg-4 col-sm-6 p-1">
</a> <a class="portfolio-box" href="Resources/landing-page/assets/img/dracula.png">
</div> <img class="img-fluid" src="Resources/landing-page/assets/img/dracula-small.jpg" alt="..." />
<div class="col-lg-4 col-sm-6 p-1"> <div class="portfolio-box-caption p-3 dracula-hover">
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png"> <div class="project-category text-white-50">Theme</div>
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." /> <div class="project-name">Dracula</div>
<div class="portfolio-box-caption hotline-hover"> </div>
<div class="project-category text-white-50">Theme</div> </a>
<div class="project-name">Hotline</div> </div>
</div> <div class="col-lg-4 col-sm-6 p-1">
</a> <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
</div> <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
<div class="col-lg-4 col-sm-6 p-1"> <div class="portfolio-box-caption aquamarine-hover">
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png"> <div class="project-category text-white-50">Theme</div>
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." /> <div class="project-name">Aquamarine</div>
<div class="portfolio-box-caption space-gray-hover"> </div>
<div class="project-category text-white-50">Theme</div> </a>
<div class="project-name">Space Gray</div> </div>
</div> <div class="col-lg-4 col-sm-6 p-1">
</a> <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
</div> <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
<div class="col-lg-4 col-sm-6 p-1"> <div class="portfolio-box-caption hotline-hover">
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png"> <div class="project-category text-white-50">Theme</div>
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" alt="..." /> <div class="project-name">Hotline</div>
<div class="portfolio-box-caption organizr-dark-hover"> </div>
<div class="project-category text-white-50">Theme</div> </a>
<div class="project-name">Organizr Dark</div> </div>
</div> <div class="col-lg-4 col-sm-6 p-1">
</a> <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
</div> <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
<div class="col-lg-4 col-sm-6 p-1"> <div class="portfolio-box-caption space-gray-hover">
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png"> <div class="project-category text-white-50">Theme</div>
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." /> <div class="project-name">Space Gray</div>
<div class="portfolio-box-caption dark-hover"> </div>
<div class="project-category text-white-50">Theme</div> </a>
<div class="project-name">Dark</div> </div>
</div> <div class="col-lg-4 col-sm-6 p-1">
</a> <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
</div> <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg"
<div class="col-lg-4 col-sm-6 p-1"> alt="..." />
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png"> <div class="portfolio-box-caption organizr-dark-hover">
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." /> <div class="project-category text-white-50">Theme</div>
<div class="portfolio-box-caption p-3 plex-hover"> <div class="project-name">Organizr Dark</div>
<div class="project-category text-white-50">Theme</div> </div>
<div class="project-name">Plex</div> </a>
</div> </div>
</a> <div class="col-lg-4 col-sm-6 p-1">
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
<div class="portfolio-box-caption dark-hover">
<div class="project-category text-white-50">Theme</div>
<div class="project-name">Dark</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6 p-1">
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
<div class="portfolio-box-caption p-3 plex-hover">
<div class="project-category text-white-50">Theme</div>
<div class="project-name">Plex</div>
</div>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Footer--> <!-- Footer-->
<footer class=" py-5"> <footer class=" py-5">
<div class="container"> <div class="container">
@ -480,4 +511,4 @@
</script> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save