Docs Frontend Makeover #1
Conversation
|
There was a problem hiding this comment.
The changes here are just to make the screenshots comparable to the design mockups. To be reverted.
| @@ -0,0 +1,208 @@ | |||
| :root[data-theme=dark] { | |||
There was a problem hiding this comment.
For now, all changes are scoped to the dark theme, including the layout.
| .site-title.site-title { | ||
| scale: 1.3; | ||
| gap: 0.3rem; | ||
| padding-left: 1.25rem; | ||
| color: white; | ||
| } |
There was a problem hiding this comment.
repeating the class name to increase specificity.
| mobile-starlight-toc > nav { | ||
| background-color: oklch(15% 0.0064 285.47); | ||
| } |
There was a problem hiding this comment.
Appears only in the single column layout.
| header.header { | ||
| background-color: oklch(15% 0.0064 285.47); | ||
| outline: 2px solid oklch(31.44% 0.0145 274.42); | ||
| } |
| sl-sidebar-state-persist > ul > li:has(> a) { | ||
| margin-top: initial; | ||
| &:first-child > a { | ||
| color: oklch(65.84% 0.2894 337.23); | ||
| background-color: initial; | ||
| border-radius: 4px; | ||
| outline: 2px solid oklch(65.84% 0.2894 337.23); | ||
| background-image: linear-gradient(to right, oklch(65.84% 0.2894 337.23 / 0.1), oklch(65.84% 0.2894 337.23 / 0.5)); | ||
| } | ||
|
|
||
| &:first-child > a:is(:hover, :focus) { | ||
| background-image: radial-gradient(circle at top, oklch(65.84% 0.2894 337.23), oklch(49.84% 0.2894 337.23)); | ||
| color: white; | ||
| } | ||
| } |
| sl-sidebar-state-persist ul > li > details > summary { | ||
| display: grid; | ||
| grid-auto-flow: column; | ||
| grid-template-columns: auto 1fr auto; | ||
| &::before { | ||
| content: ""; | ||
| display: block; | ||
| grid-column: 2; | ||
| height: 2px; | ||
| background-image: linear-gradient( | ||
| to left, | ||
| oklch(35.19% 0.0207 269.43), | ||
| oklch(35.19% 0.0207 269.43 / 0) | ||
| ); | ||
| } | ||
| &::after { | ||
| content: ""; | ||
| grid-column: 3; | ||
| display: block; | ||
| width: 14px; | ||
| height: 14px; | ||
| background-color: oklch(35.19% 0.0207 269.43); | ||
| } | ||
| } | ||
|
|
||
| .caret { | ||
| display: none; | ||
| } |
| starlight-toc > nav > ul > li > a[aria-current="true"] { | ||
| color: white; | ||
| } |
| .group-label > .large, starlight-toc > nav > h2 { | ||
| color: oklch(87.3% 0 0); | ||
| text-transform: uppercase; | ||
| } |
| .sidebar-pane.sidebar-pane, .right-sidebar { | ||
| background-image: linear-gradient( | ||
| to bottom, | ||
| oklch(20% 0.0102 285.47) 0rem, | ||
| oklch(15% 0.0064 285.47) 26rem | ||
| ); | ||
| } |
There was a problem hiding this comment.
The fade effect for both the sidebars.
Quick and dirty weekend pass at matching the design shared in discord.