mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
Added cover image to jumbotron
This commit is contained in:
Asutosh Palai
@ -40,7 +40,7 @@
|
||||
|
||||
<link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" />
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
|
||||
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="/js/masonry.min.js"></script>
|
||||
<script type="text/javascript" src="/js/application.js"></script>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{% assign cover_post = site.categories.cover.first %}
|
||||
<div id="home-header" class="container-fluid">
|
||||
<div class="cover text-center">
|
||||
<h1 class="title">{{ cover_post.title }}</h1>
|
||||
<!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
|
||||
</div>
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<div id="home-header" class="container-fluid">
|
||||
<div class="cover-image"><img class="img-responsive" src="/images/posts/{{ cover_post.image }}" alt=""></div>
|
||||
<div class="cover text-center">
|
||||
<h1 class="title">{{ cover_post.title }}</h1>
|
||||
<!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
|
||||
</div>
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
|
||||
178
css/base.scss
178
css/base.scss
@ -40,6 +40,27 @@ $carousel-height: 500px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@mixin center-vertical() {
|
||||
-ms-transform: translateY(50%);
|
||||
-webkit-transform: translateY(50%);
|
||||
transform: translateY(50%);
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
@mixin center-horizontal() {
|
||||
-ms-transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
@mixin center-both() {
|
||||
-ms-transform: translate(-50%, 50%);
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
}
|
||||
// ============== /MIXINS ============== //
|
||||
|
||||
@font-face {
|
||||
@ -74,53 +95,6 @@ body {
|
||||
font-family: Open Sans, sans-serif;
|
||||
}
|
||||
|
||||
// ============== COMPONENTS ============== //
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
|
||||
&:hover{
|
||||
color: #e74c3c;
|
||||
border-bottom: 1px solid #e74c3c;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #e74c3c;
|
||||
padding-left: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 12px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== /COMPONENETS ============== //
|
||||
|
||||
// ================ NAV ================//
|
||||
|
||||
@ -179,18 +153,20 @@ blockquote {
|
||||
// ============= HOME-HEADER ============= //
|
||||
|
||||
#home-header {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
margin-bottom: -60px;
|
||||
background: $home-header-bg-color;
|
||||
padding: 0;
|
||||
z-index: -10;
|
||||
overflow: hidden;
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
@include center-vertical();
|
||||
@include center-horizontal();
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -199,6 +175,16 @@ blockquote {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@include center-vertical();
|
||||
|
||||
.img-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
@ -221,6 +207,18 @@ blockquote {
|
||||
}
|
||||
// ============= /HOME-HEADER ============= //
|
||||
|
||||
// ============= NEW-ARTICLES ============ //
|
||||
#new-articles {
|
||||
.img-container {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
height: 175px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
// ============ /NEW-ARTICLES ============ //
|
||||
|
||||
// ============= CAROUSEL ============= //
|
||||
|
||||
/* Carousel base class */
|
||||
@ -250,49 +248,67 @@ blockquote {
|
||||
}
|
||||
// ============ /CAROUSEL ============= //
|
||||
|
||||
// ============== COMPONENTS ============== //
|
||||
|
||||
// ============== HEADER ============== //
|
||||
.img-center-fill {
|
||||
position: absolute;
|
||||
@include center-both();
|
||||
width: 100%;
|
||||
|
||||
header {
|
||||
font-family: AvenirNext, Sans-serif;
|
||||
color: white;
|
||||
padding: 10px 10px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
&.pure-u-2-3{
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1, h3 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
&.wide {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
&.tall {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
|
||||
&:hover{
|
||||
color: #e74c3c;
|
||||
border-bottom: 1px solid #e74c3c;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #e74c3c;
|
||||
padding-left: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
position: relative;
|
||||
top: 12px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
|
||||
nav {
|
||||
padding: 10px 0px 50px 0px;
|
||||
margin-top: 30px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include transition(all, 0.2s, ease-in);
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0px 10px;
|
||||
padding: 2px 0px;
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover{
|
||||
color: #333;
|
||||
border-bottom: 1px solid #333;
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== /HEADER ============== //
|
||||
// ============== /COMPONENETS ============== //
|
||||
|
||||
// ============== CONTENT ============== //
|
||||
.cover-oold {
|
||||
|
||||
28
index.html
28
index.html
@ -6,20 +6,22 @@ title: "Home"
|
||||
{% include home_header.html %}
|
||||
|
||||
<div class="container">
|
||||
{% for post in site.posts %}
|
||||
{% if post.categories contains 'cover' %}
|
||||
<section class="cover">
|
||||
<img src="/images/tags/featured.png" class="tag">
|
||||
<a href="{{ post.url }}">
|
||||
<img src="/images/posts/{{post.image}}" alt="" {% if post.image == null %} class="hidden" {% endif %}>
|
||||
<div class="details">
|
||||
<h2>{{ post.title }}</h2>
|
||||
{{ post.excerpt | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
{% endif %}
|
||||
<section id="new-articles" class="row">
|
||||
|
||||
{% for post in site.posts limit: 4 %}
|
||||
<div class="col-sm-3">
|
||||
<a href="{{ post.url }}">
|
||||
<div class="img-container">
|
||||
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h2>{{ post.title }}</h2>
|
||||
{{ post.excerpt | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<div class="content masonry">
|
||||
{% for post in paginator.posts %}
|
||||
|
||||
@ -1 +1,8 @@
|
||||
// Your JavaScript
|
||||
// Your JavaScript
|
||||
$(function() {
|
||||
$('.container').find('img').each(function(){
|
||||
var parent = $(this).parent();
|
||||
var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
|
||||
$(this).addClass(imgClass);
|
||||
})
|
||||
});
|
||||
|
||||
4
js/jquery-2.1.3.min.js
vendored
Normal file
4
js/jquery-2.1.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user