Landing Page Extension: Custom Dual Landing Responsive Theme (Desktop & Mobile)

0E800

Custom Landing Page CSS
Desktop Browsers display single responsive landing page
Mobile Browsers show responsive video background with customized css text effects.

DEMO: https://keys-daggers.org
(you will need to demo from Desktop and Mobile browser to see difference)

(please forgive the coding mess / lack of proper coding style; I am an amateur web development hobbyist and grab code snippets from various resource sites.)

To use:
Copy/Paste code snippets into respective fields on the Landing Page extension for Flarum.
Replace images and fonts with your own.

Requires Landing Page Extension:
https://packagist.org/packages/johnhearfield/flarum-ext-landing-page

composer require johnhearfield/flarum-ext-landing-page

Header HTML:

<style>
@media (min-width: 768px) {
body { 
			background-image: url(https://i.imgur.com/Od3fFcm.jpg) ;
overflow:hidden;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: relative;
			background-size:  cover;
			 rgba(0e,0e,0e,0.4);
 overflow-x: hidden;
  
}

.Search-input input {
display: none;
}

div, body{
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
 overflow-x: hidden;

  
}
.wrapper {
  height: auto; 
  width: auto; 
possition: fixed;
 overflow: hidden;
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto; 
  height: auto;
  bottom: 25%; 
  display: block;
  position: absolute;
  background-color: rgba(0e,0e,0e,0.4);
  color: #fff;
  padding: 0.5em;
overflow: hidden;

/**
 * Custom Web Fonts
 */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,400,600);
/**
 * Variables
 */
/**
 * Base Styles
 */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #242424;
  color: #CCC;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
}
@media (min-width: 64em) {
  body {
    font-size: 1.2em;
    line-height: 1.8;
  }
}
@media (min-width: 85.375em) {
  body {
    font-size: 1.3em;
  }
}
@media (min-width: 120em) {
  body {
    font-size: 1.4em;
  }
}
@media (min-width: 160em) {
  body {
    font-size: 1.6em;
  }
}

a {
  color: #FC4842;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  text-decoration: none;
}
a:hover, a:focus {
  color: #fb1710;
}

img {
  max-width: 100%;
}

ul {
  padding: 0;
  list-style: none;
}

.icon {
  display: inline-block;
  fill: currentColor;
}

.divider {
  position: relative;
  margin: 0 4% 3em;
  border-bottom: 1px solid #666;
}
@media (min-width: 64em) {
  .divider {
    margin: 0 8% 3em;
  }
}
@media (min-width: 85.375em) {
  .divider {
    margin: 0 12% 3em;
  }
}
@media (min-width: 120em) {
  .divider {
    margin: 0 18% 3em;
  }
}


/**
 * Global
 */
.container {
  margin: 0 4%;
}
@media (min-width: 64em) {
  .container {
    margin: 0 8%;
  }
}
@media (min-width: 85.375em) {
  .container {
    margin: 0 12%;
  }
}
@media (min-width: 120em) {
  .container {
    margin: 0 18%;
  }
}

/**
 * Typography
 */
p {
  margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  line-height: 1.25;
}

/**
 * Sections
 */
.header {
  position: relative;
  padding: 6em 0;
  margin: 0 0 1em;
  text-align: center;
}
@media (min-width: 48em) {
  .header {
    padding: 8em 0;
  }
}
@media (min-width: 64em) {
  .header {
    padding: 10em 0;
  }
}
@media (min-width: 120em) {
  .header {
    padding: 12em 0;
  }
}
.header:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1em;
  right: 1em;
  bottom: 1em;
  left: 1em;
  border: 2px solid #CCC;
}
@media (min-width: 64em) {
  .header:after {
    top: 2em;
    right: 2em;
    bottom: 2em;
    left: 2em;
  }
}

.header__title {
  position: relative;
  z-index: 2;
  font-weight: 200;
  letter-spacing: 0.2em;
  font-size: 1.5em;
}
@media (min-width: 48em) {
  .header__title {
    font-size: 3em;
  }
}
@media (min-width: 64em) {
  .header__title {
    font-size: 4em;
  }
}
@media (min-width: 85.375em) {
  .header__title {
    font-size: 5em;
  }
}

.header__img {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 50%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  opacity: 0.4;
}
.header__img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(top, rgba(36, 36, 36, 0) 0%, #242424 100%);
  background: linear-gradient(to bottom, rgba(36, 36, 36, 0) 0%, #242424 100%);
}

/**
* Overview
*/
.overview {
  position: relative;
  z-index: 2;
  margin: 0 0 2em;
  font-size: 1.4em;
  font-weight: 200;
}
@media (min-width: 64em) {
  .overview {
    font-size: 1.6em;
  }
}
@media (min-width: 85.375em) {
  .overview {
    font-size: 1.8em;
  }
}

/**
* Main
*/
.main {
  margin: 0 0 2em;
}

/**
* Footer
*/
.footer {
  padding: 2em 0;
  text-align: center;
  color: #666;
  background-color: #151515;
}
.footer svg {
  width: 3em;
  height: 3em;
  fill: #666;
  margin: 0 0 0.5em;
}
.footer p {
  font-size: 0.83333em;
}

/*
 * Tabs
 */
.tabs li {
  display: inline-block;
}
.tabs li:not(:last-child):after {
  content: "/";
  display: inline-block;
  margin: 0 0.33333em;
  font-weight: 300;
  color: #666;
}
.tabs a {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.tabs a.is-active {
  color: white;
}

.js-tabby .tabs-pane {
  display: none;
  visibility: hidden;
}

.tabs-pane {
  margin: 0 0 4em;
}
.tabs-pane.is-active {
  display: block;
  visibility: visible;
}
</style>
<style>
.mobile-show {
    display: none;
}

@media (max-width: 640px) {
  .mobile-show {
    display: inline;
  }
  .desktop-show {
    display: none;
  }
}

</style>
<style>
/* Settings - feel free to play with these */
$overlay_opacity: 0.3; // 0-1
$overlay_pattern: 'https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-medium-checks.png'; // Grab the url of a png from here - http://html5backgroundvideos.com/pattern-overlays/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/**
 * This part should be set separately for each video
 * if there are multiple videos in your site.
 * I.e. '.demo-video-wrapper' is the name of this particular video
 */


/* Video overlay and content */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: relative;
			background-size:  cover;
			 rgba(0e,0e,0e,0.4);
	pointer-events: none; /* Allows right click menu on the video */
	background: url($overlay_pattern) left top repeat;
  opacity: $overlay_opacity;
}
.video-hero--content {
	position: relative;
	text-align: center;
	color: #FFF;
  margin: 150px 0;
	text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.video-hero--content h2 {
	font-size: 34px;
	margin: 0 0 10px;
}
.video-hero--content p {
	font-size: 20px;
	margin: 0;
}

/* Other stuff */

}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.page-width {
	width: 92%;
	max-width: 960px;
	margin: 0 auto;
}

}
#header a {
	color: #FFF;
}
.title {
	display: block;
	font-weight: bold;
	font-size: 1em;
}
.subtitle {
	display: block;
	font-weight: normal;
	font-size: 15px;
	color: #959699;
}
a:hover .subtitle {
	color: #FFF;
}
#site-title {
	float: left;
	margin: 0;
}

}


/* CSS from jQuery Background Video plugin */
/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    	background-size: cover;
 overflow-x: hidden;
}
.jquery-background-video {
	position: absolute;
overflow: hidden;
 overflow-x: hidden;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	-o-object-fit: contain;
	   object-fit: contain;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	    	transform: translate(-50%,-50%);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
	opacity: 0;
	-webkit-transition: opacity 300ms linear;
			transition: opacity 300ms linear;
}
.js .jquery-background-video.is-visible {
	opacity: 1;
}

/**
 * Pause/play button
 */ 
.jquery-background-video-pauseplay {
	position: absolute;
	background: transparent;
	border: none;
	box-shadow: none;
	width: 20px;
	height: 20px;
	top: 15px;
	right: 15px;
	padding: 0;
	cursor: pointer;
	outline: none !important;
}
.jquery-background-video-pauseplay span {
	display: none;
}
.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.jquery-background-video-pauseplay.play:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #FFF;
}
.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
	border-top: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	border-left: 5px solid #FFF;
}
.jquery-background-video-pauseplay.pause:after {
	left: 10px;
}

#hollow {
  margin: 0;
color: red;
fill: black;
   text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  font-family: Roboto;
}
#hollow2 {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border: none;
   font-family: Origicide;
   text-shadow: 0 0 10px rgba(0,0,0,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #000000 , 0 0 70px #000000 , 0 0 80px #000000 , 0 0 100px #000000 ;

}


}
</style>
<style type="text/css">
svg{
 font-family: Roboto;

	 width: auto;.
  height: auto;
	
	

}

text{
  fill: none;
font-size: 2em;

  stroke: red;
  stroke-width: 1px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
}
</style>
<style>
@font-face {
    font-family: Origicide;
    src: url(/assets/fonts/origicide.woff2);
}
p.customfont { 
    font-family:  Roboto;
}
</style>
<style>
.text-justify-xs {
    text-align: justify;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-justify-sm {
        text-align: justify;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-justify-md {
        text-align: justify;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: justify;
    }
}
</style>

<style>

#wargames{
position:relative;
    

text-align:center;
}

#wargames:after{
content:"";
width:auto;
height:20%;
position:absolute;
bottom:-15px;
left:0;

}



#wargames pre{


overflow:hidden;
position:relative;
color:#7cb4fc;



}

#wargames pre:before{
content:"";
width: auto;
height:auto;
position:absolute;
top:0;
left:0;

-webkit-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-moz-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-ms-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
 -o-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
    animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
}


#wargames pre:after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
-webkit-filter:drop-shadow(15.32px 2.18px 7.35px rgba(20, 184, 189, 1));
}

#wargames code{
background:#fff;
border:1px solid #DDD;

}

#wargames pre code{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:transparent;
background-position: center center;
border-style:none;
font-size: 1.3em;
font-family: 'Titillium Web';
}

#wargames pre code:last-child:after{
content:"\220E";
-webkit-animation:cursor .95s ease-in-out infinite;
-moz-animation:cursor .95s ease-in-out infinite;
-ms-animation:cursor .95s ease-in-out infinite;
 -o-animation:cursor .95s ease-in-out infinite;
    animation:cursor .95s ease-in-out infinite;
font-size:120%;
}

/*Animations*/

/* Cant' get "Scan" to work in Firefox*/
@-webkit-keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@-webkit-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-moz-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-ms-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-o-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0;
}
.lightbox .lightbox-overlay {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lightbox .lightbox-content {
  position: absolute;
  bottom: -100%;
  left: 50%;
  width: 16cm;
  height: auto;
  margin-left: -8cm;
  transition: bottom 0.5s ease;
  z-index: 1;
  background: #171717;
  box-shadow: 0 0 .1em #EEE;
  padding: .4em;
}
.lightbox .lightbox-content .lightbox-title {
  border-bottom: .3cm #CCC solid;
  padding-bottom: .3em;
  margin-bottom: .5em;
}
.lightbox .lightbox-content .lightbox-close-btn {
  width: .2em;
  height: .2em;
  background: #171717;
  position: absolute;
  right: -.5em;
  top: -.5em;
  border-radius: .2em;
  border: .3em #EEE solid;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1em;
  text-indent: -200%;
  overflow: hidden;
}
.lightbox .lightbox-content .lightbox-close-btn:before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  border-left: 1px solid #EEE;
  height: 50%;
  width: 50%;
  left: 8px;
  top: 8px;
}
.lightbox .lightbox-content .lightbox-close-btn:after {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  border-right: 1px solid #EEE;
  height: 50%;
  width: 50%;
  right: 8px;
  top: 8px;
}
.lightbox:target {
  opacity: .95;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  
overflow: hidden;
}
.lightbox:target .lightbox-overlay {
  opacity: .4;
}
.lightbox:target .lightbox-content {
  bottom: 2%;
}
.lightbox:target ~ #wrapper {
  transform: scale(0.9);
}
</style>
<style>

#wargames2{
position:relative;
    

text-align:center;
}

#wargames2:after{
content:"";
width:auto;
height:10%;
position:absolute;
bottom:-15px;
left:0;

}



#wargames2 pre{


overflow:hidden;
position:relative;
color:#1ec503;



}

#wargames2 pre:before{
content:"";


-webkit-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-moz-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-ms-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
 -o-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
    animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
}


#wargames2 pre:after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
-webkit-filter:drop-shadow(15.32px 2.18px 7.35px rgba(30, 197, 3, 1));
}

#wargames2 code{
background:#fff;
border:1px solid #DDD;

}

#wargames2 pre code{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:transparent;
background-position: center center;
border-style:none;
font-size: 1.3em;
font: VT323, monospace;
}

#wargames2 pre code:last-child:after{
content:"\220E";
-webkit-animation:cursor .95s ease-in-out infinite;
-moz-animation:cursor .95s ease-in-out infinite;
-ms-animation:cursor .95s ease-in-out infinite;
 -o-animation:cursor .95s ease-in-out infinite;
    animation:cursor .95s ease-in-out infinite;
font-size:120%;
}

/*Animations*/

/* Cant' get "Scan" to work in Firefox*/
@-webkit-keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@-webkit-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-moz-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-ms-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-o-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}

</style>
<style>
.style_prevu_kit
{
    display:inline-block;
    border:0;
    width: auto;
    height: auto;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
text-decoration: none;

}
.style_prevu_kit:hover
{
    
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.03);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.03);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.03);
    transition: all 200ms ease-in;
    transform: scale(1.03);
text-decoration: none;
}
</style>
<style>
.cool-link {
    display: inline-block;
    color: #1ec503;
    text-decoration: none;

}

.cool-link::after {
    content: '';
    display: flex;
    width: 0;
    height: .1em;
    background: #1ec503;
    transition: width .3s;

}

.cool-link:hover::after {
    width: 100%;
    transition: width .3s;
}

</style>
<style type="text/css">

   .mobileShow { display: none;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileShow { display: inline;}}

</style>

Body HTML:

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>

 <div class="wrapper message desktop-show">
    <h1 id="wargames2">  <a href='#demo2'  class="cool-link" style="text-decoration: none"><pre><code>"One mind, any weapon."</pre></code></a></h1>
<br><p></p>    
 <p>- Hunter B. Armstrong</p>


<div class='lightbox' id='demo2'>
  <article class='lightbox-content'>
    <h3 id="hollow2" class='lightbox-title'>Three Axioms of Hoplology</h3>
    <p>
  
1. The foundation of human combative behavior is rooted in our evolution. To gain a realistic understanding of human combative behavior, it is necessary to have a basic grasp of its evolutionary background.
<p></p>
2. The two basic forms of human combative behavior are predatory and affective. Predatory combative behavior is that combative/aggressive behavior rooted in our evolution as a hunting mammal. Affective combative behavior is that aggressive/combative behavior rooted in our evolution as a group-social animal.
<p></p>
3. The evolution of human combative behavior and performance is integral with the use of weapons. That is, behavior and performance is intrinsically linked to and reflects the use of weapons.
    </p>
    <a class='lightbox-close-btn' href='#'>x</a>
  </article>
  <a class='lightbox-overlay' href='#'></a>
</div>
</div>

<div class="mobileShow">
 <!-- Start video hero -->
<div class="video-hero jquery-background-video-wrapper demo-video-wrapper">
 <video class="jquery-background-video" autoplay muted loop poster="/assets/pirate.jpg">
    <source src="/assets/Binary_lo.mp4" type="video/mp4">
    <source src="/assets/Binary_lo.webm" type="video/webm">
    <source src="/assets/Binary_lo.ogv" type="video/ogg">
  </video>
	  <div class="video-overlay"></div>
  	<div class="page-width">
		    <div class="video-hero--content">    <h2 id="hollow2">Keys & Daggers</h2>&nbsp;   <p id="hollow"></p>
			               <div id="wargames">
	<pre><code>
Access by any means neccesary</pre></code>

</div>  

</div>
  	</div>
</div>
<!-- End video hero -->
 		
	  </div>
  		
	  </div>

Demo:
https://keys-daggers.org

0E800

Apologies if Demo does not show well. I am currently working on adding support for Retina and 4K resolutions.
If you view while I am developing you might notice issues, please be patient.

Some resources for other wanting to convert their site for higher resolution support:

https://css-tricks.com/optimizing-large-scale-displays/

http://justcreative.com/2016/01/14/4k-and-retina-5k-website-design/

Ralkage

May I make the suggestion on removing the search bar for unregistered users? It's a bit buggy with the code you provided and I just believe it shouldn't be there since it's a landing page.

0E800

Ralkage Excellent suggestion. BTW - what is your screen resolution and what do you notice in particular that happens to the search bar?

kek.. nevermind, I see. It kinda disappears.

Added to header section to remove search input:

.Search-input input {
display: none;
}

Ralkage

0E800

I'd also like to suggest a theme selector in the settings option as an added option for pre-designed templates. The user can just create a header and body file and maintain a theme folder under this structure:

-flarum_install_directory
--vendor
---johnhearfield
----flarum-ext-landing-page
-----src
------Themes

-flarum_install_directory
--vendor
---johnhearfield
----flarum-ext-landing-page
-----themes

If possible.

0E800

Ralkage
Sounds like a great idea. I am not at a level of knowledge that I could modify the current extension.

However, using the power of sed and ack, it could be possible to maybe have a button that calls a script that pre-populates a less file (the custom section of the extension) with your desired theme template.

In the meantime, just having a 'theme-ing' Flarum thread for this particular extension could also be helpful.
There are lots of free responsive web templates that could be modified to work with it. Users can just share their landing page configs.