mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
jumbotron done
This commit is contained in:
Asutosh Palai
@ -1,86 +1,28 @@
|
||||
<div class="navbar-wrapper">
|
||||
<div class="container">
|
||||
<div class="navbar-wrapper">
|
||||
<div class="container-fuild">
|
||||
|
||||
<nav class="navbar navbar-default navbar-static-top">
|
||||
<div class="container">
|
||||
<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 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>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Carousel
|
||||
================================================== -->
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
|
||||
<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 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>
|
||||
<a class="left carousel-control" href="#myCarousel" role="button"
|
||||
data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"
|
||||
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 -->
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
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>
|
||||
|
||||
{% include header.html %}
|
||||
{% include navbar.html %}
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-2-3 container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
{{ content }}
|
||||
|
||||
{% include google_analytics.html %}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Racing to the top"
|
||||
categories: [wona, cover, news]
|
||||
categories: [wona, news]
|
||||
image: racing-to-the-top.jpg
|
||||
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.
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
$navbar-default-link-color: white;
|
||||
$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
|
||||
$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;
|
||||
|
||||
// =============== /VARS ===============//
|
||||
@ -129,11 +130,6 @@ blockquote {
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
|
||||
> .container {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -149,7 +145,7 @@ blockquote {
|
||||
|
||||
.navbar {
|
||||
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;
|
||||
padding-top: 5px;
|
||||
font-weight: bold;
|
||||
@ -180,13 +176,57 @@ blockquote {
|
||||
}
|
||||
// ================ /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 base class */
|
||||
.carousel {
|
||||
height: 500px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
@ -255,7 +295,7 @@ header {
|
||||
// ============== /HEADER ============== //
|
||||
|
||||
// ============== CONTENT ============== //
|
||||
.cover {
|
||||
.cover-oold {
|
||||
background: white;
|
||||
margin: auto;
|
||||
display: block;
|
||||
|
||||
120
index.html
120
index.html
@ -3,67 +3,71 @@ layout: layout
|
||||
title: "Home"
|
||||
---
|
||||
|
||||
{% 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 %}
|
||||
{% endfor %}
|
||||
{% include home_header.html %}
|
||||
|
||||
<div class="content masonry">
|
||||
{% for post in paginator.posts %}
|
||||
{% if post.categories contains 'wona' %}
|
||||
{% if post.categories contains 'cover' %}
|
||||
{% else %}
|
||||
<div class="article-container">
|
||||
<div class="article {{post.tag}}">
|
||||
<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 %}
|
||||
{% endfor %}
|
||||
|
||||
{% if post.tag %}
|
||||
<img src="/images/tags/{{post.tag}}.png" class="tag">
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ post.url }}">
|
||||
{% if post.image %}
|
||||
<div class="article-cover-container">
|
||||
<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="content masonry">
|
||||
{% for post in paginator.posts %}
|
||||
{% if post.categories contains 'wona' %}
|
||||
{% if post.categories contains 'cover' %}
|
||||
{% else %}
|
||||
<div class="article-container">
|
||||
<div class="article {{post.tag}}">
|
||||
|
||||
<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 %}
|
||||
{% if post.tag %}
|
||||
<img src="/images/tags/{{post.tag}}.png" class="tag">
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ post.url }}">
|
||||
{% if post.image %}
|
||||
<div class="article-cover-container">
|
||||
<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">
|
||||
{% 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>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user