mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-02-12 21:10:54 +00:00
jumbotron done
This commit is contained in:
Asutosh Palai
@ -1,86 +1,28 @@
|
|||||||
<div class="navbar-wrapper">
|
<div class="navbar-wrapper">
|
||||||
<div class="container">
|
<div class="container-fuild">
|
||||||
|
|
||||||
<nav class="navbar navbar-default navbar-static-top">
|
<nav class="navbar navbar-default navbar-static-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
</button>
|
</button>
|
||||||
<a class="navbar-left" href="/"><img class="navbar-logo" src="/images/logo.png" alt="WONA Logo"></a>
|
<a class="navbar-left" href="/"><img class="navbar-logo" src="/images/logo.png" alt="WONA Logo"></a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="navbar" class="navbar-collapse collapse">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="active"><a href="/">Home</a></li>
|
|
||||||
<li><a href="/columns/">Columns</a></li>
|
|
||||||
<li><a href="/news/">News</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Carousel
|
<div id="navbar" class="navbar-collapse collapse">
|
||||||
================================================== -->
|
<ul class="nav navbar-nav">
|
||||||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
|
<li class="active"><a href="/">Home</a></li>
|
||||||
<!-- Indicators -->
|
<li><a href="/columns/">Columns</a></li>
|
||||||
<ol class="carousel-indicators">
|
<li><a href="/news/">News</a></li>
|
||||||
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
|
</ul>
|
||||||
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
|
|
||||||
<li class="active" data-target="#myCarousel" data-slide-to="2"></li>
|
|
||||||
</ol>
|
|
||||||
<div class="carousel-inner" role="listbox">
|
|
||||||
<div class="item">
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Example headline.</h1>
|
|
||||||
<p>Note: If you're viewing this page via a <code>file://</code>
|
|
||||||
URL, the "next" and "previous" Glyphicon buttons on the left and right
|
|
||||||
might not load/display properly due to web browser security rules.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Another example headline.</h1>
|
|
||||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget
|
|
||||||
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor
|
|
||||||
id nibh ultricies vehicula ut id elit.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item active">
|
|
||||||
<div class="container">
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>One more for good measure.</h1>
|
|
||||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget
|
|
||||||
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor
|
|
||||||
id nibh ultricies vehicula ut id elit.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="left carousel-control" href="#myCarousel" role="button"
|
</nav>
|
||||||
data-slide="prev">
|
</div>
|
||||||
<span class="glyphicon glyphicon-chevron-left"
|
</div>
|
||||||
aria-hidden="true"></span>
|
|
||||||
<span class="sr-only">Previous</span>
|
|
||||||
</a>
|
|
||||||
<a class="right carousel-control"
|
|
||||||
href="#myCarousel" role="button"
|
|
||||||
data-slide="next">
|
|
||||||
<span class="glyphicon
|
|
||||||
glyphicon-chevron-right"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<span
|
|
||||||
class="sr-only">Next</span>
|
|
||||||
</a>
|
|
||||||
</div><!-- /.carousel -->
|
|
||||||
|
|
||||||
|
|||||||
9
_includes/home_header.html
Normal file
9
_includes/home_header.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{% 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>
|
||||||
28
_includes/navbar.html
Normal file
28
_includes/navbar.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<div class="navbar-wrapper">
|
||||||
|
<div class="container-fuild">
|
||||||
|
|
||||||
|
<nav class="navbar navbar-default navbar-static-top">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-left" href="/"><img class="navbar-logo" src="/images/logo.png" alt="WONA Logo"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="navbar" class="navbar-collapse collapse">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="/">Home</a></li>
|
||||||
|
<li><a href="/columns/">Columns</a></li>
|
||||||
|
<li><a href="/news/">News</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -5,13 +5,9 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{% include header.html %}
|
{% include navbar.html %}
|
||||||
|
|
||||||
<div class="pure-g">
|
{{ content }}
|
||||||
<div class="pure-u-2-3 container">
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include google_analytics.html %}
|
{% include google_analytics.html %}
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: post
|
layout: post
|
||||||
title: "Racing to the top"
|
title: "Racing to the top"
|
||||||
categories: [wona, cover, news]
|
categories: [wona, news]
|
||||||
image: racing-to-the-top.jpg
|
image: racing-to-the-top.jpg
|
||||||
tag: news
|
tag: news
|
||||||
excerpt: After a splendid performance in Australia this December, the IITR Motorsports team (FSAE team) shot up the rankings to be crowned the top ranked Motorsports team in India in the Electric category. WatchOut catches up with the team to shed some light on its workings, accolades and future prospects.
|
excerpt: After a splendid performance in Australia this December, the IITR Motorsports team (FSAE team) shot up the rankings to be crowned the top ranked Motorsports team in India in the Electric category. WatchOut catches up with the team to shed some light on its workings, accolades and future prospects.
|
||||||
|
|||||||
@ -6,7 +6,8 @@
|
|||||||
$navbar-default-link-color: white;
|
$navbar-default-link-color: white;
|
||||||
$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
|
$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
|
||||||
$navbar-default-link-hover-color: darken($navbar-default-link-color, 35%);
|
$navbar-default-link-hover-color: darken($navbar-default-link-color, 35%);
|
||||||
$carousel-bg-color: #312d2a;
|
$home-header-bg-color: #333;
|
||||||
|
$carousel-bg-color: #333;
|
||||||
$carousel-height: 500px;
|
$carousel-height: 500px;
|
||||||
|
|
||||||
// =============== /VARS ===============//
|
// =============== /VARS ===============//
|
||||||
@ -129,11 +130,6 @@ blockquote {
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
|
|
||||||
> .container {
|
|
||||||
width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -149,7 +145,7 @@ blockquote {
|
|||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@include gradient-vertical($start-color: darken($carousel-bg-color, 3%), $end-color: rgba($carousel-bg-color, 0));
|
@include gradient-vertical($start-color: rgba(0,0,0,.4), $end-color: rgba(0,0,0,.0001));
|
||||||
border: none;
|
border: none;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -180,13 +176,57 @@ blockquote {
|
|||||||
}
|
}
|
||||||
// ================ /NAV ================//
|
// ================ /NAV ================//
|
||||||
|
|
||||||
|
// ============= HOME-HEADER ============= //
|
||||||
|
|
||||||
|
#home-header {
|
||||||
|
height: 500px;
|
||||||
|
margin-bottom: -60px;
|
||||||
|
background: $home-header-bg-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: Merriweather;
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 10%;
|
||||||
|
@include gradient-horizontal($start-color: rgba(0,0,0,.4), $end-color: rgba(0,0,0,.0001));
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
width: 10%;
|
||||||
|
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.4));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ============= /HOME-HEADER ============= //
|
||||||
|
|
||||||
// ============= CAROUSEL ============= //
|
// ============= CAROUSEL ============= //
|
||||||
|
|
||||||
/* Carousel base class */
|
/* Carousel base class */
|
||||||
.carousel {
|
.carousel {
|
||||||
height: 500px;
|
height: 500px;
|
||||||
margin-bottom: 60px;
|
margin-bottom: -60px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-caption {
|
.carousel-caption {
|
||||||
@ -255,7 +295,7 @@ header {
|
|||||||
// ============== /HEADER ============== //
|
// ============== /HEADER ============== //
|
||||||
|
|
||||||
// ============== CONTENT ============== //
|
// ============== CONTENT ============== //
|
||||||
.cover {
|
.cover-oold {
|
||||||
background: white;
|
background: white;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
118
index.html
118
index.html
@ -3,67 +3,71 @@ layout: layout
|
|||||||
title: "Home"
|
title: "Home"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% for post in site.posts %}
|
{% include home_header.html %}
|
||||||
{% 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 %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
<div class="content masonry">
|
<div class="container">
|
||||||
{% for post in paginator.posts %}
|
{% for post in site.posts %}
|
||||||
{% if post.categories contains 'wona' %}
|
{% if post.categories contains 'cover' %}
|
||||||
{% if post.categories contains 'cover' %}
|
<section class="cover">
|
||||||
{% else %}
|
<img src="/images/tags/featured.png" class="tag">
|
||||||
<div class="article-container">
|
<a href="{{ post.url }}">
|
||||||
<div class="article {{post.tag}}">
|
<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 %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
{% if post.tag %}
|
<div class="content masonry">
|
||||||
<img src="/images/tags/{{post.tag}}.png" class="tag">
|
{% for post in paginator.posts %}
|
||||||
{% endif %}
|
{% if post.categories contains 'wona' %}
|
||||||
|
{% if post.categories contains 'cover' %}
|
||||||
|
{% else %}
|
||||||
|
<div class="article-container">
|
||||||
|
<div class="article {{post.tag}}">
|
||||||
|
|
||||||
<a href="{{ post.url }}">
|
{% if post.tag %}
|
||||||
{% if post.image %}
|
<img src="/images/tags/{{post.tag}}.png" class="tag">
|
||||||
<div class="article-cover-container">
|
{% endif %}
|
||||||
<img src="/images/posts/{{ post.image }}" class="article-cover">
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<br><br>
|
|
||||||
{% endif %}
|
|
||||||
<div class="details">
|
|
||||||
<h3>{{ post.title }}</h3>
|
|
||||||
{{ post.excerpt | markdownify }}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pagination">
|
<a href="{{ post.url }}">
|
||||||
{% if paginator.previous_page == 1 %}
|
{% if post.image %}
|
||||||
<a href="/" class="previous"><img src="/images/left.png"></a>
|
<div class="article-cover-container">
|
||||||
{% elsif paginator.previous_page %}
|
<img src="/images/posts/{{ post.image }}" class="article-cover">
|
||||||
<a href="/page/{{ paginator.previous_page }}" class="previous"><img src="/images/left.png"></a>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="previous"><img src="/images/left.png" class="disabled"></span>
|
<br><br>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
|
<div class="details">
|
||||||
{% if paginator.next_page %}
|
<h3>{{ post.title }}</h3>
|
||||||
<a href="/page/{{ paginator.next_page }}" class="next"><img src="/images/right.png"></a>
|
{{ post.excerpt | markdownify }}
|
||||||
{% else %}
|
</div>
|
||||||
<span class="next "><img src="/images/right.png" class="disabled"></span>
|
</a>
|
||||||
{% endif %}
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
{% if paginator.previous_page == 1 %}
|
||||||
|
<a href="/" class="previous"><img src="/images/left.png"></a>
|
||||||
|
{% elsif paginator.previous_page %}
|
||||||
|
<a href="/page/{{ paginator.previous_page }}" class="previous"><img src="/images/left.png"></a>
|
||||||
|
{% else %}
|
||||||
|
<span class="previous"><img src="/images/left.png" class="disabled"></span>
|
||||||
|
{% endif %}
|
||||||
|
<span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
|
||||||
|
{% if paginator.next_page %}
|
||||||
|
<a href="/page/{{ paginator.next_page }}" class="next"><img src="/images/right.png"></a>
|
||||||
|
{% else %}
|
||||||
|
<span class="next "><img src="/images/right.png" class="disabled"></span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user