jekyll-theme-open-project 0.1.6 → 1.0.0.pre.pre

data/_sass/open-project-base.scss

@@ -41,11 +41,16 @@ a {
 .main-section {
   margin-top: 50px;
 
+  display: flex;
+  flex-flow: column nowrap;
+
   @media screen and (min-width: $bigscreen-breakpoint) {
     margin-top: 100px;
   }
 
   > .puny-label {
+    align-self: center;
+
     text-align: center;
     margin: 0;
     font-size: 18px;
@@ -54,19 +59,59 @@ a {
   }
 
   > .title {
+    align-self: center;
+
     text-align: center;
     font-weight: 600;
 
     margin-top: 0;
     margin-bottom: 1em;
     font-size: 32px;
+
+    position: relative;
+
+    &:after {
+      // Underlaying border feature can be turned on
+      // in extending sections by providing border-bottom-color
+      // on this :after element.
+      content: " ";
+      border-bottom-width: 12px;
+      border-bottom-style: solid;
+      border-bottom-color: transparent;
+      position: absolute;
+      bottom: 8px;
+      left: -5px;
+      right: -5px;
+      z-index: -1;
+    }
   }
 
   > .items {
+    align-self: stretch;
+
     @extend .item-grid;
   }
 }
 
+.with-symbol-background {
+  position: relative;
+
+  > * {
+    z-index: 1;
+  }
+  > svg {
+    z-index: 0;
+    position: absolute;
+    top: -38px;
+    right: -60px;
+    height: 525px;
+    width: 525px;
+    path {
+      fill: rgba($primary-color, 0.08);
+    }
+  }
+}
+
 @mixin hoverable-card($base-y, $base-blur, $color) {
   $hovered-y: $base-y * 2;
   $hovered-blur: $base-blur * 2;
@@ -88,19 +133,150 @@ a {
     text-decoration: none;
   }
 
-  .header {
-    font-weight: 600;
-    margin: 0 0 .5em 0;
+  header {
+    > .parent-project {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+
+      .project-logo {
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+      .project-title {
+        font-size: 14px;
+        font-weight: 600;
+        flex: 1;
+
+        color: $primary-color;
+        body.layout-software-index & {
+          color: $hub-software--primary-color;
+        }
+        body.layout-spec-index & {
+          color: $hub-specs--primary-color;
+        }
+      }
+    }
+    > .title {
+      font-weight: 600;
+      margin: 0 0 .5em 0;
+    }
   }
+
   .body {
     margin: 0;
   }
+
+  footer {
+    color: grey;
+    font-size: 14px;
+
+    .last-update, .tags {
+      margin: 6px 0 0 0;
+    }
+
+    .last-update {
+      padding: 0;
+    }
+
+    .tags {
+      list-style: none;
+      padding: 0;
+
+      > li {
+        display: inline;
+        font-weight: 600;
+        margin: 0;
+        padding: 0;
+
+        &::after {
+          content: ", ";
+          color: grey;
+          font-weight: normal;
+        }
+        &:last-child::after {
+          content: "";
+        }
+
+        color: $primary-color;
+
+        body.layout-software-index & {
+          color: $hub-software--primary-color;
+        }
+        body.layout-spec-index & {
+          color: $hub-specs--primary-color;
+        }
+      }
+    }
+  }
+}
+
+.post-meta-row {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  color: grey;
+  font-size: 14px;
+
+  .author-name {
+    margin-right: 10px;
+    white-space: nowrap;
+
+    font-weight: 600;
+    color: $primary-color;
+  }
+
+  .author-avatar {
+    margin-right: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    display: inline-block;
+    vertical-align: middle;
+    img {
+      vertical-align: middle;
+    }
+  }
 }
 
 .post-card {
-  .meta {
-    margin-top: 8px;
-    color: grey;
+  position: relative;
+
+  &.has-parent-project {
+    padding-top: 20px;
+  }
+  .hub-symbol {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 28px;
+    height: 28px;
+
+    svg path {
+      fill: lighten(desaturate($primary-color, 30), 45);
+    }
+  }
+  header {
+    .title {
+      font-weight: 600;
+      font-size: 22px;
+    }
+    .external-link-icon {
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+  footer {
+    @extend .post-meta-row;
+    margin-top: 14px;
   }
 }
 
@@ -111,11 +287,16 @@ a {
     .title {
       font-size: 36px;
       font-weight: 600;
+      margin-bottom: 14px;
     }
   }
   .body {
     font-size: 18px;
     line-height: 1.65;
+
+    > p:first-child {
+      margin-top: 0;
+    }
   }
 }
 
@@ -147,6 +328,11 @@ body {
 
   > main {
     flex: 1;
+    overflow: hidden;
+    padding-bottom: 50px;
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      padding-bottom: 100px;
+    }
   }
 }
 @media screen and (min-width: $bigscreen-breakpoint) {
@@ -165,6 +351,7 @@ body {
 header,
 footer,
 section,
+.hero,
 article {
   body > &,
   body > .underlay > &,

data/_sass/open-project-header-footer.scss

@@ -40,68 +40,128 @@ body > .underlay > footer {
   }
 }
 
-body > .underlay.header {
-  background: $header-background;
+.underlay.header {
+  body > & {
+    background: $header-background;
 
-  > .hero {
-    padding-top: 20px;
-    padding-bottom: 40px;
+    > .hero {
+      padding-top: 20px;
+      padding-bottom: 60px;
+
+      @media screen and (min-width: $widescreen-breakpoint) {
+        padding-top: 65px;
+        padding-bottom: 110px;
+      }
+
+      text-align: center;
+      color: white;
+
+      > .text {
+        > .title {
+          font-size: 44px;
+          font-weight: bold;
+          margin: 0 0 20px 0;
+          line-height: 1.2;
+        }
+        > .desc {
+          font-size: 20px;
+          margin: 0;
+        }
+        > .cta {  // Call to action.
+          margin-top: 50px;
+
+          .button {
+            font-weight: 800;
+            font-size: 18px;
+            padding: 12px 18px;
+            border-radius: 4px;
+
+            .icon {
+              margin-right: 10px;
+              font-weight: 400;
+              position: relative;
+              top: 2px;
+              font-size: 120%;
+            }
+
+            &, &:link, &:hover, &:visited {
+              color: $primary-dark-color;
+              background-color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+  body.layout-software-index > & {
+    background: $hub-software--hero-background;
+  }
+  body.layout-spec-index > & {
+    background: $hub-specs--hero-background;
+  }
+  body.layout-home > & {
+    background: $superhero-background;
 
     @media screen and (min-width: $widescreen-breakpoint) {
-      padding-top: 45px;
-      padding-bottom: 110px;
+      background:
+        repeat-x bottom center/auto 30px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'><polygon fill='white' points='0,0 28,0 35,10 45,10 52,0 80,0 80,10 0,10'/></svg>"),
+        $superhero-background;
     }
 
-    text-align: center;
-    color: white;
+    > .hero {
+      text-align: left;
 
-    > h1 {
-      font-size: 44px;
-      font-weight: bold;
-      margin: 0;
-    }
-    > .desc {
-      font-size: 20px;
-      margin: 0;
+      .illustration {
+        display: none;
+      }
+
+      @media screen and (min-width: $bigscreen-breakpoint) {
+        display: flex;
+        flex-flow: row nowrap;
+
+        .text {
+          width: 550px;
+        }
+        .illustration {
+          flex: 1;
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: center;
+        }
+      }
     }
   }
 }
-body.layout-index-page > .underlay.header {
-  background: $hero-background;
-}
-body.layout-home > .underlay.header {
-  background: $superhero-background;
-  > .hero {
-    text-align: left;
-  }
-}
 
 body > .underlay.footer {
   background: #2E333B;
-  margin-top: 50px;
-  @media screen and (min-width: $bigscreen-breakpoint) {
-    margin-top: 100px;
-  }
 }
 
 body > .underlay > header {
-  padding-top: 32px;
-  padding-bottom: 32px;
+  padding-top: 26px;
+  padding-bottom: 26px;
 
   color: white;
 
   > nav {
     flex: 1;
+
     > * {
       font-weight: 600;
-      margin-right: 40px;
+      margin-right: 20px;
+      padding: 6px 10px 6px 10px;
+      white-space: nowrap;
     }
   }
 
   > nav, > .social-links {
-    color: $primary-color;
+    color: white;
+
+    span {
+      background-color: rgba(black, 0.1);
+    }
     a:link, a:hover, a:visited {
-    	color: white;
+      color: white;
     }
   }
 }

data/assets/img/external-link.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7 0H1.7V2H6.3L0 8.3L1.4 9.7L7.7 3.4V8H9.7V1C9.7 0.4 9.3 0 8.7 0Z" transform="translate(12.6001) scale(2)" fill="#FF6357"/>
+<path d="M14 15H1C0.4 15 0 14.6 0 14V1C0 0.4 0.4 0 1 0H5V2H2V13H13V10H15V14C15 14.6 14.6 15 14 15Z" transform="translate(0 2) scale(2)" fill="#FF6357"/>
+</svg>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-open-project
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 1.0.0.pre.pre
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-05-29 00:00:00.000000000 Z
+date: 2018-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -121,20 +121,23 @@ files:
 - _includes/home-hub.html
 - _includes/home-project.html
 - _includes/index-page-hero.html
+- _includes/index-page-item-filter.html
 - _includes/legal.html
 - _includes/logo.html
 - _includes/nav-page-link.html
 - _includes/post-card.html
+- _includes/project-nav.html
 - _includes/social-links.html
+- _includes/software-card-hub.html
 - _includes/symbol.svg
 - _includes/title.html
 - _layouts/blog-index.html
 - _layouts/default.html
 - _layouts/home.html
-- _layouts/index-page.html
 - _layouts/page.html
 - _layouts/post.html
 - _layouts/product.html
+- _layouts/project-index.html
 - _layouts/software-index.html
 - _layouts/spec-index.html
 - _layouts/spec.html
@@ -149,6 +152,7 @@ files:
 - assets/fa/fa-brands.js
 - assets/fa/fa-solid.js
 - assets/fa/fontawesome.js
+- assets/img/external-link.svg
 homepage: https://github.com/riboseinc/jekyll-theme-open-project/
 licenses:
 - MIT
@@ -164,9 +168,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.6.14.1