// Body // —- body {
-webkit-overflow-scrolling: touch; overflow-x: hidden; box-sizing: border-box; mark { font-weight: bold; background-color: $highlight-color; } @include mobile-screen { &.menu-toggled { // Prevents scrolling main body when scrolling nav overflow: hidden; } }
}
.site-header {
// site-header should be beneath mobile-menu box-sizing: border-box; z-index: $site-header-z-index; height: $site-header-height; background: white; position: fixed; top: 0; left: 0; right: 0; border-bottom: 1px solid $divider-color; display: flex; justify-content: space-between; align-items: center; padding: 0 $site-padding; a { line-height: 1; &:hover { text-decoration: none; } } @include mobile-screen { padding: 0 $spacing 0 $large-spacing; height: $mobile-site-header-height; right: $mobile-site-header-height; } .site-header-left { display: flex; align-items: baseline; .site-header-text { color: $primary-brand-color; margin: 0; font-family: $header-font-family; font-size: 25px; } .site-last-updated { margin: 0; font-size: 11px; letter-spacing: 0.6px; color: $subheader-text-color; margin-left: $large-spacing; } @include mobile-screen { display: none; } } .site-header-right { display: flex; flex-direction: row; align-items: center; #contact-us { margin-right: calc(2 * #{$large-spacing}); font-size: 12px; color: $header-text-color; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; span { text-decoration: none; } @include mobile-screen { display: none; } } .agency-logo { max-width: 180px; max-height: 44px; } .top-mobile-btn { display: none; } @include mobile-screen { // Uncomment if u wanna put another button in the mobile header // flex-direction: row-reverse; // justify-content: space-between; width: 100%; justify-content: space-between; .agency-logo { max-width: 150px; max-height: 30px; } .top-mobile-btn { @include flex-center(); width: $mobile-site-header-height; height: $mobile-site-header-height; cursor: pointer; img { height: 24px; } } } }
}
.index .doc-header {
@include desktop-screen { display: none; }
}
// Document Header // ———– .doc-header {
position: fixed; z-index: $doc-header-z-index; top: $mobile-site-header-height; left: 0; right: 0; display: flex; justify-content: space-between; box-sizing: border-box; align-self: stretch; padding: 0 calc(2 * #{$spacing}); height: $doc-header-height; background: white; transition-duration: $site-nav-collapse-duration; transition-property: height, padding, top, left; transition-timing-function: $site-nav-collapse-timing; // to allow mobile menu to be visible outside of doc-header overflow: visible; @include mobile-screen { &.headroom--pinned { top: $mobile-site-header-height; } &.headroom--unpinned { top: -$doc-header-height; } } @include desktop-screen { padding: 0 $desktop-spacing; left: $site-nav-width; top: $site-header-height; body.menu-toggled & { left: 0; transform: none; height: $toggled-doc-header-height; padding: 0 $site-padding; .description-container { display: flex; align-items: baseline; flex: 1; flex-direction: column; } .description-title { margin-bottom: 0; margin-right: 30px; } } } @include large-screen { left: $max-site-nav-width; } background-color: $base-background-color; border-bottom: 1px solid $divider-color; // Other flex-direction: row; align-items: center; // Children .description-container { margin-right: $large-spacing; width: 100%; #document-title { font-size: 20px; color: $primary-brand-color; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; // Max two lines (currently, max one line) // line-height: 1.3em; // max-height: 2.6em; margin-bottom: 0; } #document-subtitle { margin-top: 0.5em; font-size: 11px; letter-spacing: 0.6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #9b9b9b; text-transform: uppercase; } }
}
// Site Main //———- .site-main {
position: relative; z-index: $site-main-z-index; left: 0; right: 0; top: 0; padding-top: $mobile-site-doc-header-height; padding-left: $large-spacing; padding-right: $large-spacing; padding-bottom: $spacing; height: auto; overflow: hidden; // On small screens fill the screen with content // Shift everything right when menu is open box-sizing: border-box; transition-duration: $site-nav-collapse-duration; transition-property: left, top; transition-timing-function: $site-nav-collapse-timing; // On medium screens fill the residual space // Expand to fill when the menu is closed @include desktop-screen { left: $site-nav-width; padding-top: $site-doc-header-height; padding-left: $desktop-spacing; padding-right: $desktop-spacing + $body-sidebar-right-padding; padding-bottom: $large-spacing; width: 100vw - $site-nav-width; height: auto; body.menu-toggled & { left: 0; padding-top: $toggled-doc-header-height + $site-header-height; padding-left: $body-full-view-padding; padding-right: calc(#{$body-full-view-padding} + #{$body-sidebar-right-padding}); transform: none; width: 100vw; height: auto; } } @include large-screen { left: $max-site-nav-width; padding-left: $body-padding; padding-right: calc(#{$body-padding} + #{$body-sidebar-right-padding}); width: calc(100vw - #{$max-site-nav-width}); } h1 { padding-top: calc(1.6 * #{$block-spacing}); } h2 { padding-top: calc(1.4 * #{$block-spacing} + #{$mobile-site-header-height}); } h3 { padding-top: calc(1.2 * #{$block-spacing} + #{$mobile-site-header-height}); } h4 { padding-top: calc(1 * #{$block-spacing} + #{$mobile-site-header-height}); } h5 { padding-top: calc(0.8 * #{$block-spacing} + #{$mobile-site-header-height}); } h6 { padding-top: calc(0.6 * #{$block-spacing} + #{$mobile-site-header-height}); } a { text-decoration: underline; // This css part looks complicated but is required to prevent highlighting // text with inline links to include padding-top &[href*="#"]:before { display: inline; content: ""; text-decoration: none; position: relative; top: -$mobile-site-header-height; visibility: hidden; } } h2, h3, h4, h5, h6 { margin-top: -$mobile-site-header-height; } @include desktop-screen { h1 { padding-top: calc(2 * #{$block-spacing}); } h2 { padding-top: calc(1.8 * #{$block-spacing} + #{$site-doc-header-height}); } h3 { padding-top: calc(1.6 * #{$block-spacing} + #{$site-doc-header-height}); } h4 { padding-top: calc(1.4 * #{$block-spacing} + #{$site-doc-header-height}); } h5 { padding-top: calc(1.2 * #{$block-spacing} + #{$site-doc-header-height}); } h6 { padding-top: calc(1 * #{$block-spacing} + #{$site-doc-header-height}); } a[href*="#"]:before { top: -$site-doc-header-height; } h2, h3, h4, h5, h6 { margin-top: calc(-1 * #{$site-doc-header-height}); } }
}
.site-branding {
position: relative; padding-top: $large-spacing; padding-bottom: $large-spacing; font-size: calc(#{$base-font-size} - 5px); color: $secondary-text-color; text-align: center; transition-duration: $site-nav-collapse-duration; transition-timing-function: $site-nav-collapse-timing; a img { height: 16px; margin-bottom: -3px; cursor: pointer; } @include desktop-screen { padding-right: calc(#{$body-padding} + #{$body-sidebar-right-padding}); font-size: calc(#{$base-font-size} - 3px); text-align: right; a img { height: 18px; } body.menu-toggled & { padding-right: calc(#{$body-full-view-padding} + #{$body-sidebar-right-padding}); } }
}
//custom-scrollbar /* width */ ::-webkit-scrollbar {
width: 14px;
}
/* Track */ ::-webkit-scrollbar-track {
background: rgb(250, 250, 250);
}
/* Handle */ ::-webkit-scrollbar-thumb {
background: #d8d8d8; -webkit-border-radius: 12px; border-radius: 12px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: #c8c8c8; -webkit-border-radius: 12px; border-radius: 12px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box;
}
//Examples .examples-box {
padding: 10px; border: 1px solid $divider-color; border-radius: $base-border-radius;
}
//Videos .opendoc-video {
text-align: center; overflow: hidden;
}