Move theme into pelican project
175
index.html
|
@ -1,175 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="A layout example that shows off a responsive product landing page.">
|
|
||||||
<title>Landing Page – Layout Examples – Pure</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/pure-min.css" integrity="sha384-" crossorigin="anonymous">
|
|
||||||
|
|
||||||
<!--[if lte IE 8]>
|
|
||||||
<link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
|
|
||||||
<![endif]-->
|
|
||||||
<!--[if gt IE 8]><!-->
|
|
||||||
<link rel="stylesheet" href="css/grids-responsive-min.css">
|
|
||||||
<!--<![endif]-->
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/font-awesome.css">
|
|
||||||
|
|
||||||
<!--[if lte IE 8]>
|
|
||||||
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
|
|
||||||
<![endif]-->
|
|
||||||
<!--[if gt IE 8]><!-->
|
|
||||||
<link rel="stylesheet" href="css/layouts/marketing.css">
|
|
||||||
<!--<![endif]-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
|
||||||
<a class="pure-menu-heading" href="">Your Site</a>
|
|
||||||
|
|
||||||
<ul class="pure-menu-list">
|
|
||||||
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
|
|
||||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="splash-container">
|
|
||||||
<div class="splash">
|
|
||||||
<h1 class="splash-head">Big Bold Text</h1>
|
|
||||||
<p class="splash-subhead">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-wrapper">
|
|
||||||
<div class="content">
|
|
||||||
<h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
|
|
||||||
|
|
||||||
<div class="pure-g">
|
|
||||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
||||||
|
|
||||||
<h3 class="content-subhead">
|
|
||||||
<i class="fa fa-rocket"></i>
|
|
||||||
Get Started Quickly
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
||||||
<h3 class="content-subhead">
|
|
||||||
<i class="fa fa-mobile"></i>
|
|
||||||
Responsive Layouts
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
||||||
<h3 class="content-subhead">
|
|
||||||
<i class="fa fa-th-large"></i>
|
|
||||||
Modular
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
||||||
<h3 class="content-subhead">
|
|
||||||
<i class="fa fa-check-square-o"></i>
|
|
||||||
Plays Nice
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ribbon l-box-lrg pure-g">
|
|
||||||
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
|
||||||
<img width="300" alt="File Icons" class="pure-img-responsive" src="img/common/file-icons.png">
|
|
||||||
</div>
|
|
||||||
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
|
||||||
|
|
||||||
<h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
|
|
||||||
|
|
||||||
<div class="pure-g">
|
|
||||||
<div class="l-box-lrg pure-u-1 pure-u-md-2-5">
|
|
||||||
<form class="pure-form pure-form-stacked">
|
|
||||||
<fieldset>
|
|
||||||
|
|
||||||
<label for="name">Your Name</label>
|
|
||||||
<input id="name" type="text" placeholder="Your Name">
|
|
||||||
|
|
||||||
|
|
||||||
<label for="email">Your Email</label>
|
|
||||||
<input id="email" type="email" placeholder="Your Email">
|
|
||||||
|
|
||||||
<label for="password">Your Password</label>
|
|
||||||
<input id="password" type="password" placeholder="Your Password">
|
|
||||||
|
|
||||||
<button type="submit" class="pure-button">Sign Up</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="l-box-lrg pure-u-1 pure-u-md-3-5">
|
|
||||||
<h4>Contact Us</h4>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4>More Information</h4>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
||||||
tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer l-box is-center">
|
|
||||||
View the source of this layout to learn more. Made with love by the YUI Team.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -4,10 +4,12 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- BASE STYLES --
|
* -- BASE STYLES --
|
||||||
* Most of these are inherited from Base, but I want to change a few.
|
* Most of these are inherited from Base, but I want to change a few.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1.7em;
|
line-height: 1.7em;
|
||||||
color: #7f8c8d;
|
color: #7f8c8d;
|
||||||
|
@ -29,17 +31,19 @@ label {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- LAYOUT STYLES --
|
* -- LAYOUT STYLES --
|
||||||
* These are some useful classes which I will need
|
* These are some useful classes which I will need
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.l-box {
|
.l-box {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-box-lrg {
|
.l-box-lrg {
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-center {
|
.is-center {
|
||||||
|
@ -47,11 +51,11 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- PURE FORM STYLES --
|
* -- PURE FORM STYLES --
|
||||||
* Style the form inputs and labels
|
* Style the form inputs and labels
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.pure-form label {
|
.pure-form label {
|
||||||
margin: 1em 0 0;
|
margin: 1em 0 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -66,10 +70,12 @@ label {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- PURE BUTTON STYLES --
|
* -- PURE BUTTON STYLES --
|
||||||
* I want my pure-button elements to look a little different
|
* I want my pure-button elements to look a little different
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.pure-button {
|
.pure-button {
|
||||||
background-color: #1f8dd6;
|
background-color: #1f8dd6;
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -93,11 +99,13 @@ a.pure-button-primary {
|
||||||
.home-menu {
|
.home-menu {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-menu {
|
.home-menu {
|
||||||
background: #2d3e50;
|
background: #2d3e50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-menu.pure-menu-fixed {
|
.pure-menu.pure-menu-fixed {
|
||||||
/* Fixed menus normally have a border at the bottom. */
|
/* Fixed menus normally have a border at the bottom. */
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
@ -118,6 +126,7 @@ a.pure-button-primary {
|
||||||
.home-menu a {
|
.home-menu a {
|
||||||
color: #6FBEF3;
|
color: #6FBEF3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-menu li a:hover,
|
.home-menu li a:hover,
|
||||||
.home-menu li a:focus {
|
.home-menu li a:focus {
|
||||||
background: none;
|
background: none;
|
||||||
|
@ -149,12 +158,17 @@ a.pure-button-primary {
|
||||||
height: 50%;
|
height: 50%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100px; left: 0; bottom: 0; right: 0;
|
top: 100px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the main heading that appears on the blue section */
|
/* This is the main heading that appears on the blue section */
|
||||||
|
|
||||||
.splash-head {
|
.splash-head {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -166,17 +180,21 @@ a.pure-button-primary {
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the subheading that appears on the blue section */
|
/* This is the subheading that appears on the blue section */
|
||||||
|
|
||||||
.splash-subhead {
|
.splash-subhead {
|
||||||
color: white;
|
color: white;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- CONTENT STYLES --
|
* -- CONTENT STYLES --
|
||||||
* This represents the content area (everything below the blue section)
|
* This represents the content area (everything below the blue section)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
/* These styles are required for the "scroll-over" effect */
|
/* These styles are required for the "scroll-over" effect */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -185,15 +203,18 @@ a.pure-button-primary {
|
||||||
min-height: 12%;
|
min-height: 12%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* We want to give the content area some more padding */
|
/* We want to give the content area some more padding */
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 1em 1em 3em;
|
padding: 1em 1em 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the class used for the main content headers (<h2>) */
|
/* This is the class used for the main content headers (<h2>) */
|
||||||
|
|
||||||
.content-head {
|
.content-head {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
@ -201,26 +222,35 @@ a.pure-button-primary {
|
||||||
margin: 2em 0 1em;
|
margin: 2em 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||||
|
|
||||||
.content-head-ribbon {
|
.content-head-ribbon {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the class used for the content sub-headers (<h3>) */
|
/* This is the class used for the content sub-headers (<h3>) */
|
||||||
|
|
||||||
.content-subhead {
|
.content-subhead {
|
||||||
color: #1f8dd6;
|
color: #1f8dd6;
|
||||||
}
|
}
|
||||||
.content-subhead i {
|
|
||||||
margin-right: 7px;
|
.content-subhead i {
|
||||||
}
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the class used for the dark-background areas. */
|
/* This is the class used for the dark-background areas. */
|
||||||
|
|
||||||
.ribbon {
|
.ribbon {
|
||||||
background: #2d3e50;
|
background: #2d3e50;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is the class used for the footer */
|
/* This is the class used for the footer */
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background: #111;
|
background: #111;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -228,59 +258,55 @@ a.pure-button-primary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||||
* On tablets and other medium-sized devices, we want to customize some
|
* On tablets and other medium-sized devices, we want to customize some
|
||||||
* of the mobile styles.
|
* of the mobile styles.
|
||||||
*/
|
*/
|
||||||
@media (min-width: 48em) {
|
|
||||||
|
|
||||||
|
@media (min-width: 48em) {
|
||||||
/* We increase the body font size */
|
/* We increase the body font size */
|
||||||
body {
|
body {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* We can align the menu header to the left, but float the
|
/* We can align the menu header to the left, but float the
|
||||||
menu items to the right. */
|
menu items to the right. */
|
||||||
.home-menu {
|
.home-menu {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.home-menu ul {
|
.home-menu ul {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* We increase the height of the splash-container */
|
/* We increase the height of the splash-container */
|
||||||
/* .splash-container {
|
/* .splash-container {
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
/* We decrease the width of the .splash, since we have more width
|
/* We decrease the width of the .splash, since we have more width
|
||||||
to work with */
|
to work with */
|
||||||
.splash {
|
.splash {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splash-head {
|
.splash-head {
|
||||||
font-size: 250%;
|
font-size: 250%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* We remove the border-separator assigned to .l-box-lrg */
|
/* We remove the border-separator assigned to .l-box-lrg */
|
||||||
.l-box-lrg {
|
.l-box-lrg {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||||
* On desktops and other large devices, we want to over-ride some
|
* On desktops and other large devices, we want to over-ride some
|
||||||
* of the mobile and tablet styles.
|
* of the mobile and tablet styles.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@media (min-width: 78em) {
|
@media (min-width: 78em) {
|
||||||
/* We increase the header font size even more */
|
/* We increase the header font size even more */
|
||||||
.splash-head {
|
.splash-head {
|
||||||
font-size: 300%;
|
font-size: 300%;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -0,0 +1,38 @@
|
||||||
|
@media only screen and (min-width: 0em) {
|
||||||
|
.splash-container {
|
||||||
|
background-size: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 25.5em) {
|
||||||
|
.splash-container {
|
||||||
|
background-size: 33.3334%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 48em) {
|
||||||
|
.splash-container {
|
||||||
|
background-size: 25%;
|
||||||
|
}
|
||||||
|
.splash {
|
||||||
|
min-height: 20em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 64em) {
|
||||||
|
.splash-container {
|
||||||
|
background-size: 20%;
|
||||||
|
}
|
||||||
|
.splash {
|
||||||
|
min-height: 24em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 80em) {
|
||||||
|
.splash-container {
|
||||||
|
background-size: 10%;
|
||||||
|
}
|
||||||
|
.splash {
|
||||||
|
min-height: 24em;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,64 @@
|
||||||
|
.icon {
|
||||||
|
background-color: #00ff00;
|
||||||
|
background-image: url("../images/play.svg");
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 12px 10px;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
margin: 0.5em 2em;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-menu-heading {
|
||||||
|
background-image: url("../images/luppp.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position-y: 0em;
|
||||||
|
background-size: 2.3em;
|
||||||
|
padding-left: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.pure-button-primary {
|
||||||
|
padding: 0em 0em;
|
||||||
|
background: #2b2b2b;
|
||||||
|
color: white;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash {
|
||||||
|
background: #000000;
|
||||||
|
border: 2px solid #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-head {
|
||||||
|
border: 0;
|
||||||
|
letter-spacing: 1em;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-head {
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-container {
|
||||||
|
background-color: black;
|
||||||
|
background-image: url("../images/header.png");
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position-y: 100px;
|
||||||
|
background-position-x: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon,
|
||||||
|
.home-menu {
|
||||||
|
background: #2b2b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-menu a,
|
||||||
|
.content-subhead {
|
||||||
|
color: #ff9900;
|
||||||
|
}
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
@ -0,0 +1,174 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 8.4666665 8.466667"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="0.92.1 r15371"
|
||||||
|
sodipodi:docname="luppp.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient913">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ff7a00;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop909" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ff7a00;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop911" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient905">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#0d0d0d;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop901" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#4c4c4c;stop-opacity:0"
|
||||||
|
offset="1"
|
||||||
|
id="stop903" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient905"
|
||||||
|
id="linearGradient907"
|
||||||
|
x1="3.7041667"
|
||||||
|
y1="291.9729"
|
||||||
|
x2="6.0854168"
|
||||||
|
y2="294.35416"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient913"
|
||||||
|
id="linearGradient915"
|
||||||
|
x1="5.8208332"
|
||||||
|
y1="289.0625"
|
||||||
|
x2="5.8208332"
|
||||||
|
y2="291.70831"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="11.2"
|
||||||
|
inkscape:cx="-5.4179081"
|
||||||
|
inkscape:cy="11.98911"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1884"
|
||||||
|
inkscape:window-height="1051"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4485" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
<dc:date>2017</dc:date>
|
||||||
|
<dc:creator>
|
||||||
|
<cc:Agent>
|
||||||
|
<dc:title>Timothée Giet</dc:title>
|
||||||
|
</cc:Agent>
|
||||||
|
</dc:creator>
|
||||||
|
<cc:license
|
||||||
|
rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
|
||||||
|
</cc:Work>
|
||||||
|
<cc:License
|
||||||
|
rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
|
||||||
|
<cc:permits
|
||||||
|
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
||||||
|
<cc:permits
|
||||||
|
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
||||||
|
<cc:requires
|
||||||
|
rdf:resource="http://creativecommons.org/ns#Notice" />
|
||||||
|
<cc:requires
|
||||||
|
rdf:resource="http://creativecommons.org/ns#Attribution" />
|
||||||
|
<cc:permits
|
||||||
|
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
||||||
|
<cc:requires
|
||||||
|
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
|
||||||
|
</cc:License>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-288.53332)">
|
||||||
|
<path
|
||||||
|
style="fill:#ff7a00;fill-opacity:1;stroke:none;stroke-width:0.99999994"
|
||||||
|
d="M 16 2 L 16 16 L 2 16 A 14 14 0 0 0 16 30 A 14 14 0 0 0 30 16 A 14 14 0 0 0 16 2 z "
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,0,288.53332)"
|
||||||
|
id="path882" />
|
||||||
|
<path
|
||||||
|
style="fill:#8c8c8c;fill-opacity:1;stroke:none;stroke-width:0.99999994"
|
||||||
|
d="M 16 2 A 14 14 0 0 0 2 16 L 16 16 L 16 2 z "
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,0,288.53332)"
|
||||||
|
id="path869" />
|
||||||
|
<circle
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0.26458338"
|
||||||
|
id="path873"
|
||||||
|
cx="4.2333331"
|
||||||
|
cy="292.76666"
|
||||||
|
r="2.6458333" />
|
||||||
|
<path
|
||||||
|
style="fill:url(#linearGradient915);fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||||
|
d="m 4.2333333,289.06249 v 1.05833 a 2.6458332,2.6458332 0 0 1 2.6458333,2.64583 2.6458332,2.6458332 0 0 1 -2.6458333,2.64584 A 2.6458332,2.6458332 0 0 1 1.5875,292.76665 H 0.52916667 a 3.7041666,3.7041666 0 0 0 3.70416663,3.70417 3.7041666,3.7041666 0 0 0 3.7041666,-3.70417 3.7041666,3.7041666 0 0 0 -3.7041666,-3.70416 z"
|
||||||
|
id="path859"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<circle
|
||||||
|
style="fill:#ff7a00;fill-opacity:1;stroke-width:0.26458332"
|
||||||
|
id="path818"
|
||||||
|
cx="4.2333331"
|
||||||
|
cy="289.59164"
|
||||||
|
r="0.52916664" />
|
||||||
|
<circle
|
||||||
|
style="fill:#ff7a00;fill-opacity:1;stroke-width:0.26458332"
|
||||||
|
id="path818-6"
|
||||||
|
cx="-292.76666"
|
||||||
|
cy="1.0583301"
|
||||||
|
r="0.52916664"
|
||||||
|
transform="rotate(-90)" />
|
||||||
|
<path
|
||||||
|
style="fill:#ff7a00;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 3.7041667,291.70832 v 2.11667 l 1.5874997,-1.05834 z"
|
||||||
|
id="path895"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<path
|
||||||
|
style="fill:url(#linearGradient907);stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
|
||||||
|
d="m 5.2916666,292.76665 1.3229166,1.32292 -1.3229166,1.32292 -1.5875,-1.5875 z"
|
||||||
|
id="path899"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 5.9 KiB |
|
@ -0,0 +1,74 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
viewBox="0 0 26.458333 26.458334"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||||
|
sodipodi:docname="play.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="2.8"
|
||||||
|
inkscape:cx="22.437076"
|
||||||
|
inkscape:cy="109.19781"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1028"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Ebene 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-270.54165)">
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
id="path3733"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
sodipodi:cx="10.488839"
|
||||||
|
sodipodi:cy="283.86529"
|
||||||
|
sodipodi:r1="14.937533"
|
||||||
|
sodipodi:r2="7.4687667"
|
||||||
|
sodipodi:arg1="0"
|
||||||
|
sodipodi:arg2="1.0471976"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="m 25.426373,283.8653 -11.203151,6.46814 -11.2031495,6.46814 0,-12.93628 0,-12.93629 11.2031505,6.46814 z"
|
||||||
|
inkscape:transform-center-x="-3.7343834"
|
||||||
|
style="stroke-width:0.26458332" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.2 KiB |
|
@ -0,0 +1,171 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="A layout example that shows off a responsive product landing page.">
|
||||||
|
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pure-min.css">
|
||||||
|
|
||||||
|
<!--[if lte IE 8]>
|
||||||
|
<link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
|
||||||
|
<![endif]-->
|
||||||
|
<!--[if gt IE 8]><!-->
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/grids-responsive-min.css">
|
||||||
|
<!--<![endif]-->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.css">
|
||||||
|
|
||||||
|
<!--[if lte IE 8]>
|
||||||
|
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
|
||||||
|
<![endif]-->
|
||||||
|
<!--[if gt IE 8]><!-->
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/layouts/marketing.css">
|
||||||
|
<!--<![endif]-->
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/responsive-style.css">
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||||
|
<a class="pure-menu-heading" href="">{{ SITENAME }}</a>
|
||||||
|
|
||||||
|
<ul class="pure-menu-list">
|
||||||
|
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||||
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
|
||||||
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="splash-container">
|
||||||
|
<div class="splash">
|
||||||
|
<h1 class="splash-head">{{ SITENAME }}</h1>
|
||||||
|
<p class="splash-subhead">
|
||||||
|
Your Free and Open Source Loop Station on Linux
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="#content-link" class="pure-button pure-button-primary">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span class="button-text">Get Started</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-wrapper" id="content-link">
|
||||||
|
<div class="content">
|
||||||
|
<h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
|
||||||
|
|
||||||
|
<div class="pure-g">
|
||||||
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-rocket"></i> Get Started Quickly
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-mobile"></i> Responsive Layouts
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-th-large"></i> Modular
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-check-square-o"></i> Plays Nice
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ribbon l-box-lrg pure-g">
|
||||||
|
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
||||||
|
<img width="300" alt="File Icons" class="pure-img-responsive" src="img/common/file-icons.png">
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
||||||
|
|
||||||
|
<h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
|
||||||
|
|
||||||
|
<div class="pure-g">
|
||||||
|
<div class="l-box-lrg pure-u-1 pure-u-md-2-5">
|
||||||
|
<form class="pure-form pure-form-stacked">
|
||||||
|
<fieldset>
|
||||||
|
|
||||||
|
<label for="name">Your Name</label>
|
||||||
|
<input id="name" type="text" placeholder="Your Name">
|
||||||
|
|
||||||
|
|
||||||
|
<label for="email">Your Email</label>
|
||||||
|
<input id="email" type="email" placeholder="Your Email">
|
||||||
|
|
||||||
|
<label for="password">Your Password</label>
|
||||||
|
<input id="password" type="password" placeholder="Your Password">
|
||||||
|
|
||||||
|
<button type="submit" class="pure-button">Sign Up</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="l-box-lrg pure-u-1 pure-u-md-3-5">
|
||||||
|
<h4>Contact Us</h4>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
||||||
|
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||||
|
laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>More Information</h4>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
||||||
|
labore et dolore magna aliqua.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer l-box is-center">
|
||||||
|
View the source of this layout to learn more. Made with love by the YUI Team.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|