mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-12-23 20:30:15 +00:00
docs: Add a side bar to the docs.gtk.org landing page
Make it look like the API references hosted on docs.gtk.org.
This commit is contained in:
Emmanuele Bassi
parent
a6727326e3
commit
3668541eaa
138
.gitlab-ci/pages/gtk-logo.svg
Normal file
138
.gitlab-ci/pages/gtk-logo.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user