jekyll-theme-rop 2.1.15

data/_sass/rop-base.scss

@@ -0,0 +1,572 @@
+@import 'rop-mixins';
+
+$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+body {
+  font-family: $font-family;
+  font-size: 15px;
+  line-height: 1.6;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  color: $main-font-color;
+}
+
+abbr {
+  cursor: help;
+}
+
+.svg-inline--fa {
+  vertical-align: -.15em;
+}
+
+a {
+  &:link, &:hover, &:visited {
+    color: $primary-dark-color;
+    text-decoration: none;
+  }
+}
+
+.item-grid {
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    margin: 0 -#{$gutter} 0 0;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    > .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
+        top: 0 !important;
+        right: 0 !important;
+        left: auto !important;
+        bottom: auto !important;
+      }
+    }
+  }
+}
+
+.index-item-grid {
+  margin-top: 40px;
+  padding: 0;  // Override padding set by main section
+
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    margin-top: 80px;
+  }
+}
+
+.main-section {
+  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;
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: $primary-color;
+  }
+
+  > .title {
+    align-self: center;
+
+    text-align: center;
+    font-weight: 600;
+
+    margin-top: 0;
+    margin-bottom: 1em;
+
+    position: relative;
+
+    color: white;
+
+    a {
+      @include static-link-color(white);
+    }
+
+    .more-link {
+      margin-left: .5em;
+      font-size: 70%;
+    }
+
+    &: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;
+  }
+}
+
+.with-symbol-background {
+  position: relative;
+
+  > * {
+    z-index: 1;
+    position: relative;
+  }
+  > svg {
+    z-index: 0;
+    position: absolute;
+    top: -38px;
+    right: -60px;
+    height: 525px;
+    width: 525px;
+    path {
+      fill: rgba($primary-color, 0.08);
+    }
+  }
+}
+
+.item-card {
+  background: white;
+
+  display: flex;
+  flex-flow: column nowrap;
+
+  position: relative;
+  overflow: hidden;
+
+  .card-body {
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+  .body {
+    flex: 1;
+  }
+
+  &:link, &:hover, &:visited {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &.featured-item::before {
+    content: "featured";
+
+    position: absolute;
+    bottom: 2.5em;
+    right: 2em;
+    padding: 2px 6px;
+    font-size: 12px;
+    background: linear-gradient(135deg, rgba($primary-color, 0.7) 0%, rgba($primary-dark-color, 0.9) 100%);
+    color: white;
+    font-weight: bold;
+  }
+
+  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;
+
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+      }
+      .project-title {
+        font-size: 14px;
+        font-weight: 600;
+        flex: 1;
+
+        color: $primary-color;
+        .layout--software-index & {
+          color: $hub-software--primary-color;
+        }
+        .layout--spec-index & {
+          color: $hub-specs--primary-color;
+        }
+      }
+    }
+    > .title {
+      font-weight: 600;
+      font-size: 20px;
+      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;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      > li {
+        display: inline;
+        font-weight: 600;
+        margin: 0;
+        padding: 0;
+
+        white-space: nowrap;
+
+        .namespace {
+          color: lighten($main-font-color, 50%);
+          font-weight: normal;
+        }
+
+        &::after {
+          content: " • ";
+          margin: 0 4px;
+          color: grey;
+          font-weight: normal;
+        }
+        &:last-child::after {
+          content: "";
+          margin: 0;
+        }
+
+        color: $primary-color;
+
+        .site--hub.layout--software-index & {
+          color: $hub-software--primary-color;
+        }
+        .site--hub.layout--spec-index & {
+          color: $hub-specs--primary-color;
+        }
+      }
+    }
+  }
+}
+
+.post-meta-row {
+  color: grey;
+  font-size: 14px;
+
+  .date {
+    white-space: nowrap;
+  }
+
+  .authors {
+    .author {
+      white-space: nowrap;
+      display: inline-block;
+      margin: .2em 0;
+
+      .author-name {
+        margin-right: 10px;
+        white-space: nowrap;
+
+        font-weight: 600;
+        color: $primary-color;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .author-avatar {
+        margin-right: 10px;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+
+        display: inline-block;
+        vertical-align: middle;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.post-card {
+  position: relative;
+
+  &.has-parent-project {
+    padding-top: 20px;
+  }
+  &.has-cover-image {
+    .cover-image {
+      display: none;
+    }
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      position: relative;
+
+      .card-body {
+        margin-left: calc(50% + #{$gutter} / 2 + 30px);
+      }
+      .cover-image {
+        display: block;
+        margin: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 50%;
+
+        img {
+          display: block;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+  .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;
+  }
+}
+
+.tbd {
+  @include tbd();
+}
+
+.main-article {
+  max-width: 750px;
+
+  > header {
+    .title {
+      font-size: 36px;
+      font-weight: 600;
+      margin-bottom: 36px;
+    }
+  }
+  .body {
+    font-size: 18px;
+    line-height: 1.65;
+
+    > p:first-child, > .paragraph:first-child p:only-child {
+      margin-top: 0;
+    }
+
+    code {
+      @include code-snippet();
+    }
+
+    a {
+      &:not(.image) {
+        border-bottom: 1px solid;
+      }
+
+      &[rel=external] {
+        border-bottom-style: dotted;
+        &:link, &:hover, &:focus, &:active {
+          .ico-ext {
+            font-size: 50%;
+            vertical-align: text-top;
+            position: relative;
+            left: .15em;
+          }
+        }
+      }
+    }
+
+    pre {
+      @include code-snippet-container();
+    }
+
+    dl {
+      dd {
+        margin-left: 1.25em;
+      }
+    }
+    ul, ol {
+      padding-left: 1.25em;
+
+      li {
+        margin: .25em 0;
+
+        > p:first-child {
+          margin-top: 0;
+        }
+        > p:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    dl {
+      dd {
+        table,
+        p {
+          margin-top: .5em;
+          margin-bottom: .5em;
+          font-size: 90%;
+        }
+      }
+    }
+    blockquote {
+      margin-left: 1.25em;
+    }
+
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      dl dd {
+        margin-left: 2em;
+      }
+      blockquote {
+        margin-left: 2em;
+      }
+      ul, ol {
+        padding-left: 2em;
+      }
+    }
+
+    table {
+      $border-color: lighten($main-font-color, 80);
+
+      border-collapse: collapse;
+      width: 100%;
+
+      margin-top: 1em;
+      margin-bottom: 1em;
+
+      p {
+        margin: 0;
+      }
+
+      th, td {
+        text-align: left;
+        padding: .5em;
+      }
+      tr {
+        border-bottom: 1px solid $border-color;
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+    }
+
+    @include asciidoc-markup($primary-dark-color);
+  }
+}
+
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+.underlay,
+section,
+header,
+footer,
+article {
+  body > &,
+  body > main > & {
+    padding: 0 2em;
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      padding: 0;
+    }
+  }
+}
+
+body {
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
+  align-items: stretch;
+
+  > main {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+body > .underlay,
+body > main,
+body > main > .underlay,
+.item-filter {
+  display: flex;
+  flex-flow: column nowrap;
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    align-items: center;
+  }
+}
+.underlay {
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    width: 100%;
+  }
+}
+
+nav.item-filter > * {
+  @include wide-container();
+}
+
+header,
+footer,
+section,
+.hero,
+article {
+  body > &,
+  body > .underlay > &,
+  body > main > &,
+  body > main > .underlay > & {
+    @include wide-container();
+  }
+}