diff --git a/_includes/home_header.html b/_includes/home_header.html index 43a36ca..12478ce 100644 --- a/_includes/home_header.html +++ b/_includes/home_header.html @@ -1,7 +1,7 @@ -{% assign cover_post = site.categories.cover.first %} +{% assign cover_post = site.posts.first %}
-
-
+
+

{{ cover_post.title }}

diff --git a/css/base.scss b/css/base.scss index 0b33075..f9f5e0f 100644 --- a/css/base.scss +++ b/css/base.scss @@ -7,6 +7,14 @@ $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%); $home-header-bg-color: #333; +$new-article-img-height: 150px; +$new-article-img-width: 225px; +$new-article-title-color: black; +$new-article-tag-color: #e5cb52; +$featured-articles-bg-color: #f7f7f7; +$featured-articles-title-color: #373737; +$article-cover-img-width: 355px; +$article-cover-img-height: 190px; $carousel-bg-color: #333; $carousel-height: 500px; @@ -40,27 +48,7 @@ $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 { @@ -87,12 +75,12 @@ $carousel-height: 500px; body { font-size: 13px; color: #081522; - background: #ddd url('/images/bg.png'); + background: #fff; @include box-sizing(); } *{ - font-family: Open Sans, sans-serif; + font-family: Merriweather, Open Sans, sans-serif; } @@ -155,18 +143,15 @@ body { #home-header { position: relative; height: 500px; - margin-bottom: -60px; + margin-bottom: -($new-article-img-height / 4); background: $home-header-bg-color; padding: 0; z-index: -10; overflow: hidden; .cover { - position: absolute; z-index: 10; - @include center-vertical(); - @include center-horizontal(); - color: white; + color: white; } .title { @@ -179,7 +164,6 @@ body { .cover-image { width: 100%; position: absolute; - @include center-vertical(); .img-responsive { width: 100%; @@ -210,15 +194,86 @@ body { // ============= NEW-ARTICLES ============ // #new-articles { .img-container { - position: absolute; - margin: 0 auto; - width: 250px; - height: 175px; - overflow: hidden; + width: $new-article-img-width; + height: $new-article-img-height; + border-radius: 1%; + } + + .details { + margin: 10 auto; + font-weight: bold; + + .title { + color: $new-article-title-color; + text-transform: capitalize; + font-size: 20px; + } + + .tag { + text-transform: uppercase; + font-family: AvenirNext; + font-size: 14px; + color: $new-article-title-color; + } } } // ============ /NEW-ARTICLES ============ // +// ========== FEATURED-ARTICLE =========== // +#featured-articles-container { + background: $featured-articles-bg-color; +} + +#featured-articles-title { + font-size: 30px; + font-weight: bold; + color: $featured-articles-title-color; + margin-top: 22px; + margin-bottom: 22px; +} + +#featured-articles { + .article-cover-container { + width: $article-cover-img-width; + height: $article-cover-img-height; + box-shadow: 0px 35px 40px -20px; + } + + .article-container { + margin-bottom: 10px + 0.1 * $article-cover-img-height; + + .details { + position: relative; + z-index: 10; + margin: 0 auto; + top: -0.1 * $article-cover-img-height; + background: $featured-articles-bg-color; + width: 0.9 * $article-cover-img-width; ; + + .tag { + position: absolute; + top:0; + left: 50%; + transform: translate(-50%,-100%); + text-transform: capitalize; + font-weight: bold; + font-size: 14px; + color: #ffffff; + } + + .title { + + } + &:before { + content: " "; + display: table; + + } + + } + } +} +// ========= /FEATURED-ARTICLES ========== // // ============= CAROUSEL ============= // /* Carousel base class */ @@ -249,10 +304,38 @@ body { // ============ /CAROUSEL ============= // // ============== COMPONENTS ============== // +.center-vertical { + position: absolute; + -ms-transform: translateY(50%); + -webkit-transform: translateY(50%); + transform: translateY(50%); + bottom: 50%; +} + +.center-horizontal { + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + left: 50%; +} + +.center-both { + position: absolute; + -ms-transform: translate(-50%, 50%); + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + left: 50%; + bottom: 50%; +} + +.center-fill-container { + position: relative; + margin: 0 auto; + overflow: hidden; +} .img-center-fill { position: absolute; - @include center-both(); width: 100%; &.wide { @@ -370,23 +453,7 @@ blockquote { } -.content { - .pure-u-1-3 { - @include box-sizing(); - } -} - - -.article-container { - /*width: 280px;*/ - width: 30%; - margin: 0 1.5%; - margin-bottom: 50px; - float: left; - @include box-sizing(); -} - -.article { +.article-old { border: 1px solid #ccc; background: white; padding-bottom: 10px; diff --git a/index.html b/index.html index 8f3baaa..307b698 100644 --- a/index.html +++ b/index.html @@ -5,55 +5,57 @@ title: "Home" {% include home_header.html %} -
+
- {% for post in site.posts limit: 4 %} -
+ {% for post in site.posts limit: 4 offset: 1 %} +
-
+
-
-

{{ post.title }}

- {{ post.excerpt | markdownify }} +
+

{{ post.title | truncatewords: 4}}

+

{{ post.tag}}
{% endfor %}
+
-
- {% for post in paginator.posts %} - {% if post.categories contains 'wona' %} - {% if post.categories contains 'cover' %} - {% else %} -
-
+
+
+
+

Featured Articles

+ {% for cat in site.categories %} + {{ cat | inspect }} + {% assign post = cat.second.first %} + {% if post.categories contains 'wona' and post.image != null %} +
+
- {% if post.tag %} - - {% endif %} - - - {% if post.image %} -
- + + {% if post.image %} +
+ +
+ {% else %} +

+ {% endif %} +
+ {{ post.tag }} +

{{ post.title | truncatewords: 4}}

+

{{ post.excerpt | markdownify | truncate: 75 }}

- {% else %} -

- {% endif %} -
-

{{ post.title }}

- {{ post.excerpt | markdownify }} -
- + +
-
{% endif %} - {% endif %} - {% endfor %} + {% endfor %} +
+
-
- - diff --git a/js/application.js b/js/application.js index e520076..74faaa4 100644 --- a/js/application.js +++ b/js/application.js @@ -1,6 +1,6 @@ // Your JavaScript $(function() { - $('.container').find('img').each(function(){ + $('.img-center-fill').each(function(){ var parent = $(this).parent(); var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall'; $(this).addClass(imgClass);