Added placeholder content to News page

This commit is contained in:
Teresa 2016-01-05 09:45:41 -08:00 committed by Naomi Black
parent 752465c57d
commit 7441f16f85
3 changed files with 107 additions and 2 deletions

View File

@ -1,15 +1,67 @@
.grid-fluid.l-space-bottom-8
.grid-fluid.l-space-bottom-4
.c12.text-center
h3.text-headline.text-uppercase Angular
.c12.text-center
figure
img(src="/resources/images/logos/standard/shield-large.svg" alt="Us" style="width:80px;")
.clear
.grid-fluid
.c6
.article-card
.date December 8, 2015
.title Building Mobile Apps with Angular 2 and NativeScript
p Hi! Im TJ from the NativeScript team at Telerik. Weve been working with the Angular team for the greater part of this year to integrate Angular 2 into NativeScript, which together let you write native iOS and Android apps using your existing web and Angular...
img(src="/resources/images/bios/brad-green.jpg")
.posted Posted <strong>Yesterday</strong> by <a href="#">Brad Green</a>
.c6
.article-card
.date November 30, 2015
.title How Google Uses Angular 2 with Dart
p Google is always busy building new web apps, and recently a lot of that development is using Angular 2 for Dart. Just last week, the Google Fiber team launched Googles first production Angular 2 app, written in Dart. Take a look at their just-launched Angular 2 for Dart app.
.author
img(src="/resources/images/bios/brian-ford.jpg")
.posted Posted <strong>1 week ago</strong> by <a href="#">Brian Ford</a>
.grid-fluid.l-space-bottom-8
.grid-fluid.l-space-top-6
.c12.text-center
h3.text-headline.text-uppercase Angular GDE (Google Developer Expert)
.c12.text-center
figure
img(src="/resources/images/logos/standard/angular-gde-logo@2x.png" alt="Us" style="width:80px;")
.clear
.grid-fluid.l-space-bottom-2.l-space-top-4
.c6
.article-card
.date November 19, 2015
.title VS Code Angular Snippets
p Visual Studio Code Beta is available and it supports extensions! I published my first 2 extensions for creating Angular 1 and 2 snippets. You can grab these from the marketplace or right from VS Code.
.author
img(src="/resources/images/bios/john-papa.jpg")
.posted Posted <strong>3 weeks ago</strong> by <a href="#">John Papa</a>
.c6
.article-card
.date April 4, 2015
.title Angular 2 singleton service
p Angular 2 is out and everybody is creating some tutorials about how to start playing with it and I must say this... its terribly funny!
.author
img(src="/resources/images/bios/patrick-stapleton.jpg")
.posted Posted <strong>8 months ago</strong> by <a href="#">Patrick Stapleton</a>
.grid-fluid.l-space-bottom-4
.c6
.article-card
.date October 25, 2015
.title Integrating Web Components with AngularJS
p Just a few days ago I had the honour to give a talk together with the awesome Carmen at the first european AngularJS conference ngEurope.
.author
img(src="/resources/images/bios/pascalprecht.jpg")
.posted Posted <strong>14 months ago</strong> by <a href="#">Pascal Precht</a>
.c6
.article-card
.date November 19, 2015
.title VS Code Angular Snippets
p Visual Studio Code Beta is available and it supports extensions! I published my first 2 extensions for creating Angular 1 and 2 snippets. You can grab these from the marketplace or right from VS Code.
.author
img(src="/resources/images/bios/john-papa.jpg")
.posted Posted <strong>3 weeks ago</strong> by <a href="#">John Papa</a>

View File

@ -47,6 +47,7 @@
@import 'module/cheatsheet';
@import 'module/filetree';
@import 'module/support';
@import 'module/article-card';
/*

View File

@ -0,0 +1,52 @@
.article-card {
margin: 0px 0px ($unit * 4) 0px;
padding: ($unit * 2);
background: lighten($mist, 3%);
border-radius: ($unit / 2);
min-height: 330px;
position: relative;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
padding: ($unit * 2) ($unit * 1);
}
a {
text-decoration: none;
}
strong {
color: darken($darkgrey, 5%);
font-weight: 400;
}
&:last-child {
margin: 0;
}
.date {
text-transform: uppercase;
margin-bottom: $unit;
}
.title {
font-size: 20px;
color: $regal;
}
p, .date {
font-size: 16px;
color: darken($darkgrey, 5%);
}
.posted {
color: $bismark;
font-size: 16px;
display: inline;
padding-left: 10px;
}
img {
width: 40px;
height: 40px;
border-radius: 50% 50%;
display: inline;
vertical-align: middle;
}
.author {
position: absolute;
bottom: 20px;
}
}