diff --git a/.gitlab-ci/pages/gtk-logo.svg b/.gitlab-ci/pages/gtk-logo.svg new file mode 100644 index 0000000000..9edbe2da97 --- /dev/null +++ b/.gitlab-ci/pages/gtk-logo.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/.gitlab-ci/pages/index.html b/.gitlab-ci/pages/index.html index eb86fc2669..58dced5a1c 100644 --- a/.gitlab-ci/pages/index.html +++ b/.gitlab-ci/pages/index.html @@ -33,6 +33,25 @@ SPDX-License-Identifier: LGPL-2.1-or-later
+ + + + +

GTK Documentation

diff --git a/.gitlab-ci/pages/style.css b/.gitlab-ci/pages/style.css index 322e4e7253..8bdd485e9f 100644 --- a/.gitlab-ci/pages/style.css +++ b/.gitlab-ci/pages/style.css @@ -16,6 +16,11 @@ --text-color-muted: #999; --primary: rgb(28, 118, 228); --body-bg: #fff; + --sidebar-primary: rgb(144, 194, 255); + --sidebar-bg: #151515; + --sidebar-selected-bg: var(--primary); + --sidebar-text-color: #fafafa; + --sidebar-padding: 1.5em; /* boxes, e.g. code blocks */ --box-bg: rgba(135, 135, 135, 0.085); @@ -68,6 +73,10 @@ --text-color: #f6f6f6; --text-color-muted: #686868; --body-bg: #121212; + --sidebar-primary: rgb(144, 194, 255); + --sidebar-bg: #1e1e1e; + --sidebar-selected-bg: rgb(17, 112, 228); + --sidebar-text-color: #fafafa; --box-bg: rgba(135, 135, 135, 0.1); --box-text-color: #fff; --heading-docblock-color: #b7b7b7; @@ -331,6 +340,111 @@ footer { content: "🡅" } +/********************************* + * SIDEBAR + *********************************/ +.sidebar { + scrollbar-width: thin; + background: var(--sidebar-bg); + border-right: 1px solid var(--sidebar-bg); + min-width: 40ch; + padding: var(--sidebar-padding); + color: var(--sidebar-text-color); + position: sticky; + top: 0; + z-index: 2; + height: 100vh; + overflow-y: auto; +} + +.sidebar a, +.sidebar a:hover { + text-decoration: none; +} + +.sidebar .logo { + display: block; + margin: 2rem auto 0 auto; + width: 70%; +} + +.sidebar .section > ul > li { + margin-right: -10px; +} + +.sidebar .section h3, .sidebar .section h5 { + text-align: left; + padding-left: 0.5rem; + padding-right: 0.5rem; + font-weight: var(--heading-weight); +} + +.sidebar .section h5 { + font-size: 1em; + margin-bottom: 0.5em; +} + +.sidebar .namespace > h3 { + margin-bottom: 0; + padding: 0; + font-size: 1.5em; + text-transform: uppercase; + font-weight: 900; +} + +.sidebar .namespace > p { + font-size: 0.9em; + opacity: 0.8; + padding-left: 0.5rem; +} + +.sidebar .section { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.sidebar .links { + margin-bottom: 1rem; +} + +.sidebar .section a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + transition: background-color 150ms ease; + color: var(--sidebar-primary); + border-radius: var(--box-radius); + padding: 0.2rem 0.5rem; + margin-bottom: 0.15rem; +} + +.sidebar .section a:hover { + background-color: rgba(127, 127, 127, 0.2); + color: var(--sidebar-text-color); +} + +.sidebar .section a.current { + background-color: var(--sidebar-selected-bg); + color: white; +} + +.sidebar .search { + box-sizing: border-box; + text-align: center; +} + +.sidebar .search input[type="text"] { + border-color: transparent; + width: 100%; + border: 1px solid #ccc; + border-radius: 50px; + padding: 6px 12px; + display: inline-block; + font-size: 80%; + box-shadow: inset 0 1px 3px #ddd; + transition: border .3s linear; +} + /********************************* * ANCHORS & TOGGLERS *********************************/ @@ -624,4 +738,10 @@ table.results tr td code { width: 100%; padding: 2rem; } + + .sidebar { + position: static; + height: initial; + order: 1; + } }