mirror of
https://github.com/siderolabs/talos.git
synced 2025-12-07 02:21:14 +01:00
docs: add a dark theme
* Add a dark theme The latest bootstrap supports themes out of the box. Utilize the dark theme and fix our custom styles that broke in the process. * Fix the language tag 1px offset issue Remove the custom script that added the copy button and use the native solution available with the newer hugo version. That script also added the small element on top of the code blocks that showed the language, so this needed to be added back manually. Signed-off-by: Orzelius <33936483+Orzelius@users.noreply.github.com> Signed-off-by: Noel Georgi <git@frezbo.dev>
This commit is contained in:
Orzelius
Noel Georgi
parent
c76189c58a
commit
a91e8726e4
@ -1,64 +0,0 @@
|
||||
//
|
||||
// Right side toc
|
||||
//
|
||||
.td-sidebar-toc {
|
||||
border-left: 1px solid $border-color;
|
||||
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
height: calc(100vh - 10rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
order: 2;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 1.5rem;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
.td-page-meta {
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.td-toc {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: $font-weight-light;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li li {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
// Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
|
||||
> ul > li > ul > li > a {}
|
||||
|
||||
a {
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@ -1,164 +1,246 @@
|
||||
//
|
||||
// Left side navigation
|
||||
//
|
||||
.td-sidebar-nav {
|
||||
padding-right: 0.5rem;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
max-height: calc(100vh - 10rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
&__section {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
& .ul-1 ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
display: block;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
.active {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
.td-sidebar-link {
|
||||
display: block;
|
||||
padding-bottom: 0.375rem;
|
||||
|
||||
&__page {
|
||||
color: $gray-700;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
a {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > .td-sidebar-nav__section {
|
||||
padding-top: .5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
li i { // Layout of icons
|
||||
padding-right: 0.5em;
|
||||
&:before{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.td-sidebar-link.tree-root{
|
||||
font-weight: $font-weight-bold;
|
||||
color: $td-sidebar-tree-root-color;
|
||||
border-bottom: 1px $td-sidebar-tree-root-color solid;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.td-sidebar {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 4rem;
|
||||
background-color: $td-sidebar-bg-color;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid $td-sidebar-border-color;
|
||||
}
|
||||
|
||||
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&__toggle {
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
&__search {
|
||||
padding: 1rem 15px;
|
||||
@mixin themable-sidebars($text-color, $hover-color, $bg-color, $border-color) {
|
||||
//
|
||||
// Left side navigation
|
||||
//
|
||||
.td-sidebar-nav {
|
||||
padding-right: 0.5rem;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
order: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
z-index: 10;
|
||||
height: calc(100vh - 6rem);
|
||||
max-height: calc(100vh - 10rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex: 0 1 320px;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
.td-search-box {
|
||||
width: 100%;
|
||||
&__section {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
& .ul-1 ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
display: block;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
.active {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-root {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.td-sidebar-link {
|
||||
display: block;
|
||||
padding-bottom: 0.375rem;
|
||||
|
||||
&__page {
|
||||
color: $text-color;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > .td-sidebar-nav__section {
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
ul:not(.ul-1, .ul-0) {
|
||||
&, li label { // Layout of icons
|
||||
padding-right: 0.5em;
|
||||
&:before{
|
||||
margin-left: -1.5rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td-sidebar-link.tree-root{
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-color;
|
||||
border-bottom: 1px $border-color solid;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#content-desktop {display: block;}
|
||||
#content-mobile {display: none;}
|
||||
.td-sidebar {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 4rem;
|
||||
background-color: $bg-color;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px $border-color solid;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
#content-desktop {display: none;}
|
||||
#content-mobile {display: block;}
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&__toggle {
|
||||
line-height: 1;
|
||||
color: $text-color;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
&__search {
|
||||
padding: 1rem 15px;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
order: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
z-index: 10;
|
||||
height: calc(100vh - 6rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex: 0 1 320px;
|
||||
}
|
||||
|
||||
|
||||
.td-search-box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#content-desktop {display: block;}
|
||||
#content-mobile {display: none;}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
#content-desktop {display: none;}
|
||||
#content-mobile {display: block;}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Right side toc
|
||||
//
|
||||
.td-sidebar-toc {
|
||||
background-color: $bg-color;
|
||||
border-left: 1px solid $border-color;
|
||||
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
order: 2;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 1.5rem;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
.td-page-meta {
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.td-toc {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: $font-weight-light;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li li {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
// Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
|
||||
> ul > li > ul > li > a {}
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: $hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
@include themable-sidebars(white, mix($secondary, white, 80), mix($gray-900, black, 90), black);
|
||||
}
|
||||
|
||||
html[data-bs-theme="light"] {
|
||||
@include themable-sidebars( black, $secondary, $gray-100, $gray-300)
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import 'td/code-dark';
|
||||
|
||||
.version-banner {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
@ -12,3 +14,29 @@
|
||||
.td-page-meta__child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: $secondary !important;
|
||||
}
|
||||
|
||||
@mixin code-type($bg-color) {
|
||||
.code-type {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top: 1px solid $secondary;
|
||||
background-color: $bg-color;
|
||||
width: fit-content;
|
||||
padding-top: 1px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
@include code-type($primary)
|
||||
}
|
||||
|
||||
html[data-bs-theme="light"] {
|
||||
@include code-type($gray-100)
|
||||
}
|
||||
|
||||
@ -12,8 +12,8 @@ $primary: #281D49;
|
||||
$secondary: #F92A20;
|
||||
|
||||
$link-color: $secondary;
|
||||
$border-color: $gray-300 !default;
|
||||
$link-color-dark: mix(white, $secondary, 20);
|
||||
|
||||
$border-color: $gray-300 !default;
|
||||
$bs-bg-color-dark: #212529;
|
||||
|
||||
$td-sidebar-tree-root-color: $primary !default;
|
||||
$td-sidebar-bg-color: rgba($primary, 0.03) !default;
|
||||
$td-sidebar-border-color: $border-color !default;
|
||||
|
||||
@ -64,6 +64,8 @@ unsafe = true
|
||||
[markup.highlight]
|
||||
# See a complete list of available styles at https://xyproto.github.io/splash/all.html
|
||||
style = "solarized-dark"
|
||||
|
||||
noClasses = false
|
||||
# Uncomment if you want your chosen highlight style used for code blocks without a specified language
|
||||
# guessSyntax = "true"
|
||||
|
||||
@ -200,6 +202,8 @@ sidebar_menu_foldable = true
|
||||
# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
|
||||
sidebar_search_disable = true
|
||||
|
||||
showLightDarkModeMenu = true
|
||||
|
||||
# Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
|
||||
# This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.
|
||||
# If you want this feature, but occasionally need to remove the "Feedback" section from a single page,
|
||||
|
||||
13
website/layouts/_default/_markup/render-codeblock.html
Normal file
13
website/layouts/_default/_markup/render-codeblock.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!-- https://write.rog.gr/writing/labeling-code-blocks-in-hugo/ -->
|
||||
<figure class="highlight">
|
||||
<div class="code-type">{{ .Type }}</div>
|
||||
{{- if transform.CanHighlight .Type }}
|
||||
<pre tabindex="0" class="chroma"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">
|
||||
{{- with transform.HighlightCodeBlock . -}}
|
||||
{{ .Inner }}
|
||||
{{- end -}}
|
||||
</code></pre>
|
||||
{{- else }}
|
||||
<pre tabindex="0"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ .Inner }}</code></pre>
|
||||
{{- end }}
|
||||
</figure>
|
||||
@ -1,8 +1,3 @@
|
||||
<!--- https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/ -->
|
||||
{{ if (findRE "<pre" .Content 1) }}
|
||||
<script src="/js/clipboard.js"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ $currentVersion := index (split .Page.Path "/" ) 1 }}
|
||||
{{ $currentVersionDir := $currentVersion | printf "/%s"}}
|
||||
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
|
||||
|
||||
<!--- https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/ -->
|
||||
{{ if (findRE "<pre" .Content 1) }}
|
||||
<link rel="stylesheet" href="/css/clipboard.css">
|
||||
{{ end }}
|
||||
|
||||
<!--- https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=en#rel-canonical-link-method -->
|
||||
{{ if .Section }}
|
||||
{{ $latest_version := .Site.Params.url_latest_version }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user