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

Merge pull request #4611 from jasoncostello/website-update-typography 

Website: Update Typography
This commit is contained in:
Jack Pearkes 2017-03-01 11:38:54 -08:00 committed by GitHub
parent bd7e82a341 d781e9e0a4
commit 794850620b
10 changed files with 98 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
website/source/assets/images/logo-header.svg Normal file
View File

@ -0,0 +1,30 @@
<svg width="110px" height="42px" viewBox="423 368 183 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>HashiCorp Packer</desc>
<defs>
<polygon id="path-1" points="22.6878 62 0 62 0 0.5562 22.6878 0.5562 22.6878 62"></polygon>
<polygon id="path-3" points="33.7967 0 0.2587 0 0.2587 55.0389996 33.7967 55.0389996 33.7967 1.42108547e-14"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(423.000000, 368.000000)">
<path d="M72.5193,24.7828 L66.4223,24.7828 L66.4223,35.7278 L72.5193,35.7278 C75.9273,35.7278 76.9363,34.4798 76.9363,31.8398 L76.9363,28.5758 C76.9363,25.9348 75.8323,24.7828 72.5193,24.7828 L72.5193,24.7828 Z M60.3743,19.4548 L72.8553,19.4548 C80.2483,19.4548 82.9843,22.4788 82.9843,28.0958 L82.9843,32.4638 C82.9843,38.0328 80.0083,41.0568 72.5673,41.0568 L66.4223,41.0568 L66.4223,51.4258 L60.3743,51.4258 L60.3743,19.4548 Z" id="Fill-1" fill="#FFFFFF"></path>
<path d="M97.575,42.5928 L93.255,42.5928 C91.335,42.5928 90.806,43.1208 90.806,44.8978 C90.806,46.5298 91.335,47.2488 93.159,47.2488 C94.887,47.2488 96.471,46.6738 97.575,46.0498 L97.575,42.5928 Z M103.431,51.4258 L98.632,51.4258 L98.199,49.8418 C96.087,51.2338 93.591,51.9058 91.239,51.9058 C86.967,51.9058 85.142,48.9778 85.142,44.9458 C85.142,40.1928 87.207,38.3678 91.959,38.3678 L97.575,38.3678 L97.575,35.9208 C97.575,33.3278 96.855,32.4158 93.111,32.4158 C90.999,32.4158 88.694,32.7038 86.631,33.1348 L85.91,28.6718 C88.118,27.9998 91.335,27.5668 93.927,27.5668 C101.271,27.5668 103.431,30.1598 103.431,36.0158 L103.431,51.4258 Z" id="Fill-3" fill="#FFFFFF"></path>
<path d="M106.9324,42.9288 L106.9324,36.5448 C106.9324,30.2558 109.6684,27.5668 117.0134,27.5668 C118.6464,27.5668 120.9974,27.8548 122.7264,28.4308 L122.0064,33.2318 C120.4214,32.7998 118.3104,32.6078 117.1584,32.6078 C113.7974,32.6078 112.7894,33.6158 112.7894,36.4958 L112.7894,42.9778 C112.7894,45.8578 113.7974,46.8658 117.1584,46.8658 C118.6464,46.8658 120.3264,46.6738 122.0064,46.2418 L122.7264,51.0418 C121.1904,51.5698 118.9344,51.9068 117.0134,51.9068 C109.6684,51.9068 106.9324,49.2178 106.9324,42.9288" id="Fill-5" fill="#FFFFFF"></path>
<path d="M146.2947,28.0474 L139.4297,39.6174 L146.5827,51.4254 L140.1497,51.4254 L133.0937,39.6174 L139.7657,28.0474 L146.2947,28.0474 Z M126.4207,51.4254 L126.4207,18.4944 L132.2767,17.6784 L132.2767,51.4254 L126.4207,51.4254 Z" id="Fill-7" fill="#FFFFFF"></path>
<path d="M153.9256,37.2647 L161.3656,37.2647 L161.3656,36.1117 C161.3656,33.9037 160.6946,32.3677 157.8136,32.3677 C154.9336,32.3677 153.9256,33.9037 153.9256,36.1117 L153.9256,37.2647 Z M158.4856,47.1057 C160.7416,47.1057 163.0936,46.7697 165.6386,46.0007 L166.5506,50.4177 C163.9096,51.4257 160.7416,51.9067 157.9576,51.9067 C150.6126,51.9067 148.0696,48.4967 148.0696,42.8807 L148.0696,36.6887 C148.0696,31.7437 150.2776,27.5667 157.7656,27.5667 C165.2536,27.5667 166.9346,31.9357 166.9346,36.9767 L166.9346,41.9687 L153.9256,41.9687 L153.9256,43.1687 C153.9256,46.0007 154.9336,47.1057 158.4856,47.1057 L158.4856,47.1057 Z" id="Fill-9" fill="#FFFFFF"></path>
<path d="M182.5799,32.9439 C180.3239,33.9519 178.4999,35.0079 176.3879,36.3519 L176.3879,51.4259 L170.5309,51.4259 L170.5309,28.0479 L175.4759,28.0479 L175.8589,30.6389 C177.1549,29.7759 179.9399,28.1429 182.0039,27.5669 L182.5799,32.9439 Z" id="Fill-11" fill="#FFFFFF"></path>
<g id="Group-15" transform="translate(0.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-14"></g>
<polygon id="Fill-13" fill="#71A798" mask="url(#mask-2)" points="-0.0002 0.5562 22.6878 13.6642 22.6878 62.0002 -0.0002 48.8912"></polygon>
</g>
<g id="Group-18" transform="translate(9.000000, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-17"></g>
<path d="M24.9187,14.2047 L0.2587,-0.0003 L0.2587,9.8647 L17.0267,19.5477 L17.0267,49.1407 L24.9187,53.6737 C29.8017,56.4927 33.7967,54.8037 33.7967,49.9207 L33.7967,28.2077 C33.7967,23.3247 29.8017,17.0237 24.9187,14.2047" id="Fill-16" fill="#567D72" mask="url(#mask-4)"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

2
website/source/assets/stylesheets/_buttons.scss
View File

@ -1,5 +1,5 @@
@mixin button { @mixin button {
font-family: $mono; font-family: $font-family-open-sans;
height: $button-height; height: $button-height;
line-height: $button-height; line-height: $button-height;
background-color: transparent; background-color: transparent;

40
website/source/assets/stylesheets/_components.scss
View File

@ -5,7 +5,6 @@ header .header {
h1 { h1 {
margin-bottom: -8px; margin-bottom: -8px;
margin-top: 60px; margin-top: 60px;
text-transform: uppercase;
} }
span { span {
@ -19,15 +18,19 @@ header .header {
background-position: 35px -40px; background-position: 35px -40px;
background-size: 100%; background-size: 100%;
h2 { @media (min-width: 1200px) {
margin-top: 70px; h1 {
margin-top: 100px;
}
} }
@media (max-width: $screen-md-max) { @media (max-width: $screen-md-max) {
height: $hero-height; height: $hero-height;
h2 { h1 {
font-size: 2.1em; font-size: 36px;
padding-top: 1em;
padding-bottom: 1em;
} }
} }
@ -35,9 +38,10 @@ header .header {
height: auto; height: auto;
background: none; background: none;
h2 { h1 {
margin: 0; margin: 0;
padding: 1em; padding-top: 1em;
margin-bottom: 1em;
} }
} }
} }
@ -57,7 +61,6 @@ header .header {
@media (max-width: $screen-sm) { @media (max-width: $screen-sm) {
background: none; background: none;
font-size: 75%;
min-height: 50px; min-height: 50px;
padding: 0; padding: 0;
} }
@ -72,16 +75,19 @@ header .header {
} }
h2 { h2 {
font-family: $serif;
font-size: 44px; font-size: 44px;
color: #7bc6b1; color: #7bc6b1;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
padding-top: 7px; padding-top: 15px;
padding-bottom: 3px; padding-bottom: 3px;
line-height: 1.0; line-height: 1.0;
white-space: nowrap; white-space: nowrap;
@media (max-width: $screen-sm) {
font-size: 30px;
}
&:hover { &:hover {
color: $dark-background; color: $dark-background;
} }
@ -181,7 +187,7 @@ header .header {
color: #b1d631; color: #b1d631;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
font-family: $mono; font-family: $font-family-mono;
text-shadow: 0 0 0; text-shadow: 0 0 0;
} }
@ -203,7 +209,6 @@ header .header {
margin-right: 20px; margin-right: 20px;
li { li {
font-family: $serif;
font-size: 17px; font-size: 17px;
line-height: (30/17) !important; line-height: (30/17) !important;
margin-bottom: $baseline; margin-bottom: $baseline;
@ -225,10 +230,8 @@ header .header {
} }
div.alert { div.alert {
font-family: $serif;
font-size: 17px; font-size: 17px;
line-height: 1.5; line-height: 1.5;
letter-spacing: 1px;
margin-left: -135px; margin-left: -135px;
margin-right: -135px; margin-right: -135px;
padding-top: 40px; padding-top: 40px;
@ -256,20 +259,21 @@ header .header {
} }
h1 { h1 {
font-size: 40px;
line-height: (25/20); line-height: (25/20);
text-transform: uppercase; font-weight: 600;
} }
h2 { h2 {
margin-top: $baseline * 2; margin-top: $baseline * 2;
text-transform: capitalize; text-transform: capitalize;
font-weight: 600;
} }
h3 { h3 {
margin-top: $baseline; margin-top: $baseline * 2;
text-transform: capitalize; text-transform: capitalize;
font-size: 26px; font-size: 24px;
font-weight: 600;
} }
} }
} }

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

@ -9,13 +9,12 @@
background-color: $black; background-color: $black;
.navbar-brand { .navbar-brand {
.logo{ .logo{
color: $green; width: 110px;
padding-left: 36px; height: 42px;
font-size: 22px; line-height: 70px;
line-height: 77px; margin-top: 15px;
background: image-url('logo-header.png') 0 0 no-repeat; background: image-url('logo-header.svg') 0 0 no-repeat;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height); font-size: 0;
background-position: 0 center;
&:hover{ &:hover{
opacity: .6; opacity: .6;
@ -62,7 +61,9 @@
@media (max-width: 768px) { @media (max-width: 768px) {
#header { #header {
.navbar-brand { .navbar-brand {
.logo{
margin-left: 18px;
}
} }
} }
} }
@ -71,21 +72,9 @@
#header { #header {
.navbar-brand { .navbar-brand {
.logo{ .logo{
padding-left: 37px; width: 84px;
font-size: 18px; height: 32px;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75); background-size: contain;;
//background-position: 0 45%;
}
}
}
}
@media (max-width: 320px) {
#header {
.navbar-brand {
.logo{
font-size: 0 !important; //hide terraform text
} }
} }
} }

23
website/source/assets/stylesheets/_helpers.scss
View File

@ -19,7 +19,7 @@ $border-dark: #333;
// base measures // base measures
$baseline: 20px; $baseline: 20px;
$base-font-size: 16px; $base-font-size: 16px;
$base-line-height: 20px; $base-line-height: 1.5;
$button-height: 60px; $button-height: 60px;
.center { .center {
@ -40,13 +40,13 @@ $sidebar-width: 250px;
//typography //typography
$serif: 'myriad-pro', helvetica, Georgia, serif; $font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$mono: 'Inconsolata', 'courier new', courier, monospace; $font-family-mono: 'Inconsolata', 'Monaco', 'courier new', courier, monospace;
.serif { font-family: $serif; } .open-sans { font-family: $font-family-open-sans;}
.sans { font-family: $sans; } .klavika { font-family: $font-family-klavika; }
.mono { font-family: $mono; } .mono { font-family: $font-family-mono; }
.text-center { text-align: center !important; } .text-center { text-align: center !important; }
.text-left { text-align: left !important; } .text-left { text-align: left !important; }
@ -56,15 +56,6 @@ $mono: 'Inconsolata', 'courier new', courier, monospace;
.uppercase { text-transform: uppercase !important; } .uppercase { text-transform: uppercase !important; }
@font-face {
font-family: 'HeimatStencil-SemiBold';
src: font-url('2772B2_0_0.eot');
src: font-url('2772B2_0_0.woff') format('woff'),
font-url('2772B2_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
//color //color
.dark-background { .dark-background {
background-color: #000; background-color: #000;

2
website/source/assets/stylesheets/_reset.scss
View File

@ -9,7 +9,7 @@ form, input, textarea, button {
-khtml-border-radius: 0; -khtml-border-radius: 0;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
font-family: $mono; font-family: $font-family-mono;
font-size: $base-font-size; font-size: $base-font-size;
line-height: 1.0; line-height: 1.0;
color: inherit; color: inherit;

2
website/source/assets/stylesheets/_sidebar.scss
View File

@ -3,7 +3,7 @@
max-width: 320px; max-width: 320px;
$border: 1px solid $gray-dark; $border: 1px solid $gray-dark;
font-size: 16px; font-size: 16px;
font-family: $mono; font-family: $font-family-mono;
color: $gray-light; color: $gray-light;
background-color: $sidebar-background-color; background-color: $sidebar-background-color;

37
website/source/assets/stylesheets/_styles.scss
View File

@ -17,20 +17,22 @@ html {
body { body {
background-color: $background; background-color: $background;
font-family: $sans; font-family: $font-family-open-sans;
letter-spacing: 1px;
font-size: $base-font-size; font-size: $base-font-size;
font-weight: 400;
line-height: $base-line-height; line-height: $base-line-height;
} }
h1, h2, h3, h4, h5, h6 { .home {
letter-spacing: 2px; h1, h2, h3, h4, h5, h6 {
font-weight: normal; font-family: $font-family-klavika;
letter-spacing: 1px;
font-weight: normal;
}
} }
h1 { h1 {
font-family: $sans; font-size: 42px;
font-size: 70px;
line-height: (80/70); line-height: (80/70);
@include respond-to(mobile) { @include respond-to(mobile) {
font-size: 50px; font-size: 50px;
@ -39,9 +41,9 @@ h1 {
} }
h2 { h2 {
font-family: $sans; font-size: 36px;
font-size: 40px;
line-height: (50/40); line-height: (50/40);
text-transform: uppercase;
&.has-dividers { &.has-dividers {
//overflow: auto !important; //overflow: auto !important;
@ -55,38 +57,31 @@ h2 {
} }
h3 { h3 {
font-family: $sans; font-size: 24px;
font-size: 20px;
line-height: (30/20); line-height: (30/20);
} }
h4 { h4 {
font-family: $mono; font-family: $font-family-mono;
font-size: 20px; font-size: 20px;
line-height: (30/20); line-height: (30/20);
} }
h5 { h5 {
font-family: $sans;
font-size: 16px; font-size: 16px;
line-height: (22/16); line-height: (22/16);
} }
h6 { h6 {
font-family: $mono; font-family: $font-family-mono;
font-size: 16px; font-size: 16px;
line-height: (22/16); line-height: (22/16);
} }
p { p {
font-family: $serif;
font-size: 17px;
line-height: (30/17);
letter-spacing: 1px;
&.large-text { &.large-text {
font-size: 20px; font-size: 20px;
line-height: (35/20);
} }
a { a {
@ -121,10 +116,8 @@ dt {
} }
dd { dd {
font-family: $serif;
font-size: 17px; font-size: 17px;
line-height: 1.5; line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -159,7 +152,7 @@ pre {
} }
table { table {
font-family: $mono; font-family: $font-family-mono;
margin: ($baseline * 2) 0; margin: ($baseline * 2) 0;
color: $gray-dark; color: $gray-dark;

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

@ -7,10 +7,10 @@ description: Packer is a free and open source tool for creating golden images
<header class="dark-background"> <header class="dark-background">
<div class="container hero"> <div class="container hero">
<div class="row"> <div class="row">
<div class="col-md-4 col-md-offset-1"> <div class="col-md-6">
<h2> <h1>
<span class="text-green">Packer</span> is a tool for creating machine and container images for multiple platforms from a single source configuration. <span class="text-green">Packer</span> is a tool for creating machine and container images for multiple platforms from a single source configuration.
</h2> </h1>
</div> </div>
</div> </div>
</div> </div>

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

@ -13,12 +13,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon"> <link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
<link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon"> <link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
<script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
<script type="text/javascript">
try {
Typekit.load();
} catch (e) {}
</script>
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script> <script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@ -28,6 +23,11 @@
})(window,document,'script','dataLayer','GTM-NR2SD7C'); })(window,document,'script','dataLayer','GTM-NR2SD7C');
</script> </script>
<!-- End Google Tag Manager --> <!-- End Google Tag Manager -->
<!-- Typekit script to import Klavika -->
<script src="https://use.typekit.net/wxf7mfi.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head> </head>
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>"> <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->