Skip to content

Commit a7e274d

Browse files
sjtrimblefilipesilva
sjtrimble
authored and
filipesilva
committed
feat(@schematics/angular): cli app redesign
1 parent c81adbd commit a7e274d

File tree

8 files changed

+549
-28
lines changed

8 files changed

+549
-28
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: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,315 @@
77

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

0 commit comments

Comments
 (0)