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 @@
+
+
+
+
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;
+ }
}