@import url('https://fonts.googleapis.com/css?family=Inconsolata'); $font-family: Helvetica, Arial, sans-serif !default; $font-family-source: Inconsolata, monospace; $main-font-color: #000; $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: $primary-color !default; $accent-color: red !default; $warning-color: red !default; $important-color: orange !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; $hub-software--hero-background: $hub-software--primary-dark-color !default; $hub-specs--primary-color: lightpink !default; $hub-specs--primary-dark-color: palevioletred !default; $hub-specs--hero-background: $hub-specs--primary-dark-color !default; $gutter: 15px; $featured-cols: 3; $featured-cols-narrow: 2; $grid-cols: 3; $grid-cols-narrow: 2; $widescreen-breakpoint: 1140px + $gutter * 2; $bigscreen-breakpoint: 800px + $gutter * 2; $external-links-side-margin: 16px; // for external links @import "open-project-base"; @import "open-project-header-footer"; @import "headroom"; main { /* Generic */ .layout--home > & { padding-bottom: 2em; > .featured-posts { @extend .main-section; .items { @extend .item-grid; justify-content: center; } .item { @extend .item-card; @extend .post-card; @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08)); padding: 32px 30px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); .header { font-size: 22px; } .body, .meta { font-size: 15px; } @media screen and (min-width: $bigscreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} ); // Hide third element (there’re at most 3) &:nth-child(3) { opacity: 0; display: none; } } @media screen and (min-width: $widescreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} ); // Show third element &:nth-child(3) { opacity: 1; display: flex; } } } } } .layout--spec-index > &, .layout--software-index > &, .layout--blog-index > &, .layout--product > &, .layout--post > &, .layout--spec > &, .layout--project-index > &, .docs-page > & { padding-bottom: 50px; @media screen and (min-width: $bigscreen-breakpoint) { padding-bottom: 100px; } } .layout--home > & { padding-bottom: 50px; } .layout--spec-index > &, .layout--software-index > & { > .filter-header { // Shown when a tag is selected. background-color: #fafafa; font-size: 80%; box-shadow: 0 4px 40px -14px rgba(0, 0, 0, 0.4); border-radius: .5em; margin-top: -.5em; .title { font-weight: normal; text-align: center; .tag { white-space: nowrap; font-weight: bold; .namespace { font-weight: normal; } &:before { content: "“"; font-weight: normal; } &:after { content: "”"; font-weight: normal; } } a.show-all { white-space: nowrap; } } } > .item-filter { padding: 18px 2em; background-color: #F3F3F3; align-self: stretch; text-align: left; .namespace, ul.tags { font-size: 14px; } .namespace { display: flex; flex-flow: row nowrap; align-items: flex-start; margin-top: .5em; .namespace-title { margin-right: 14px; } &.empty { display: none; } &:first-child { margin-top: 0; } } ul.tags { flex: 1; list-style: none; margin: 0; padding: 0; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; text-overflow: ellipsis; > li { display: inline; margin: 0; padding: 0; > * { font-weight: 700; margin: 0 4px; padding: 3px 10px 3px 10px; white-space: nowrap; &:first-child { margin-left: -10px; } } > a { color: grey; } } &.scrolled { text-overflow: unset; } } } } // Item filter: color override for selected tags > .item-filter ul.tags li > span { .layout--software-index > & { color: $hub-software--primary-dark-color; background-color: rgba($hub-software--primary-color, 0.1); } .layout--spec-index > & { color: $hub-specs--primary-dark-color; background-color: rgba($hub-specs--primary-color, 0.1); } } .layout--blog-index > & { > .items { @extend .item-grid; @extend .index-item-grid; .item { @extend .item-card; @extend .post-card; @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08)); padding: 32px 30px 16px 30px; .header { font-size: 22px; } .body { font-size: 15px; } @media screen and (min-width: $bigscreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} ); margin-bottom: $gutter; } @media screen and (min-width: $widescreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} ); margin-bottom: $gutter; } } } > .items.one-row { justify-content: center; } } .layout--post > & { > article { @extend .main-article; > header { > .title { margin-bottom: 14px; } > .meta { @extend .post-meta-row; margin-bottom: 36px; } } aside.social-links { position: relative; top: -10px; margin-bottom: 14px; .ico-ext { display: none; } @media screen and (min-width: $bigscreen-breakpoint) { // "Remove" from the flow, and offset to the left $height: 100px; height: $height; width: 80px; margin-bottom: -$height; top: 10px; left: -140px; display: flex; flex-flow: column nowrap; align-items: flex-start; } > .ico { margin-right: 5px; @media screen and (min-width: $bigscreen-breakpoint) { margin-right: 0; margin-bottom: 5px; } .fa-layers { > .fa-circle { color: $primary-color; } > :not(.fa-circle) { color: white; } } } } } } } /* Hub */ .site--hub { &.layout--home > main { > .featured-projects { @extend .main-section; > .title:after { border-bottom-color: rgba($primary-dark-color, 0.12); } .items { @extend .item-grid; justify-content: center; } .item { @extend .item-card; @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12)); padding: 40px 32px; text-align: center; display: flex; flex-flow: column nowrap; box-sizing: border-box; @media screen and (min-width: $bigscreen-breakpoint) { flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} ); } .logo { display: inline-block; height: 80px; width: 80px; // Without this, some items’ logos don’t conform to above dimensions overflow: hidden; } header > .title { font-size: 24px; margin: 0; } .body { flex: 1; font-size: 16px; margin-bottom: 1em; overflow: hidden; text-overflow: ellipsis; @media screen and (min-width: $bigscreen-breakpoint) { height: 100px; padding-bottom: 0; } } .cta-view-project { text-align: center; .button { display: inline-block; padding: 8px 18px; border-radius: 4px; font-size: 16px; font-weight: 700; color: white; background-color: $accent-color; } } } } > .other-projects { @extend .main-section; @extend .with-symbol-background; .items { @extend .item-grid; } > .title:after { border-bottom-color: rgba($primary-color, 0.12); } } } &.layout--software-index > main, &.layout--spec-index > main { > .items { @extend .item-grid; @extend .index-item-grid; .item { @extend .item-card; @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08)); padding: 16px 30px 22px 30px; .header { font-size: 18px; } .body { font-size: 15px; } @media screen and (min-width: $bigscreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$grid-cols-narrow} - #{$gutter} ); margin-bottom: $gutter; } @media screen and (min-width: $widescreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} ); margin-bottom: $gutter; } } } } &.layout--project-index > main { .items { @extend .item-grid; @extend .index-item-grid; } } &.layout--project-index > main, &.layout--blog-index > main, &.layout--software-index > main, &.layout--spec-index > main { > .items { @extend .with-symbol-background; } } &.layout--home > main > .other-projects, &.layout--project-index > main { .items.one-row { justify-content: center; } .item { @extend .item-card; @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08)); padding: 32px 30px; text-align: center; .logo { display: inline-block; height: 60px; width: 60px; } header > .title { font-size: 18px; margin: 0; } .body { font-size: 15px; } @media screen and (min-width: $bigscreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} ); } } } } /* Project */ 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; } .title { font-size: 24px; font-weight: normal; word-break: break-word; } .docs-nav { flex-basis: 100%; margin-bottom: 1em; @include item-nav-toc(); } .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; } } } } > .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; } } } } } &.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); } } } .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 > .software, &.layout--home > main > .specs, &.layout--software-index > main, &.layout--spec-index > main { > .items { > hr { // Separates featured items, listed initially, from the rest width: 10em; margin: 40px auto; border-style: solid; border-color: $primary-color; background-color: $primary-color; color: $primary-color; box-shadow: 2px 2px 0 3px $primary-color; } .item { flex: 1; text-align: left; header > .title { margin: 0; } .body { font-size: 16px; } } } } &.layout--software-index > main, &.layout--spec-index > main { > .items .item { display: block; } } &.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; flex-shrink: 0; .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; height: $logo-side; } } @media screen and (min-width: $bigscreen-breakpoint) { padding-left: $logo-space; .logo-container { float: left; margin-left: -$logo-space; padding: 8px (($logo-space - $logo-side) / 2); } } } } } &.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; > .item { @media screen and (min-width: $bigscreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} ); // Hide third element (there’re at most 3) &:nth-child(3) { opacity: 0; display: none; } } @media screen and (min-width: $widescreen-breakpoint) { box-sizing: border-box; flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} ); // Show third element &:nth-child(3) { opacity: 1; display: flex; } } } } } &.layout--software-index > main, &.layout--spec-index > main { > .items { @extend .index-item-grid; } } &.layout--spec > main > article { @extend .main-article; } &.docs-page > main { @include docs-page($primary-dark-color); } }