// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var starter = angular.module('starter', ['ionic'])
starter.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
starter.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab' : {
templateUrl: 'home.html'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab' : {
templateUrl: 'list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:id',
views: {
'list-tab' : {
templateUrl: 'detail.html',
controller: 'DetailController',
resolve: {
id: function($http, $stateParams){
$http.get('js/data.json').success(function(data) {
return $stateParams.id;
});
}
}
}
}
});
$urlRouterProvider.otherwise('/tab/home');
});
starter.controller('DetailController', function($scope, id){
$scope.id=id;
});
starter.controller('ListController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) {
$scope.posts = [];
var startingPoint = 0;
var limit = 1;
$scope.load=function(startingPoint, limit){
$http.get('data.json').success(function(data) {
for(var i = startingPoint; i<=limit; i+=1){
$scope.posts.push(data.posts[i]);
$scope.id=$stateParams.id;
}
})
.finally(function(){
$scope.$broadcast('scroll.refreshComplete');
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.get_more = function(){
$scope.load(startingPoint, limit);
limit+=2;
startingPoint+=2;
};
$scope.noMore = function(){
return ($scope.posts.length > 50) ? false : true;
};
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
<ion-header-bar class="bar-positive">
<h2 class="title"></h2>
</ion-header-bar>
<ion-view view-title='Full article'>
<ion-content>
<ion-list class="list-inset">
<ion-item class="item-text-wrap" ng-repeat="post in posts | filter: { id:id }:true">
<div class='textWrap'>
<h2 class="articleAuth">{{ post.title }}</h2>
<div>
<p class="articleDate">By {{post.author}} on {{ post.date }} about <span class="category">{{ post.category }}</span></p>
</div>
</div>
<img class='imagePhoto' ng-src="{{post.photo}}" alt=''/>
<p class="textWrap">{{ post.description }}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
{
"posts": [
{ "id":"1",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"2",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"3",
"category":"TECH",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"4",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"5",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"6",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"7",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"8",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"9",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"10",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"11",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"12",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"13",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"14",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"15",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"16",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"17",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"18",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"19",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"20",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"21",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
},{
"id":"22",
"category":"LIFE",
"title":"Lorem Ipsum is simply dummy text",
"author": "StoyanGenchev",
"date": "November 05, 1955",
"photo": "http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}
]
}
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home"
href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Feed" icon="ion-navicon-round"
href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-view view-title="Newest posts">
<div class="bar bar-subheader
item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search for post">
</label>
</div>
<ion-content class="has-subheader">
<ion-refresher on-refresh="load()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat='post in posts track by post.id | filter: query ' class='item-thumbnail-left item-text-wrap' href="#/tab/list/{{post.id}}">
<img ng-src='{{post.photo}}' />
<div>
<p class='shortText titleArticle'>
{{post.title | limitTo: 33}}
{{ post.title.length > 33 ? '…' : '' }}
</p>
<img class='articleAuthImg' src="http://cliparts.co/cliparts/kT8/oja/kT8oja7xc.png" alt="StoyanGenchev-author" />
</div>
<div class='articleInfo'>
<h2>{{post.author}}</h2>
<h4>{{post.date}}</h4>
<h4 class="category">{{post.category}}</h4>
</div>
<div class="clear"></div>
<p class='shortText'>
{{post.description | limitTo: 200}}
{{ post.description.length > 200 ? '…' : '' }}
</p>
</ion-item>
</ion-list>
<ion-infinite-scroll
ng-if="noMore()"
on-infinite="get_more()"
distance="15%"
>
</ion-infinite-scroll>
</ion-content>
</ion-view>
<ion-view hide-nav-bar="true">
<ion-content class="splash padding">
<div class="branding">
<h3>I haven't been everywhere, but it's on my list!</h3>
</div>
</ion-content>
</ion-view>
/* Empty. Add your own CSS if you like */
body {
cursor: url('http://ionicframework.com/img/finger.png');
}
.star>.item-content {
background-color: #EEE8D6 !important;
}
.clear{
clear: both;
width: 0px;
height: 0px;
font-weight: normal;
}
.splash {
background: url(../img/skyline.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.branding {
width: 50%;
max-width: 300px;
margin: 0 auto;
margin-top: 70px;
text-align: center;
}
.tagline {
font-size: 1.4rem;
}
.item-divider {
background-color: #EEE8D6;
}
.bar-positive, .tabs-positive>.tabs {
background-color: #417D9A !important;
border-color: #417D9A;
}
.item-thumbnail-left img {
border-radius: 10px;
}
.branding h3 {
font-weight: bold;
font: bold 1.7rem "Century Schoolbook", Georgia, Times, serif;
color: #333;
line-height: 90%;
margin: .2em 0 .4em 0;
letter-spacing: 0px;
}
.dayhighlight {
background-color: #9EC6DE;
border-top: 20px solid #417D9A;
}
.dayhighlight h2 {
color: #417D9A;
font-size: 2rem;
font-weight: 200;
}
div.articleHolder{
max-width:700px;
margin:0px auto;
}
img.imagePhoto{
margin-top:10px;
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
width:700px;
max-width:100%;
padding-bottom:10px;
}
.textWrap{
display:block;
margin-left:auto;
margin-right:auto;
width:700px;
padding-bottom:10px;
max-width:100%;
}
h2.articleAuth{
font-size:30px;
padding-top:10px;
font-family:"FreightTextProMedium-Regular", Georgia, Cambria, "Times New Roman", Times, serif;
color:#222;
}
.articleInfo{
margin-left:10px;
float:left;
}
.articleAuthImg{
max-width:35px;
max-height:35px;
border-radius:50%;
float:left;
}
.shortText{
margin-top:7px;
}
p.titleArticle{
font-size:20px;
margin-top:-2px;
margin-bottom:10px;
font-family:"FreightTextProMedium-Regular", Georgia, Cambria, "Times New Roman", Times, serif;
color:#222;
}
.category{
color:#FF4136;
}
@media screen and (max-width: 320px) {
.articleAuthImg{
max-width:27px;
max-height:27px;
}
.articleInfo h2, .articleInfo h4{
font-size:12px;
}
}