diff --git a/public/news.jade b/public/news.jade index f4821c2dc5..a9aa634935 100644 --- a/public/news.jade +++ b/public/news.jade @@ -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! I’m TJ from the NativeScript team at Telerik. We’ve 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 Yesterday by Brad Green + .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 Google’s 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 1 week ago by Brian Ford -.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 3 weeks ago by John Papa + .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... it’s terribly funny! + .author + img(src="/resources/images/bios/patrick-stapleton.jpg") + .posted Posted 8 months ago by Patrick Stapleton + .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 14 months ago by Pascal Precht + .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 3 weeks ago by John Papa diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index dd33691710..f79ec2fc3a 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -47,6 +47,7 @@ @import 'module/cheatsheet'; @import 'module/filetree'; @import 'module/support'; +@import 'module/article-card'; /* diff --git a/public/resources/css/module/_article-card.scss b/public/resources/css/module/_article-card.scss new file mode 100644 index 0000000000..dcc3e5e340 --- /dev/null +++ b/public/resources/css/module/_article-card.scss @@ -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; + } +}