imfreedom/docs.imfreedom.org
Clone
Summary
Browse
Changes
Graph
Add a landing page based off of the docs.gtk.org site
2021-10-10, Gary Kramlich
71566ce93ef9
Add a landing page based off of the docs.gtk.org site
/*
* SPDX-FileCopyrightText: 2021 GNOME Foundation
*
* SPDX-License-Identifier: LGPL-2.1-or-later
*/
@
import
url
(
"fonts.css"
)
;
/*********************************
* LIGHT THEME
*********************************/
:
root
{
/* colors */
--text-color
:
#333
;
--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.5
em
;
/* boxes, e.g. code blocks */
--box-bg
:
rgba
(
135
,
135
,
135
,
0.085
);
--box-radius
:
0.35
rem
;
--box-padding
:
0.75
rem
;
--box-margin
:
0.75
rem
0
;
--box-text-color
:
#111
;
/* typography */
--body-font-family
:
"Noto Serif"
,
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Roboto
,
"Helvetica Neue"
,
Arial
,
"Noto Sans"
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
,
"Noto Color Emoji"
;
--body-font-scale
:
0.95
;
--body-font-size
:
calc
(
var
(
--body-font-scale
)
*
clamp
(
16
px
,
1
vw
,
20
px
));
--body-font-weight
:
normal
;
--monospace-font-family
:
"Source Code Pro"
,
monospace
;
--monospace-font-size
:
calc
(
0.86
*
var
(
--body-font-size
));
/* Monospace fonts are very different in terms of font-sizes. Adjust this value to scale it */
--heading-font-family
:
"Red Hat Display"
,
var
(
--body-font-family
);
--heading-weight
:
900
;
--heading-font-scale
:
1.05
;
--heading-small-font-family
:
var
(
--heading-font-family
);
--heading-small-weight
:
600
;
--heading-small-font-scale
:
1
;
--heading-table-font-family
:
var
(
--heading-font-family
);
--heading-table-weight
:
600
;
--heading-docblock-color
:
#6d6d6d
;
/* docblocks have headings from source comments. we want them to differ.*/
--heading-docblock-scale
:
0.9
;
/* docblocks have headings from source comments. we want them to differ.*/
--symbol-font-family
:
var
(
--heading-font-family
);
--symbol-font-weight
:
500
;
--symbol-font-scale
:
1
;
--table-font-size
:
0.92
em
;
/* Tables often contain lots information. It's better to scale them down a big to get more sutff fitted inside */
/* misc */
--prefered-content-width
:
90
ch
;
/* The preferred width for the readable content */
--anchor-sign
:
"#"
;
}
/*********************************
* DARK THEME (overrides)
*********************************/
@
media
(
prefers-color-scheme
:
dark
)
{
:
root
{
--primary
:
rgb
(
144
,
194
,
255
);
--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
;
}
/* fix dark theme syntax highlighting with a filter (for now) */
.
highlight
pre
span
{
filter
:
brightness
(
6
);
}
}
/*********************************
* GENERAL STYLING
*********************************/
*,
*
:
before
,
*
:
after
{
box-sizing
:
border-box
;
}
::
-moz-selection
{
color
:
white
;
background
:
var
(
--primary
);
}
::
selection
{
color
:
white
;
background
:
var
(
--primary
);
}
::
-webkit-scrollbar
{
width
:
8
px
;
height
:
8
px
;
}
::
-webkit-scrollbar-thumb
{
border-radius
:
10
px
;
background
:
rgba
(
128
,
128
,
128
,
0.6
);
}
::
-webkit-scrollbar-thumb
:
hover
{
background
:
rgba
(
128
,
128
,
128
,
1
);
}
::
-webkit-scrollbar-track
{
background
:
rgba
(
128
,
128
,
128
,
0.15
);
}
*
{
scrollbar-width
:
initial
;
}
body
{
font
:
16
px
/
1.5
var
(
--body-font-family
);
font-weight
:
var
(
--body-font-weight
);
font-size
:
var
(
--body-font-size
);
margin
:
0
;
padding
:
0
;
position
:
relative
;
-webkit-
font-feature-settings
:
"kern"
,
"liga"
;
-moz-
font-feature-settings
:
"kern"
,
"liga"
;
font-feature-settings
:
"kern"
,
"liga"
;
color
:
var
(
--text-color
);
background
:
var
(
--body-bg
);
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-family
:
var
(
--heading-font-family
);
font-weight
:
var
(
--heading-weight
);
margin
:
1.75
em
0
0.75
em
0
;
display
:
flex
;
align-items
:
center
;
}
h1
{
font-size
:
calc
(
1.75
em
*
var
(
--heading-font-scale
));
}
header
h1
{
margin-top
:
0
;
}
h2
{
font-size
:
calc
(
1.4
em
*
var
(
--heading-font-scale
));
}
h3
{
font-size
:
calc
(
1.2
em
*
var
(
--heading-font-scale
));
}
header
h3
{
color
:
var
(
--text-color-muted
);
margin-bottom
:
0
;
}
h4
,
h5
{
font-size
:
calc
(
1
em
*
var
(
--heading-font-scale
));
}
h6
{
font-size
:
calc
(
1
em
*
var
(
--heading-small-font-scale
));
font-family
:
var
(
--heading-small-font-family
);
font-weight
:
var
(
--heading-small-weight
);
}
ol
,
ul
{
padding-left
:
1
rem
;
}
ul
ul
,
ol
ul
,
ul
ol
,
ol
ol
{
margin-bottom
:
.6
em
;
}
p
{
margin
:
0
0
.6
em
0
;
}
a
{
color
:
var
(
--primary
);
text-decoration
:
none
;
}
a
:
hover
{
text-decoration
:
underline
;
}
summary
{
outline
:
none
;
}
blockquote
{
border-left
:
3
px
solid
var
(
--primary
);
background
:
var
(
--box-bg
);
padding
:
var
(
--box-padding
);
border-radius
:
var
(
--box-radius
);
margin
:
var
(
--box--margin
);
}
code
,
pre
{
font-family
:
var
(
--monospace-font-family
);
font-size
:
var
(
--monospace-font-size
);
color
:
var
(
--box-text-color
);
}
pre
{
background
:
var
(
--box-bg
);
padding
:
var
(
--box-padding
);
border-radius
:
var
(
--box-radius
);
overflow
:
auto
;
}
code
{
background
:
var
(
--box-bg
);
padding
:
0
0.35
em
;
border-radius
:
0.35
rem
;
word-break
:
break-word
;
}
a
>
code
{
color
:
var
(
--primary
);
}
pre
pre
,
pre
code
{
padding
:
0
;
margin
:
0
;
font-size
:
1
em
;
background
:
none
;
color
:
inherit
;
}
h1
code
,
h2
code
,
h3
code
,
h4
code
,
h5
code
,
h6
code
{
font-family
:
inherit
;
font-weight
:
inherit
;
font-size
:
0.85
em
;
}
strong
,
b
{
font-weight
:
600
;
}
/* fix unwanted margins in tables, code, lists and blockquotes */
li
>
*
:
first-child
,
li
>
*
:
first-child
>
*
:
first-child
,
li
>
*
:
first-child
>
*
:
first-child
>
*
:
first-child
,
td
>
*
:
first-child
,
td
>
*
:
first-child
>
*
:
first-child
,
td
>
*
:
first-child
>
*
:
first-child
>
*
:
first-child
,
pre
>
*
:
first-child
,
pre
>
*
:
first-child
>
*
:
first-child
,
pre
>
*
:
first-child
>
*
:
first-child
>
*
:
first-child
,
blockquote
>
*
:
first-child
,
blockquote
>
*
:
first-child
>
*
:
first-child
,
blockquote
>
*
:
first-child
>
*
:
first-child
>
*
:
first-child
{
margin-top
:
0
;
}
li
>
*
:
last-child
,
li
>
*
:
last-child
>
*
:
last-child
,
li
>
*
:
last-child
>
*
:
last-child
>
*
:
last-child
,
td
>
*
:
last-child
,
td
>
*
:
last-child
>
*
:
last-child
,
td
>
*
:
last-child
>
*
:
last-child
>
*
:
last-child
,
pre
>
*
:
last-child
,
pre
>
*
:
last-child
>
*
:
last-child
,
pre
>
*
:
last-child
>
*
:
last-child
>
*
:
last-child
,
blockquote
>
*
:
last-child
,
blockquote
>
*
:
last-child
>
*
:
last-child
,
blockquote
>
*
:
last-child
>
*
:
last-child
>
*
:
last-child
{
margin-bottom
:
0
;
}
/*********************************
* PAGE STRUCTURE
*********************************/
#
body-wrapper
{
display
:
flex
;
flex-wrap
:
nowrap
;
flex-direction
:
row
;
}
#
body-wrapper
:
focus
{
outline
:
none
;
}
#
main
{
position
:
relative
;
flex-grow
:
1
;
min-width
:
0
;
box-shadow
:
0
0
134
px
rgba
(
0
,
0
,
0
,
0.1
);
}
footer
{
width
:
100
%
;
display
:
none
;
}
/*********************************
* Button
*********************************/
#
btn-to-top
{
position
:
fixed
;
bottom
:
12
px
;
right
:
32
px
;
z-index
:
1000
;
border-radius
:
50
%
;
width
:
42
px
;
height
:
42
px
;
border
:
1
px
solid
var
(
--primary
);
background
:
var
(
--box-bg
);
color
:
var
(
--text-color
);
cursor
:
pointer
;
text-transform
:
none
;
}
#
btn-to-top
>
.
up-arrow
:
after
{
content
:
"🡅"
}
/*********************************
* SIDEBAR
*********************************/
.
sidebar
{
scrollbar-width
:
thin
;
background
:
var
(
--sidebar-bg
);
border-right
:
1
px
solid
var
(
--sidebar-bg
);
min-width
:
40
ch
;
padding
:
var
(
--sidebar-padding
);
color
:
var
(
--sidebar-text-color
);
position
:
sticky
;
top
:
0
;
z-index
:
2
;
height
:
100
vh
;
overflow-y
:
auto
;
}
.
sidebar
a
,
.
sidebar
a
:
hover
{
text-decoration
:
none
;
}
.
sidebar
.
logo
{
display
:
block
;
margin
:
2
rem
auto
0
auto
;
width
:
70
%
;
}
.
sidebar
.
section
>
ul
>
li
{
margin-right
:
-10
px
;
}
.
sidebar
.
section
h3
,
.
sidebar
.
section
h5
{
text-align
:
left
;
padding-left
:
0.5
rem
;
padding-right
:
0.5
rem
;
font-weight
:
var
(
--heading-weight
);
}
.
sidebar
.
section
h5
{
font-size
:
1
em
;
margin-bottom
:
0.5
em
;
}
.
sidebar
.
namespace
>
h3
{
margin-bottom
:
0
;
padding
:
0
;
font-size
:
1.5
em
;
text-transform
:
uppercase
;
font-weight
:
900
;
}
.
sidebar
.
namespace
>
p
{
font-size
:
0.9
em
;
opacity
:
0.8
;
padding-left
:
0.5
rem
;
}
.
sidebar
.
section
{
padding-left
:
0.5
rem
;
padding-right
:
0.5
rem
;
}
.
sidebar
.
links
{
margin-bottom
:
1
rem
;
}
.
sidebar
.
section
a
{
display
:
block
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
transition
:
background-color
150
ms
ease
;
color
:
var
(
--sidebar-primary
);
border-radius
:
var
(
--box-radius
);
padding
:
0.2
rem
0.5
rem
;
margin-bottom
:
0.15
rem
;
}
.
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
:
1
px
solid
#ccc
;
border-radius
:
50
px
;
padding
:
6
px
12
px
;
display
:
inline-block
;
font-size
:
80
%
;
box-shadow
:
inset
0
1
px
3
px
#ddd
;
transition
:
border
.3
s
linear
;
}
/*********************************
* ANCHORS & TOGGLERS
*********************************/
.
anchor
,
.
md-anchor
{
position
:
relative
;
z-index
:
1
;
text-decoration
:
none
;
padding
:
0
0.5
em
;
color
:
var
(
--text-color-muted
);
}
.
anchor
:
hover
,
.
md-anchor
:
hover
{
color
:
var
(
--primary
);
}
.
anchor
:
not
(
[
href
]
),
.
md-anchor
:
not
(
[
href
]
)
{
display
:
none
;
}
.
anchor
:
before
,
.
md-anchor
:
before
{
content
:
var
(
--anchor-sign
);
/*'§'*/
}
.
toggle-wrapper
{
position
:
relative
;
}
.
collapse-toggle
{
position
:
absolute
;
right
:
0
;
left
:
-2
em
;
white-space
:
nowrap
;
text-decoration
:
none
;
font-size
:
0.8
em
;
color
:
transparent
;
}
.
collapse-toggle
>
.
inner
{
width
:
1
rem
;
height
:
1
rem
;
border-radius
:
calc
(
0.75
*
var
(
--box-radius
));
display
:
inline-flex
;
justify-content
:
center
;
align-items
:
center
;
text-align
:
center
;
vertical-align
:
middle
;
color
:
var
(
--box-text-color
);
position
:
relative
;
left
:
-0.25
rem
;
font-family
:
monospace
;
font-size
:
0.7
rem
;
font-weight
:
bold
;
background
:
var
(
--box-bg
);
}
/*********************************
* UTILITY
*********************************/
.
deprecated
>
h6
>
a
{
opacity
:
0.65
;
}
.
hidden
{
display
:
none
!important
;
}
/*********************************
* CONTENT STYLING
*********************************/
.
content
{
padding
:
2
em
4
em
;
overflow
:
visible
;
max-width
:
calc
(
var
(
--prefered-content-width
)
+
8
em
);
}
.
content
table
:
not
(
.
table-display
)
{
border-spacing
:
0
0.25
rem
;
}
.
content
td
{
vertical-align
:
top
;
}
.
content
td
:
first-child
{
padding-right
:
1
rem
;
}
.
content
td
p
:
first-child
{
margin-top
:
0
;
}
.
content
td
h1
,
.
content
td
h2
{
margin-left
:
0
;
font-size
:
1.1
em
;
}
.
content
tr
:
first-child
td
{
border-top
:
0
;
}
kbd
{
display
:
inline-block
;
padding
:
3
px
5
px
;
font
:
15
px
monospace
;
line-height
:
10
px
;
vertical-align
:
middle
;
border
:
solid
1
px
;
border-radius
:
3
px
;
box-shadow
:
inset
0
-1
px
0
;
cursor
:
default
;
}
.
content
tr
:
first-child
{
border-bottom
:
1
px
solid
rgba
(
0
,
0
,
0
,
0.35
);
}
.
content
td
{
vertical-align
:
top
;
}
.
content
td
:
first-child
{
padding-right
:
1
rem
;
}
.
content
td
p
:
first-child
{
margin-top
:
0
;
}
.
content
td
h4
,
.
content
td
h5
{
margin-left
:
0
;
font-size
:
1.1
em
;
}
.
content
tr
:
first-child
td
{
border-top
:
0
;
}
.
srclink
{
color
:
var
(
--text-color-muted
);
font-size
:
1
rem
;
font-weight
:
var
(
--body-font-weight
);
flex-grow
:
0
;
text-decoration
:
none
;
margin-left
:
auto
;
position
:
relative
;
z-index
:
1
;
}
.
meta
tr
>
td
:
not
(
:
first-child
)
{
width
:
100
%
;
}
.
meta
tr
>
td
:
first-child
{
white-space
:
nowrap
;
}
/*********************************
* DOCBLOCK STYLING
*********************************/
.
docblock
{
position
:
relative
;
text-align
:
left
;
}
.
docblock
h1
{
font-size
:
calc
(
1.3
em
*
var
(
--heading-docblock-scale
)
*
var
(
--heading-font-scale
));
}
.
docblock
h2
{
font-size
:
calc
(
1.2
em
*
var
(
--heading-docblock-scale
)
*
var
(
--heading-font-scale
));
}
.
docblock
h3
{
font-size
:
calc
(
1.1
em
*
var
(
--heading-docblock-scale
)
*
var
(
--heading-font-scale
));
}
.
docblock
h4
{
font-size
:
calc
(
1.05
em
*
var
(
--heading-docblock-scale
)
*
var
(
--heading-font-scale
));
}
.
docblock
h1
,
.
docblock
h2
,
.
docblock
h3
,
.
docblock
h4
,
.
docblock
h5
,
.
docblock
h6
{
color
:
var
(
--heading-docblock-color
)
}
.
docblock
table
{
margin
:
.25
em
0
;
max-width
:
100
%
;
font-size
:
var
(
--table-font-size
);
}
.
docblock
table
td
{
padding
:
.25
em
;
}
.
docblock
table
th
{
padding
:
.25
em
;
text-align
:
left
;
font-family
:
var
(
--heading-table-font-family
);
font-weight
:
var
(
--heading-table-weight
);
}
.
docblock
table
tr
th
:
first-child
,
.
docblock
table
tr
td
:
first-child
{
padding-left
:
0
;
}
.
docblock
table
tr
th
:
last-child
,
.
docblock
table
tr
td
:
last-child
{
padding-right
:
0
;
}
table
.
enum-members
,
table
.
results
{
border-radius
:
var
(
--box-radius
);
border
:
1
px
solid
var
(
--text-color-muted
);
border-spacing
:
0
0
!important
;
font-size
:
80
%
;
}
table
.
enum-members
tr
th
,
table
.
results
tr
th
{
border-top-color
:
var
(
--body-bg
);
background-color
:
var
(
--box-bg
);
border-bottom
:
1
px
solid
var
(
--text-color-muted
);
}
table
.
enum-members
tr
th
:
first-child
,
table
.
enum-members
tr
td
:
first-child
{
min-width
:
25
em
;
padding-left
:
.5
em
;
}
table
.
results
tr
th
:
first-child
,
table
.
results
tr
td
:
first-child
{
padding-left
:
.5
em
;
}
table
.
enum-members
tr
th
:
last-child
,
table
.
enum-members
tr
td
:
last-child
,
table
.
results
tr
th
:
last-child
,
table
.
results
tr
td
:
last-child
{
max-width
:
35
em
;
padding-right
:
.5
em
;
}
table
.
results
tr
td
code
{
font-size
:
100
%
;
}
.
docblock
ul
li
,
.
docblock
ol
li
{
padding-top
:
0.15
rem
;
padding-bottom
:
0.15
rem
;
}
.
docblock
ul
.
type
{
list-style
:
none
;
}
.
docblock
ul
.
type
li
::
before
{
content
:
"»"
;
color
:
var
(
--text-color
);
display
:
inline-block
;
width
:
1
em
;
margin-left
:
-1
em
;
}
/**************************
RESPONSIVENESS
**************************/
@
media
(
max-width
:
700px
)
{
body
{
padding-top
:
0
px
;
}
#
body-wrapper
{
flex-direction
:
column
;
overflow
:
hidden
;
}
#
main
{
width
:
100
%
;
padding
:
2
rem
;
}
.
sidebar
{
position
:
static
;
height
:
initial
;
order
:
1
;
}
}