Skip to content

P
packer
Commit 67a95d18 authored by Mitchell Hashimoto's avatar Mitchell Hashimoto
Browse files
Options

website: tweaking the homepage

parent 460d8ba3
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 242 deletions
website/source/index.html.erb
View file @ 67a95d18
......@@ -15,16 +15,16 @@
<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 class="span6 offset3">
<img class="pull-left download-arrow" src="/images/down_arrow.png" alt="down_arrow" />
<h2><a href="#">Download v0.1</a></h2>
<small class="uppercase mono">
<a href="#">
Release Notes
<!-- {{releasedate}} -->
<span>06/17/13</span>
</a>
</small>
</div>
</div>
</div>
......@@ -48,7 +48,7 @@
</section>
<section class="vendors text-center">
<div class="container white-background padded-lg">
<div class="container padded-lg">
<div class="row">
<div class="span8 offset2">
<h1 class="text-green">Works great with</h1>
......
website/source/layouts/layout.erb
View file @ 67a95d18
......@@ -3,7 +3,6 @@
<head>
<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">
<!-- rewrite URLs for @2x retina images -->
<script>
......
website/source/stylesheets/components.scss
View file @ 67a95d18
.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);
}
}
height: $hero-height;
background: #000000 url(/images/hero_image.jpg) no-repeat 75% -25px;
background-size: 1008px 490px;
@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;
}
@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;
}
}
......@@ -60,52 +60,52 @@ margin-left: -20px;
.about {
hgroup {
display: table;
margin-bottom: $baseline * 2;
@include respond-to(mobile) {
display: block;
}
}
hgroup {
display: table;
margin-bottom: $baseline * 2;
@include respond-to(mobile) {
display: block;
}
}
h2.has-dividers {
@include respond-to(mobile) {
display: block;
}
}
h2.has-dividers {
@include respond-to(mobile) {
display: block;
}
}
.dividers {
.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;
}
}
.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;
}
}
......@@ -114,152 +114,152 @@ margin-left: -20px;
.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;
}
}
.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;
}
}
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;
}
$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;
}
}
website/source/stylesheets/helpers.scss
View file @ 67a95d18
......@@ -22,7 +22,11 @@ $base-font-size: 16px;
$base-line-height: 20px;
$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-sm {padding: ($baseline) 0;}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7