Skip to content

Commit 3898182

Browse files
sjtrimblesjtrimble
committed
CLI app redesign
1 parent 8a34a85 commit 3898182

File tree

3 files changed

+532
-17
lines changed

3 files changed

+532
-17
lines changed

‎packages/schematics/angular/application/files/src/favicon.ico.template

-4.38 KB
Binary file not shown.

‎packages/schematics/angular/application/files/src/index.html.template

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,311 @@
77

88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
<link
11+
href="https://fonts.googleapis.com/css?family=Roboto"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
href="https://fonts.googleapis.com/css?family=Roboto+Mono"
16+
rel="stylesheet"
17+
/>
18+
<link
19+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
20+
rel="stylesheet"
21+
/>
22+
23+
<style>
24+
body {
25+
font-family: "Roboto", Arial, sans-serif;
26+
font-size: 14px;
27+
color: #333;
28+
box-sizing: border-box;
29+
-webkit-font-smoothing: antialiased;
30+
-moz-osx-font-smoothing: grayscale;
31+
}
32+
33+
body,
34+
body * {
35+
margin: 0;
36+
padding: 0;
37+
}
38+
39+
h1,
40+
h2,
41+
h3,
42+
h4,
43+
h5,
44+
h6 {
45+
margin: 8px 0;
46+
}
47+
48+
hr {
49+
border: 0;
50+
height: 1px;
51+
width: 80%;
52+
background-color: #eee;
53+
margin: 16px 0;
54+
}
55+
56+
.toolbar {
57+
height: 60px;
58+
display: flex;
59+
align-items: center;
60+
background-color: #1976d2;
61+
color: white;
62+
font-weight: 600;
63+
}
64+
65+
.toolbar img {
66+
margin: 0 16px;
67+
}
68+
69+
.content {
70+
display: flex;
71+
margin: 32px auto;
72+
padding: 0 16px;
73+
max-width: 960px;
74+
flex-direction: column;
75+
align-items: center;
76+
}
77+
78+
svg.material-icons {
79+
height: 24px;
80+
width: auto;
81+
}
82+
83+
svg.material-icons:not(:last-child) {
84+
margin-right: 8px;
85+
}
86+
87+
.content .card svg.material-icons path {
88+
fill: #888;
89+
}
90+
91+
.card-container {
92+
display: flex;
93+
flex-wrap: wrap;
94+
justify-content: center;
95+
margin-top: 16px;
96+
}
97+
98+
.card {
99+
border-radius: 4px;
100+
border: 1px solid #eee;
101+
background-color: #fafafa;
102+
height: 40px;
103+
width: 200px;
104+
margin: 0 8px 16px;
105+
padding: 16px;
106+
display: flex;
107+
flex-direction: row;
108+
justify-content: center;
109+
align-items: center;
110+
transition: all 0.2s ease-in-out;
111+
line-height: 24px;
112+
}
113+
114+
.card-container .card:not(:last-child) {
115+
margin-right: 0;
116+
}
117+
118+
.card.card-small {
119+
height: 16px;
120+
width: 160px;
121+
}
122+
123+
.card-container .card:not(.highlight-card) {
124+
cursor: pointer;
125+
}
126+
127+
.card-container .card:not(.highlight-card):hover {
128+
transform: translateY(-3px);
129+
box-shadow: 0 4px 17px rgba(black, 0.35);
130+
}
131+
132+
.card-container .card:not(.highlight-card):hover .material-icons path {
133+
fill: rgb(105, 103, 103);
134+
}
135+
136+
.card.highlight-card {
137+
background-color: #1976d2;
138+
color: white;
139+
font-weight: 600;
140+
border: none;
141+
width: auto;
142+
min-width: 30%;
143+
position: relative;
144+
}
145+
146+
.card.highlight-card svg#rocket {
147+
width: 80px;
148+
position: absolute;
149+
left: -60px;
150+
top: -24px;
151+
}
152+
153+
.card.highlight-card svg#rocket-smoke {
154+
height: 100vh;
155+
position: absolute;
156+
top: 10px;
157+
right: 230px;
158+
z-index: -10;
159+
}
160+
161+
a,
162+
a:visited,
163+
a:hover {
164+
color: #1976d2;
165+
text-decoration: none;
166+
}
167+
168+
a:hover {
169+
color: #125699;
170+
}
171+
172+
.terminal {
173+
position: relative;
174+
width: 80%;
175+
max-width: 600px;
176+
border-radius: 6px;
177+
padding-top: 45px;
178+
margin: 8px;
179+
overflow: hidden;
180+
background-color: rgb(15, 15, 16);
181+
}
182+
183+
.terminal::before {
184+
content: "\2022 \2022 \2022";
185+
position: absolute;
186+
top: 0;
187+
left: 0;
188+
height: 4px;
189+
background: rgb(58, 58, 58);
190+
color: #c2c3c4;
191+
width: 100%;
192+
font-size: 2.5rem;
193+
margin: 0;
194+
line-height: 0;
195+
padding: 14px 0;
196+
text-indent: 4px;
197+
letter-spacing: -3px;
198+
}
199+
200+
.terminal pre {
201+
font-family: "Roboto Mono", monospace;
202+
color: white;
203+
padding: 0 1rem 1rem;
204+
}
205+
206+
.circle-link {
207+
height: 40px;
208+
width: 40px;
209+
border-radius: 40px;
210+
margin: 8px;
211+
background-color: white;
212+
border: 1px solid #eeeeee;
213+
display: flex;
214+
justify-content: center;
215+
align-items: center;
216+
cursor: pointer;
217+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
218+
transition: 1s ease-out;
219+
}
220+
221+
.circle-link:hover {
222+
transform: translateY(-0.25rem);
223+
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
224+
}
225+
226+
footer {
227+
margin-top: 24px;
228+
display: flex;
229+
align-items: center;
230+
line-height: 20px;
231+
}
232+
233+
footer a {
234+
display: flex;
235+
align-items: center;
236+
}
237+
238+
footer .github-star-badge {
239+
color: #24292e;
240+
display: flex;
241+
align-items: center;
242+
font-size: 12px;
243+
padding: 3px 10px;
244+
border: 1px solid rgba(27,31,35,.2);
245+
border-radius: 3px;
246+
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
247+
margin-left: 4px;
248+
font-weight: 600;
249+
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
250+
}
251+
252+
footer .github-star-badge:hover {
253+
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
254+
border-color: rgba(27,31,35,.35);
255+
background-position: -.5em;
256+
}
257+
258+
footer .github-star-badge .material-icons {
259+
height: 16px;
260+
width: 16px;
261+
margin-right: 4px;
262+
}
263+
264+
svg#clouds {
265+
position: fixed;
266+
bottom: -160px;
267+
left: -230px;
268+
z-index: -10;
269+
width: 1920px;
270+
}
271+
272+
273+
/* Responsive Styles */
274+
@media screen and (max-width: 767px) {
275+
hr {
276+
width: 100%;
277+
margin: 16px 0;
278+
}
279+
280+
.card:not(.highlight-card) {
281+
width: 100%;
282+
height: 16px;
283+
margin: 8px 0;
284+
}
285+
286+
.card-container .card.card-small:not(.highlight-card) {
287+
width: 100%;
288+
}
289+
290+
.card.highlight-card span {
291+
margin-left: 72px;
292+
}
293+
294+
svg#rocket {
295+
left: 10px;
296+
}
297+
298+
svg#rocket-smoke {
299+
right: 250px;
300+
transform: rotate(-5deg);
301+
}
302+
303+
.terminal {
304+
width: 100%;
305+
}
306+
}
307+
308+
@media screen and (max-width: 575px) {
309+
svg#rocket-smoke {
310+
display: none;
311+
visibility: hidden;
312+
}
313+
}
314+
</style>
10315
</head>
11316
<body>
12317
<<%= prefix %>-root></<%= prefix %>-root>

0 commit comments

Comments
 (0)