| /* |
| * Layout: Responsive media thresholds |
| */ |
| |
| $media-size-tablet-start: 920px; |
| $media-size-desktop-start: 1000px; |
| $media-size-max-width: 1280px; |
| |
| // Adjust this value to control spacing around "whiskNodes" sections |
| // TODO: only use -Y on "bottom" of each section, rename to "bottom" |
| $whisk-nodes-padding-base-Y: 20px; |
| $whisk-nodes-padding-base-X: 10px; |
| $whisk-nodes-padding-tablet-X: 20px; |
| |
| // padding: (top, right, bottom, left) |
| $whisk-nodes-main-content-padding-base: 10px 10px 10px 10px; |
| $whisk-nodes-main-content-padding-tablet: 10px 20px 10px 20px; |
| |
| // TODO: see if we can eliminate this special case |
| $whisk-nodes-h3-margin-bottom: 30px; |
| |
| /* |
| * Layout: Main Content |
| */ |
| |
| $main-width: 100%; |
| |
| // Max width of <main> content elements, overrides 100% in _base.scss |
| // Note: the 'image-wrapper' will automatically consume the remaining % for horizontal (block) layout |
| $main-content-width-desktop: 60%; |
| $main-content-width-tablet: 50%; |
| |
| // margin: (top, right, bottom, left) |
| $main-image-wrapper-margin-base: 10px 10px 10px 10px; |
| |
| /* |
| * Layout: Header |
| */ |
| |
| $header-single-row-height: 60px; |
| $header-multi-row-height: $header-single-row-height + 76px; |
| |
| // Allow for a fixed top banner on all content pages |
| $whisk-header-base-padding-top: $header-multi-row-height; |
| $whisk-header-tablet-padding-top: $header-multi-row-height; |
| $whisk-header-desktop-padding-top: $header-single-row-height; |
| $whisk-header-base-padding-X: $whisk-nodes-padding-base-X; |
| |
| /* |
| * Layout: Footer |
| */ |
| |
| // padding (top-bottom, left-right) |
| $whisk-footer-base-padding-base: 20px 20px; |
| $whisk-footer-base-padding-tablet: 20px 20px; |
| |
| /* |
| * Layout: Body |
| */ |
| |
| $full-width-paddingX: 10px; |
| |
| /* |
| * Layout: Logo |
| */ |
| |
| // Note: this is the actual size of the .PNG file which has built-in spacing |
| // so we do not need to add any margins/padding/borders. |
| $logo-relative-filename: "/images/logo/apache-openwhisk-shadowed.svg"; |
| $logo-width: 240px; |
| $logo-height: 60px; |
| |
| /* |
| * Theme Colors |
| */ |
| |
| $color-blue-dark: #29558f; |
| $color-blue-black: #0b1828; |
| $color-blue-hover: transparentize($color-blue-dark, 0.94); |
| $color-blue-gray-light: #eff2f5; |
| $color-blue-gray-medium: #455973; |
| $color-blue-gray-dark: #131920; |
| $color-blue-gray-light-text: #9da6ab; |
| $color-blue-dark-text: #00091a; |
| $color-white: #fff; |
| $color-gray-percent-56: #959595; |
| $color-gray-percent-70: #b2b2b2; |
| $color-gray-percent-76: #c2c2c2; |
| $color-gray-percent-78: #c6c6c6; |
| $color-gray-percent-82: #d0d0d0; |
| $color-gray-percent-94: #efefef; |
| $color-gray-percent-96: #f5f5f5; |
| $color-darksalmon: #8e7ae9; |
| $color-darkgoldenrod: #b8860b; |
| $color-darkred: #ff0000; |
| $color-darkorange: #ff8c00; |
| |
| /* |
| * Logo Colors |
| */ |
| |
| $color-logo-deeper-steel-blue: #325c80; |
| $color-logo-deeper-sky-blue: #5aaafa; |
| $color-logo-deeper-sea-green: #008571; |
| $color-logo-deeper-aquamarine: #6eedd8; |
| |
| /* |
| * Theme Colors |
| */ |
| |
| $color-fg-base-light-text: ghostwhite; |
| $color-bg-base-main: $color-white; |
| $color-bg-base-image-wrapper: $color-white; |
| $color-bg-base-content: ghostwhite; |
| $color-bg-base-img: transparent; |
| $color-bg-tablet-main: $color-white; |
| $color-bg-desktop-main: $color-white; |
| |
| $color-header-bg: $color-blue-dark; |
| $color-header-bg-section-logo: transparent; |
| $color-header-bg-section-menu-text: transparent; |
| $color-header-bg-section-menu-icons: transparent; |
| $color-header-fg: white; |
| $color-header-icon-bg: $color-blue-gray-medium; |
| $color-header-icon-border: white; |
| $color-header-icon-bg-image: transparent; |
| |
| $color-bg-tablet-image-wrapper-border: 8px solid white; |
| // TODO: include in theme palette |
| $color-anchors: #2955d7; |
| |
| /* |
| * Fonts |
| */ |
| |
| $font-family-default: "Roboto", sans-serif; |
| $font-family-code: "Courier New", Courier, monospace; |
| $font-size-default: 14px; |
| $font-weight-default: 300; |
| $font-weight-bold: 500; |
| $line-height-default: 22px; |
| |
| /* |
| * Text |
| */ |
| |
| $h1-font-size: 32px; |
| $h1-line-height: normal; |
| |
| $h2-font-size: 28px; |
| $h2-line-height: normal; |
| |
| $h3-font-size: 24px; |
| $h3-line-height: 32px; |
| |
| $h4-font-size: 22px; |
| $h4-line-height: 30px; |
| |
| $h5-font-size: 16px; |
| $h5-line-height: 24px; |
| |
| $h6-font-size: $font-size-default; |
| $h6-line-height: 24px; |
| |
| $p-font-size: $font-size-default; |
| $p-font-weight: $font-weight-default; |
| $p-line-height: $line-height-default; |
| |
| $p-left-indent: 2em; |
| |
| /* |
| * Header |
| */ |
| $header-base-h1-font-size: 32px; |
| $header-base-h1-font-weight: 300; |
| $header-base-h1-font-style: normal; |
| $header-base-h1-line-height: 42px; |
| |
| $header-base-h5-font-size: 14px; |
| $header-base-h5-font-weight: 300; |
| $header-base-h5-font-style: normal; |
| $header-base-h5-line-height: 28px; |
| |
| $header-tablet-h1-font-size: $header-base-h1-font-size + 4px; |
| $header-tablet-h1-font-weight: $header-base-h1-font-weight; |
| $header-tablet-h1-font-style: $header-base-h1-font-style; |
| $header-tablet-h1-line-height: $header-base-h1-line-height + 2px; |
| |
| $header-tablet-h5-font-size: $header-base-h5-font-size + 2px; |
| $header-tablet-h5-font-weight: $header-base-h5-font-weight; |
| $header-tablet-h5-font-style: $header-base-h5-font-style; |
| $header-tablet-h5-line-height: $header-base-h5-line-height; |
| |
| /* |
| * Index |
| */ |
| |
| $index-menu-width: 220px; |
| |
| // position menu relative to header |
| $index-menu-margin: 10px; |
| $index-menu-padding: 8px; |
| |
| $index-menu-top-offset-base: $header-multi-row-height + 10px; |
| $index-menu-top-offset-desktop: $header-single-row-height + 10px; |
| $indexed-content-top-offset-base: -$index-menu-top-offset-base - 20px; |
| $indexed-content-top-offset-desktop: -$index-menu-top-offset-desktop - 20px; |
| |
| // left offset matches main body nodes |
| $index-menu-left-offset: $whisk-nodes-padding-base-X; |
| $index-menu-font-size: 12.5px; |
| $index-menu-font-weight: 500; |
| $index-menu-font-letter-spacing: 0.5px; |
| |
| $index-menuitem-padding: 2px; |
| $index-menuitem-line-height: normal; |
| $index-menuitem-font-weight-hover: 400; |
| |
| $color-index-bg: $color-bg-base-content; |
| $color-index-fg: $color-blue-gray-dark; |
| $color-index-bg-highlight: $color-blue-gray-medium; |
| $color-index-fg-highlight: $color-white; |
| $color-index-border: transparent; |
| $color-index-list-bg: transparent; |
| $color-index-list-border: transparent; |
| $color-index-item-bg: transparent; |
| $color-index-item-border: transparent; |
| |
| $index-border: 0px solid $color-index-list-border; |
| $index-item-border: 2px solid $color-index-item-border; |
| |
| /* |
| * Index (collapsible menus) |
| */ |
| |
| $color-menu-collapsible-fg: white; |
| $color-menu-collapsible-bg: $color-blue-dark; |
| $color-menu-collapsible-hover-bg: $color-blue-gray-medium; |
| $color-menuitem-collapsible-border: 1px solid transparent; |
| |
| /* |
| * Terminal |
| */ |
| |
| // TODO if we adopt a color, we should add it to our theme colors |
| $color-terminal-bg: #001a33; |
| $color-terminal-fg: $color-white; |
| $terminal-padding: 8px 8px 8px 8px; |
| $terminal-default-border: 1px solid $color-blue-gray-light; |
| $terminal-width: 700px; |
| $terminal-margin-bottom: 10px; |
| $terminal-font-weight: 300; |
| $terminal-font-size: 14px; |
| $terminal-line-height: 140%; |
| $terminal-pre-margin: 0px; |
| $terminal-line-number-padding: 10px; |
| |
| /* |
| * Image Wrapper |
| */ |
| |
| // prevent images from renmdering too large using width to determine scale |
| $image-wrapper-width: 100%; |
| $image-wrapper-height: 100%; |
| $image-wrapper-max-width: 500px; |
