mirror of
https://github.com/docker/docs.git
synced 2026-03-27 14:28:47 +07:00
f466f24742
* Simplify both left and right sidebars - Rewrite the sidebars to use the same CSS class instead of having two very similar classes. This involves removing all affix related attributes and functionality from the sidebars and replaced them with `position: sticky`. - The table of content elements should not be floated - Removed unused CSS rules related to the sidebars - Remove JavaScript used to resize the sidebars * Improve the mobile menu to be fixed - Simply JS used to hide/display the navigation bar on mobile viewports - The mobile menu should be fixed so it can be viewable from the bottom of the page. Before this change, you would have to scroll up to see the menu that `position: absolute` * Fix disappearing top navbar on homepage - Change the calculation of the affix offset for the navbar on the home page to ensure the navbar never leaves the viewport. This change also takes into account the change of how the sidebars' offsets are used * Fix auto scrolling on overflow * Add polyfill for 'position: sticky' on IE * Fix hamburger menu at incorrect breakpoint * Fix left nav hidden after expanding from mobile If you expand and collapse the left nav while on mobile and expand to a desktop view, the left nav would be hidden; this has been fixed * Unify navbar on homepage with rest of website
195 lines
3.1 KiB
SCSS
Executable File
195 lines
3.1 KiB
SCSS
Executable File
/*
|
|
*
|
|
* layout
|
|
*
|
|
*/
|
|
#wrapper {
|
|
transition: all 0.5s ease;
|
|
}
|
|
/*
|
|
*
|
|
* branding *********************************************************************
|
|
*
|
|
*/
|
|
|
|
.logo {
|
|
margin: 12px 10px 0 10px;
|
|
width: 160px;
|
|
}
|
|
|
|
/*
|
|
*
|
|
* Header ***********************************************************************
|
|
*
|
|
*/
|
|
|
|
.header {
|
|
animation: gradientswitch 80s infinite;
|
|
-webkit-animation: gradientswitch 80 sinfinite;
|
|
height: $global-header-height;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
@keyframes gradientswitch {
|
|
0% {
|
|
background: #0087C9;
|
|
}
|
|
16% {
|
|
background: #EF4A53;
|
|
}
|
|
32% {
|
|
background: #FFB463;
|
|
}
|
|
49% {
|
|
background: #33D5D4;
|
|
}
|
|
65% {
|
|
background: #254356;
|
|
}
|
|
81% {
|
|
background: #5B4097
|
|
}
|
|
100% {
|
|
background: #0087C9
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes gradientswitch {
|
|
0% {
|
|
background: #0087C9;
|
|
}
|
|
16% {
|
|
background: #EF4A53;
|
|
}
|
|
32% {
|
|
background: #FFB463;
|
|
}
|
|
49% {
|
|
background: #33D5D4;
|
|
}
|
|
65% {
|
|
background: #254356;
|
|
}
|
|
81% {
|
|
background: #5B4097
|
|
}
|
|
100% {
|
|
background: #0087C9
|
|
}
|
|
}
|
|
|
|
.fan {
|
|
background: linear-gradient(-120deg, rgba(245, 33, 33, 0) 87%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-110deg, rgba(27, 0, 255, 0) 85%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-103deg, rgba(255, 33, 33, 0) 84%, rgba(255, 255, 255, 0.08) 15%), radial-gradient(circle, rgba(0, 135, 201, 0) 0%, rgba(0, 135, 201, 0) 100%);
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
|
|
.columns,
|
|
.col-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.col-nav {
|
|
order: -1;
|
|
}
|
|
|
|
// .col-content {}
|
|
|
|
.col-body {
|
|
flex-direction: row;
|
|
flex: 1;
|
|
min-height: 555px;
|
|
}
|
|
.col-content {
|
|
flex: 1;
|
|
}
|
|
.col-nav,
|
|
.col-toc {
|
|
flex: 0 0 0;
|
|
}
|
|
|
|
.col-toc-hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.col-nav,
|
|
.col-toc {
|
|
flex: 0 0 17em;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 50px 50px 20px 50px;
|
|
max-width: 1024px;
|
|
min-width: 300px;
|
|
min-height: 500px;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 0 35px 25px 30px;
|
|
}
|
|
|
|
section.section {
|
|
// min-width: 380px;
|
|
// max-width: 850px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content ul {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/*
|
|
*
|
|
* sidebar ***********************************************************************
|
|
*
|
|
*/
|
|
|
|
.wrapper.right-open #sidebar-wrapper {
|
|
width: 270px;
|
|
}
|
|
|
|
|
|
.wrapper.right-open .page-content {
|
|
padding-right: 190px;
|
|
background-color: purple;
|
|
}
|
|
|
|
/*
|
|
* Sidebar
|
|
*/
|
|
|
|
.col-nav,
|
|
.col-toc {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.col-nav,
|
|
.col-toc,
|
|
.sidebar {
|
|
background-color: $bg-sidebar;
|
|
}
|
|
|
|
.col-toc {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sidebar {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 55px;
|
|
overflow: auto;
|
|
max-height: calc(100vh - 55px);
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|