From b9e5d057d0cf4b5c2ced9fe497302ef226698499 Mon Sep 17 00:00:00 2001 From: Asutosh Palai Date: Sat, 18 Jun 2016 14:00:36 +0530 Subject: [PATCH] jumbotron done --- _includes/header.html | 100 +++++---------------- _includes/home_header.html | 9 ++ _includes/navbar.html | 28 ++++++ _layouts/layout.html | 8 +- _posts/2016-01-30-racing-to-the-top.md | 2 +- css/base.scss | 60 ++++++++++--- index.html | 120 +++++++++++++------------ 7 files changed, 173 insertions(+), 154 deletions(-) create mode 100644 _includes/home_header.html create mode 100644 _includes/navbar.html diff --git a/_includes/header.html b/_includes/header.html index b8ed7f1..b382068 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,86 +1,28 @@ -
-
+
+
-
- - +
diff --git a/_includes/home_header.html b/_includes/home_header.html new file mode 100644 index 0000000..dcc0000 --- /dev/null +++ b/_includes/home_header.html @@ -0,0 +1,9 @@ +{% assign cover_post = site.categories.cover.first %} +
+
+

{{ cover_post.title }}

+ +
+
+
+
diff --git a/_includes/navbar.html b/_includes/navbar.html new file mode 100644 index 0000000..b382068 --- /dev/null +++ b/_includes/navbar.html @@ -0,0 +1,28 @@ +
+
+ + +
+
+ diff --git a/_layouts/layout.html b/_layouts/layout.html index 2b0cebc..d16f824 100644 --- a/_layouts/layout.html +++ b/_layouts/layout.html @@ -5,13 +5,9 @@ - {% include header.html %} + {% include navbar.html %} -
-
- {{ content }} -
-
+ {{ content }} {% include google_analytics.html %} diff --git a/_posts/2016-01-30-racing-to-the-top.md b/_posts/2016-01-30-racing-to-the-top.md index 46c1dc1..11480ef 100644 --- a/_posts/2016-01-30-racing-to-the-top.md +++ b/_posts/2016-01-30-racing-to-the-top.md @@ -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. diff --git a/css/base.scss b/css/base.scss index c32dd22..a64b15c 100644 --- a/css/base.scss +++ b/css/base.scss @@ -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; diff --git a/index.html b/index.html index 05dc156..23780ff 100644 --- a/index.html +++ b/index.html @@ -3,67 +3,71 @@ layout: layout title: "Home" --- -{% for post in site.posts %} - {% if post.categories contains 'cover' %} -
- - - -
-

{{ post.title }}

- {{ post.excerpt | markdownify }} -
- -
- {% endif %} -{% endfor %} +{% include home_header.html %} -
- {% for post in paginator.posts %} - {% if post.categories contains 'wona' %} - {% if post.categories contains 'cover' %} - {% else %} -
-
+
+ {% for post in site.posts %} + {% if post.categories contains 'cover' %} +
+ + + +
+

{{ post.title }}

+ {{ post.excerpt | markdownify }} +
+ +
+ {% endif %} + {% endfor %} - {% if post.tag %} - - {% endif %} - - - {% if post.image %} -
- -
- {% else %} -

- {% endif %} -
-

{{ post.title }}

- {{ post.excerpt | markdownify }} -
- -
-
- {% endif %} - {% endif %} - {% endfor %} -
+
+ {% for post in paginator.posts %} + {% if post.categories contains 'wona' %} + {% if post.categories contains 'cover' %} + {% else %} +
+
- +
+ {% endif %} + {% endif %} + {% endfor %} +
+ +