jekyll-theme-open-project 1.3.4 → 2.0

data/_sass/jekyll-theme-open-project.scss

@@ -6,15 +6,14 @@ $code-listing-background-color: rgba($main-font-color, 0.03);
 $code-listing-border-color: lighten($main-font-color, 70);
 
 $primary-color: lightblue !default;
-$primary-dark-color: navy !default;
+$primary-dark-color: $primary-color !default;
 $accent-color: red !default;
 
 $warning-color: red !default;
 $important-color: orange !default;
 
-$header-background: $primary-dark-color !default;
-$hero-background: $primary-dark-color !default;
-$superhero-background: $primary-dark-color !default;
+$main-background: linear-gradient(315deg, $accent-color 0%, $primary-color 74%) !default;
+$header-background: $main-background !default;
 
 $hub-software--primary-color: lightsalmon !default;
 $hub-software--primary-dark-color: tomato !default;
@@ -24,14 +23,16 @@ $hub-specs--primary-color: lightpink !default;
 $hub-specs--primary-dark-color: palevioletred !default;
 $hub-specs--hero-background: $hub-specs--primary-dark-color !default;
 
-$gutter: 30px;
+$gutter: 15px;
 $featured-cols: 3;
 $featured-cols-narrow: 2;
-$grid-cols: 4;
+$grid-cols: 3;
 
 $widescreen-breakpoint: 1140px + $gutter * 2;
 $bigscreen-breakpoint: 900px + $gutter * 2;
 
+$external-links-side-margin: 16px;  // for external links
+
 
 @import "open-project-base";
 @import "open-project-header-footer";
@@ -43,38 +44,7 @@ main {
   /* Generic */
 
   .layout--home > & {
-    > section {
-      z-index: 1;
-    }
-    > .underlay {
-      > svg {
-        display: none;
-      }
-      @media screen and (min-width: $bigscreen-breakpoint) {
-        position: relative;
-
-        > * {
-          z-index: 1;
-        }
-        > svg {
-          display: block;
-          z-index: 0;
-          position: absolute;
-        }
-
-        // Top section(s) background
-        &.top-background {
-          padding-bottom: 80px;
-          background-color: #F7F7F7;
-
-          > svg {
-            top: 0;
-            width: 100%;
-            height: 35vw;
-          }
-        }
-      }
-    }
+    padding-bottom: 2em;
 
     > .featured-posts {
       @extend .main-section;
@@ -142,10 +112,6 @@ main {
 
   .layout--home > & {
     padding-bottom: 50px;
-
-    @media screen and (min-width: $bigscreen-breakpoint) {
-      padding-bottom: 0;
-    }
   }
 
   .layout--spec-index > &,
@@ -362,7 +328,7 @@ main {
 .site--hub {
 
   &.layout--home > main {
-    > .underlay > .featured-projects {
+    > .featured-projects {
       @extend .main-section;
 
       > .title:after {
@@ -524,62 +490,119 @@ main {
 
 /* Project */
 
-.site--project {
-  &.layout--home > main > .underlay.summary-background {
-    padding-top: 20px;
+body.site--project {
+  &.layout--home {
+    background: $main-background;
+  }
+
+  &.layout--home > main {
+    .item {
+      background: linear-gradient(120deg, white 20%, rgba(white, 0.9) 80%, rgba(white, 0.75) 100%);
+
+      display: flex;
+      flex-flow: column nowrap;
+      padding: 1em 1.5em;
+
+      .body {
+        flex: 1;
+      }
 
-    > svg {
-      > polygon {
-        fill: #F7F7F7;
+      .title {
+        font-size: 24px;
+        font-weight: normal;
       }
-      bottom: 0;
-      width: 100%;
-      height: 35vw;
-    }
 
-    .summary {
-      font-size: 18px;
+      .docs-nav {
+        flex-basis: 100%;
+        margin-bottom: 1em;
+        @include item-nav-toc();
+      }
 
-      ul.you-can {
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        li {
-          flex: 1 1 auto;
-          &:first-child {
-            margin-right: 40px;
+      .external-links {
+        @include item-external-links();
+        margin-left: -1.5em;
+        margin-right: -1.5em;
+
+        .nav-items {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap-reverse;
+
+          a {
+            white-space: nowrap;
           }
         }
       }
-      .cta {
-        margin-top: 30px;
-        .button {
-          @include cta-button($primary-dark-color, white);
-          border-radius: 25px;
-          border: 1px solid $primary-color;
+    }
+
+    > .custom-intro {
+      .summary {
+        font-size: 20px;
+        color: #fefefe;
+
+        .cta {
+          margin-top: 30px;
+          .button {
+            @include cta-button($primary-dark-color, white);
+            border-radius: 25px;
+            border: 1px solid $primary-color;
+          }
+        }
+        p:first-child:first-letter {
+          color: $accent-color;
+          float: left;
+          font-size: 75px;
+          line-height: 60px;
+          padding-right: 8px;
+          margin-left: -5px;
+        }
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          p:first-child {
+            padding-right: 20vw;
+          }
         }
       }
-      p:first-child:first-letter {
-        color: $accent-color;
-        float: left;
-        font-size: 75px;
-        line-height: 60px;
-        padding-right: 8px;
-        margin-left: -5px;
-      }
-      @media screen and (min-width: $bigscreen-breakpoint) {
-        p:first-child {
-          padding-right: 20vw;
+    }
+  }
+
+  &.site--project--one-software.layout--home > main {
+    // On single-software project sites, the only software item on landing
+    // is made part of the page rather than being constrained to a card widget.
+    // No own background means it’ll appear on landing page’s overall dark background.
+
+    .custom-intro {
+      .summary {
+        a {
+          @include static-link-color(white);
         }
-        ul.you-can {
-          flex-flow: row nowrap;
+      }
+    }
+
+    .item {
+      background: none;
+      padding: 0;
+
+      .docs-nav {
+        ul.nav-items > li {
+          > .item-title {
+            font-size: 24px;
+
+            a {
+              @include static-link-color(white);
+            }
+          }
         }
       }
+      .external-links {
+        @include item-external-links(true);
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }
 
-  &.layout--home > main > .underlay > .software,
-  &.layout--home > main > .underlay > .specs,
+  &.layout--home > main > .software,
+  &.layout--home > main > .specs,
   &.layout--software-index > main,
   &.layout--spec-index > main {
     > .items {
@@ -595,15 +618,11 @@ main {
       }
 
       .item {
-        @extend .item-card;
-        @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
-
-        padding: 30px 32px;
+        flex: 1;
         text-align: left;
 
         header > .title {
           margin: 0;
-          font-size: 20px;
         }
         .body {
           font-size: 16px;
@@ -612,12 +631,53 @@ main {
     }
   }
 
-  &.layout--home > main > .underlay > .software,
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items .item {
+      @extend .item-card;
+      @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+
+      padding: 30px 32px;
+      flex: unset;
+    }
+  }
+
+  &.layout--home > main > .software {
+    > .items {
+      .item {
+        $logo-space: 64px;
+        $logo-side: 32px;
+
+        header {
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+
+          .title {
+            flex: 1;
+          }
+          .logo-container {
+            width: $logo-space;
+            flex: 0;
+            padding: 4px ($logo-space - $logo-side) 4px 0;
+
+            .logo > :only-child {
+              width: $logo-side;
+              height: $logo-side;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+    }
+  }
+
   &.layout--software-index > main {
     > .items {
       .item {
         $logo-space: 132px;
         $logo-side: 48px;
+
         .logo-container {
           .logo > :only-child {
             width: $logo-side;
@@ -638,10 +698,24 @@ main {
     }
   }
 
-  &.layout--home > main > .underlay > .software,
-  &.layout--home > main > .underlay > .specs {
+  &.layout--home > main > .software,
+  &.layout--home > main > .specs {
     @extend .main-section;
 
+    > .title {
+      padding: .4em 1.5em;
+      background: rgba(white, 0.9);
+      font-size: 110%;
+      font-weight: normal;
+      align-self: flex-start;
+      color: lighten($main-font-color, 20);
+      margin-bottom: $gutter;
+
+      a {
+        @include static-link-color($primary-dark-color);
+      }
+    }
+
     .items {
       @extend .item-grid;
       justify-content: center;
@@ -665,7 +739,7 @@ main {
           // Show third element
           &:nth-child(3) {
             opacity: 1;
-            display: block;
+            display: flex;
           }
         }
       }

data/_sass/open-project-base.scss

@@ -18,6 +18,10 @@ abbr {
   cursor: help;
 }
 
+.svg-inline--fa {
+  vertical-align: -.15em;
+}
+
 a {
   &:link, &:hover, &:visited {
     color: $primary-dark-color;
@@ -35,6 +39,10 @@ a {
     > .item {
       margin-right: $gutter;
 
+      &:only-child {
+        flex: 1;
+      }
+
       &.featured-item::before {
         // Reposition featured item label for grid layout
         // !important overrides .item-card which ends up with higher specificity
@@ -57,12 +65,14 @@ a {
 }
 
 .main-section {
-  margin-top: 50px;
+  margin-top: 1em;
+  margin-bottom: 1em;
 
   display: flex;
   flex-flow: column nowrap;
 
   > .puny-label {
+    // DEPRECATED: Used only on hub site, old design
     align-self: center;
 
     text-align: center;
@@ -83,6 +93,12 @@ a {
 
     position: relative;
 
+    color: white;
+
+    a {
+      @include static-link-color(white);
+    }
+
     .more-link {
       margin-left: .5em;
       font-size: 70%;
@@ -141,7 +157,7 @@ a {
   }
 
   &.featured-item::before {
-    content: "👍 featured";
+    content: "featured";
 
     position: absolute;
     bottom: 2.5em;
@@ -165,6 +181,11 @@ a {
         height: 32px;
         vertical-align: middle;
         margin-right: 10px;
+
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
       }
       .project-title {
         font-size: 14px;
@@ -342,7 +363,10 @@ a {
     }
 
     a {
-      border-bottom: 1px solid;
+      &:not(.image) {
+        border-bottom: 1px solid;
+      }
+
       &[rel=external] {
         border-bottom-style: dotted;
         &:link, &:hover, &:focus, &:active {

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

@@ -5,14 +5,11 @@ body > .underlay > footer {
   .site-logo {
     margin: 0;
     padding: 0;
-
     line-height: .5;
     font-size: 24px;
-
-    color: white;
     font-weight: 600;
-
     white-space: nowrap;
+    color: white;
 
     :link, :hover, :visited {
       color: inherit;
@@ -39,29 +36,6 @@ body > .underlay > footer {
   }
 }
 
-.parent-hub-plug {
-  .logo {
-    display: block;
-  }
-  body > .underlay.footer & {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    white-space: nowrap;
-    line-height: .5;
-    opacity: 0.8;
-    color: white;
-
-    @media screen and (min-width: $bigscreen-breakpoint) {
-      margin-right: 50px;
-    }
-
-    .label {
-      margin-right: 20px;
-      font-weight: 500;
-    }
-  }
-}
 
 .underlay.header {
   body > & {
@@ -72,7 +46,6 @@ body > .underlay > footer {
       color: white;
 
       > .text {
-        padding-bottom: 50px;
         position: relative;
 
         > .title {
@@ -83,7 +56,7 @@ body > .underlay > footer {
         }
         > .desc {
           font-size: 20px;
-          margin: 0;
+          margin: 0 0 20px 0;
         }
         > .cta {  // Call to action.
           margin-top: 40px;
@@ -98,76 +71,61 @@ body > .underlay > footer {
             &:last-child {
               margin-right: 0;
             }
+            &:only-child {
+              @include cta-button($primary-dark-color, white);
+            }
           }
         }
       }
     }
   }
   .site--hub.layout--software-index > & {
+    padding-bottom: 2em;
     background: $hub-software--hero-background;
   }
+  .site--hub.layout--blog-index > &,
+  .site--hub.layout--project-index > & {
+    padding-bottom: 2em;
+  }
   .site--hub.layout--spec-index > & {
+    padding-bottom: 2em;
     background: $hub-specs--hero-background;
   }
-  .layout--home > & {
-    background: $superhero-background;
+  .site--hub.layout--home > & {
+    padding-bottom: 2em;
+    background: $main-background;
   }
-
-  .site--hub > & {
-    > .hero { text-align: center; }
+  .site--project.layout--software-index > &,
+  .site--project.layout--spec-index > &,
+  .site--project.layout--blog-index > & {
+    padding-bottom: 2em;
+  }
+  .site--project.layout--home > & {
+    background: none;
   }
 
-  .site--hub.layout--home > & {
+  .site--project.layout--home > & {
     > .hero {
-      text-align: left;
-      @media screen and (min-width: $bigscreen-breakpoint) {
-        padding-bottom: 50px;
+      .text {
+        margin-top: 1.5em;
+        margin-bottom: 2em;
       }
     }
   }
-  .layout--home > & {
+  
+  .site--hub.layout--home > & {
     > .hero {
-      .illustration {
-        display: none;
-      }
+      text-align: left;
+
       @media screen and (min-width: $bigscreen-breakpoint) {
-        display: flex;
-        flex-flow: row nowrap;
-        position: relative;
-        .text {
-          z-index: 4;
-        }
-        .illustration {
-          display: block;
-          position: absolute;
-        }
-      }
-    }
-  }
-  @media screen and (min-width: $bigscreen-breakpoint) {
-    .site--hub.layout--home > & > .hero {
-      .illustration {
-        bottom: 100px;
-        right: -15%;
-        svg {
-          width: 700px;
-        }
-      }
-    }
-    .site--project.layout--home > & > .hero {
-      .illustration {
-        bottom: 40px;
-        right: 0;
-        svg {
-          width: 200px;
-        }
+        padding-bottom: 50px;
       }
     }
   }
 }
 
 body > .underlay.footer {
-  background: #2E333B;
+  background: rgba(black, 0.4);
 }
 
 body > .underlay > header {
@@ -176,18 +134,16 @@ body > .underlay > header {
   z-index: 5;
   // Higher than hero, otherwise Algolia search pop-up might have stuff over it
 
-  align-items: flex-start;
+  align-items: center;
   flex-flow: row nowrap;
   justify-content: space-between;
 
-  color: white;
-
   > button.hamburger {
     border: 0;
     background: transparent;
-    color: white;
     font-size: inherit;
     z-index: 20;
+    color: white;
   }
 
   > .hamburger-menu {
@@ -197,11 +153,11 @@ body > .underlay > header {
     right: 0;
     transform: translateY(-100%);
     transition: transform .8s cubic-bezier(0.23, 1, 0.32, 1);
+    color: white;
 
     height: 100vh;
     overflow: hidden;
     z-index: 10;
-    color: white;
     background: rgba($primary-dark-color, 0.95);
 
     display: flex;
@@ -268,7 +224,7 @@ body > .underlay > header {
       font-size: inherit;
       line-height: inherit;
       border: 0;
-      background-color: white;
+      color: white;
     }
   }
 
@@ -306,11 +262,12 @@ body > .underlay > header {
   > .social-links {
     color: white;
     display: none;
+    white-space: nowrap;
 
     .active {
       background-color: rgba(black, 0.1);
     }
-    a:link, a:hover, a:visited {
+    a:link, a:visited, a:hover {
       color: white;
     }
   }
@@ -331,13 +288,36 @@ body > .underlay > footer {
   padding-top: 50px;
   padding-bottom: 50px;
 
-  align-items: center;
+  align-items: flex-start;
   flex-flow: column nowrap;
 
-  color: #909B9C;
+  color: white;
 
   a:link, a:visited, a:hover {
-    color: #909B9C;
+    color: white;
+  }
+
+  .parent-hub-plug {
+    .logo {
+      display: block;
+    }
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    white-space: nowrap;
+    line-height: .5;
+    opacity: 0.8;
+    color: white;
+
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      margin-right: 50px;
+    }
+
+    .label {
+      margin-right: 20px;
+      font-weight: 500;
+    }
   }
 
   .legal {
@@ -352,8 +332,6 @@ body > .underlay > footer {
     margin-bottom: 1em;
 
     .copyright {
-      text-align: center;
-
       .copyright-head, .copyright-tail {
         white-space: nowrap;
       }
@@ -362,12 +340,10 @@ body > .underlay > footer {
     nav {
       display: flex;
       flex-flow: row wrap;
-      justify-content: space-around;
-    }
 
-    @media screen and (min-width: $bigscreen-breakpoint) {
-      margin-top: 0;
-      margin-bottom: 0;
+      > * {
+        margin-right: 40px;
+      }
     }
 
     @media screen and (min-width: $widescreen-breakpoint) {
@@ -376,16 +352,9 @@ body > .underlay > footer {
       nav {
         display: block;
       }
-      nav > * {
-        margin-right: 40px;
-      }
       .copyright {
         margin-right: 40px;
       }
     }
   }
-
-  @media screen and (min-width: $bigscreen-breakpoint) {
-    flex-flow: row nowrap;
-  }
 }