Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-25 08:41:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: convert console image to css

Browse Source
This commit is contained in:
Björn Ganslandt 2018-09-03 10:08:31 +02:00 committed by Hans
parent 1cd4ce8fd5
commit d5d9790a41
4 changed files with 24 additions and 337 deletions

326
etc/cli.angular.io/cli-logo.svg

File diff suppressed because one or more lines are too long
Side by Side

Before

(image error) Size: 56 KiB

31
etc/cli.angular.io/index.html

@ -11,6 +11,7 @@
<!-- Material Design icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300" rel="stylesheet">
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="theme.css">
@ -31,11 +32,11 @@
<div class="top-nav-wrapper">
<label for="site-nav-checkbox">SITE MENU</label>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://github.com/angular/angular-cli/wiki">Documentation</a>
<a class="mdl-navigation__link" href="https://github.com/angular/angular-cli">GitHub</a>
</nav>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
@ -54,7 +55,19 @@
<header class="hero-background">
<section class="hero-container section--center mdl-grid mdl-grid--no-spacing">
<div class="logo-container mdl-cell mdl-cell--6-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<img class="hero-image" src="cli-logo.svg" alt="Mobile Toolkit">
<div class="console mdl-shadow--4dp">
<div class="console__head">
<div class="console__dot console__dot--red"></div>
<div class="console__dot console__dot--yellow"></div>
<div class="console__dot console__dot--green"></div>
</div>
<div class="console__body">
<kbd class="console__prompt">npm install -g @angular/cli</kbd>
<kbd class="console__prompt">ng new my-dream-app</kbd>
<kbd class="console__prompt">cd my-dream-app</kbd>
<kbd class="console__prompt">ng serve</kbd>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<h4 class="">Angular CLI</h4>
@ -71,27 +84,27 @@
<!-- Add as many features as needed -->
<section class="features-container section--center mdl-grid mdl-grid--no-spacing">
<div class="features-list">
<h4>ng new</h4>
<p>The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!</p>
</div>
<div class="features-list">
<h4>ng generate</h4>
<p>Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.</p>
</div>
<div class="features-list">
<h4>ng serve</h4>
<p>Easily test your app locally while developing.</p>
</div>
<div class="features-list">
<h4>Test, Lint, Format</h4>
<p>Make your code really shine. Run your unittests or your end-to-end tests with the breeze of a command. Execute the official Angular linter and run clang format.</p>
</div>
<div class="button-container mdl-cell mdl-cell--12-col-desktop center">
<a href="https://github.com/angular/angular-cli/wiki" class="cta-button mdl-typography--font-regular mdl-button mdl-button--raised mdl-button--accent">

2
etc/cli.angular.io/main.css

@ -1 +1 @@
.hero-image{margin-top:-10px;width:200px}.hero-image{width:360px;padding-right:40px}@media (max-width:830px){.hero-image{padding-right:0}}.mdl-base{height:100vh}body{font-family:'Roboto',Helvetica,sans-serif}h4{font-size:30px;font-weight:400;line-height:40px;margin-bottom:15px;margin-top:15px}h5{font-size:16px;font-weight:300;line-height:28px;margin-bottom:25px;margin-top:15px;max-width:300px}.mdl-demo section.section--center{max-width:920px}.mdl-grid--no-spacing>.mdl-cell{width:100%}.mdl-layout--fixed-drawer>.mdl-layout__content{margin-left:0}.mdl-layout__header{background-color:rgb(244,67,54);box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}.mdl-layout__header a{color:rgb(255,255,255);text-decoration:none}.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header{margin-left:0;width:100%}.mdl-layout--fixed-drawer>.mdl-layout__header .mdl-layout__header-row{padding-left:25px;padding-right:0}.mdl-layout__drawer-button{display:none}@media (max-width:1024px){.mdl-layout__drawer-button{display:inline-block}}.mdl-layout__drawer{margin-top:65px;height:calc(100% - 65px)}@media (max-width:1024px){.mdl-layout__drawer{margin-top:0;height:100%}}.mdl-layout__title,.mdl-layout-title{font-size:16px;line-height:28px;letter-spacing:0.02em}.microsite-name{display:inline-block;font-size:20px;margin-left:8px;margin-right:30px;text-transform:uppercase;-webkit-transform:translateY(3px);transform:translateY(3px)}.mdl-navigation__link{font-size:16px;text-transform:uppercase;text-decoration:none}.mdl-navigation__link:hover{background-color:rgb(211,47,47)}.top-nav-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.top-nav-wrapper label{display:none}.top-nav-wrapper label:hover{background-color:rgb(211,47,47)}@media (max-width:800px){.top-nav-wrapper{display:block;position:absolute;right:0;top:0;width:100%}.top-nav-wrapper label{cursor:pointer;display:block;float:right;line-height:56px;padding:0 16px}.top-nav-wrapper nav{background:rgb(211,47,47);clear:both;display:none;height:auto!important}.top-nav-wrapper nav a{display:block}.top-nav-wrapper .mdl-layout-spacer{display:none}input:checked+.top-nav-wrapper label{background:rgb(211,47,47)}input:checked+.top-nav-wrapper nav{display:block}}.hero-background{background:-webkit-linear-gradient(rgb(211,47,47),rgb(244,67,54));background:linear-gradient(rgb(211,47,47),rgb(244,67,54));color:rgb(255,255,255);margin-bottom:60px}.mdl-grid{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hero-container{padding:56px 0 56px 0!important}@media (max-width:830px){.hero-container{text-align:center}}.logo-container{overflow:hidden;text-align:center}@media (max-width:840px){.tagline{max-width:100%}}.mdl-button{height:45px;line-height:45px;min-width:140px;padding:0 30px}.mdl-button--primary.mdl-button--primary.mdl-button--raised,.mdl-button--primary.mdl-button--primary.mdl-button--fab{background-color:rgb(255,255,255);color:rgb(183,28,28)}.features-list{width:920px;margin:0 0 23px 0;padding:15px;padding-right:200px}@media (max-width:840px){.features-list{padding-right:15px}}.features-list h4{color:#37474F;font-size:28px;font-weight:500;line-height:32px;margin-top:10px;margin:0 0 16px 0;opacity:.87}.features-list p{font-size:16px;line-height:30px;opacity:.87}.button-container{margin-bottom:24px!important;text-align:center}.mdl-button--accent.mdl-button--accent.mdl-button--raised,.mdl-button--accent.mdl-button--accent.mdl-button--fab{background-color:rgb(244,67,54);color:rgb(255,255,255)}.mdl-mega-footer--bottom-section .mdl-cell--9-col{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mdl-mega-footer--bottom-section,.mdl-mega-footer__bottom-section{background-color:#263238;bottom:0;color:white;padding-top:0;right:0}footer ul{font-size:14px;font-weight:400;letter-spacing:0;line-height:24px;list-style:none;padding:0}footer ul a{color:white;font-size:16px;line-height:28px;opacity:.87;padding:0;text-decoration:none}footer ul a:hover{text-decoration:underline}@media (max-width:830px){footer ul{background-color:rgba(0,0,0,0.12);padding:8px;text-align:center}}.mdl-mega-footer--bottom-section{margin-bottom:0}.mdl-mega-footer--bottom-section p{font-size:12px;margin:0;opacity:.54}.mdl-mega-footer--bottom-section a{color:white;font-weight:normal;padding:0;text-decoration:none}.power-text{text-align:right}@media (max-width:830px){.power-text{text-align:center;width:calc(100% - 16px)}}.hero-image{margin-top:-10px;width:200px}.hero-image{width:360px;padding-right:40px}@media (max-width:830px){.hero-image{padding-right:0}}.mdl-base{height:100vh}
body{font-family:"Roboto",Helvetica,sans-serif}h4,h5{font-size:30px;font-weight:400;line-height:40px;margin-bottom:15px;margin-top:15px}h5{font-size:16px;font-weight:300;line-height:28px;margin-bottom:25px;max-width:300px}.mdl-demo section.section--center{max-width:920px}.mdl-grid--no-spacing>.mdl-cell{width:100%}.mdl-layout--fixed-drawer>.mdl-layout__content{margin-left:0}.mdl-layout__header{background-color:#f44336;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.mdl-layout__header a{color:#fff;text-decoration:none}.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header{margin-left:0;width:100%}.mdl-layout--fixed-drawer>.mdl-layout__header .mdl-layout__header-row{padding-left:25px;padding-right:0}.mdl-layout__drawer-button,.top-nav-wrapper label{display:none}@media (max-width:1024px){.mdl-layout__drawer-button{display:inline-block}}.mdl-layout__drawer{margin-top:65px;height:calc(100% - 65px)}@media (max-width:1024px){.mdl-layout__drawer{margin-top:0;height:100%}}.mdl-layout-title,.mdl-layout__title{font-size:16px;line-height:28px;letter-spacing:.02em}.microsite-name{display:inline-block;font-size:20px;margin-left:8px;margin-right:30px;text-transform:uppercase;-webkit-transform:translateY(3px);transform:translateY(3px)}.mdl-navigation__link{font-size:16px;text-transform:uppercase;text-decoration:none}.mdl-navigation__link:hover,.top-nav-wrapper label:hover{background-color:#d32f2f}.top-nav-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (max-width:800px){.top-nav-wrapper{display:block;position:absolute;right:0;top:0;width:100%}.top-nav-wrapper label{cursor:pointer;display:block;float:right;line-height:56px;padding:0 16px}.top-nav-wrapper nav{background:#d32f2f;clear:both;display:none;height:auto!important}.top-nav-wrapper nav a{display:block}.top-nav-wrapper .mdl-layout-spacer{display:none}input:checked+.top-nav-wrapper label{background:#d32f2f}input:checked+.top-nav-wrapper nav{display:block}}.hero-background{background:-webkit-linear-gradient(#d32f2f ,#f44336);background:linear-gradient(#d32f2f ,#f44336);color:#fff;margin-bottom:60px}.mdl-grid,.mdl-mega-footer--bottom-section .mdl-cell--9-col{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hero-container{padding:56px 0!important}@media (max-width:830px){.hero-container{text-align:center}}.logo-container{overflow:hidden;text-align:center}@media (max-width:840px){.tagline{max-width:100%}}.mdl-button{height:45px;line-height:45px;min-width:140px;padding:0 30px}.mdl-button--primary.mdl-button--primary.mdl-button--fab,.mdl-button--primary.mdl-button--primary.mdl-button--raised{background-color:#fff;color:#b71c1c}.features-list{width:920px;margin:0 0 23px;padding:15px 200px 15px 15px}@media (max-width:840px){.features-list{padding-right:15px}}.features-list h4{color:#37474f;font-size:28px;font-weight:500;line-height:32px;margin:0 0 16px;opacity:.87}.features-list p,footer ul a{font-size:16px;line-height:30px;opacity:.87}.button-container{margin-bottom:24px!important;text-align:center}.mdl-button--accent.mdl-button--accent.mdl-button--fab,.mdl-button--accent.mdl-button--accent.mdl-button--raised{background-color:#f44336;color:#fff}.mdl-mega-footer--bottom-section .mdl-cell--9-col{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex}.mdl-mega-footer--bottom-section,.mdl-mega-footer__bottom-section{background-color:#263238;bottom:0;color:#fff;padding-top:0;right:0}footer ul{font-size:14px;font-weight:400;letter-spacing:0;line-height:24px;list-style:none;padding:0}footer ul a{color:#fff;line-height:28px;padding:0;text-decoration:none}footer ul a:hover{text-decoration:underline}@media (max-width:830px){footer ul{background-color:rgba(0,0,0,.12);padding:8px;text-align:center}}.mdl-mega-footer--bottom-section{margin-bottom:0}.mdl-mega-footer--bottom-section p{font-size:12px;margin:0;opacity:.54}.mdl-mega-footer--bottom-section a{color:#fff;font-weight:400;padding:0;text-decoration:none}.power-text{text-align:right}@media (max-width:830px){.power-text{text-align:center;width:calc(100% - 16px)}}.mdl-base{height:100vh}

2
etc/cli.angular.io/theme.css

@ -1 +1 @@
.hero-image{width:360px;padding-right:40px}@media (max-width:830px){.hero-image{padding-right:0}}.mdl-base{height:100vh}
.console{width:360px;max-width:92vw;margin-left:15px;margin-right:40px;text-align:left;border-radius:5px;margin-bottom:10px}@media (max-width:830px){.console{margin-right:auto;margin-left:auto}}.console__head{overflow:hidden;background-color:#d5d5d5;padding:8px 15px;border-top-left-radius:5px;border-top-right-radius:5px}.console__dot{float:left;width:12px;height:12px;border-radius:50%;margin-right:7px;box-shadow:0 1px 1px 0 rgba(0,0,0,.2)}.console__dot--red{background-color:#ff6057}.console__dot--yellow{background-color:#ffc22e}.console__dot--green{background-color:#28ca40}.console__body{background-color:#1e1e1e;padding:30px 17px 20px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.console__prompt{display:block;margin-bottom:15px;font-family:"Source Code Pro",monospace;font-size:15px}.console__prompt::before{content:">";padding-right:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mdl-base{height:100vh}