|
1 | 1 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
2 | 2 | <!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
3 | 3 | <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
4 |
| -<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * --> |
| 4 | +<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * --> |
5 | 5 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
6 |
| -<!-- * * * * * * * * * Delete the template below * * * * * * * * * * --> |
7 |
| -<!-- * * * * * * * to get started with your project! * * * * * * * * --> |
| 6 | +<!-- * * * * * * * * * Delete the template below * * * * * * * * * --> |
| 7 | +<!-- * * * * * * * to get started with your project! * * * * * * * --> |
8 | 8 | <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
9 | 9 |
|
10 | 10 | <style>
|
|
44 | 44 | -moz-osx-font-smoothing: grayscale;
|
45 | 45 | }
|
46 | 46 |
|
47 |
| - h1, |
48 |
| - h2, |
49 |
| - h3, |
50 |
| - h4, |
51 |
| - h5, |
52 |
| - h6 { |
| 47 | + h1 { |
| 48 | + font-size: 3.125rem; |
53 | 49 | color: var(--gray-900);
|
54 | 50 | font-weight: 500;
|
55 | 51 | line-height: 100%;
|
56 | 52 | letter-spacing: -0.125rem;
|
57 | 53 | margin: 0;
|
58 |
| - font-family: "Inter Tight"; |
59 |
| - } |
60 |
| - |
61 |
| - h1 { |
62 |
| - font-size: 3.125rem; |
| 54 | + font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
| 55 | + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", |
| 56 | + "Segoe UI Symbol"; |
63 | 57 | }
|
64 | 58 |
|
65 | 59 | p {
|
|
142 | 136 | .pill-group .pill:nth-child(6n + 2) {
|
143 | 137 | --pill-accent: var(--french-violet);
|
144 | 138 | }
|
145 |
| - .pill-group .pill:nth-child(6n + 3), |
| 139 | + .pill-group .pill:nth-child(6n + 3), |
146 | 140 | .pill-group .pill:nth-child(6n + 4),
|
147 | 141 | .pill-group .pill:nth-child(6n + 5) {
|
148 | 142 | --pill-accent: var(--hot-red);
|
149 | 143 | }
|
150 | 144 |
|
151 |
| - .open-in-new-icon { |
| 145 | + .pill-group svg { |
152 | 146 | margin-inline-start: 0.25rem;
|
153 |
| - font-size: 1rem; |
154 | 147 | }
|
155 | 148 |
|
156 | 149 | .social-links {
|
|
234 | 227 | </svg>
|
235 | 228 | <h1>Hello, {{ title }}</h1>
|
236 | 229 | <p>Congratulations! Your app is running. 🎉</p>
|
237 |
| - </div> |
| 230 | + </div> |
238 | 231 | <div class="divider" role="separator" aria-label="Divider"></div>
|
239 | 232 | <div class="right-side">
|
240 | 233 | <div class="pill-group">
|
241 |
| - <a |
242 |
| - class="pill" |
243 |
| - href="http://angular.dev" |
244 |
| - target="_blank" |
245 |
| - rel="noopener" |
246 |
| - > |
247 |
| - <span> Explore the Docs </span> |
248 |
| - <i class="material-icons-outlined open-in-new-icon" aria-hidden="true" |
249 |
| - >open_in_new</i |
| 234 | + @for (item of [ |
| 235 | + { title: 'Explore the Docs', link: 'https://angular.dev' }, |
| 236 | + { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, |
| 237 | + { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, |
| 238 | + { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, |
| 239 | + { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, |
| 240 | + ]; track item.title) { |
| 241 | + <a |
| 242 | + class="pill" |
| 243 | + href="{{ item.link }}" |
| 244 | + target="_blank" |
| 245 | + rel="noopener" |
250 | 246 | >
|
251 |
| - </a> |
252 |
| - <a |
253 |
| - class="pill" |
254 |
| - href="http://angular.dev/tutorials" |
255 |
| - target="_blank" |
256 |
| - rel="noopener" |
257 |
| - > |
258 |
| - <span> Learn with Tutorials </span> |
259 |
| - <i class="material-icons-outlined open-in-new-icon" aria-hidden="true" |
260 |
| - >open_in_new</i |
261 |
| - > |
262 |
| - </a> |
263 |
| - <a |
264 |
| - class="pill" |
265 |
| - href="http://angular.dev/tools/cli" |
266 |
| - target="_blank" |
267 |
| - rel="noopener" |
268 |
| - > |
269 |
| - <span> CLI Docs </span> |
270 |
| - <i class="material-icons-outlined open-in-new-icon" aria-hidden="true" |
271 |
| - >open_in_new</i |
272 |
| - > |
273 |
| - </a> |
274 |
| - <a |
275 |
| - class="pill" |
276 |
| - href="http://angular.dev/tools/language-service" |
277 |
| - target="_blank" |
278 |
| - rel="noopener" |
279 |
| - > |
280 |
| - <span> Angular Language Service </span> |
281 |
| - <i class="material-icons-outlined open-in-new-icon" aria-hidden="true" |
282 |
| - >open_in_new</i |
283 |
| - > |
284 |
| - </a> |
285 |
| - <a |
286 |
| - class="pill" |
287 |
| - href="http://angular.dev/tools/dev-tools" |
288 |
| - target="_blank" |
289 |
| - rel="noopener" |
290 |
| - > |
291 |
| - <span> Angular DevTools </span> |
292 |
| - <i class="material-icons-outlined open-in-new-icon" aria-hidden="true" |
293 |
| - >open_in_new</i |
294 |
| - > |
295 |
| - </a> |
| 247 | + <span>{{ item.title }}</span> |
| 248 | + <svg |
| 249 | + xmlns="http://www.w3.org/2000/svg" |
| 250 | + height="14" |
| 251 | + viewBox="0 -960 960 960" |
| 252 | + width="14" |
| 253 | + fill="currentColor" |
| 254 | + > |
| 255 | + <path |
| 256 | + d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" |
| 257 | + /> |
| 258 | + </svg> |
| 259 | + </a> |
| 260 | + } |
296 | 261 | </div>
|
297 | 262 | <div class="social-links">
|
298 | 263 | <a
|
@@ -359,12 +324,13 @@ <h1>Hello, {{ title }}</h1>
|
359 | 324 | </div>
|
360 | 325 | </main>
|
361 | 326 |
|
362 |
| -<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
363 |
| -<!-- * * * * * * * * * * * The content above * * * * * * * * * * * --> |
364 |
| -<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * --> |
365 |
| -<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * --> |
366 |
| -<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
367 |
| -<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * --> |
368 |
| -<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
| 327 | +<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
| 328 | +<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * --> |
| 329 | +<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * --> |
| 330 | +<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * --> |
| 331 | +<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
| 332 | +<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * --> |
| 333 | +<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * --> |
| 334 | + |
369 | 335 |
|
370 | 336 | <router-outlet></router-outlet>
|
0 commit comments