docs: Add a side bar to the docs.gtk.org landing page

Make it look like the API references hosted on docs.gtk.org.

3 files changed, 277 insertions, 0 deletions

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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   id="svg6843"
+   sodipodi:version="0.32"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   version="1.0"
+   sodipodi:docname="gtk-logo.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/ebassi/Pictures/gtk-logo-256.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs6845">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="-50 : 600 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="700 : 600 : 1"
+       inkscape:persp3d-origin="300 : 400 : 1"
+       id="perspective13" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="69.874353"
+     inkscape:cy="64.313526"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     width="128px"
+     height="128px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7947" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6848">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+        <dc:date />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:creator>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:rights>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:publisher>
+        <dc:identifier />
+        <dc:source />
+        <dc:relation />
+        <dc:language />
+        <dc:subject>
+          <rdf:Bag />
+        </dc:subject>
+        <dc:coverage />
+        <dc:description />
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:contributor>
+        <cc:license
+           rdf:resource="" />
+      </cc:Work>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       sodipodi:nodetypes="ccccc"
+       id="path6976"
+       d="M 20.88413,30.82696 L 53.816977,55.527708 L 107.33282,39.060543 L 70.587303,17.177763 L 20.88413,30.82696 z"
+       style="fill:#729fcf;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.12364459;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />
+    <path
+       id="path6978"
+       d="M 22.94243,82.287118 L 20.88413,30.82696 L 53.816977,55.527708 L 53.816977,111.10486 L 22.94243,82.287118 z"
+       style="fill:#e40000;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.12364459;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />
+    <path
+       id="path6980"
+       d="M 53.816977,111.10486 L 103.21619,90.5207 L 107.33282,39.060543 L 53.816977,55.527708 L 53.816977,111.10486 z"
+       style="fill:#7fe719;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.12364459;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />
+    <path
+       sodipodi:nodetypes="ccc"
+       id="path6982"
+       d="M 23.216626,81.319479 L 70.48573,67.361442 L 103.38422,90.444516"
+       style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="cc"
+       id="path6984"
+       d="M 70.434539,17.875593 L 70.434539,66.984877"
+       style="opacity:1;fill:#babdb6;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
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
 
 <body>
   <div id="body-wrapper" tabindex="-1">
+
+    <nav class="sidebar">
+      
+      <div class="section">
+        <img src="gtk-logo.svg" class="logo"/>
+      </div>
+
+      <div class="section">
+        <h5>Sections</h5>
+        <div class="links">
+          <a href="#user-interface">User interface</a>
+          <a href="#core-libraries">Core libraries</a>
+        </div>
+      </div>
+
+    </nav>
+    
+    <button id="btn-to-top" class="hidden"><span class="up-arrow"></span></button>
+
     <section id="main" class="content">
       <header>
         <h1>GTK Documentation</h1>
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;
@@ -332,6 +341,111 @@ footer {
 }
 
 /*********************************
+ * 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
  *********************************/
 .anchor,
@@ -624,4 +738,10 @@ table.results tr td code {
     width: 100%;
     padding: 2rem;
   }
+
+  .sidebar {
+    position: static;
+    height: initial;
+    order: 1;
+  }
 }