iSharkFly-Docs
/
packer-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

website: tweaking the homepage

This commit is contained in:
Mitchell Hashimoto 2013-06-20 17:46:51 -07:00
parent 55889aee64
commit bf664fce1b
4 changed files with 220 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
website/source/index.html.erb
View File

@ -15,16 +15,16 @@
<section class="belt download"> <section class="belt download">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="span6 offset4"> <div class="span6 offset3">
<img class="pull-left download-arrow" src="/images/down_arrow.png" alt="down_arrow" /> <img class="pull-left download-arrow" src="/images/down_arrow.png" alt="down_arrow" />
<h2><a href="#">Download v1.0</a></h2> <h2><a href="#">Download v0.1</a></h2>
<small class="uppercase mono"> <small class="uppercase mono">
<a href="#"> <a href="#">
Release Notes Release Notes
<!-- {{releasedate}} --> <!-- {{releasedate}} -->
<span>06/17/13</span> <span>06/17/13</span>
</a> </a>
</small> </small>
</div> </div>
</div> </div>
</div> </div>
@ -48,7 +48,7 @@
</section> </section>
<section class="vendors text-center"> <section class="vendors text-center">
<div class="container white-background padded-lg"> <div class="container padded-lg">
<div class="row"> <div class="row">
<div class="span8 offset2"> <div class="span8 offset2">
<h1 class="text-green">Works great with</h1> <h1 class="text-green">Works great with</h1>

1
website/source/layouts/layout.erb
View File

@ -3,7 +3,6 @@
<head> <head>
<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="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">
<!-- rewrite URLs for @2x retina images --> <!-- rewrite URLs for @2x retina images -->
<script> <script>

408
website/source/stylesheets/components.scss
View File

@ -1,58 +1,58 @@
.hero { .hero {
height: $hero-height; height: $hero-height;
background: url(/images/hero_image.jpg) no-repeat center center; background: #000000 url(/images/hero_image.jpg) no-repeat 75% -25px;
background-size: cover; background-size: 1008px 490px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
background-size: cover; background-size: cover;
} }
h2 { h2 {
margin-top: $baseline * 5.5; margin-top: $baseline * 5.5;
@include respond-to(mobile) { @include respond-to(mobile) {
background-position: center bottom; background-position: center bottom;
margin-top: $baseline * 4; margin-top: $baseline * 4;
margin-left: 20px; margin-left: 20px;
width: 80%; width: 80%;
font-size: 30px; font-size: 30px;
line-height: (35/30); line-height: (35/30);
} }
} }
} }
.belt { .belt {
@include respond-to(mobile) { @include respond-to(mobile) {
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
} }
&.download { &.download {
background-color: $white; background-color: $white;
@extend .padded-sm; @extend .padded-sm;
} }
.download-arrow { .download-arrow {
margin: 5px 30px 0 0; margin: 5px 30px 0 0;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-left: $baseline; margin-left: $baseline;
margin-top: -10px; margin-top: -10px;
margin-right: $baseline; margin-right: $baseline;
} }
} }
h2 { h2 {
margin: 15px auto 0; margin: 15px auto 0;
line-height: 1.0; line-height: 1.0;
@include respond-to(mobile) { @include respond-to(mobile) {
font-size: 25px; font-size: 25px;
line-height: (30/25); line-height: (30/25);
} }
} }
span { span {
color: $gray-dark; color: $gray-dark;
} }
} }
@ -60,52 +60,52 @@ margin-left: -20px;
.about { .about {
hgroup { hgroup {
display: table; display: table;
margin-bottom: $baseline * 2; margin-bottom: $baseline * 2;
@include respond-to(mobile) { @include respond-to(mobile) {
display: block; display: block;
} }
} }
h2.has-dividers { h2.has-dividers {
@include respond-to(mobile) { @include respond-to(mobile) {
display: block; display: block;
} }
} }
.dividers { .dividers {
} }
} }
.vendors { .vendors {
.company-logos { .company-logos {
text-indent: -999999px; text-indent: -999999px;
margin-left: 50px; margin-left: 50px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-left: 0; margin-left: 0;
} }
li { li {
height: 100px; height: 100px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-bottom: $baseline * 2; margin-bottom: $baseline * 2;
} }
} }
.aws { .aws {
background: url(/images/works_with_aws.png) no-repeat center center; background: url(/images/works_with_aws.png) no-repeat center center;
} }
.virtualbox { .virtualbox {
background: url(/images/works_with_virtual.png) no-repeat center center; background: url(/images/works_with_virtual.png) no-repeat center center;
} }
.vmware { .vmware {
background: url(/images/works_with_vmware.png) no-repeat center center; background: url(/images/works_with_vmware.png) no-repeat center center;
} }
} }
@ -114,152 +114,152 @@ margin-left: -20px;
.users { .users {
.company-logos { .company-logos {
text-indent: -999999px; text-indent: -999999px;
margin-left: 40px; margin-left: 40px;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-left: 0; margin-left: 0;
} }
li { li {
height: 100px; height: 100px;
} }
.expedia { .expedia {
background: url(../../img/user_expedia.png) no-repeat center center; background: url(../../img/user_expedia.png) no-repeat center center;
} }
.bbc { .bbc {
background: url(../../img/user_bbc.png) no-repeat center center; background: url(../../img/user_bbc.png) no-repeat center center;
} }
.disqus { .disqus {
background: url(../../img/user_disqus.png) no-repeat center center; background: url(../../img/user_disqus.png) no-repeat center center;
} }
.edgecast { .edgecast {
background: url(../../img/user_edgecast.png) no-repeat center center; background: url(../../img/user_edgecast.png) no-repeat center center;
} }
} }
} }
.docs-wrapper { .docs-wrapper {
clear: right; clear: right;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
} }
.docs-body { .docs-body {
float: left; float: left;
width: 70%; width: 70%;
max-width: 760px; max-width: 760px;
display: block; display: block;
@extend .white-background; @extend .white-background;
@include respond-to(mobile) { @include respond-to(mobile) {
width: 100%; width: 100%;
} }
.docs-content { .docs-content {
max-width: 600px; max-width: 600px;
padding: $docs-top-margin 80px; padding: $docs-top-margin 80px;
display: block; display: block;
@include respond-to(mobile) { @include respond-to(mobile) {
padding: 0; padding: 0;
width: 91%; width: 91%;
margin-left: 5%; margin-left: 5%;
} }
} }
section { section {
margin-top: $docs-top-margin; margin-top: $docs-top-margin;
} }
h1, h1,
h2, h2,
h3, h3,
p { p {
@include respond-to(mobile) { @include respond-to(mobile) {
-webkit-hyphens: auto; -webkit-hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
} }
h1 { h1 {
font-size: 40px; font-size: 40px;
line-height: (25/20); line-height: (25/20);
text-transform: uppercase; text-transform: uppercase;
} }
h2 { h2 {
margin-top: $baseline * 2; margin-top: $baseline * 2;
text-transform: capitalize; text-transform: capitalize;
} }
h3 { h3 {
margin-top: $baseline; margin-top: $baseline;
text-transform: capitalize; text-transform: capitalize;
} }
} }
pre { pre {
@include respond-to(mobile) { @include respond-to(mobile) {
margin: $baseline 0 $baseline 0; margin: $baseline 0 $baseline 0;
padding: $baseline 0 0 $baseline; padding: $baseline 0 0 $baseline;
width: 80%; width: 80%;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: $black; color: $black;
} }
} }
} }
.pagination { .pagination {
$border: 1px solid $gray-mid; $border: 1px solid $gray-mid;
height: $nav-height; height: $nav-height;
border-top: $border; border-top: $border;
font-size: 20px; font-size: 20px;
margin: 0px; margin: 0px;
h4 { h4 {
display: inline-block; display: inline-block;
margin-top: ($baseline * 1.7); margin-top: ($baseline * 1.7);
margin-left: $baseline; margin-left: $baseline;
@include respond-to(mobile) { @include respond-to(mobile) {
margin-top: 10px; margin-top: 10px;
} }
} }
span { span {
@include respond-to(mobile) { @include respond-to(mobile) {
display: block; display: block;
} }
} }
.previous-section, .previous-section,
.next-section { .next-section {
height: $nav-height; height: $nav-height;
display: block; display: block;
&:hover { &:hover {
background-color: transparentize($gray-light, .7); background-color: transparentize($gray-light, .7);
} }
} }
.previous-section { .previous-section {
width: $nav-height; width: $nav-height;
border-right: $border; border-right: $border;
float: left; float: left;
background: $white url(/images/arrow-left.png) no-repeat center center; background: $white url(/images/arrow-left.png) no-repeat center center;
@include respond-to(mobile) { @include respond-to(mobile) {
width: 50%; width: 50%;
background-position: left center; background-position: left center;
} }
} }
.next-section { .next-section {
background: $white url(/images/arrow-right.png) no-repeat center right; background: $white url(/images/arrow-right.png) no-repeat center right;
} }
} }

6
website/source/stylesheets/helpers.scss
View File

@ -22,7 +22,11 @@ $base-font-size: 16px;
$base-line-height: 20px; $base-line-height: 20px;
$button-height: 60px; $button-height: 60px;
.padded-lg {padding: ($baseline * 4) 0;} .center {
margin: 0 auto;
}
.padded-lg {padding: ($baseline * 2) 0;}
.padded {padding: ($baseline * 2) 0;} .padded {padding: ($baseline * 2) 0;}
.padded-sm {padding: ($baseline) 0;} .padded-sm {padding: ($baseline) 0;}