Browse Source

Blog review

pull/441/head
Armağan Ünlü 8 years ago
parent
commit
2be4ef7812
  1. 43398
      modules/blogging/app/Volo.BloggingTestApp/Logs/logs.txt
  2. 412
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Detail.cshtml
  3. 295
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Index.cshtml
  4. 9
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/new.css.map
  5. 3
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/new.min.css
  6. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Scripts/blog.js
  7. 169
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_bootstrap-overwrite.scss
  8. 40
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_header.scss
  9. 140
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.css
  10. 1
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.min.css
  11. 88
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.scss
  12. 30
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_post.scss
  13. 289
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css
  14. 24
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css.map
  15. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.min.css
  16. 18
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.scss
  17. 4
      modules/blogging/src/Volo.Blogging.Web/compilerconfig.json

43398
modules/blogging/app/Volo.BloggingTestApp/Logs/logs.txt

File diff suppressed because it is too large

412
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Detail.cshtml

@ -19,243 +19,269 @@
<abp-style src="/Pages/Blog/Shared/Styles/blog.css" />
</abp-style-bundle>
}
<div class="vs-blog">
<div class="row mb-5">
<div class="col-md-12 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="img-container" style="min-height: 480px; background: url(@Model.Post.CoverImage) center center no-repeat; background-size: cover; ">
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h1>
<a href="#">@Model.Post.Title</a>
<div class="vs-blog">
<div class="vs-blog-header">
<div class="vs-blog-title">
<div class="row">
<div class="col">
<h1 class="my-0 display-inline-block">
@L["Volosoft"]
<small class="text-muted">
BLOG
</small>
</h1>
</div>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a href="#">
<img src="https://placeimg.com/60/60/people" class="article-avatar">
</a>
<a href="#">
<strong> Halil İbrahim Kalkan</strong>, @ConvertDatetimeToTimeAgo(Model.Post.CreationTime)
</a>
<span class="seperator">|</span>
<a href="#">
<i class="fa fa-eye"></i> @Model.Post.ReadCount @L["Read"]
</a>
<span class="seperator">|</span>
<a href="#">
<i class="fa fa-comment"></i> @Model.CommentCount @L["Comment"]
</a>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Update))
{
<span class="seperator">|</span>
<a asp-page="./Edit" asp-route-postId="@Model.Post.Id" asp-route-blogShortName="@Model.BlogShortName">
<i class="fa fa-pencil"></i> @L["Edit"]
</a>
}
</div>
</div>
</div>
<div class="user-link-icons">
<a class="add-bookmark" href="#">
<i class="fa fa-bookmark"></i>
<div class="col-sm-4 text-right">
<br />
<a href="#">
<i class="fa fa fa-angle-left"></i> Blog
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-github"></i>
</a>
<a class="share-article" href="#">
<i class="fa fa-share-alt"></i>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-stack-overflow"></i>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="img-container" style="min-height: 480px; background: url(@Model.Post.CoverImage) center center no-repeat; background-size: cover; ">
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h1>
<a href="#">@Model.Post.Title</a>
</h1>
</div>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a href="#">
<img src="https://placeimg.com/60/60/people" class="article-avatar">
</a>
<a href="#">
<strong> Halil İbrahim Kalkan</strong>, @ConvertDatetimeToTimeAgo(Model.Post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-eye"></i> @Model.Post.ReadCount @L["Read"]
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-comment"></i> @Model.CommentCount @L["Comment"]
</a>
<div class="row">
<div class="col-md-8 mx-auto">
<section class="post-content">
<p>@Html.Raw(Model.FormattedContent)</p>
</section>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Update))
{
<span class="seperator">|</span>
<a asp-page="./Edit" asp-route-postId="@Model.Post.Id" asp-route-blogShortName="@Model.BlogShortName">
<i class="fa fa-pencil"></i> @L["Edit"]
</a>
}
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<div class="tags">
<h5>@L["TagsInThisArticle"]</h5>
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
<div class="row">
<div class="col-md-8 mx-auto">
<section class="post-content">
<p>@Html.Raw(Model.FormattedContent)</p>
</section>
</div>
<div class="comment-form mt-4">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">@L["LeaveComment"]</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<div class="tags">
<h5>@L["TagsInThisArticle"]</h5>
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</div>
<div class="comment-form mt-4">
<div class="vs-blog-title mb-0">
<h3>@L["LeaveComment"]</h3>
</div>
<div class="clearfix bg-light p-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
</div>
<div class="comment-area">
<div class="comment-area">
@foreach (var commentWithRepliesDto in Model.CommentsWithReplies)
{
<div class="media">
<img class="d-flex mr-3 rounded-circle comment-avatar" src="https://placeimg.com/120/120/people" alt="">
<div class="media-body">
<h5 class="comment-owner">
Armağan Ünlü
<span class="float-right">@ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.Text
</p>
<div class="comment-buttons">
@foreach (var commentWithRepliesDto in Model.CommentsWithReplies)
{
<div class="media">
<img class="d-flex mr-3 rounded-circle comment-avatar" src="https://placeimg.com/120/120/people" alt="">
<div class="media-body">
<h5 class="comment-owner">
Armağan Ünlü
<span class="float-right">@ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.Text
</p>
<div class="comment-buttons font-75 bg-light">
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete))
{
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete))
{
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">@L["ReplyTo"] Armağan Ünlü</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Comment"].Value" />
</form>
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">@L["ReplyTo"] Armağan Ünlü</h3>
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden/>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value"/>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Comment"].Value" />
</form>
</div>
</div>
</div>
}
@foreach (var reply in commentWithRepliesDto.Replies)
{
<div class="media">
<img class="d-flex mr-3 rounded-circle answer-avatar" src="https://placeimg.com/120/120/people?t=1535457179534" alt="">
<div class="media-body">
<h5 class="comment-owner">
Zlatan Ibrahimovic
<span class="float-right">@ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons">
<a href="#" class="tag" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix bg-light p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag" data-deleteid="@reply.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
@foreach (var reply in commentWithRepliesDto.Replies)
{
<div class="media">
<img class="d-flex mr-3 rounded-circle answer-avatar" src="https://placeimg.com/120/120/people?t=1535457179534" alt="">
<div class="media-body">
<h5 class="comment-owner">
Zlatan Ibrahimovic
<span class="float-right">@ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons font-75 bg-light">
<a href="#" class="tag" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag" data-updateid="@reply.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag" data-deleteid="@reply.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">@L["ReplyTo"] Armağan Ünlü</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag" data-updateid="@reply.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">@L["ReplyTo"] Armağan Ünlü</h3>
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden/>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value"/>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix bg-light p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
}
</div>
</div>
</div>
}
}
</div>
</div>
</div>
</div>
</div>

295
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Index.cshtml

@ -24,72 +24,96 @@
}
<div class="vs-blog">
<div class="container hero-container pb-5 bg-white">
<div class="vs-blog-header">
<div class="vs-blog-title">
<div class="row">
<div class="col">
<h1 class="my-0 display-inline-block">
@L["Volosoft"]
<small class="text-muted">
BLOG
</small>
</h1>
</div>
<div class="col-sm-4 text-right">
<br />
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Create))
{
<a asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">@L["CreateANewPost"]</a>
}
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-github"></i>
</a>
<span class="vs-seperator">|</span>
<a href="#">
<i class="fa fa-stack-overflow"></i>
</a>
</div>
</div>
</div>
</div>
<div class="pb-3">
<div class="row">
<div class="col-md-8">
<section class="hero-section">
<div class="owl-carousel owl-theme">
@for (var index = 0; index < Model.Posts.Count && index < 1; index++)
{
var post = Model.Posts[index];
<div class="hero-articles">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="hero-article-img">
</a>
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h2>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h2>
<p class="article-sum">
@(post.Content == null ? "" : (post.Content.Length > 150 ? post.Content.Substring(0, 150) + "..." : post.Content))
</p>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-primary btn-rounded">@L["ContinueReading"]</a>
@for (var index = 0; index < Model.Posts.Count && index < 3; index++)
{
var post = Model.Posts[index];
<div class="item">
<div class="hero-articles">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="hero-article-img">
</div>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a>
<img src="https://placeimg.com/120/120/people" class="article-avatar">
</a>
<a>
<strong>Armağan Ünlü</strong>, @ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-eye"></i> @post.ReadCount @L["Read"]
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-comment"></i> @post.CommentCount @L["Comment"]
</a>
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h2>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h2>
<p class="article-sum">
@(post.Content == null ? "" : (post.Content.Length > 150 ? post.Content.Substring(0, 150) + "..." : post.Content))
</p>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-primary btn-rounded">@L["ContinueReading"]</a>
</div>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a>
<img src="https://placeimg.com/120/120/people" class="article-avatar">
</a>
<a>
<strong>Armağan Ünlü</strong>, @ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="seperator">|</span>
<a>
<i class="fa fa-eye"></i> @post.ReadCount @L["Read"]
</a>
<span class="seperator">|</span>
<a>
<i class="fa fa-comment"></i> @post.CommentCount @L["Comment"]
</a>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
}
</section>
</div>
<div class="col-md-4">
<h2>@L["WhatIsNew"]</h2>
<div class="list-group">
@for (var index = 0; index < Model.Posts.Count && index < 3; index++)
{
var post = Model.Posts[index];
@ -104,7 +128,7 @@
</div>
</div>
<div class="col-8 pl-0">
<h3>
<h3 class="font-125">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<div class="article-owner">
@ -122,116 +146,95 @@
</div>
}
</div>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Create))
{
<a asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">@L["CreateANewPost"]</a>
}
</div>
</div>
</div>
<div class="container last-post-section pb-5">
<div class="pb-5">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col">
<div class="titline">
<h2>@L["LastPosts"]</h2>
</div>
</div>
<div class="col-md-8 box-articles">
<div class="vs-blog-title">
<h2>@L["LastPosts"]</h2>
</div>
<div class="list-group">
@for (var index = 3; index < Model.Posts.Count; index++)
{
var post = Model.Posts[index];
var oddPost = index % 2 == 1;
@for (var index = 3; index < Model.Posts.Count; index++)
{
var post = Model.Posts[index];
var oddPost = index % 2 == 1;
<section class="box-articles">
<div class="row @(oddPost?"align-middle":"")">
<div class="col-md-4 order-md-@(oddPost?"last":"first")">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
<div class="list-group-item">
<div class="row @(oddPost?"align-middle":"")">
<div class="col-md-4 order-md-@(oddPost?"last":"first")">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
</div>
</div>
</div>
<div class="col-md-8 order-md-@(oddPost?"first":"last")">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h3>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<p>
@(post.Content == null ? "" : (post.Content.Length > 250 ? post.Content.Substring(0, 150) : post.Content))...
</p>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a href="#">
<img src="https://placeimg.com/120/120/pople" class="article-avatar">
</a>
<a>
<strong>Armağan Ünlü</strong>, @ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="seperator">|</span>
<a>
<i class="fa fa-eye"></i> @post.ReadCount
</a>
<span class="seperator">|</span>
<a>
<i class="fa fa-comment"></i> @post.CommentCount
</a>
<div class="col order-md-@(oddPost?"first":"last")">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h3>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<p>
@(post.Content == null ? "" : (post.Content.Length > 250 ? post.Content.Substring(0, 150) : post.Content))...
</p>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a href="#">
<img src="https://placeimg.com/120/120/pople" class="article-avatar">
</a>
<a>
<strong>Armağan Ünlü</strong>, @ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-eye"></i> @post.ReadCount
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-comment"></i> @post.CommentCount
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
}
</div>
</div>
<div class="col-md-4">
<div class="pb-5 sidebox" id="sidebar">
<div class="titline">
<h2>@L["PopularTags"]</h2>
</div>
<div class="sideboxes">
<div class="popular-tags">
@foreach (var popularTag in Model.PopularTags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <span>(@popularTag.UsageCount @L["Posts"])</span></a>
}
<div class="vs-blog-title">
<h2>@L["PopularTags"]</h2>
</div>
<div class="list-group small-list popular-tags">
@foreach (var popularTag in Model.PopularTags)
{
<div class="list-group-item">
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <span>(@popularTag.UsageCount @L["Posts"])</span></a>
</div>
</div>
<hr>
<footer>
<a href="#">About</a>
<span class="seperator">|</span>
<a href="#">Privacy Policy</a>
<span class="seperator">|</span>
<a href="#">Terms</a>
<p>
Copyright Volosoft - Blog
</p>
</footer>
}
</div>
<div class="vs-footer">
<a href="#">About</a>
<span class="vs-seperator">|</span>
<a href="#">Privacy Policy</a>
<span class="vs-seperator">|</span>
<a href="#">Terms</a>
<p>
&copy; Copyright Volosoft 2018 - Blog
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

9
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/new.css.map

@ -0,0 +1,9 @@
{
"version": 3,
"file": "new.css",
"sources": [
"new.scss"
],
"mappings": "AAAA,AACI,sBADkB,CAClB,gBAAgB,AAAC,CACb,gBAAgB,CAAE,OAAQ,CAC1B,UAAU,CAAE,MAAO,CAKtB,AARL,AAKQ,sBALc,CAClB,gBAAgB,CAIZ,kBAAkB,AAAC,CACf,UAAU,CAAE,IAAK,CACpB,AAPT,AAUI,sBAVkB,CAUlB,KAAK,AAAC,CACF,gBAAgB,CAAE,OAAQ,CAC7B,AAZL,AAcI,sBAdkB,CAclB,cAAc,AAAC,CACX,UAAU,CAAE,MAAO,CACtB",
"names": []
}

3
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/new.min.css

@ -0,0 +1,3 @@
#qa-new-post-container .new-post-editor{background-color:#F9F9F9;min-height:19.5em}#qa-new-post-container .new-post-editor .CodeMirror-scroll{min-height:20em}#qa-new-post-container .card{background-color:#f6f8fa}#qa-new-post-container .loading-cover{min-height:19.5em}
/*# sourceMappingURL=new.css.map */

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Scripts/blog.js

@ -28,7 +28,7 @@
autoplay: true,
autoHeight: true,
autoplaySpeed: 1000,
items: 1
items: 1,
});
$('.card-article-container .owl-carousel').owlCarousel({
loop: true,

169
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_bootstrap-overwrite.scss

@ -1,4 +1,3 @@
a, a:hover {
text-decoration: none;
color: #000000;
@ -12,15 +11,15 @@ h1,h2,h3,h4,h5,h6,.tab-title {
font-weight: 700;
}
h1 {
font-size: 2.0em;
font-size: 2.25em;
margin: 1.5rem 0 .75rem;
}
h2, .tab-title {
font-size: 1.5em;
font-size: 1.75em;
margin: 1.5rem 0 .75rem;
}
h3 {
font-size: 1.25em;
font-size: 1.5em;
margin: 1.5rem 0 .75rem;
}
h4 {
@ -48,155 +47,57 @@ input, select, textarea, .form-control , .btn {
}
.no-border {
border: 0;
}
/* Owl overwrite */
.owl-theme .owl-nav {
margin-top: 0 !important;
text-align: center;
-webkit-tap-highlight-color: transparent;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
font-size: 3em;
color: white;
> button {
width: 40px;
height: 40px;
padding: 0 !important;
display: inline-block !important;
line-height: 27px !important;
text-align: center;
background: none !important;
transition: .3s;
&.owl-next {
position: absolute;
right: 10%;
}
&.owl-prev {
position: absolute;
left: 10%;
}
> span {
width: 40px;
height: 40px;
padding: 0;
border: 2px solid white;
border-radius: 40px;
display: inline-block;
line-height: 29px;
text-align: center;
}
}
}
}
.btn-rounded {
border-radius: 30px;
}
.list-group {
.list-group {
.list-group-item {
position: relative;
display: block;
padding: 21px 0 21px 0;
margin-bottom: -1px;
background-color: #fff;
font-size: .8em;
padding: 0 0 20px 0;
background: none;
border-radius: 0;
border: 0;
border: 1px solid #f5f5f5;
border-width: 1px 0;
&:hover {
background: none;
}
&+.list-group-item {
margin-top: -1px;
& + .list-group-item {
border-top: 1px solid #f5f5f5;
padding: 20px 0;
}
h3 {
margin-top: 0;
}
}
}
.tab-content {
padding: 30px 0px 0;
}
.container {
padding-right: 20px;
padding-left: 20px;
}
.row {
margin-right: -20px;
margin-left: -20px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 20px;
padding-left: 20px;
}
@media (min-width: 1200px) {
.container {
max-width: 1080px;
&.small-list {
.list-group-item {
padding: 10px 0;
& + .list-group-item {
padding: 10px 0;
}
}
}
}
.font-75 {
font-size: .75em;
}
/*
.hero-container {
width: 96%;
max-width: 1440px;
}
*/
.f-85 {
.font-85 {
font-size: .85em;
}
.nav-tabs {
margin-bottom: 20px;
border-bottom: 3px solid #000;
.nav-item {
margin-bottom: -16px;
background: white;
border-left: 5px solid #fff;
.tab-title {
font-weight: 700;
line-height: 1.1;
padding: 7px;
margin-left: -14px;
}
}
.nav-link {
font-size: .8em;
border-radius: 50px;
padding: .25rem .5rem;
font-weight: 700;
color: grey;
&:hover, &:focus {
background:#eee;
}
}
.nav-link.active,
.nav-item.show .nav-link {
background: black;
border-color: white;
color: white;
border-radius: 50px;
}
}
.pb-5, .py-5 {
padding-bottom: 4rem!important;
.font-92 {
font-size: .92em;
}
.pt-5, .py-5 {
padding-top: 4rem!important;
.font-100 {
font-size: 1em;
}
footer {
font-size: .8em;
line-height: 2;
.seperator {
padding: 0 5px;
opacity: .5;
}
}
.font-125 {
font-size: 1.25em;
}

40
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_header.scss

@ -1,19 +1,21 @@
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background:#f8f9fa;
.navbar-blog {
padding: 20px 0;
ul {
li {
a {
color: black;
}
}
}
}
}
.vs-blog-title {
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #ddd;
h1,h2,h3,h4,h5, h6 {
margin: 0;
padding: 0;
}
}
.vs-footer {
padding-top: 15px;
margin-top: 25px;
border-top: 1px solid #ddd;
}
.vs-seperator {
padding: 0 4px;
opacity: .3;
}

140
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.css

@ -0,0 +1,140 @@
.hero-section {
padding: 0; }
.hero-section .hero-articles {
position: relative;
overflow: hidden; }
.hero-section .hero-articles .hero-content {
position: absolute;
left: 12%;
right: 12%;
bottom: 80px;
z-index: 4;
text-align: center; }
.hero-section .hero-articles .hero-content h2 {
margin-top: 0;
font-size: 2.5em;
font-weight: bold; }
.hero-section .hero-articles .hero-content a {
color: white;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); }
.hero-section .hero-articles .hero-content p {
color: white; }
.hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3);
color: #fff !important; }
.hero-section .hero-articles .tags .tag:hover {
background: white;
color: black !important; }
.hero-section .hero-articles .article-owner {
text-align: center;
position: relative;
z-index: 12; }
.hero-section .hero-articles .article-owner .article-infos {
color: black; }
.hero-section .hero-articles .article-owner .article-infos a {
color: black; }
.hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
.hero-section .hero-articles .article-owner .article-infos img.article-avatar {
width: 64px;
margin: -25px 10px 0px 0;
border: 3px solid #fff;
display: inline-block;
border-radius: 50%; }
.hero-section .hero-articles .img-container {
background: black; }
.hero-section .hero-articles .img-container img {
filter: grayscale(10%); }
.hero-section .hero-articles .img-container::after {
content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 0px;
width: 100%;
top: 1% !important;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.91) 89%, rgba(0, 0, 0, 0.93) 93%) !important;
transition: .2s all ease-in-out;
opacity: .9; }
.hero-section .hero-articles:hover .img-container::after {
opacity: 1; }
.article-owner .article-infos {
color: #000; }
.article-owner .article-infos a {
color: rgba(0, 0, 0, 0.6); }
.article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
.article-owner .article-infos img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
.card-articles .card-content {
padding: 10px 0px 10px; }
.card-articles .card-content h3 {
margin: 10px 0; }
.card-articles .card-content h3 a {
font-weight: 700; }
.card-articles .article-owner {
text-align: left; }
.card-articles .article-owner .article-infos {
color: #000; }
.card-articles .article-owner .article-infos a {
color: rgba(0, 0, 0, 0.6); }
.card-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
.card-articles .article-owner .article-infos img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
.article-owner {
font-size: .85em; }
.user-link-icons {
position: absolute;
right: 18px;
top: 15px;
z-index: 3; }
.user-link-icons a {
display: inline-block;
color: #eee;
margin-left: 12px;
font-size: 1.25em; }
.user-link-icons a:hover {
color: #fff; }
.tags .tag {
display: inline-block;
padding: 2px 8px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 0 1px 3px 0;
color: #b1b1b1 !important;
font-size: .7em;
line-height: 1.6em;
text-transform: uppercase; }
.tags .tag:hover {
background: black;
color: white !important; }
.popular-tags a {
display: block;
font-size: .9em; }
.popular-tags a span {
float: right;
opacity: .3;
font-size: .9em; }
.img-container {
position: relative;
overflow: hidden;
border-radius: 4px; }

1
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.min.css

@ -0,0 +1 @@
.hero-section{padding:0;}.hero-section .hero-articles{position:relative;overflow:hidden;}.hero-section .hero-articles .hero-content{position:absolute;left:12%;right:12%;bottom:80px;z-index:4;text-align:center;}.hero-section .hero-articles .hero-content h2{margin-top:0;font-size:2.5em;font-weight:bold;}.hero-section .hero-articles .hero-content a{color:#fff;text-shadow:0 0 20px rgba(0,0,0,.5);}.hero-section .hero-articles .hero-content p{color:#fff;}.hero-section .hero-articles .tags .tag{background:rgba(208,208,208,.3);color:#fff !important;}.hero-section .hero-articles .tags .tag:hover{background:#fff;color:#000 !important;}.hero-section .hero-articles .article-owner{text-align:center;position:relative;z-index:12;}.hero-section .hero-articles .article-owner .article-infos{color:#000;}.hero-section .hero-articles .article-owner .article-infos a{color:#000;}.hero-section .hero-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(255,255,255,.2);}.hero-section .hero-articles .article-owner .article-infos img.article-avatar{width:64px;margin:-25px 10px 0 0;border:3px solid #fff;display:inline-block;border-radius:50%;}.hero-section .hero-articles .img-container{background:#000;}.hero-section .hero-articles .img-container img{filter:grayscale(10%);}.hero-section .hero-articles .img-container::after{content:"";display:block;position:absolute;z-index:1;bottom:0;width:100%;top:1% !important;background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.91) 89%,rgba(0,0,0,.93) 93%) !important;transition:.2s all ease-in-out;opacity:.9;}.hero-section .hero-articles:hover .img-container::after{opacity:1;}.article-owner .article-infos{color:#000;}.article-owner .article-infos a{color:rgba(0,0,0,.6);}.article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.article-owner .article-infos img.article-avatar{width:30px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.card-articles .card-content{padding:10px 0 10px;}.card-articles .card-content h3{margin:10px 0;}.card-articles .card-content h3 a{font-weight:700;}.card-articles .article-owner{text-align:left;}.card-articles .article-owner .article-infos{color:#000;}.card-articles .article-owner .article-infos a{color:rgba(0,0,0,.6);}.card-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.card-articles .article-owner .article-infos img.article-avatar{width:30px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.article-owner{font-size:.85em;}.user-link-icons{position:absolute;right:18px;top:15px;z-index:3;}.user-link-icons a{display:inline-block;color:#eee;margin-left:12px;font-size:1.25em;}.user-link-icons a:hover{color:#fff;}.tags .tag{display:inline-block;padding:2px 8px;background:rgba(208,208,208,.3);border-radius:30px;margin:0 1px 3px 0;color:#b1b1b1 !important;font-size:.7em;line-height:1.6em;text-transform:uppercase;}.tags .tag:hover{background:#000;color:#fff !important;}.popular-tags a{display:block;font-size:.9em;}.popular-tags a span{float:right;opacity:.3;font-size:.9em;}.img-container{position:relative;overflow:hidden;border-radius:4px;}

88
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.scss

@ -1,4 +1,4 @@
section.hero-section {
.hero-section {
padding: 0;
.hero-articles {
position: relative;
@ -57,9 +57,7 @@ section.hero-section {
}
}
.img-container {
background: black;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: black;
img {
filter: grayscale(10%);
}
@ -85,39 +83,26 @@ section.hero-section {
}
}
}
.box-articles {
padding: 0 0 40px 0;
&+.box-articles {
padding: 40px 0;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
margin-top: -1px;
}
h3 {
margin: 10px 0;
.article-owner {
.article-infos {
color: #000;
a {
font-weight: 700;
color: rgba(0, 0, 0, 0.6);
}
}
.article-owner {
.article-infos {
color: #000;
a {
color: rgba(0, 0, 0, 0.6);
}
.seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2);
}
img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%;
}
.seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2);
}
}
}
img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%;
}
}
}
.card-articles {
.card-content
@ -172,37 +157,32 @@ section.hero-section {
}
.tags {
margin:5px 0;
.tag {
display: inline-block;
padding: 0px 6px;
padding: 2px 8px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 4px 1px;
margin: 0 1px 3px 0;
color: #b1b1b1 !important;
font-size: .64em;
font-size: .7em;
line-height: 1.6em;
text-transform: uppercase;
&:hover {
background: black;
&:hover {
background: black;
color: white !important;
}
}
}
}
}
.popular-tags {
a {
display: block;
padding: 10px 15px;
background: white;
margin-bottom: 2px;
font-size: .85em;
&:hover {
background: #f5f5f5;
}
font-size: .9em;
span {
float: right;
opacity: .3;
font-size: .85em;
font-size: .9em;
}
}
}
@ -213,10 +193,4 @@ section.hero-section {
overflow: hidden;
border-radius: 4px;
}
.sidebox {
.sideboxes {
padding: 30px;
background: #fafafa;
}
}

30
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_post.scss

@ -52,32 +52,36 @@
.media {
font-size: .95em;
}
}
}
.comment-area {
.comment-owner {
margin-bottom: 2px;
span {
font-weight: 300;
color: #999;
font-size: .8em;
}
}
>.media {
padding: 30px 0;
> .media {
padding: 30px 0;
border-bottom: 1px solid #f1f1f1;
.media {
padding: 20px 0;
padding: 20px 0;
}
}
.comment-buttons {
background: #f8f9fa ;
border-bottom: 1px solid #f1f1f1;
padding: 6px 10px;
font-size: .85em;
padding: 4px 8px;
.seperator {
color: #ddd;
margin: 0 8px;
}
.count {
color: #fff;
background: #ddd;
@ -85,17 +89,27 @@
padding: 1px 3px;
font-size: 10px;
border-radius: 3px;
&.count-up {
background: #999;
}
}
a {
opacity: .5;
&:hover {
opacity: .75;
}
}
}
p {
margin-bottom: 6px;
}
.comment-avatar {
width: 64px;
}
.answer-avatar {
width: 48px;
}

289
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css

@ -1,15 +1,9 @@
div.vs-blog {
position: relative;
background: #fff;
font-family: Helvetica, sans-serif;
font-size: 15px;
/* Owl overwrite */
/*
.hero-container {
width: 96%;
max-width: 1440px;
}
*/ }
background: white;
padding: 0 30px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px; }
div.vs-blog a, div.vs-blog a:hover {
text-decoration: none;
color: #000000; }
@ -20,13 +14,13 @@
font-family: Helvetica, Roboto, sans-serif;
font-weight: 700; }
div.vs-blog h1 {
font-size: 2.0em;
font-size: 2.25em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h2, div.vs-blog .tab-title {
font-size: 1.5em;
font-size: 1.75em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h3 {
font-size: 1.25em;
font-size: 1.5em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h4 {
font-size: 1.25em;
@ -46,172 +40,99 @@
background: aqua; }
div.vs-blog .no-border {
border: 0; }
div.vs-blog .owl-theme .owl-nav {
margin-top: 0 !important;
text-align: center;
-webkit-tap-highlight-color: transparent;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
font-size: 3em;
color: white; }
div.vs-blog .owl-theme .owl-nav > button {
width: 40px;
height: 40px;
padding: 0 !important;
display: inline-block !important;
line-height: 27px !important;
text-align: center;
background: none !important;
transition: .3s; }
div.vs-blog .owl-theme .owl-nav > button.owl-next {
position: absolute;
right: 10%; }
div.vs-blog .owl-theme .owl-nav > button.owl-prev {
position: absolute;
left: 10%; }
div.vs-blog .owl-theme .owl-nav > button > span {
width: 40px;
height: 40px;
padding: 0;
border: 2px solid white;
border-radius: 40px;
display: inline-block;
line-height: 29px;
text-align: center; }
div.vs-blog .btn-rounded {
border-radius: 30px; }
div.vs-blog .list-group .list-group-item {
position: relative;
display: block;
padding: 21px 0 21px 0;
margin-bottom: -1px;
background-color: #fff;
font-size: .8em;
border: 0;
border: 1px solid #f5f5f5;
border-width: 1px 0; }
padding: 0 0 20px 0;
background: none;
border-radius: 0;
border: 0; }
div.vs-blog .list-group .list-group-item:hover {
background: none; }
div.vs-blog .list-group .list-group-item + .list-group-item {
margin-top: -1px; }
border-top: 1px solid #f5f5f5;
padding: 20px 0; }
div.vs-blog .list-group .list-group-item h3 {
margin-top: 0; }
div.vs-blog .tab-content {
padding: 30px 0px 0; }
div.vs-blog .container {
padding-right: 20px;
padding-left: 20px; }
div.vs-blog .row {
margin-right: -20px;
margin-left: -20px; }
div.vs-blog .col, div.vs-blog .col-1, div.vs-blog .col-10, div.vs-blog .col-11, div.vs-blog .col-12, div.vs-blog .col-2, div.vs-blog .col-3, div.vs-blog .col-4, div.vs-blog .col-5, div.vs-blog .col-6, div.vs-blog .col-7, div.vs-blog .col-8, div.vs-blog .col-9, div.vs-blog .col-auto, div.vs-blog .col-lg, div.vs-blog .col-lg-1, div.vs-blog .col-lg-10, div.vs-blog .col-lg-11, div.vs-blog .col-lg-12, div.vs-blog .col-lg-2, div.vs-blog .col-lg-3, div.vs-blog .col-lg-4, div.vs-blog .col-lg-5, div.vs-blog .col-lg-6, div.vs-blog .col-lg-7, div.vs-blog .col-lg-8, div.vs-blog .col-lg-9, div.vs-blog .col-lg-auto, div.vs-blog .col-md, div.vs-blog .col-md-1, div.vs-blog .col-md-10, div.vs-blog .col-md-11, div.vs-blog .col-md-12, div.vs-blog .col-md-2, div.vs-blog .col-md-3, div.vs-blog .col-md-4, div.vs-blog .col-md-5, div.vs-blog .col-md-6, div.vs-blog .col-md-7, div.vs-blog .col-md-8, div.vs-blog .col-md-9, div.vs-blog .col-md-auto, div.vs-blog .col-sm, div.vs-blog .col-sm-1, div.vs-blog .col-sm-10, div.vs-blog .col-sm-11, div.vs-blog .col-sm-12, div.vs-blog .col-sm-2, div.vs-blog .col-sm-3, div.vs-blog .col-sm-4, div.vs-blog .col-sm-5, div.vs-blog .col-sm-6, div.vs-blog .col-sm-7, div.vs-blog .col-sm-8, div.vs-blog .col-sm-9, div.vs-blog .col-sm-auto, div.vs-blog .col-xl, div.vs-blog .col-xl-1, div.vs-blog .col-xl-10, div.vs-blog .col-xl-11, div.vs-blog .col-xl-12, div.vs-blog .col-xl-2, div.vs-blog .col-xl-3, div.vs-blog .col-xl-4, div.vs-blog .col-xl-5, div.vs-blog .col-xl-6, div.vs-blog .col-xl-7, div.vs-blog .col-xl-8, div.vs-blog .col-xl-9, div.vs-blog .col-xl-auto {
padding-right: 20px;
padding-left: 20px; }
@media (min-width: 1200px) {
div.vs-blog .container {
max-width: 1080px; } }
div.vs-blog .f-85 {
div.vs-blog .list-group.small-list .list-group-item {
padding: 10px 0; }
div.vs-blog .list-group.small-list .list-group-item + .list-group-item {
padding: 10px 0; }
div.vs-blog .font-75 {
font-size: .75em; }
div.vs-blog .font-85 {
font-size: .85em; }
div.vs-blog .nav-tabs {
margin-bottom: 20px;
border-bottom: 3px solid #000; }
div.vs-blog .nav-tabs .nav-item {
margin-bottom: -16px;
background: white;
border-left: 5px solid #fff; }
div.vs-blog .nav-tabs .nav-item .tab-title {
font-weight: 700;
line-height: 1.1;
padding: 7px;
margin-left: -14px; }
div.vs-blog .nav-tabs .nav-link {
font-size: .8em;
border-radius: 50px;
padding: .25rem .5rem;
font-weight: 700;
color: grey; }
div.vs-blog .nav-tabs .nav-link:hover, div.vs-blog .nav-tabs .nav-link:focus {
background: #eee; }
div.vs-blog .nav-tabs .nav-link.active,
div.vs-blog .nav-tabs .nav-item.show .nav-link {
background: black;
border-color: white;
color: white;
border-radius: 50px; }
div.vs-blog .pb-5, div.vs-blog .py-5 {
padding-bottom: 4rem !important; }
div.vs-blog .pt-5, div.vs-blog .py-5 {
padding-top: 4rem !important; }
div.vs-blog footer {
font-size: .8em;
line-height: 2; }
div.vs-blog footer .seperator {
padding: 0 5px;
opacity: .5; }
div.vs-blog header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: #f8f9fa; }
div.vs-blog header .navbar-blog {
padding: 20px 0; }
div.vs-blog header .navbar-blog ul li a {
color: black; }
div.vs-blog section.hero-section {
div.vs-blog .font-92 {
font-size: .92em; }
div.vs-blog .font-100 {
font-size: 1em; }
div.vs-blog .font-125 {
font-size: 1.25em; }
div.vs-blog .vs-blog-title {
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #ddd; }
div.vs-blog .vs-blog-title h1, div.vs-blog .vs-blog-title h2, div.vs-blog .vs-blog-title h3, div.vs-blog .vs-blog-title h4, div.vs-blog .vs-blog-title h5, div.vs-blog .vs-blog-title h6 {
margin: 0;
padding: 0; }
div.vs-blog .vs-footer {
padding-top: 15px;
margin-top: 25px;
border-top: 1px solid #ddd; }
div.vs-blog .vs-seperator {
padding: 0 4px;
opacity: .3; }
div.vs-blog .hero-section {
padding: 0; }
div.vs-blog section.hero-section .hero-articles {
div.vs-blog .hero-section .hero-articles {
position: relative;
overflow: hidden; }
div.vs-blog section.hero-section .hero-articles .hero-content {
div.vs-blog .hero-section .hero-articles .hero-content {
position: absolute;
left: 12%;
right: 12%;
bottom: 80px;
z-index: 4;
text-align: center; }
div.vs-blog section.hero-section .hero-articles .hero-content h2 {
div.vs-blog .hero-section .hero-articles .hero-content h2 {
margin-top: 0;
font-size: 2.5em;
font-weight: bold; }
div.vs-blog section.hero-section .hero-articles .hero-content a {
div.vs-blog .hero-section .hero-articles .hero-content a {
color: white;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); }
div.vs-blog section.hero-section .hero-articles .hero-content p {
div.vs-blog .hero-section .hero-articles .hero-content p {
color: white; }
div.vs-blog section.hero-section .hero-articles .tags .tag {
div.vs-blog .hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3);
color: #fff !important; }
div.vs-blog section.hero-section .hero-articles .tags .tag:hover {
div.vs-blog .hero-section .hero-articles .tags .tag:hover {
background: white;
color: black !important; }
div.vs-blog section.hero-section .hero-articles .article-owner {
div.vs-blog .hero-section .hero-articles .article-owner {
text-align: center;
position: relative;
z-index: 12; }
div.vs-blog section.hero-section .hero-articles .article-owner .article-infos {
div.vs-blog .hero-section .hero-articles .article-owner .article-infos {
color: black; }
div.vs-blog section.hero-section .hero-articles .article-owner .article-infos a {
div.vs-blog .hero-section .hero-articles .article-owner .article-infos a {
color: black; }
div.vs-blog section.hero-section .hero-articles .article-owner .article-infos .seperator {
div.vs-blog .hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
div.vs-blog section.hero-section .hero-articles .article-owner .article-infos img.article-avatar {
div.vs-blog .hero-section .hero-articles .article-owner .article-infos img.article-avatar {
width: 64px;
margin: -25px 10px 0px 0;
border: 3px solid #fff;
display: inline-block;
border-radius: 50%; }
div.vs-blog section.hero-section .hero-articles .img-container {
background: black;
border-top-left-radius: 0;
border-top-right-radius: 0; }
div.vs-blog section.hero-section .hero-articles .img-container img {
div.vs-blog .hero-section .hero-articles .img-container {
background: black; }
div.vs-blog .hero-section .hero-articles .img-container img {
filter: grayscale(10%); }
div.vs-blog section.hero-section .hero-articles .img-container::after {
div.vs-blog .hero-section .hero-articles .img-container::after {
content: "";
display: block;
position: absolute;
@ -222,31 +143,20 @@
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.91) 89%, rgba(0, 0, 0, 0.93) 93%) !important;
transition: .2s all ease-in-out;
opacity: .9; }
div.vs-blog section.hero-section .hero-articles:hover .img-container::after {
div.vs-blog .hero-section .hero-articles:hover .img-container::after {
opacity: 1; }
div.vs-blog .box-articles {
padding: 0 0 40px 0; }
div.vs-blog .box-articles + .box-articles {
padding: 40px 0;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
margin-top: -1px; }
div.vs-blog .box-articles h3 {
margin: 10px 0; }
div.vs-blog .box-articles h3 a {
font-weight: 700; }
div.vs-blog .box-articles .article-owner .article-infos {
color: #000; }
div.vs-blog .box-articles .article-owner .article-infos a {
color: rgba(0, 0, 0, 0.6); }
div.vs-blog .box-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
div.vs-blog .box-articles .article-owner .article-infos img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
div.vs-blog .article-owner .article-infos {
color: #000; }
div.vs-blog .article-owner .article-infos a {
color: rgba(0, 0, 0, 0.6); }
div.vs-blog .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
div.vs-blog .article-owner .article-infos img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
div.vs-blog .card-articles .card-content {
padding: 10px 0px 10px; }
div.vs-blog .card-articles .card-content h3 {
@ -281,40 +191,30 @@
font-size: 1.25em; }
div.vs-blog .user-link-icons a:hover {
color: #fff; }
div.vs-blog .tags {
margin: 5px 0; }
div.vs-blog .tags .tag {
display: inline-block;
padding: 0px 6px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 4px 1px;
color: #b1b1b1 !important;
font-size: .64em;
line-height: 1.6em;
text-transform: uppercase; }
div.vs-blog .tags .tag:hover {
background: black;
color: white !important; }
div.vs-blog .tags .tag {
display: inline-block;
padding: 2px 8px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 0 1px 3px 0;
color: #b1b1b1 !important;
font-size: .7em;
line-height: 1.6em;
text-transform: uppercase; }
div.vs-blog .tags .tag:hover {
background: black;
color: white !important; }
div.vs-blog .popular-tags a {
display: block;
padding: 10px 15px;
background: white;
margin-bottom: 2px;
font-size: .85em; }
div.vs-blog .popular-tags a:hover {
background: #f5f5f5; }
font-size: .9em; }
div.vs-blog .popular-tags a span {
float: right;
opacity: .3;
font-size: .85em; }
font-size: .9em; }
div.vs-blog .img-container {
position: relative;
overflow: hidden;
border-radius: 4px; }
div.vs-blog .sidebox .sideboxes {
padding: 30px;
background: #fafafa; }
div.vs-blog .post-detail h1 {
padding: 0px 0;
line-height: 1.25em;
@ -354,20 +254,19 @@
font-size: .95em; }
div.vs-blog .media .media {
font-size: .95em; }
div.vs-blog .comment-area .comment-owner span {
font-weight: 300;
color: #999;
font-size: .8em; }
div.vs-blog .comment-area .comment-owner {
margin-bottom: 2px; }
div.vs-blog .comment-area .comment-owner span {
font-weight: 300;
color: #999;
font-size: .8em; }
div.vs-blog .comment-area > .media {
padding: 30px 0;
border-bottom: 1px solid #f1f1f1; }
div.vs-blog .comment-area > .media .media {
padding: 20px 0; }
div.vs-blog .comment-area .comment-buttons {
background: #f8f9fa;
border-bottom: 1px solid #f1f1f1;
padding: 6px 10px;
font-size: .85em; }
padding: 4px 8px; }
div.vs-blog .comment-area .comment-buttons .seperator {
color: #ddd;
margin: 0 8px; }
@ -380,6 +279,10 @@
border-radius: 3px; }
div.vs-blog .comment-area .comment-buttons .count.count-up {
background: #999; }
div.vs-blog .comment-area .comment-buttons a {
opacity: .5; }
div.vs-blog .comment-area .comment-buttons a:hover {
opacity: .75; }
div.vs-blog .comment-area p {
margin-bottom: 6px; }
div.vs-blog .comment-area .comment-avatar {

24
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css.map

File diff suppressed because one or more lines are too long

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.min.css

File diff suppressed because one or more lines are too long

18
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.scss

@ -1,11 +1,13 @@
div.vs-blog {
position: relative;
background: #fff;
font-family: Helvetica, sans-serif;
font-size: 15px;
background: white;
padding: 0 30px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
@import "bootstrap-overwrite.scss";
@import "header.scss";
@import "home.scss";
@import "post.scss";
@import "custom.scss";
}
@import "header.scss";
@import "home.scss";
@import "post.scss";
@import "custom.scss";
}

4
modules/blogging/src/Volo.Blogging.Web/compilerconfig.json

@ -2,5 +2,9 @@
{
"outputFile": "Pages/Blog/Shared/Styles/blog.css",
"inputFile": "Pages/Blog/Shared/Styles/blog.scss"
},
{
"outputFile": "Pages/Blog/Shared/Styles/_home.css",
"inputFile": "Pages/Blog/Shared/Styles/_home.scss"
}
]
Loading…
Cancel
Save