Skip to content

Commit

Permalink
NG: Add all styles from Furo, modulo colors
Browse files Browse the repository at this point in the history
  • Loading branch information
amotl committed Aug 1, 2024
1 parent 6276e5e commit b99eb54
Show file tree
Hide file tree
Showing 30 changed files with 1,368 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//@import "print"
@import "print"
@import "screen-readers"
@import "theme"
//@import "typography"
@import "typography"
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// This file contains styles for managing print media.
////////////////////////////////////////////////////////////////////////////////
// Hide elements not relevant to print media.
////////////////////////////////////////////////////////////////////////////////
@media print
// Hide icon container.
.content-icon-container
display: none !important

// Hide showing header links if hovering over when printing.
.headerlink
display: none !important

// Hide mobile header.
.mobile-header
display: none !important

// Hide navigation links.
.related-pages
display: none !important

////////////////////////////////////////////////////////////////////////////////
// Tweaks related to decolorization.
////////////////////////////////////////////////////////////////////////////////
@media print
// Apply a border around code which no longer have a color background.
.highlight
border: 0.1pt solid var(--color-foreground-border)

////////////////////////////////////////////////////////////////////////////////
// Avoid page break in some relevant cases.
////////////////////////////////////////////////////////////////////////////////
@media print
ul, ol, dl, a, table, pre, blockquote
page-break-inside: avoid

h1, h2, h3, h4, h5, h6, img, figure, caption
page-break-inside: avoid
page-break-after: avoid

ul, ol, dl
page-break-before: avoid
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ body
@include fonts
@include spacing
@include icons
// @include admonitions
// @include default-admonition(#651fff, "abstract")
// @include default-topic(#14B8A6, "pencil")
@include admonitions
@include default-admonition(#651fff, "abstract")
@include default-topic(#14B8A6, "pencil")

// @include colors
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
// This file contains the styling for making the content throughout the page,
// including fonts, paragraphs, headings and spacing among these elements.
body
font-family: var(--font-stack)
pre,
code,
kbd,
samp
font-family: var(--font-stack--monospace)

// Make fonts look slightly nicer.
body
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale

// Line height from Bootstrap 4.1
article
line-height: 1.5

//
// Headings
//
h1,
h2,
h3,
h4,
h5,
h6
line-height: 1.25
font-family: var(--font-stack--headings)
font-weight: bold

border-radius: 0.5rem
margin-top: 0.5rem
margin-bottom: 0.5rem
margin-left: -0.5rem
margin-right: -0.5rem
padding-left: 0.5rem
padding-right: 0.5rem

+ p
margin-top: 0

h1
font-size: 2.5em
margin-top: 1.75rem
margin-bottom: 1rem
h2
font-size: 2em
margin-top: 1.75rem
h3
font-size: 1.5em
h4
font-size: 1.25em
h5
font-size: 1.125em
h6
font-size: 1em

small
opacity: 75%
font-size: 80%

// Paragraph
p
margin-top: 0.5rem
margin-bottom: 0.75rem

// Horizontal rules
hr.docutils
height: 1px
padding: 0
margin: 2rem 0
background-color: var(--color-background-border)
border: 0

.centered
text-align: center

// Links
a
text-decoration: underline

color: var(--color-link)
text-decoration-color: var(--color-link-underline)

&:visited
color: var(--color-link--visited)
text-decoration-color: var(--color-link-underline--visited)
&:hover
color: var(--color-link--visited--hover)
text-decoration-color: var(--color-link-underline--visited--hover)

&:hover
color: var(--color-link--hover)
text-decoration-color: var(--color-link-underline--hover)
&.muted-link
color: inherit
&:hover
color: var(--color-link--hover)
text-decoration-color: var(--color-link-underline--hover)
&:visited
color: var(--color-link--visited--hover)
text-decoration-color: var(--color-link-underline--visited--hover)
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
//
// The design here is strongly inspired by mkdocs-material.
.admonition, .topic
margin: 1rem auto
padding: 0 0.5rem 0.5rem 0.5rem

background: var(--color-admonition-background)

border-radius: 0.2rem
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.0625rem rgba(0, 0, 0, 0.1)

font-size: var(--admonition-font-size)

overflow: hidden
page-break-inside: avoid

// First element should have no margin, since the title has it.
> :nth-child(2)
margin-top: 0

// Last item should have no margin, since we'll control that w/ padding
> :last-child
margin-bottom: 0

.admonition p.admonition-title,
p.topic-title
position: relative
margin: 0 -0.5rem 0.5rem
padding-left: 2rem
padding-right: .5rem
padding-top: .4rem
padding-bottom: .4rem

font-weight: 500
font-size: var(--admonition-title-font-size)
line-height: 1.3

// Our fancy icon
&::before
content: ""
position: absolute
left: 0.5rem
width: 1rem
height: 1rem

// Default styles
p.admonition-title
background-color: var(--color-admonition-title-background)
&::before
background-color: var(--color-admonition-title)
mask-image: var(--icon-admonition-default)
mask-repeat: no-repeat

p.topic-title
background-color: var(--color-topic-title-background)
&::before
background-color: var(--color-topic-title)
mask-image: var(--icon-topic-default)
mask-repeat: no-repeat

//
// Variants
//
.admonition
border-left: 0.2rem solid var(--color-admonition-title)

@each $type, $value in $admonitions
&.#{$type}
border-left-color: var(--color-admonition-title--#{$type})
> .admonition-title
background-color: var(--color-admonition-title-background--#{$type})
&::before
background-color: var(--color-admonition-title--#{$type})
mask-image: var(--icon-#{nth($value, 2)})

.admonition-todo > .admonition-title
text-transform: uppercase
121 changes: 121 additions & 0 deletions src/crate/theme/rtd/crate/static/vendor/furo/styles/content/_api.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// This file stylizes the API documentation (stuff generated by autodoc). It's
// deeply nested due to how autodoc structures the HTML without enough classes
// to select the relevant items.
// API docs!
dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple)
// Tweak the spacing of all the things!
dd
margin-left: 2rem
> :first-child
margin-top: 0.125rem
> :last-child
margin-bottom: 0.75rem

// This is used for the arguments
.field-list
margin-bottom: 0.75rem

// "Headings" (like "Parameters" and "Return")
> dt
text-transform: uppercase
font-size: var(--font-size--small)

dd:empty
margin-bottom: 0.5rem
dd > ul
margin-left: -1.2rem
> li
> p:nth-child(2)
margin-top: 0
// When the last-empty-paragraph follows a paragraph, it doesn't need
// to augument the existing spacing.
> p + p:last-child:empty
margin-top: 0
margin-bottom: 0

// Colorize the elements
> dt
color: var(--color-api-overall)

.sig:not(.sig-inline)
font-weight: bold

font-size: var(--api-font-size)
font-family: var(--font-stack--monospace)

margin-left: -0.25rem
margin-right: -0.25rem
padding-top: 0.25rem
padding-bottom: 0.25rem
padding-right: 0.5rem

// These are intentionally em, to properly match the font size.
padding-left: 3em
text-indent: -2.5em

border-radius: 0.25rem

background: var(--color-api-background)
transition: background 100ms ease-out

&:hover
background: var(--color-api-background-hover)

// adjust the size of the [source] link on the right.
a.reference
.viewcode-link
font-weight: normal
width: 4.25rem

em.property
font-style: normal
&:first-child
color: var(--color-api-keyword)
.sig-name
color: var(--color-api-name)
.sig-prename
font-weight: normal
color: var(--color-api-pre-name)
.sig-paren
color: var(--color-api-paren)
.sig-param
font-style: normal

div.versionadded,
div.versionchanged,
div.deprecated,
div.versionremoved
border-left: 0.1875rem solid
border-radius: 0.125rem

padding-left: 0.75rem

p
margin-top: 0.125rem
margin-bottom: 0.125rem

div.versionadded
border-color: var(--color-api-added-border)
.versionmodified
color: var(--color-api-added)

div.versionchanged
border-color: var(--color-api-changed-border)
.versionmodified
color: var(--color-api-changed)

div.deprecated
border-color: var(--color-api-deprecated-border)
.versionmodified
color: var(--color-api-deprecated)

div.versionremoved
border-color: var(--color-api-removed-border)
.versionmodified
color: var(--color-api-removed)

// Align the [docs] and [source] to the right.
.viewcode-link, .viewcode-back
float: right
text-align: right
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.line-block
margin-top: 0.5rem
margin-bottom: 0.75rem
.line-block
margin-top: 0rem
margin-bottom: 0rem
padding-left: 1rem
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Captions
article p.caption,
table > caption,
.code-block-caption
font-size: var(--font-size--small)
text-align: center

// Caption above a TOCTree
.toctree-wrapper.compound
.caption, :not(.caption) > .caption-text
font-size: var(--font-size--small)
text-transform: uppercase

text-align: initial
margin-bottom: 0

> ul
margin-top: 0
margin-bottom: 0
Loading

0 comments on commit b99eb54

Please sign in to comment.