header left logo
This commit is contained in:
captainill
parent
99f060cd42
commit
0701d2dee6
|
|
@ -3,7 +3,7 @@ source 'https://rubygems.org'
|
|||
ruby "2.2.2"
|
||||
|
||||
gem "builder", "~> 3.2.2"
|
||||
gem "less", "~> 2.2.2"
|
||||
gem "less", "~> 2.6.0"
|
||||
gem "middleman", "~> 3.1.5"
|
||||
gem "middleman-blog", "~> 3.3.0"
|
||||
gem "middleman-minify-html", "~> 3.1.1"
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ GEM
|
|||
hike (1.2.3)
|
||||
i18n (0.6.11)
|
||||
kramdown (1.9.0)
|
||||
less (2.2.2)
|
||||
commonjs (~> 0.2.6)
|
||||
less (2.6.0)
|
||||
commonjs (~> 0.2.7)
|
||||
libv8 (3.16.14.13)
|
||||
listen (1.3.1)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
|
|
@ -123,7 +123,7 @@ PLATFORMS
|
|||
DEPENDENCIES
|
||||
builder (~> 3.2.2)
|
||||
highline (~> 1.6.15)
|
||||
less (~> 2.2.2)
|
||||
less (~> 2.6.0)
|
||||
middleman (~> 3.1.5)
|
||||
middleman-blog (~> 3.3.0)
|
||||
middleman-minify-html (~> 3.1.1)
|
||||
|
|
@ -133,3 +133,6 @@ DEPENDENCIES
|
|||
redcarpet (~> 3.0.0)
|
||||
therubyracer (~> 0.12.0)
|
||||
thin (~> 1.5.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.10.6
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -2,8 +2,8 @@
|
|||
$(document).ready(function(){
|
||||
$(document).scroll(function() {
|
||||
var top = $(document).scrollTop();
|
||||
if (top > 0) $('nav').addClass("drop-shadow");
|
||||
if (top === 0) $('nav').removeClass("drop-shadow");
|
||||
if (top > 0) $('#header').addClass("drop-shadow");
|
||||
if (top === 0) $('header').removeClass("drop-shadow");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<%= javascript_include_tag "vagrantup" %>
|
||||
|
||||
<!-- fonts -->
|
||||
<link href='//fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||
<link href='//fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,600' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript" src="//use.typekit.net/xfs6zus.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
|
|
@ -32,20 +32,35 @@
|
|||
<!-- wrap everything -->
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- nav -->
|
||||
|
||||
<nav>
|
||||
<!-- vagrant logo -->
|
||||
<a class="vagrant-logo" href="/">Vagrant</a>
|
||||
<!-- nav -->
|
||||
<ul class="pull-right unstyled">
|
||||
<li class="pill"><a href="/vmware">VMware Integration</a></li>
|
||||
<li><a href="/downloads.html">Downloads</a></li>
|
||||
<li><a href="https://docs.vagrantup.com/">Documentation</a></li>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- nav -->
|
||||
<div id="header">
|
||||
<div class="container-fluid">
|
||||
<!-- vagrant logo -->
|
||||
<div class="navbar-header">
|
||||
<div class="navbar-brand">
|
||||
<a class="logo" href="/">Vagrant</a>
|
||||
<a class="by-hashicorp" href="https://hashicorp.com/"><span class="svg-wrap">by</span><%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp</a>
|
||||
</div>
|
||||
<button class="navbar-toggle" type="button">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons hidden-xs">
|
||||
<nav class="navigation-links" role="navigation">
|
||||
<ul class="main-links nav navbar-nav">
|
||||
<li class="pill"><a href="/vmware">VMware Integration</a></li>
|
||||
<li><a href="/downloads.html">Downloads</a></li>
|
||||
<li><a href="https://docs.vagrantup.com/">Documentation</a></li>
|
||||
<li><a href="/blog.html">Blog</a></li>
|
||||
<li><a href="/about.html">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= partial "layouts/mobile_nav" %>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |
|
Before Width: | Height: | Size: 735 B After Width: | Height: | Size: 735 B |
|
Before Width: | Height: | Size: 635 B After Width: | Height: | Size: 635 B |
|
|
@ -0,0 +1,126 @@
|
|||
//
|
||||
// Header
|
||||
// - Project Specific
|
||||
// - edits should be made here
|
||||
// --------------------------------------------------
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
// font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
height: @header-height;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @white;
|
||||
z-index: 9999999999;
|
||||
|
||||
&.docs {
|
||||
background: @gray-background;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
.logo{
|
||||
padding-left: 36px;
|
||||
font-size: 0;
|
||||
line-height: 77px;
|
||||
width: @project-logo-width;
|
||||
padding-left: 0;
|
||||
.img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat);
|
||||
background-position: 0 center;
|
||||
|
||||
&:hover{
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.by-hashicorp{
|
||||
color: @project-link-color;
|
||||
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: @project-link-color;
|
||||
}
|
||||
line{
|
||||
stroke: @project-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: black;
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: black;
|
||||
}
|
||||
line{
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-wrap{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons{
|
||||
margin-top: 2px; //baseline everything
|
||||
|
||||
.navigation-links{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.main-links,
|
||||
.external-links {
|
||||
li > a {
|
||||
.project-a-style();
|
||||
}
|
||||
}
|
||||
|
||||
.main-links {
|
||||
li > a {
|
||||
color: white;
|
||||
|
||||
&:hover{
|
||||
color: @project-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
padding-left: 37px;
|
||||
font-size: 18px;
|
||||
.img-retina('/images/logo-header.png', @project-logo-width * .75, @project-logo-height * .75, no-repeat);
|
||||
//background-position: 0 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 320px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
.logo{
|
||||
font-size: 0 !important; //hide terraform text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,14 +17,57 @@ nav {
|
|||
background: @gray-background;
|
||||
}
|
||||
|
||||
.vagrant-logo {
|
||||
display: block;
|
||||
text-indent: -999999px;
|
||||
background: url(/images/logo_vagrant.png) no-repeat 0 0;
|
||||
height: 70px;
|
||||
width: 275px;
|
||||
float: left;
|
||||
margin: 10px 20px;
|
||||
.logo {
|
||||
font-size: 0;
|
||||
.img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat);
|
||||
background-position: 0, center;
|
||||
height: @project-logo-height;
|
||||
width: @project-logo-width;
|
||||
margin-left: 15px;
|
||||
&:hover{
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.by-hashicorp{
|
||||
&:hover{
|
||||
svg{
|
||||
line{
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.by-hashicorp{
|
||||
color: @project-link-color;
|
||||
|
||||
&:hover{
|
||||
color: black;
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: black;
|
||||
}
|
||||
line{
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-wrap{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
svg{
|
||||
path,
|
||||
polygon{
|
||||
fill: @project-link-color;
|
||||
}
|
||||
line{
|
||||
stroke: @project-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vagrant-docs-logo {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@
|
|||
// Hashicorp nav
|
||||
// --------------------------------------------------
|
||||
|
||||
#header{
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
color: black;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -115,7 +110,6 @@
|
|||
vertical-align:top;
|
||||
padding: 0;
|
||||
line-height: @header-height;
|
||||
padding-left: @project-logo-width + @project-logo-pad-left;
|
||||
background-position: 0 center;
|
||||
.transition(all 300ms ease-in);
|
||||
|
||||
|
|
@ -145,7 +139,9 @@
|
|||
font-family: @header-font-family;
|
||||
font-weight: 600;
|
||||
font-size: 0;
|
||||
letter-spacing: 0;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
|
||||
&.white{
|
||||
color: white;
|
||||
|
|
@ -166,8 +162,13 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.transition(all 300ms ease-in);
|
||||
}
|
||||
|
||||
.svg-wrap{
|
||||
font-size: 13px;
|
||||
.transition(all 300ms ease-in);
|
||||
}
|
||||
|
||||
svg{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
@header-font-family: @font-family-open-sans;
|
||||
@header-font-weight: 600; // semi-bold
|
||||
|
||||
@header-height: 74px;
|
||||
@header-height: 80px;
|
||||
@header-mobile-height: 60px;
|
||||
@by-hashicorp-width: 74px;
|
||||
@by-hashicorp-height: 16px;
|
||||
|
|
@ -38,6 +38,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.img-retina(@image, @width, @height, @repeat: no-repeat) {
|
||||
@filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
|
||||
@extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
|
||||
background-image: ~`"url(@{filename}.@{extension})"`;
|
||||
background-repeat: @repeat;
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
/* on retina, use image that's scaled by 2 */
|
||||
background-image: ~`"url(@{filename}@2x.@{extension})"`;
|
||||
background-size: @width @height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// -------------------------
|
||||
.anti-alias() {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
// Variables
|
||||
@project-logo-width: 40px;
|
||||
@project-logo-height: 40px;
|
||||
@project-logo-width: 169px;
|
||||
@project-logo-height: 46px;
|
||||
@project-logo-pad-left: 0px;
|
||||
@project-link-color: #8d9ba8;
|
||||
|
||||
// Mixins
|
||||
.project-a-style{
|
||||
font-weight: 300;
|
||||
opacity: .75;
|
||||
color: @project-link-color;
|
||||
|
||||
&:hover{
|
||||
color: $white;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ v a g r a n t u p
|
|||
@import 'hashicorp-shared/_hashicorp-header';
|
||||
@import 'hashicorp-shared/_hashicorp-mobile-nav';
|
||||
|
||||
@import '_nav';
|
||||
// @import '_nav';
|
||||
@import '_header';
|
||||
@import '_components';
|
||||
@import '_modules';
|
||||
@import '_sidebar';
|
||||
|
|
|
|||
Loading…
Reference in New Issue