@import 'open-project-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; font-smoothing: antialiased; 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(); }
}