@@ -110,3 +172,4 @@
{{site.data.guides.texts.on_the_same_topics}}
{% endif -%}
+{% endif %}
diff --git a/_sass/layouts/categories-index.scss b/_sass/layouts/categories-index.scss
new file mode 100644
index 00000000000..24b7d2cce6a
--- /dev/null
+++ b/_sass/layouts/categories-index.scss
@@ -0,0 +1,195 @@
+.categories-index {
+ display: grid;
+ grid-template-columns: 3fr 9fr;
+ gap: 2rem;
+ padding-top: 1rem;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+.categories-toc {
+ position: sticky;
+ top: 1rem;
+ align-self: start;
+ max-height: 90vh;
+ overflow-y: auto;
+ padding: 0.75rem;
+ background-color: var(--sec-background-color);
+ border-radius: 4px;
+
+ @media (max-width: 768px) {
+ position: static;
+ max-height: none;
+ }
+
+ h3 {
+ margin: 0 0 0.4rem 0;
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-color);
+ }
+
+ > ul {
+ list-style: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ display: block !important;
+
+ > li {
+ display: block !important;
+ clear: both;
+ margin-bottom: 0.35rem;
+ padding: 0;
+ float: none !important;
+
+ &::after {
+ content: none !important;
+ }
+
+ > a {
+ display: block;
+ padding: 0.15rem 0.4rem;
+ font-size: 0.85rem;
+ font-weight: 600;
+ line-height: 1.5;
+ color: var(--text-color);
+ text-decoration: none;
+ border-radius: 3px;
+
+ &:hover {
+ background-color: var(--hover-background-color, rgba(0, 0, 0, 0.05));
+ color: $link;
+ }
+ }
+
+ > ul {
+ list-style: none !important;
+ padding: 0.1rem 0 0.2rem 0.6rem !important;
+ margin: 0 !important;
+ display: flex !important;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+
+ li {
+ display: inline !important;
+ float: none !important;
+ line-height: 1;
+
+ &::after {
+ content: none !important;
+ }
+
+ a {
+ display: inline-block;
+ padding: 0.1rem 0.45rem;
+ font-size: 0.7rem;
+ line-height: 1.5;
+ color: var(--text-color);
+ opacity: 0.75;
+ text-decoration: none;
+ background-color: var(--hover-background-color, rgba(255, 255, 255, 0.08));
+ border-radius: 8px;
+
+ &:hover {
+ opacity: 1;
+ color: $white;
+ background-color: $link;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.categories-content {
+
+ .category-section {
+ margin-bottom: 2rem;
+
+ h2 {
+ margin: 0 0 0.15rem 0;
+ padding-bottom: 0.35rem;
+ border-bottom: 2px solid $grey-1;
+ font-size: 1.3rem;
+ }
+
+ .category-desc {
+ margin: 0 0 0.5rem 0;
+ color: var(--text-color);
+ opacity: 0.7;
+ font-size: 0.85rem;
+ }
+ }
+
+ .subcategory-section {
+ margin-bottom: 1rem;
+
+ h3 {
+ margin: 0 0 0.25rem 0;
+ font-size: 1.05rem;
+ color: var(--text-color);
+ }
+ }
+
+ .guide-list {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 0.5rem 0;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.1rem 1.5rem;
+
+ @media (max-width: 1100px) {
+ grid-template-columns: 1fr;
+ }
+
+ li {
+ padding: 0.2rem 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+ qs-guide {
+ display: block;
+ grid-column: unset;
+ margin: 0;
+ padding: 0;
+ background: none;
+ border: none;
+ box-shadow: none;
+ min-height: unset;
+ }
+
+ a {
+ font-weight: 500;
+ text-decoration: none;
+ color: $link;
+
+ &:hover {
+ color: $link-hover;
+ text-decoration: underline;
+ }
+ }
+
+ .guide-summary {
+ display: block;
+ color: var(--text-color);
+ opacity: 0.65;
+ font-size: 0.82rem;
+ margin-top: 0.1rem;
+ line-height: 1.3;
+
+ &::before {
+ content: none;
+ }
+ }
+ }
+
+ .guide-missing {
+ opacity: 0.4;
+ font-style: italic;
+ }
+ }
+}
diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss
index 1d41e9668d2..9ad116487e5 100644
--- a/_sass/layouts/guide.scss
+++ b/_sass/layouts/guide.scss
@@ -100,6 +100,370 @@ body.guides-configuration-reference div.guides-configuration-reference {
}
}
+// Full-width guide layout with nav sidebar
+.guide-full-width {
+ margin: 0 -13rem;
+ padding: 0 1rem;
+ overflow-x: hidden;
+ @media screen and (max-width: 1366px) {
+ margin: 0 -4rem;
+ }
+ @media screen and (max-width: 768px) {
+ margin: 0 -2rem;
+ }
+}
+
+.guide-layout {
+ display: grid;
+ grid-template-columns: 250px 1fr 300px;
+ gap: 1.5rem;
+
+ @media screen and (max-width: 1400px) {
+ grid-template-columns: 230px 1fr 250px;
+ }
+ @media screen and (max-width: 1200px) {
+ grid-template-columns: 220px 1fr;
+ }
+ @media screen and (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+.guide-nav-wrapper {
+ align-self: start;
+ justify-self: start;
+ position: sticky;
+ top: 1rem;
+ max-height: 90vh;
+ overflow-y: auto;
+ padding: 0.5rem 0;
+ width: 100%;
+ text-align: left;
+
+ @media screen and (max-width: 768px) {
+ display: none;
+ }
+}
+
+.guide-toc-wrapper {
+ align-self: start;
+ position: sticky;
+ top: 1rem;
+ max-height: 90vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+ min-width: 0;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+
+ @media screen and (max-width: 1200px) {
+ display: none;
+ }
+
+ .toc {
+ position: static;
+ margin: 0;
+ padding: 0.5rem;
+ overflow-x: hidden;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
+}
+
+.guide-main {
+ min-width: 0;
+}
+
+// Guide navigation sidebar
+.guide-nav-sidebar {
+ text-align: left;
+ width: 100%;
+
+ .guide-nav-cat {
+ margin: 0 0 0.1rem 0;
+ padding: 0;
+ border: none;
+
+ > summary {
+ display: block;
+ padding: 0.2rem 0.4rem;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text-color);
+ cursor: pointer;
+ list-style: none;
+ border-radius: 3px;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &::before {
+ content: "\f054";
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 0.6rem;
+ margin-right: 0.4rem;
+ display: inline-block;
+ transition: transform 0.15s;
+ }
+
+ &:hover {
+ background-color: var(--hover-background-color, rgba(0, 0, 0, 0.05));
+ }
+ }
+
+ &[open] > summary::before {
+ transform: rotate(90deg);
+ }
+ }
+
+ .guide-nav-subcat {
+ margin: 0 0 0 0.75rem;
+ padding: 0;
+ border: none;
+
+ > summary {
+ display: block;
+ padding: 0.15rem 0.4rem;
+ font-size: 0.8rem;
+ font-weight: 500;
+ color: var(--text-color);
+ opacity: 0.85;
+ cursor: pointer;
+ list-style: none;
+ border-radius: 3px;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &::before {
+ content: "\f054";
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 0.5rem;
+ margin-right: 0.35rem;
+ display: inline-block;
+ transition: transform 0.15s;
+ }
+
+ &:hover {
+ background-color: var(--hover-background-color, rgba(0, 0, 0, 0.05));
+ }
+ }
+
+ &[open] > summary::before {
+ transform: rotate(90deg);
+ }
+ }
+
+ ul {
+ list-style: none !important;
+ padding: 0 0 0.15rem 1rem !important;
+ margin: 0 !important;
+ display: block !important;
+
+ li {
+ display: block !important;
+ float: none !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ line-height: 1.3;
+
+ &::after {
+ content: none !important;
+ }
+
+ a {
+ display: block;
+ padding: 0.1rem 0.4rem;
+ margin: 0;
+ font-size: 0.78rem;
+ line-height: 1.3;
+ color: var(--text-color);
+ opacity: 0.7;
+ text-decoration: none;
+ border-radius: 3px;
+
+ &:hover {
+ opacity: 1;
+ color: $link;
+ }
+ }
+
+ &.active a {
+ opacity: 1;
+ color: $link;
+ font-weight: 600;
+ background-color: var(--hover-background-color, rgba(0, 0, 0, 0.05));
+ }
+ }
+ }
+}
+
+// Guide metadata bar (categories + topics labels)
+.guide-metadata-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.2rem;
+ margin-bottom: 1.5rem;
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid $grey-1;
+}
+
+.guide-meta-dropdown {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+}
+
+.guide-meta-label {
+ display: inline-block;
+ padding: 0.15rem 0.5rem !important;
+ font-size: 0.75rem !important;
+ line-height: 1.4 !important;
+ height: auto;
+ border-radius: 10px;
+ white-space: nowrap;
+ border: none !important;
+ font-family: inherit;
+ text-transform: none !important;
+ font-weight: normal !important;
+ vertical-align: baseline;
+ box-sizing: border-box;
+ cursor: default;
+ margin: 0 !important;
+ transition: none !important;
+ -webkit-appearance: none;
+ appearance: none;
+
+ &:hover, &:active, &:focus {
+ border: none !important;
+ outline: none;
+ }
+}
+
+button.guide-meta-label {
+ cursor: pointer;
+
+ &.guide-meta-noclick {
+ cursor: default;
+
+ &, &:hover, &:active, &:focus {
+ opacity: 0.5 !important;
+ }
+
+ &.guide-meta-topic, &.guide-meta-topic:hover, &.guide-meta-topic:active, &.guide-meta-topic:focus {
+ background-color: var(--hover-background-color, rgba(255, 255, 255, 0.08)) !important;
+ color: var(--text-color) !important;
+ }
+
+ &.guide-meta-category, &.guide-meta-category:hover, &.guide-meta-category:active, &.guide-meta-category:focus {
+ background-color: rgba($link, 0.2) !important;
+ color: lighten($link, 15%) !important;
+ }
+ }
+}
+
+.guide-meta-category {
+ background-color: rgba($link, 0.2);
+ color: lighten($link, 15%);
+}
+
+.guide-meta-topic {
+ background-color: var(--hover-background-color, rgba(255, 255, 255, 0.08));
+ color: var(--text-color);
+
+ &.guide-meta-noclick {
+ opacity: 0.5;
+ }
+}
+
+button.guide-meta-category:not(:disabled):hover,
+button.guide-meta-category:not(:disabled):active,
+button.guide-meta-category:not(:disabled):focus {
+ background-color: rgba($link, 0.35);
+ color: lighten($link, 25%);
+ outline: none;
+}
+
+button.guide-meta-topic:not(:disabled):hover,
+button.guide-meta-topic:not(:disabled):active,
+button.guide-meta-topic:not(:disabled):focus {
+ opacity: 1;
+ background-color: rgba($link, 0.15);
+ color: $link;
+ outline: none;
+}
+
+.guide-meta-panel {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 200;
+ min-width: 280px;
+ max-width: 400px;
+ max-height: 400px;
+ overflow-y: auto;
+ margin-top: 0.3rem;
+ padding: 0.5rem 0;
+ background-color: var(--sec-background-color, #1a1a2e);
+ border: 1px solid $grey-1;
+ border-radius: 6px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+
+ &.open {
+ display: block;
+ }
+
+ .guide-meta-panel-header {
+ padding: 0.25rem 0.75rem 0.4rem;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--text-color);
+ border-bottom: 1px solid $grey-1;
+ margin-bottom: 0.25rem;
+ }
+
+ ul {
+ list-style: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ display: block !important;
+
+ li {
+ display: block !important;
+ margin: 0 !important;
+ padding: 0 !important;
+
+ &::after {
+ content: none !important;
+ }
+
+ a {
+ display: block;
+ padding: 0.25rem 0.75rem;
+ font-size: 0.8rem;
+ color: var(--text-color);
+ text-decoration: none;
+
+ &:hover {
+ background-color: var(--hover-background-color, rgba(0, 0, 0, 0.08));
+ color: $link;
+ }
+ }
+
+ &.active a {
+ color: $link;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
// Edit page style
.editlink {
margin-left: 1.3em;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 55182f10175..b608f1c5b9a 100755
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -37,6 +37,7 @@ $baseurl: "{{ site.baseurl }}";
@import "layouts/get-started";
@import "layouts/get-started-steps";
@import "layouts/guides";
+@import "layouts/categories-index";
@import "layouts/guide";
@import "layouts/extensions";
@import "layouts/community";