website: homepage coming in, although a bit rough right now
This commit is contained in:
Mitchell Hashimoto
parent
c4120ddee0
commit
460d8ba30e
|
|
@ -1,4 +1,5 @@
|
||||||
/bin
|
/bin
|
||||||
/local
|
/local
|
||||||
/pkg
|
/pkg
|
||||||
|
/website/.sass-cache
|
||||||
/website/build
|
/website/build
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
source 'https://rubygems.org'
|
source 'https://rubygems.org'
|
||||||
|
|
||||||
gem "less", "~> 2.2.2"
|
|
||||||
gem "middleman", "~> 3.0.6"
|
gem "middleman", "~> 3.0.6"
|
||||||
gem "middleman-minify-html", "~> 3.0.0"
|
gem "middleman-minify-html", "~> 3.0.0"
|
||||||
gem "rack-contrib", "~> 1.1.0"
|
gem "rack-contrib", "~> 1.1.0"
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,6 @@ GEM
|
||||||
coffee-script-source
|
coffee-script-source
|
||||||
execjs
|
execjs
|
||||||
coffee-script-source (1.3.3)
|
coffee-script-source (1.3.3)
|
||||||
commonjs (0.2.6)
|
|
||||||
compass (0.12.2)
|
compass (0.12.2)
|
||||||
chunky_png (~> 1.2)
|
chunky_png (~> 1.2)
|
||||||
fssm (>= 0.2.7)
|
fssm (>= 0.2.7)
|
||||||
|
|
@ -33,8 +32,6 @@ GEM
|
||||||
rack (>= 1.0.0)
|
rack (>= 1.0.0)
|
||||||
url_mount (~> 0.2.1)
|
url_mount (~> 0.2.1)
|
||||||
i18n (0.6.1)
|
i18n (0.6.1)
|
||||||
less (2.2.2)
|
|
||||||
commonjs (~> 0.2.6)
|
|
||||||
libv8 (3.3.10.4)
|
libv8 (3.3.10.4)
|
||||||
listen (0.5.3)
|
listen (0.5.3)
|
||||||
maruku (0.6.1)
|
maruku (0.6.1)
|
||||||
|
|
@ -129,7 +126,6 @@ PLATFORMS
|
||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
highline (~> 1.6.15)
|
highline (~> 1.6.15)
|
||||||
less (~> 2.2.2)
|
|
||||||
middleman (~> 3.0.6)
|
middleman (~> 3.0.6)
|
||||||
middleman-minify-html (~> 3.0.0)
|
middleman-minify-html (~> 3.0.0)
|
||||||
rack-contrib (~> 1.1.0)
|
rack-contrib (~> 1.1.0)
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 524 B |
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
Binary file not shown.
|
After Width: | Height: | Size: 597 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,3 +1,71 @@
|
||||||
<h1>Packer</h1>
|
<div class="home">
|
||||||
|
|
||||||
Coming soon. <a href="/docs">Docs</a>
|
<header class="hero dark-background text-left">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span6 offset1">
|
||||||
|
<h2>
|
||||||
|
<span class="text-green">Packer</span> is a tool for creating identical machine images for multiple platforms from a single source configuration
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="belt download">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span6 offset4">
|
||||||
|
<img class="pull-left download-arrow" src="/images/down_arrow.png" alt="down_arrow" />
|
||||||
|
<h2><a href="#">Download v1.0</a></h2>
|
||||||
|
<small class="uppercase mono">
|
||||||
|
<a href="#">
|
||||||
|
Release Notes
|
||||||
|
<!-- {{releasedate}} -->
|
||||||
|
<span>06/17/13</span>
|
||||||
|
</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="about padded-lg text-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<hgroup class="span10 offset1">
|
||||||
|
<h2 class="text-green has-dividers">Fast</h2>
|
||||||
|
<span class="divider hidden-phone"></span>
|
||||||
|
<h2 class="text-green has-dividers">Parallel</h2>
|
||||||
|
<span class="divider hidden-phone"></span>
|
||||||
|
<h2 class="text-green has-dividers">Customizable</h2>
|
||||||
|
</hgroup>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p class="span6 offset3">Designed to create identical images for development, test, and production. Packer is lightweight and easy to use. It is lightning fast, parallelizes concurrent jobs, and is infinitely customizable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="vendors text-center">
|
||||||
|
<div class="container white-background padded-lg">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span8 offset2">
|
||||||
|
<h1 class="text-green">Works great with</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p class="span6 offset3">Packer is a free and open source tool for creating golden images for multiple platforms from a single source.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<ul class="company-logos padded">
|
||||||
|
<li class="aws span3 offset1">Amazon Web Services</li>
|
||||||
|
<li class="virtualbox span3">Virtualbox</li>
|
||||||
|
<li class="vmware span3">VM Ware</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div> <!-- /.home -->
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,66 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Packer</title>
|
<title>Packer</title>
|
||||||
|
<meta name="description" content="Packer is a free and open source tool for creating golden images for multiple platforms from a single source configuration." />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="">
|
|
||||||
|
|
||||||
<!-- Le styles -->
|
<!-- rewrite URLs for @2x retina images -->
|
||||||
<%= stylesheet_link_tag "bootstrap.min" %>
|
<script>
|
||||||
<style type="text/css">
|
if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1) {
|
||||||
body {
|
document.cookie='HTTP_IS_RETINA=1;path=/';
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</script>
|
||||||
</head>
|
|
||||||
|
|
||||||
|
<!-- HTML5 shiv -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="dist/html5shiv.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<!-- css -->
|
||||||
|
<%= stylesheet_link_tag "bootstrap.min", "main" %>
|
||||||
|
|
||||||
|
<!-- js -->
|
||||||
|
|
||||||
|
<!-- fonts -->
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||||
|
<script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
|
||||||
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<nav class="dark-background">
|
||||||
<div class="row">
|
<div class="container-fluid">
|
||||||
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<%= yield %>
|
<button class="download pull-right primary hidden-phone">Download</button>
|
||||||
</div><!--/span-->
|
<a href="index.php" class="packer-logo pull-left">Packer</a>
|
||||||
</div><!--/row-->
|
<ul>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="/docs">Documentation</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<hr>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<footer>
|
<%= yield %>
|
||||||
<p>© Mitchell Hashimoto 2013</p>
|
|
||||||
</footer>
|
<footer class="dark-background">
|
||||||
</div><!--/.fluid-container-->
|
<div class="container-fluid">
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<ul>
|
||||||
|
<li class="packer hidden-phone"><a href="#">Packer</a></li>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Documentation</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
<li class="pull-right hashi-logo"><a href="http://www.hashicorp.com">Hashicorp</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
.hero {
|
||||||
|
height: $hero-height;
|
||||||
|
background: url(/images/hero_image.jpg) no-repeat center center;
|
||||||
|
background-size: cover;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: $baseline * 5.5;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
background-position: center bottom;
|
||||||
|
margin-top: $baseline * 4;
|
||||||
|
margin-left: 20px;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: (35/30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.belt {
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download {
|
||||||
|
background-color: $white;
|
||||||
|
@extend .padded-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-arrow {
|
||||||
|
margin: 5px 30px 0 0;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-left: $baseline;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: $baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 15px auto 0;
|
||||||
|
line-height: 1.0;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: (30/25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $gray-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// break this out into sections
|
||||||
|
|
||||||
|
.about {
|
||||||
|
|
||||||
|
hgroup {
|
||||||
|
display: table;
|
||||||
|
margin-bottom: $baseline * 2;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.has-dividers {
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dividers {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendors {
|
||||||
|
|
||||||
|
.company-logos {
|
||||||
|
text-indent: -999999px;
|
||||||
|
margin-left: 50px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 100px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-bottom: $baseline * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aws {
|
||||||
|
background: url(/images/works_with_aws.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
.virtualbox {
|
||||||
|
background: url(/images/works_with_virtual.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
.vmware {
|
||||||
|
background: url(/images/works_with_vmware.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.users {
|
||||||
|
|
||||||
|
|
||||||
|
.company-logos {
|
||||||
|
text-indent: -999999px;
|
||||||
|
margin-left: 40px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedia {
|
||||||
|
background: url(../../img/user_expedia.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
.bbc {
|
||||||
|
background: url(../../img/user_bbc.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
.disqus {
|
||||||
|
background: url(../../img/user_disqus.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
.edgecast {
|
||||||
|
background: url(../../img/user_edgecast.png) no-repeat center center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.docs-wrapper {
|
||||||
|
clear: right;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-body {
|
||||||
|
float: left;
|
||||||
|
width: 70%;
|
||||||
|
max-width: 760px;
|
||||||
|
display: block;
|
||||||
|
@extend .white-background;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-content {
|
||||||
|
max-width: 600px;
|
||||||
|
padding: $docs-top-margin 80px;
|
||||||
|
display: block;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
padding: 0;
|
||||||
|
width: 91%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-top: $docs-top-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p {
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: (25/20);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: $baseline * 2;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: $baseline;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin: $baseline 0 $baseline 0;
|
||||||
|
padding: $baseline 0 0 $baseline;
|
||||||
|
width: 80%;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
$border: 1px solid $gray-mid;
|
||||||
|
height: $nav-height;
|
||||||
|
border-top: $border;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: ($baseline * 1.7);
|
||||||
|
margin-left: $baseline;
|
||||||
|
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.previous-section,
|
||||||
|
.next-section {
|
||||||
|
height: $nav-height;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparentize($gray-light, .7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.previous-section {
|
||||||
|
width: $nav-height;
|
||||||
|
border-right: $border;
|
||||||
|
float: left;
|
||||||
|
background: $white url(/images/arrow-left.png) no-repeat center center;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
width: 50%;
|
||||||
|
background-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-section {
|
||||||
|
background: $white url(/images/arrow-right.png) no-repeat center right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
footer {
|
||||||
|
height: $nav-height;
|
||||||
|
max-height: $nav-height;
|
||||||
|
background-color: $black !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $white;
|
||||||
|
font-family: $sans;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 40px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-left: $baseline;
|
||||||
|
margin-top: $baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 50px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: 20px;
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hashi-logo {
|
||||||
|
background: url(/images/logo_footer.png) no-repeat center top;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
background-size: 37px 40px;
|
||||||
|
text-indent: -999999px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: 0;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-top: -50px;
|
||||||
|
margin-right: $baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrap {
|
||||||
|
min-height: 100%;
|
||||||
|
/* equal to footer height */
|
||||||
|
margin-bottom: -($nav-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrap:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrap:after {
|
||||||
|
/* .push must be the same height as footer */
|
||||||
|
height: $nav-height;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
/* variables */
|
||||||
|
|
||||||
|
//color
|
||||||
|
$black: #000;
|
||||||
|
$white: #fff;
|
||||||
|
$red: #ff0000;
|
||||||
|
|
||||||
|
$green: #7bc6b1;
|
||||||
|
$orange: #f2826a;
|
||||||
|
$background: #f2eee5;
|
||||||
|
$dark-background: #333;
|
||||||
|
|
||||||
|
$gray-dark: #5c5c5c;
|
||||||
|
$gray-mid: #b2b2b2;
|
||||||
|
$gray-light: #e0e0e0;
|
||||||
|
|
||||||
|
$border-dark: #333;
|
||||||
|
|
||||||
|
// base measures
|
||||||
|
$baseline: 20px;
|
||||||
|
$base-font-size: 16px;
|
||||||
|
$base-line-height: 20px;
|
||||||
|
$button-height: 60px;
|
||||||
|
|
||||||
|
.padded-lg {padding: ($baseline * 4) 0;}
|
||||||
|
.padded {padding: ($baseline * 2) 0;}
|
||||||
|
.padded-sm {padding: ($baseline) 0;}
|
||||||
|
|
||||||
|
|
||||||
|
// components
|
||||||
|
$nav-height: 100px;
|
||||||
|
$hero-height: 500px;
|
||||||
|
$docs-top-margin: 60px;
|
||||||
|
$sidebar-background-color: $dark-background;
|
||||||
|
$sidebar-width: 225px;
|
||||||
|
|
||||||
|
|
||||||
|
//typography
|
||||||
|
$serif: 'tk-ff-tisa-web-pro', 'ff-tisa-web-pro-1', 'ff-tisa-web-pro-2', 'tisa ot', helvetica, Georgia, serif;
|
||||||
|
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
$mono: 'Inconsolata', 'courier new', courier, mono-space;
|
||||||
|
|
||||||
|
.serif {font-family: $serif;}
|
||||||
|
.sans {font-family: $sans;}
|
||||||
|
.mono {font-family: $mono;}
|
||||||
|
|
||||||
|
.text-center {text-align: center !important;}
|
||||||
|
.text-left {text-align: left !important;}
|
||||||
|
.text-right {text-align: right !important;}
|
||||||
|
|
||||||
|
.text-green {color: $green;}
|
||||||
|
|
||||||
|
.uppercase {text-transform: uppercase !important;}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HeimatStencil-SemiBold';
|
||||||
|
src: url('../../fonts/2772B2_0_0.eot');
|
||||||
|
src: url('../../fonts/2772B2_0_0.woff') format('woff'),
|
||||||
|
url('../../fonts/2772B2_0_0.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//color
|
||||||
|
.dark-background {
|
||||||
|
background-color: inherit;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
&:hover {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
color: darken($green, 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-background {
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//elements
|
||||||
|
.divider {
|
||||||
|
background: url(/images/divider.png) no-repeat center bottom;
|
||||||
|
height: 70px;
|
||||||
|
width: 70px;
|
||||||
|
background-size: 70px 70px;
|
||||||
|
display: table-cell;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.packer {
|
||||||
|
color: $orange;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:active,
|
||||||
|
a:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// media queries
|
||||||
|
$break-sm: 480px;
|
||||||
|
$break-med: 768px;
|
||||||
|
$break-max: 1200px;
|
||||||
|
$break-lg: 980px;
|
||||||
|
|
||||||
|
@mixin respond-to($media) {
|
||||||
|
@if $media == mobile {
|
||||||
|
@media only screen and (max-width: $break-sm) { @content; }
|
||||||
|
}
|
||||||
|
@else if $media == tablet {
|
||||||
|
@media only screen and (max-width: $break-med - 1) { @content; }
|
||||||
|
}
|
||||||
|
@else if $media == desktop {
|
||||||
|
@media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; }
|
||||||
|
}
|
||||||
|
@else if $media == desktop-lg {
|
||||||
|
@media only screen and (min-width: $break-max) { @content; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* example *
|
||||||
|
.profile-pic {
|
||||||
|
@include respond-to(mobile) { width: 100% ;}
|
||||||
|
@include respond-to(tablet) { width: 125px; }
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
//////
|
||||||
|
|
||||||
|
/* utlities */
|
||||||
|
.d {
|
||||||
|
border-bottom: 1px solid $red;
|
||||||
|
border-top: 1px solid $red;
|
||||||
|
background-color: transparentize($red, .9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hyphenate {
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-transition {
|
||||||
|
transition: all .1s ease-in-out;
|
||||||
|
-moz-transition: all .1s ease-in-out;
|
||||||
|
-webkit-transition: all .1s ease-in-out;
|
||||||
|
-o-transition: all .1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin opacity($opacity) {
|
||||||
|
-khtml-opacity: $opacity;
|
||||||
|
-moz-opacity: $opacity;
|
||||||
|
opacity: $opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transform-scale($value) {
|
||||||
|
-moz-transform: scale($value);
|
||||||
|
-webkit-transform: scale($value);
|
||||||
|
transform: scale($value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transition($type, $speed, $easing) {
|
||||||
|
-webkit-transition: $type $speed $easing;
|
||||||
|
-moz-transition: $type $speed $easing;
|
||||||
|
-o-transition: $type $speed $easing;
|
||||||
|
transition: $type $speed $easing;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin rounded($radius) {
|
||||||
|
-moz-border-radius: $radius;
|
||||||
|
-webkit-border-radius: $radius;
|
||||||
|
-khtml-border-radius: $radius;
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import "helpers";
|
||||||
|
@import "reset";
|
||||||
|
@import "styles";
|
||||||
|
@import "nav";
|
||||||
|
@import "footer";
|
||||||
|
@import "components";
|
||||||
|
@import "sidebar";
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
nav {
|
||||||
|
height: $nav-height;
|
||||||
|
padding: $baseline 0;
|
||||||
|
background-color: $black !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $white;
|
||||||
|
font-family: $sans;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid $border-dark;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-right: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: ($baseline * 2);
|
||||||
|
margin-left: $nav-height;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 50px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.packer-logo {
|
||||||
|
background: url(/images/logo_nav.png) no-repeat center top;
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
background-size: 34px 50px;
|
||||||
|
text-indent: -999999px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 25px;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: $baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
} //nav
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
form,
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
button {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-khtml-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
font-family: $mono;
|
||||||
|
font-size: $base-font-size;
|
||||||
|
line-height: 1.0;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
line-height: 1.0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
outline: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
.sidebar {
|
||||||
|
$border: 1px solid $gray-dark;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: $mono;
|
||||||
|
color: $gray-light;
|
||||||
|
width: $sidebar-width;
|
||||||
|
float: left;
|
||||||
|
background-color: $sidebar-background-color;
|
||||||
|
height: 100%;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: $green;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: $docs-top-margin 20px 0;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
padding: $baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
|
||||||
|
@extend .padded-sm;
|
||||||
|
|
||||||
|
li {
|
||||||
|
border-bottom: $border;
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > * {
|
||||||
|
padding: auto 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-background {
|
||||||
|
background-color: $sidebar-background-color;
|
||||||
|
height: 100%;
|
||||||
|
width: $sidebar-width;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,249 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $background;
|
||||||
|
font-family: $sans;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: $base-font-size;
|
||||||
|
line-height: $base-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: $sans;
|
||||||
|
font-size: 70px;
|
||||||
|
line-height: (80/70);
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
font-size: 50px;
|
||||||
|
line-height: (50/45);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: $sans;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: (50/40);
|
||||||
|
|
||||||
|
&.has-dividers {
|
||||||
|
//overflow: auto !important;
|
||||||
|
display: table-cell;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: $sans;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: (30/20);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-family: $mono;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: (30/20);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-family: $sans;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: (22/16);
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-family: $mono;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: (22/16);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: $serif;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: (30/17);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
&.large-text {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: (35/20);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $green;
|
||||||
|
&:hover {
|
||||||
|
color: darken($green, 30%);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
color: darken($green, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: circle;
|
||||||
|
list-style-position: inside;
|
||||||
|
margin-top: $baseline * 2;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-family: $serif;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: (30/17) !important;
|
||||||
|
margin-bottom: $baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
.small {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: ($baseline * 2) 0;
|
||||||
|
border-color: $gray-mid;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: $black;
|
||||||
|
color: $white;
|
||||||
|
margin: ($baseline * 2) 0;
|
||||||
|
padding-top: $baseline;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
font-family: $mono;
|
||||||
|
margin: ($baseline * 2) 0;
|
||||||
|
color: $gray-dark;
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: $black;
|
||||||
|
font-weight: normal !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #ffff00; /* Safari */
|
||||||
|
}
|
||||||
|
::-moz-selection {
|
||||||
|
background: #ffff00; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: $button-height;
|
||||||
|
background-color: transparent;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
padding: 0 30px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
@include rounded(5px);
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
color: $green;
|
||||||
|
border-color: $green;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparentize($green, .7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: transparentize($green, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
color: $black;
|
||||||
|
border-color: $black;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparentize($black, .9);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: transparentize($black, .7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inline {
|
||||||
|
margin: auto $baseline;
|
||||||
|
@include respond-to(mobile) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: $baseline 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue