minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-31 18:04:52 +03:00
Code Activity

Add docs switch menu (#881)

Browse Source 
Fixes https://github.com/minio/docs/issues/842

Also made some changes to the dark-mode/read-mode icons to maintain the
consistency with KES docs UI.

**Preview:**
<img width="627" alt="Screenshot 2023-06-15 at 14 19 32"
src="https://github.com/minio/docs/assets/13393018/708d8991-c6af-406f-a474-65449c38c06c">

<img width="627" alt="Screenshot 2023-06-15 at 14 19 36"
src="https://github.com/minio/docs/assets/13393018/63f9db43-1408-4e96-81ad-9ecb7c39b9f0">


**Updating the list:**

Edit the `docs` array in `default.conf.py@268`.
This commit is contained in:
Rushan
2023-06-16 10:36:35 +00:00
committed by GitHub
parent afc7a03071
commit edbbe90742
18 changed files with 191 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
source/_static/img/icons/dark-mode-active.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" xmlns:v="https://vecta.io/nano"><path d="M8.5 2.898c-.167 0-.306-.055-.415-.164s-.164-.248-.164-.415V.58c0-.167.055-.306.164-.415S8.333 0 8.5 0s.306.055.415.164.164.248.164.415v1.739c0 .167-.055.306-.164.415s-.248.164-.415.164zm3.96 1.642c-.116-.116-.174-.251-.174-.406s.058-.29.174-.406l1.217-1.236c.116-.116.254-.174.415-.174s.299.058.415.174.174.251.174.406-.058.29-.174.406L13.272 4.54c-.116.116-.251.174-.406.174s-.29-.058-.406-.174zm2.222 4.54c-.167 0-.306-.055-.415-.164s-.164-.248-.164-.415.055-.306.164-.415.248-.164.415-.164h1.739c.167 0 .306.055.415.164S17 8.333 17 8.5s-.055.306-.164.415-.248.164-.415.164h-1.739zM8.5 17c-.167 0-.306-.055-.415-.164s-.164-.248-.164-.415v-1.739c0-.167.055-.306.164-.415s.248-.164.415-.164.306.055.415.164.164.248.164.415v1.739c0 .167-.055.306-.164.415S8.667 17 8.5 17zM3.728 4.54L2.492 3.323c-.116-.116-.174-.254-.174-.415s.058-.299.174-.415.251-.174.406-.174.29.058.406.174L4.54 3.728c.116.116.174.251.174.406s-.058.29-.174.406c-.116.103-.254.155-.415.155s-.293-.052-.396-.155zm9.968 9.968l-1.236-1.236c-.116-.116-.174-.251-.174-.406s.058-.29.174-.406c.103-.103.235-.155.396-.155s.299.052.415.155l1.256 1.217c.116.116.171.254.164.415s-.061.299-.164.415c-.116.116-.254.174-.415.174s-.299-.058-.415-.174h0zM.58 9.08c-.167 0-.306-.055-.415-.164S0 8.667 0 8.5s.055-.306.164-.415.248-.164.415-.164h1.739c.167 0 .306.055.415.164s.164.248.164.415-.055.306-.164.415-.248.164-.415.164H.58zm1.912 5.428c-.116-.116-.174-.251-.174-.406s.058-.29.174-.406l1.236-1.236c.103-.103.235-.155.396-.155s.299.052.415.155c.116.116.174.254.174.415s-.058.299-.174.415l-1.217 1.217c-.116.116-.254.174-.415.174s-.299-.058-.415-.174h0zM8.5 13.136a4.47 4.47 0 0 1-3.284-1.352A4.47 4.47 0 0 1 3.864 8.5a4.47 4.47 0 0 1 1.352-3.284A4.47 4.47 0 0 1 8.5 3.864a4.47 4.47 0 0 1 3.284 1.352A4.47 4.47 0 0 1 13.136 8.5a4.47 4.47 0 0 1-1.352 3.284A4.47 4.47 0 0 1 8.5 13.136zm0-1.159a3.35 3.35 0 0 0 2.463-1.014A3.35 3.35 0 0 0 11.977 8.5a3.35 3.35 0 0 0-1.014-2.463A3.35 3.35 0 0 0 8.5 5.023a3.35 3.35 0 0 0-2.463 1.014A3.35 3.35 0 0 0 5.023 8.5a3.35 3.35 0 0 0 1.014 2.463A3.35 3.35 0 0 0 8.5 11.977z" fill="#8a93a4"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
source/_static/img/icons/dark-mode.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" xmlns:v="https://vecta.io/nano"><path d="M15 11.37c-2.675 1.035-5.709.395-7.737-1.633S4.594 4.675 5.629 2C2.532 3.199.648 6.349 1.055 9.644s3.003 5.891 6.298 6.3 6.446-1.474 7.647-4.57v-.005z" stroke="#101d32" stroke-width="2" fill="none"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 309 B

1
source/_static/img/icons/reading-mode-active.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" stroke="#101d32" fill="none" xmlns:v="https://vecta.io/nano"><path d="M3.5 4.5h2m-2 2h3m-3 2h1m-1 2h3" stroke-linecap="round"/><g stroke-width="1.75"><path d="M9 1.842v11.789"/><path d="M9 2.167C5.608.151 2.486 1.18 1.177 2.044 1.063 2.119 1 2.25 1 2.389v11.516c0 .371.434.58.738.379 2.625-1.733 5.701-.89 7.126.043a.22.22 0 0 0 .262-.016c2.455-2.06 5.484-.918 7.194.1a.45.45 0 0 0 .679-.385V2.404c0-.147-.073-.286-.196-.362C13.659.103 10.306 1.304 9 2.167z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 533 B

1
source/_static/img/icons/reading-mode.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" stroke="#101d32" fill="none" stroke-width="1.75" xmlns:v="https://vecta.io/nano"><path d="M9 1.842v11.789"/><path d="M9 2.167C5.608.151 2.486 1.18 1.177 2.044 1.063 2.119 1 2.25 1 2.389v11.516c0 .371.434.58.738.379 2.625-1.733 5.701-.89 7.126.043a.22.22 0 0 0 .262-.016c2.455-2.06 5.484-.918 7.194.1a.45.45 0 0 0 .679-.385V2.404c0-.147-.073-.286-.196-.362C13.659.103 10.306 1.304 9 2.167z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 460 B

1
source/_static/scss/includes/_base.scss
View File

@ -34,4 +34,5 @@ body {
background-color: var(--body-bg);
display: flex;
flex-direction: column;
word-break: break-word;
}

140
source/_static/scss/includes/_header.scss
View File

@ -29,19 +29,130 @@
}
.header__logo {
display: flex;
& > svg {
width: 6.25rem;
fill: var(--logo-fill-color);
}
}
.header__top__title {
line-height: 100%;
font-weight: 500;
color: var(--header-headings-color);
margin-left: 0.5rem;
font-size: $font-size-sm;
padding-bottom: 0.1rem;
.header__docs {
position: relative;
font-size: $font-size-xs;
margin-left: 1rem;
@include breakpoint-min(breakpoints(lg)) {
position: absolute;
bottom: -2.425rem;
right: 1.75rem;
z-index: 1;
&:before {
content: "Go to:";
position: absolute;
left: -2.75rem;
top: 0.35rem;
font-weight: $font-weight-medium;
color: var(--headings-color);
pointer-events: none;
}
}
&:hover {
.header__docs__menu {
display: flex;
}
.header__docs__current {
border-radius: $border-radius $border-radius 0 0;
}
}
}
:root {
&.read-mode {
.header__docs {
@include breakpoint-min(breakpoints(lg)) {
right: 4.5rem;
}
}
}
&:not(.dark-mode) {
.header__docs {
@include breakpoint-max(breakpoints(lg)) {
.header__docs__current {
--docs-menu-border-color: #{rgba($white, 0.25)};
--docs-menu-bg: transparent;
--headings-color: #{$white};
}
&:hover {
.header__docs__current {
--docs-menu-bg: #{$white};
--headings-color: $headings-color;
}
}
}
}
}
}
.header__docs__current {
color: var(--headings-color);
font-weight: $font-weight-medium;
border: 1px solid var(--docs-menu-border-color);
border-radius: $border-radius;
display: flex;
white-space: nowrap;
align-items: center;
height: 2rem;
padding: 0.075rem 0.75rem 0;
background-color: var(--docs-menu-bg);
& > svg {
margin-top: 1px;
margin-left: 0.5rem;
}
}
.header__docs__menu {
position: absolute;
margin-top: -1px;
left: 0;
top: 100%;
width: 100%;
flex-direction: column;
gap: 1px;
display: none;
background-color: var(--nav-dropdown-bg);
padding: 0.25rem;
z-index: 10;
border-radius: 0 0 $border-radius $border-radius;
border: 1px solid var(--docs-menu-border-color);
& > a {
padding: 0.35rem 1.6rem 0.35rem 0.6rem;
display: flex;
align-items: center;
border-radius: $border-radius;
white-space: nowrap;
color: var(--text-muted-color);
border: 1px solid transparent;
&:hover {
background-color: var(--theme-light-bg);
color: var(--text-color);
}
&.current {
background-color: var(--theme-light-hover-bg);
pointer-events: none;
color: var(--text-color);
}
}
}
.header__actions {
@ -65,26 +176,13 @@
}
.icon--switch {
transition: background-color 500ms, border-color 500ms;
background-color: var(--header-actions-icon-bg);
border-color: var(--header-actions-icon-border-color);
color: var(--text-color);
&:hover {
background-color: var(--header-actions-icon-hover-bg);
}
& > svg {
stroke: var(--header-actions-icon-stroke);
stroke-width: var(--header-actions-icon-stroke-width);
&:last-child {
& > path {
&:last-child {
fill: var(--header-actions-icon-path-fill);
}
}
}
}
}
}

8
source/_static/scss/includes/_misc.scss
View File

@ -49,8 +49,8 @@
// Buttons icons
// ----------------------
.icon {
width: 1.75rem;
height: 1.75rem;
width: 2rem;
height: 2rem;
border: 1px solid transparent;
border-radius: $border-radius;
background-color: transparent;
@ -79,11 +79,9 @@
& > svg {
transform: scale(1);
opacity: 1;
transition: transform 300ms, opacity 300ms;
position: absolute;
&:last-child:not(:only-child) {
transform: scale(0);
opacity: 0;
}
}
@ -92,12 +90,10 @@
& > svg,
& > img {
&:first-child {
transform: scale(0);
opacity: 0;
}
&:last-child {
transform: scale(1);
opacity: 1;
}
}

10
source/_static/scss/includes/_theme.scss
View File

@ -12,14 +12,14 @@ $theme-properties: (
--headings-color: $black #E3EEEF,
// Theme
--theme-light-bg: $light-300 $dark-200,
--theme-light-hover-bg: $light-500 $dark-300,
--theme-light-bg: $light-200 $dark-200,
--theme-light-hover-bg: $light-300 $dark-300,
// Header
--header-bg: $header-light-bg $dark-0,
--logo-fill-color: $theme-red $white,
--header-actions-icon-bg: $white $dark-0,
--header-actions-icon-border-color: transparent $dark-500,
--header-actions-icon-border-color: transparent $dark-300,
--header-actions-icon-stroke: $black $dark-500,
--header-actions-icon-stroke-width: 1.5 1.25,
--header-actions-icon-path-fill: $header-light-bg $dark-500,
@ -129,6 +129,10 @@ $theme-properties: (
--is-meta-key-border-color: #c5cad0 $dark-400,
--is-search-border-color: $light-500 $dark-300,
--is-search-focus-box-shadow: rgba($light-500, 0.35) rgba($dark-100, 0.75),
// Docs menu
--docs-menu-border-color: $light-300 $dark-300,
--docs-menu-bg: $white transparent,
);
// Activate dark/light themes

2
source/_static/scss/includes/_toc.scss
View File

@ -74,6 +74,8 @@ div.topic {
flex: 1;
position: relative;
border: none;
padding: 0;
margin: 0.25rem 0;
.topic-title {
@include breakpoint-max(breakpoints(lg)) {