kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-07 19:05:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #130 from hashicorp/live-site

Browse Source 
Polishing Nomad!
This commit is contained in:
Armon Dadgar
2015-09-27 22:34:16 -07:00
parent ae04f68c2c a343ee118e
commit bdeb024f71
8 changed files with 201 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/source/assets/images/nomad-pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

3
website/source/assets/stylesheets/_docs.scss
View File

@@ -36,7 +36,6 @@ body.layout-intro{
z-index: 20;
margin-bottom: 30px;
margin-top: 50px;
margin-right: 4%;
@include open();
.nav.docs-sidenav{
@@ -51,7 +50,7 @@ body.layout-intro{
position: relative;
> a{
padding: 10px 0 10px 8px;
padding: 10px 8px;
font-size: 15px;
color: $blue-dark;

45
website/source/assets/stylesheets/_global.scss
View File

@@ -28,7 +28,7 @@ h1{
margin-bottom: 24px;
}
h3{
h3, h4{
font-size: 24px;
line-height: 24px;
font-family: $font-family-open-sans;
@@ -58,14 +58,6 @@ pre {
margin-bottom: 0;
}
//fixed grid below 992 to prevent smaller responsive sizes
@media (max-width: 992px) {
.container{
max-width: 970px;
}
}
//all below styles are overriding corrections for below (min-width: 992px)
//below (min-width: 992px) these styles change
.navbar-nav {
@@ -88,3 +80,38 @@ pre {
.center {
text-align: center;
}
//fixed grid below 992 to prevent smaller responsive sizes
@media (max-width: 992px) {
.container{
max-width: 970px;
}
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
h1{
font-size: $font-size-m !important;
line-height: $font-size-m;
font-weight: $font-weight-reg;
margin-bottom: 24px;
}
h2{
font-size: $font-size-m !important;
font-weight: $font-weight-reg;
}
h3{
font-size: $font-size-m !important;
font-weight: $font-weight-reg;
}
h4{
font-size: $font-size-reg !important;
font-weight: $font-weight-reg;
}
}

25
website/source/assets/stylesheets/_header.scss
View File

@@ -4,7 +4,7 @@
#header {
position: relative;
height: 108px;
height: 92px;
color: $white;
text-rendering: optimizeLegibility;
margin-bottom: 0;
@@ -44,7 +44,7 @@
.navbar-brand {
display: inline-block;
padding: 0;
margin: 30px 10px 0 0 ;
margin: 16px 10px 0 0 ;
.logo{
display: inline-block;
@@ -67,7 +67,7 @@
}
.main-links.navbar-nav{
margin-top: 50px;
margin-top: 36px;
margin-left: 120px;
li > a {
@@ -77,7 +77,7 @@
.buttons{
ul.navbar-nav{
margin-top: 50px;
margin-top: 36px;
li {
padding-left: 12px;
@@ -116,7 +116,22 @@
}
@media (max-width: 768px) {
@media (max-width: 992px) {
#header{
.main-links.navbar-nav{
margin-left: 20px;
}
.buttons{
ul.navbar-nav{
li {
&.download{
margin-right: 8px;
}
}
}
}
}
}

218
website/source/assets/stylesheets/_home.scss
View File

@@ -6,9 +6,10 @@
position: relative;
@include translate3d(0, -10px, 0);
text-align: center;
background: image-url('../images/hero-lockup.png') 0 0 no-repeat;
@include img-retina("../images/hero-bg.png", "../images/hero-bg@2x.png", 1278px, 798px);
background-size: cover;
background: image-url('../images/nomad-pattern.png') 0 0 repeat;
@include img-retina("../images/nomad-pattern.png", "../images/nomad-pattern.png", 1869px / 3, 1074px / 3);
background-repeat: repeat;
overflow: hidden;
&:before{
content: '';
@@ -24,11 +25,14 @@
}
#hero-graphic{
position: relative;
position: absolute;
display: inline-block;
left: 50%;
top: 0;
width: 499px;
height: 340px;
margin: 120px auto 40px;
margin-top: 38px;
margin-left: -250px;
z-index: 2;
#hero-logotype{
@@ -82,20 +86,7 @@
#hero-text{
position: relative;
&:before{
content: '';
position: absolute;
top: -40px;
left: 50%;
width: 800px;
height: 800px;
margin-left: -400px;
border-radius: 4px;
opacity: .78;
background-color: $white;
z-index: 1;
}
padding-top: 400px;
#hero-text-content{
position: relative;
@@ -104,14 +95,14 @@
}
h1{
margin-top: 0;
color: $blue-dark;
font-size: $font-size-xl;
font-family: $font-family-blanc;
}
h3{
h4{
color: $blue-light;
font-size: $font-size-m;
font-family: $font-family-blanc;
}
@@ -218,11 +209,13 @@
}
&#deploy{
padding-bottom: 835px;
width: 1161px;
height: 735px;
background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
@include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px);
.feature-graphic{
margin-top: -130px;
width: 1161px;
height: 735px;
background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
@include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px);
}
}
&#maintain{
@@ -303,15 +296,6 @@
}
}
&#audit{
.graphic{
width: 491px;
height: 129px;
background: image-url('../images/graphic-audit.png') 0 0 no-repeat;
@include img-retina("../images/graphic-audit.png", "../images/graphic-audit@2x.png", 491px, 129px);
}
}
.feature-graphic{
margin: 0 auto;
}
@@ -347,10 +331,7 @@
}
.feature-footer{
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 80px;
margin-top: -50px;
p{
display: inline-block;
@@ -367,7 +348,9 @@
display: inline-block;
width: 125px;
height: 80px;
margin-right: 20px;
position: relative;
top: 12px;
margin-left: 10px;
background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat;
@include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 125px, 80px);
}
@@ -442,10 +425,98 @@
}
@media (max-width: 992px) {
#content{
.feature{
&#deploy{
.feature-graphic{
margin-top: -60px;
width: 768px;
height: 486px;
background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
@include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px);
}
.feature-footer{
margin-top: 0;
}
}
&#partners{
.partner-logos{
.docker-wrap{
//border: none;
.partner-logo{
@include scale(.8);
margin-left: -18px;
}
}
.cloud-wrap{
.partner-logo{
@include scale(.8);
}
}
}
}
}
}
}
@media (max-width: 768px) {
#hero{
#hero-graphic{
@include scale(.8);
}
}
#content{
.feature{
&#deploy{
.feature-graphic{
margin-top: 0px;
width: 480px;
height: 304px;
background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
@include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px);
}
.feature-footer{
margin-top: $small-pad;
.docker-outline-logo{
width: 94px;
height: 63px;
background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat;
@include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px);
}
}
}
&#partners{
.partner-logo{
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 auto;
-webkit-transform: scale(1) !important;
-ms-transform: scale(1) !important;
transform: scale(1) !important;
margin-left: 0 !important;
height: 130px !important;
}
p{
padding: 0 20px;
}
}
}
.feature-header{
h3,p{
text-align: center !important;
max-width: none !important;
float: none !important;
}
}
}
#cta{
.intro{
text-align: center;
@@ -460,34 +531,41 @@
@media (max-width: 480px) {
#hero{
#diagram{
width: 100%;
height: 132px;
background: image-url('../images/hero.png') center 0 no-repeat;
@include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px);
background: none;
&:before{
display: none;
}
#hero-graphic{
height: 60px;
margin-top: 0;
@include scale(.54);
}
#hero-text{
position: relative;
padding-top: 220px;
}
}
#content{
.feature{
&#audit{
.graphic{
width: 100%;
height: 84px;
background: image-url('../images/graphic-audit.png') center 0 no-repeat;
@include img-retina("../images/graphic-audit.png", "../images/graphic-audit@2x.png", 320px, 84px);
&#deploy{
.feature-graphic{
width: 280px;
height: 177px;
background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
@include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px);
}
.feature-footer{
.docker-outline-logo{
display: block;
}
}
}
}
}
.feature-footer{
text-align: center;
a{
margin-bottom: 15px;
margin-left: 0 !important;
}
}
}
@@ -502,28 +580,6 @@
}
}
#content{
.feature{
&#crud{
.graphic{
width: 100%;
height: 111px;
background: image-url('../images/graphic-crud.png') center 0 no-repeat;
@include img-retina("../images/graphic-crud.png", "../images/graphic-crud@2x.png", 290px, 111px);
}
}
&#audit{
.graphic{
width: 100%;
height: 76px;
background: image-url('../images/graphic-audit.png') center 0 no-repeat;
@include img-retina("../images/graphic-audit.png", "../images/graphic-audit@2x.png", 290px, 76px);
}
}
}
}
#cta a {
font-size: 14px;
font-weight: 400;

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

@@ -17,7 +17,7 @@
<div id="hero-text">
<div id="hero-text-content">
<h1>Easily deploy applications at any scale</h1>
<h3>A Distributed, Highly Available, Datacenter-Aware Scheduler</h3>
<h4>A Distributed, Highly Available, Datacenter-Aware Scheduler</h4>
<div id="hero-btns">
<a class="h-btn green lrg has-caret has-border try" href="/intro">Get Started<span class="h-caret"></span></a>
</div>
@@ -53,6 +53,7 @@
scheduling, deploying and upgrading applications.
</p>
</div>
<div class="feature-graphic"></div>
<div class="feature-footer">
<p>Docker built in; Nomad makes it easy to deploy one container or thousands.</p>
<span class="docker-outline-logo"></span>
@@ -73,10 +74,10 @@
</div>
<div class="partner-logos">
<div class="row">
<div class="col-md-2 docker-wrap">
<div class="col-sm-2 docker-wrap">
<span class="partner-logo docker-logo"></span>
</div>
<div class="col-md-10 cloud-wrap clearfix">
<div class="col-sm-10 cloud-wrap clearfix">
<span class="partner-logo aws-logo"></span>
<span class="partner-logo google-logo"></span>
<span class="partner-logo microsoft-logo"></span>

4
website/source/layouts/_footer.erb
View File

@@ -1,7 +1,7 @@
<div id="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="col-sm-7 col-xs-12">
<ul class="footer-links nav navbar-nav">
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
<li class="li-under"><a href="/docs/index.html">Docs</a></li>
@@ -9,7 +9,7 @@
<li class="li-under"><a href="/security.html">Security</a></li>
</ul>
</div>
<div class="footer-hashi col-sm-6 col-xs-12">
<div class="footer-hashi col-sm-5 col-xs-12">
<div class="pull-right">
<span>A <a href="https://www.hashicorp.com">HashiCorp</a> Project.</span>
<a class="hashi-logo" href="https://www.hashicorp.com"><i class="hashi-logo"></i></a>

2
website/source/layouts/inner.erb
View File

@@ -1,7 +1,7 @@
<% wrap_layout :layout do %>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-12">
<div class="col-md-3 col-sm-3 col-xs-12">
<%= yield_content :sidebar %>
</div> <!-- /col-md-4 -->
<div id="main-content" class="col-sm-9 col-md-8 col-xs-12" role="main">