Merge pull request #1 from Microsoft/nickpape/add-landing-page
Add a Landing Page
|
@ -1,51 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }}</title>
|
||||
|
||||
{% include meta.html %}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<title>Landing Page - Start Bootstrap Theme</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="{{ site.baseurl }}/styles.css" rel="stylesheet">
|
||||
|
||||
<!-- Created with Jekyll Now - http://github.com/barryclark/jekyll-now -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper-masthead">
|
||||
<div class="container">
|
||||
<header class="masthead clearfix">
|
||||
<a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>
|
||||
|
||||
<div class="site-info">
|
||||
<h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
|
||||
<p class="site-description">{{ site.description }}</p>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-light bg-light static-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">
|
||||
<img src="{{ site.baseurl }}/images/android-chrome-192x192.png"
|
||||
style="height: 100px" />
|
||||
Rush, a monorepo manager
|
||||
</a>
|
||||
<div>
|
||||
<a class="btn" href="{{ site.baseurl }}/about">About</a>
|
||||
<a class="btn" href="https://github.com/Microsoft/web-build-tools">Code</a>
|
||||
<a class="btn" href="https://gitter.im/web-build-tools/web-build-tools">Gitter</a>
|
||||
<a class="btn btn-primary" href="https://github.com/Microsoft/web-build-tools/wiki/Rush-~-Setting-up-your-repo">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
|
||||
<ul class="list-inline mb-2">
|
||||
<li class="list-inline-item">
|
||||
<a href="{{ site.baseurl }}/about">About</a>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="https://github.com/Microsoft/web-build-tools/wiki/Rush-~-Setting-up-your-repo">Getting Started</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-muted small mb-4 mb-lg-0">© Microsoft 2018. All Rights Reserved.</p>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<a href="{{ site.baseurl }}/">Blog</a>
|
||||
<a href="{{ site.baseurl }}/about">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="main" role="main" class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
|
||||
|
||||
<div class="wrapper-footer">
|
||||
<div class="container">
|
||||
<footer class="footer">
|
||||
{% include svg-icons.html %}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include analytics.html %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -2,11 +2,13 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
|
||||
<article class="page">
|
||||
<div class="container" style="padding: 2rem;">
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<div class="entry">
|
||||
{{ content }}
|
||||
<div class="entry">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
.call-to-action {
|
||||
position: relative;
|
||||
background-color: $gray-800;
|
||||
background: url('../img/bg-masthead.jpg') no-repeat center center;
|
||||
@include background-cover;
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 7rem;
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background-color: $gray-900;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
footer.footer {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
@include body-font;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include body-font;
|
||||
font-weight: 700;
|
||||
}
|
|
@ -1,84 +0,0 @@
|
|||
|
||||
.highlight {
|
||||
background-color: #efefef;
|
||||
padding: 7px 7px 7px 10px;
|
||||
border: 1px solid #ddd;
|
||||
-moz-box-shadow: 3px 3px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: 3px 3px rgba(0,0,0,0.1);
|
||||
box-shadow: 3px 3px rgba(0,0,0,0.1);
|
||||
margin: 20px 0 20px 0;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family:'Bitstream Vera Sans Mono','Courier', monospace;
|
||||
}
|
||||
|
||||
.highlight .c { color: #586E75 } /* Comment */
|
||||
.highlight .err { color: #93A1A1 } /* Error */
|
||||
.highlight .g { color: #93A1A1 } /* Generic */
|
||||
.highlight .k { color: #859900 } /* Keyword */
|
||||
.highlight .l { color: #93A1A1 } /* Literal */
|
||||
.highlight .n { color: #93A1A1 } /* Name */
|
||||
.highlight .o { color: #859900 } /* Operator */
|
||||
.highlight .x { color: #CB4B16 } /* Other */
|
||||
.highlight .p { color: #93A1A1 } /* Punctuation */
|
||||
.highlight .cm { color: #586E75 } /* Comment.Multiline */
|
||||
.highlight .cp { color: #859900 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #586E75 } /* Comment.Single */
|
||||
.highlight .cs { color: #859900 } /* Comment.Special */
|
||||
.highlight .gd { color: #2AA198 } /* Generic.Deleted */
|
||||
.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #DC322F } /* Generic.Error */
|
||||
.highlight .gh { color: #CB4B16 } /* Generic.Heading */
|
||||
.highlight .gi { color: #859900 } /* Generic.Inserted */
|
||||
.highlight .go { color: #93A1A1 } /* Generic.Output */
|
||||
.highlight .gp { color: #93A1A1 } /* Generic.Prompt */
|
||||
.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #CB4B16 } /* Generic.Subheading */
|
||||
.highlight .gt { color: #93A1A1 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #CB4B16 } /* Keyword.Constant */
|
||||
.highlight .kd { color: #268BD2 } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #859900 } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #268BD2 } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #DC322F } /* Keyword.Type */
|
||||
.highlight .ld { color: #93A1A1 } /* Literal.Date */
|
||||
.highlight .m { color: #2AA198 } /* Literal.Number */
|
||||
.highlight .s { color: #2AA198 } /* Literal.String */
|
||||
.highlight .na { color: #93A1A1 } /* Name.Attribute */
|
||||
.highlight .nb { color: #B58900 } /* Name.Builtin */
|
||||
.highlight .nc { color: #268BD2 } /* Name.Class */
|
||||
.highlight .no { color: #CB4B16 } /* Name.Constant */
|
||||
.highlight .nd { color: #268BD2 } /* Name.Decorator */
|
||||
.highlight .ni { color: #CB4B16 } /* Name.Entity */
|
||||
.highlight .ne { color: #CB4B16 } /* Name.Exception */
|
||||
.highlight .nf { color: #268BD2 } /* Name.Function */
|
||||
.highlight .nl { color: #93A1A1 } /* Name.Label */
|
||||
.highlight .nn { color: #93A1A1 } /* Name.Namespace */
|
||||
.highlight .nx { color: #555 } /* Name.Other */
|
||||
.highlight .py { color: #93A1A1 } /* Name.Property */
|
||||
.highlight .nt { color: #268BD2 } /* Name.Tag */
|
||||
.highlight .nv { color: #268BD2 } /* Name.Variable */
|
||||
.highlight .ow { color: #859900 } /* Operator.Word */
|
||||
.highlight .w { color: #93A1A1 } /* Text.Whitespace */
|
||||
.highlight .mf { color: #2AA198 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #586E75 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #2AA198 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #2AA198 } /* Literal.String.Double */
|
||||
.highlight .se { color: #CB4B16 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #2AA198 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #2AA198 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #DC322F } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #2AA198 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
|
|
@ -0,0 +1,20 @@
|
|||
.features-icons {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 7rem;
|
||||
.features-icons-item {
|
||||
max-width: 20rem;
|
||||
.features-icons-icon {
|
||||
height: 7rem;
|
||||
i {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.features-icons-icon {
|
||||
i {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
header.masthead {
|
||||
position: relative;
|
||||
background-color: $gray-800;
|
||||
background: url('{{ site.baseurl }}/images/bg-masthead.jpg') no-repeat center center;
|
||||
@include background-cover;
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem;
|
||||
.overlay {
|
||||
position: absolute;
|
||||
background-color: $gray-900;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 12rem;
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
// Mixins
|
||||
// Background Cover Mixin
|
||||
@mixin background-cover {
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// Font Mixins
|
||||
@mixin body-font {
|
||||
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
|
@ -1,53 +0,0 @@
|
|||
|
||||
/***************/
|
||||
/* MEYER RESET */
|
||||
/***************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
// HTML5 display-role reset for older browsers
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
// Apply a natural box layout model to all elements
|
||||
// from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
.showcase {
|
||||
.showcase-text {
|
||||
padding: 3rem;
|
||||
}
|
||||
.showcase-img {
|
||||
min-height: 30rem;
|
||||
background-size: cover;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.showcase-text {
|
||||
padding: 7rem;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
.testimonials {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 7rem;
|
||||
.testimonial-item {
|
||||
max-width: 18rem;
|
||||
img {
|
||||
max-width: 12rem;
|
||||
box-shadow: 0px 5px 5px 0px $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,27 +1,35 @@
|
|||
// Variables
|
||||
|
||||
//
|
||||
// VARIABLES
|
||||
//
|
||||
// Restated Bootstrap Variables
|
||||
|
||||
// Colors
|
||||
$blue: #4183C4;
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
// Grays
|
||||
$black: #000;
|
||||
$darkerGray: #222;
|
||||
$darkGray: #333;
|
||||
$gray: #666;
|
||||
$lightGray: #eee;
|
||||
$white: #fff;
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
// Font stacks
|
||||
$helvetica: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
$helveticaNeue: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
$georgia: Georgia, serif;
|
||||
|
||||
// Mobile breakpoints
|
||||
@mixin mobile {
|
||||
@media screen and (max-width: 640px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
|
После Ширина: | Высота: | Размер: 212 KiB |
После Ширина: | Высота: | Размер: 939 KiB |
После Ширина: | Высота: | Размер: 372 KiB |
После Ширина: | Высота: | Размер: 736 KiB |
После Ширина: | Высота: | Размер: 376 KiB |
После Ширина: | Высота: | Размер: 5.9 KiB |
После Ширина: | Высота: | Размер: 14 KiB |
После Ширина: | Высота: | Размер: 12 KiB |
После Ширина: | Высота: | Размер: 36 KiB |
После Ширина: | Высота: | Размер: 17 KiB |
После Ширина: | Высота: | Размер: 4.9 KiB |
174
index.html
|
@ -2,17 +2,167 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div class="posts">
|
||||
{% for post in site.posts %}
|
||||
<article class="post">
|
||||
|
||||
<h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
|
||||
|
||||
<div class="entry">
|
||||
{{ post.excerpt }}
|
||||
<!-- Masthead -->
|
||||
<header class="masthead text-white text-center"
|
||||
style="background: url('{{ site.baseurl }}/images/bg-masthead.jpg') no-repeat center center;">
|
||||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<h1 class="mb-5">Rush is a fast, professional solution for managing your NPM mono-repo</h1>
|
||||
</div>
|
||||
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||||
<div class="form-row">
|
||||
<div class="col-6">
|
||||
<form action="https://github.com/Microsoft/web-build-tools/wiki/Rush-~-Setting-up-your-repo">
|
||||
<button type="submit" class="btn btn-block btn-lg btn-primary">Get Started!</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<form action="{{ site.baseurl }}/about">
|
||||
<button type="submit" class="btn btn-block btn-lg btn-secondary">Learn More</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Icons Grid -->
|
||||
<section class="features-icons bg-light text-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-globe m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>A single NPM install</h3>
|
||||
<p class="lead mb-0">In one step, Rush installs all the dependencies for all your projects into a common folder.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-vector m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>Automatic local linking</h3>
|
||||
<p class="lead mb-0">Inside a Rush repo, all your projects are automatically symlinked to each other.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
|
||||
<div class="features-icons-icon d-flex">
|
||||
<i class="icon-rocket m-auto text-primary"></i>
|
||||
</div>
|
||||
<h3>Fast builds</h3>
|
||||
<p class="lead mb-0">Rush detects your dependency graph and builds your projects in the right order.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Image Showcases -->
|
||||
<section class="showcase">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters">
|
||||
|
||||
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('{{ site.baseurl }}/images/bg-showcase-1.jpg');"></div>
|
||||
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
|
||||
<h2>Subset and incremental builds</h2>
|
||||
<p class="lead mb-0">Rush build delivers a powerful cross-project incremental build. Also, if you only want to work with a few projects, you can build only the subset of packages you are interested in.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-6 text-white showcase-img" style="background-image: url('{{ site.baseurl }}/images/bg-showcase-2.jpg');"></div>
|
||||
<div class="col-lg-6 my-auto showcase-text">
|
||||
<h2>Release and changelog management</h2>
|
||||
<p class="lead mb-0">When it's time to do a release, Rush can detect which packages have changes, automatically bump all the appropriate version numbers, and run npm publish in each folder. If you like, configure your server to automatically run rush publish every hour.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('{{ site.baseurl }}/images/bg-showcase-3.jpg');"></div>
|
||||
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
|
||||
<h2>Made by professionals</h2>
|
||||
<p class="lead mb-0">Rush was created by the platform team for Microsoft SharePoint. We build hundreds of production NPM packages every day, from internal and public Git repositories, for third party SDKs and live services with millions of users. If there's an important package management problem that needs solvin', it's likely to end up as a feature for Rush.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="testimonials text-center bg-light">
|
||||
<div class="container">
|
||||
<h2 class="mb-5">Who is using Rush...</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded mb-3" style="height: 270" src="{{ site.baseurl }}/images/onedrive.png" alt="">
|
||||
<h5>OneDrive</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/sharepoint.png" alt="">
|
||||
<h5>SharePoint</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/o365.png" alt="">
|
||||
<h5>Office 365 Small Business</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/windows_store.png" alt="">
|
||||
<h5>Windows Store</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/o365.png" alt="">
|
||||
<h5>Office Web Apps</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<a href="https://github.com/SimplrJS/ts-docs-gen">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/simplrjs.png" alt="">
|
||||
<h5>SimplrJS ts-docs-gen </h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<a href="https://github.com/SimplrJS/react-forms">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/simplrjs.png" alt="">
|
||||
<h5>SimplrJS react-forms</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
|
||||
<a href="https://github.com/OfficeDev/office-ui-fabric-react">
|
||||
<img class="img-fluid rounded mb-3" src="{{ site.baseurl }}/images/o365.png" alt="">
|
||||
<h5>Office UI Fabric</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="call-to-action text-white text-center">
|
||||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<h2 class="mb-4">Ready to get started?</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="posts">
|
||||
{% for post in site.posts %}
|
||||
<article class="post">
|
||||
|
||||
<h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
|
||||
|
||||
<div class="entry">
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
|
||||
<a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
289
style.scss
|
@ -1,289 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
//
|
||||
// IMPORTS
|
||||
//
|
||||
|
||||
@import "reset";
|
||||
@import "variables";
|
||||
// Syntax highlighting @import is at the bottom of this file
|
||||
|
||||
/**************/
|
||||
/* BASE RULES */
|
||||
/**************/
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $white;
|
||||
font: 18px/1.4 $helvetica;
|
||||
color: $darkGray;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 740px;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $helveticaNeue;
|
||||
color: $darkerGray;
|
||||
font-weight: bold;
|
||||
|
||||
line-height: 1.7;
|
||||
margin: 1em 0 15px;
|
||||
padding: 0;
|
||||
|
||||
@include mobile {
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
&:hover, &:active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 15px 0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ul, ul ol, ul ul, ol ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul ul, ol ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Fixes images in popup boxes from Google Translate
|
||||
.gmnoprint img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-style: italic;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// Specify the color of the selection
|
||||
::-moz-selection {
|
||||
color: $black;
|
||||
background: $lightGray;
|
||||
}
|
||||
::selection {
|
||||
color: $black;
|
||||
background: $lightGray;
|
||||
}
|
||||
|
||||
// Nicolas Gallagher's micro clearfix hack
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*********************/
|
||||
/* LAYOUT / SECTIONS */
|
||||
/*********************/
|
||||
|
||||
//
|
||||
// .masthead
|
||||
//
|
||||
|
||||
.wrapper-masthead {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid $lightGray;
|
||||
|
||||
@include mobile {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.site-avatar {
|
||||
float: left;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 15px;
|
||||
|
||||
@include mobile {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-info {
|
||||
float: left;
|
||||
|
||||
@include mobile {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.site-name {
|
||||
margin: 0;
|
||||
color: $darkGray;
|
||||
cursor: pointer;
|
||||
font-family: $helveticaNeue;
|
||||
font-weight: 300;
|
||||
font-size: 28px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
margin: -5px 0 0 0;
|
||||
color: $gray;
|
||||
font-size: 16px;
|
||||
|
||||
@include mobile {
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
margin-top: 23px; // @TODO: Vertically middle align
|
||||
font-family: $helveticaNeue;
|
||||
font-size: 18px;
|
||||
|
||||
@include mobile {
|
||||
float: none;
|
||||
margin-top: 9px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 20px;
|
||||
color: $darkGray;
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include mobile {
|
||||
margin: 0 10px;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// .main
|
||||
//
|
||||
|
||||
.posts > .post {
|
||||
padding-bottom: 2em;
|
||||
border-bottom: 1px solid $lightGray;
|
||||
}
|
||||
|
||||
.posts > .post:last-child {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.post {
|
||||
blockquote {
|
||||
margin: 1.8em .8em;
|
||||
border-left: 2px solid $gray;
|
||||
padding: 0.1em 1em;
|
||||
color: $gray;
|
||||
font-size: 22px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.comments {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-footer {
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: $lightGray;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Settled on moving the import of syntax highlighting to the bottom of the CSS
|
||||
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
|
||||
@import "highlights";
|
||||
@import "svg-icons";
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
---
|
||||
// Core variables and mixins
|
||||
@import "variables.scss";
|
||||
@import "mixins.scss";
|
||||
// Global CSS
|
||||
@import "global.scss";
|
||||
// Components
|
||||
@import "masthead.scss";
|
||||
@import "showcase.scss";
|
||||
@import "icons.scss";
|
||||
@import "testimonials.scss";
|
||||
@import "call-to-action.scss";
|
||||
@import "footer.scss";
|