mirror of
https://github.com/jrnl-org/jrnl.git
synced 2025-06-27 21:16:14 +02:00
Make docs site (jrnl.sh) fully meet Web Content Accessibility Guidelines (WCAG) 2.1 (#1105)
* add some attribtutes to docs template for accessbility * fix colors to meet accessibility guidelines (4.5 contrast ratio for text) * Fix last remaining pa11y error (no button on search form) This fix required moving the mkdocs theme out of the docs directory. It's no in the docs_theme directory, and the mkdocs config is updated accordingly. * Re-enable accessibility testing for docs sit Also, move the pa11y script into the gh actions workflow * clean up linting issues in css * fix and standardize link colors across site * fix twitter button opacity making text fail contrast requirements * move buttons on docs site index nav, tweak font weights * fix footer opacity, tweak spacing of the now more visible sections of the page * change font sizes on index page to meet WCAG * udpate font sizes site-wide for accessibility * fix sidebar for accessibility (font sizes and color contrasts) * restyle code blocks to have dark background, and meet accessibility requirements * standardize (accessible) colors across docs site
This commit is contained in:
Jonathan Wren
GitHub
parent
42c222a6c8
commit
558d331d66
29 changed files with 835 additions and 644 deletions
28
docs_theme/assets/colors.css
Normal file
28
docs_theme/assets/colors.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
:root {
|
||||
/* For dark bg */
|
||||
--white: #fcfcfc;
|
||||
--off-white: #f4f0ff;
|
||||
--purple: #7e57c2;
|
||||
--light-purple: #cf93e6;
|
||||
--blue: #61aeee;
|
||||
--green: #a6e22e;
|
||||
--orange: #fd971f;
|
||||
--red: #eb5567;
|
||||
--pink: #d57699;
|
||||
--yellow: #e2b93d;
|
||||
|
||||
/* For light bg */
|
||||
--teal: #2a8068;
|
||||
--dark-blue: #356eb7;
|
||||
--mid-purple: #92679b;
|
||||
--bright-purple: #af27ad;
|
||||
--dark-purple: #604385;
|
||||
--darkest-purple: #251A32;
|
||||
--grey: #3b3b4a;
|
||||
|
||||
--black-shadow: #0000001A;
|
||||
--blacker-shadow: #00000059;
|
||||
|
||||
/* Special cases */
|
||||
--terminal: #1b1c2e;
|
||||
}
|
||||
130
docs_theme/assets/highlight.css
Normal file
130
docs_theme/assets/highlight.css
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/*
|
||||
Atom One Dark With support for ReasonML by Gidi Morris, based off work by
|
||||
Daniel Gamage
|
||||
|
||||
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
line-height: 1.3em;
|
||||
color: var(--off-white);
|
||||
background: #383e49;
|
||||
border-radius: 5px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
.hljs-keyword,
|
||||
.hljs-operator {
|
||||
color: var(--pink);
|
||||
}
|
||||
.hljs-pattern-match {
|
||||
color: var(--pink);
|
||||
}
|
||||
.hljs-pattern-match .hljs-constructor {
|
||||
color: var(--blue);
|
||||
}
|
||||
.hljs-function {
|
||||
color: var(--blue);
|
||||
}
|
||||
.hljs-function .hljs-params {
|
||||
color: var(--green);
|
||||
}
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: var(--orange);
|
||||
}
|
||||
.hljs-module-access .hljs-module {
|
||||
color: var(--purple);
|
||||
}
|
||||
.hljs-constructor {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.hljs-constructor .hljs-string {
|
||||
color: var(--green);
|
||||
}
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: var(--light-purple);
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-doctag,
|
||||
.hljs-formula {
|
||||
color: var(--purple);
|
||||
}
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.hljs-literal {
|
||||
color: var(--blue);
|
||||
}
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: var(--green);
|
||||
}
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: var(--orange);
|
||||
}
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.rst-content a tt,
|
||||
.rst-content a tt,
|
||||
.rst-content a code {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: var(--pink)
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: var(--blue);
|
||||
}
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rst-content .note .admonition-title {
|
||||
background: var(--dark-blue);
|
||||
}
|
||||
|
||||
.rst-content .tip .admonition-title {
|
||||
background: var(--teal);
|
||||
}
|
||||
317
docs_theme/assets/index.css
Normal file
317
docs_theme/assets/index.css
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
/* reset */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
|
||||
|
||||
body {
|
||||
background-color: var(--white);
|
||||
font-family: "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-image: url("img/sprites.svg");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
font-size: 40px;
|
||||
background-size: 200px 80px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.icon.secure {
|
||||
background-position: 0em 0em;
|
||||
}
|
||||
|
||||
.icon.future {
|
||||
background-position: -1em 0em;
|
||||
}
|
||||
|
||||
.icon.search {
|
||||
background-position: -2em 0em;
|
||||
}
|
||||
|
||||
.icon.nli {
|
||||
background-position: -3em 0em;
|
||||
}
|
||||
|
||||
.icon.share {
|
||||
background-position: 0em -1em;
|
||||
}
|
||||
|
||||
.icon.sync {
|
||||
background-position: 0 -1em;
|
||||
}
|
||||
|
||||
.icon.dayone {
|
||||
background-position: -1em -1em;
|
||||
}
|
||||
|
||||
.icon.github {
|
||||
background-position: -2em -1em;
|
||||
}
|
||||
|
||||
.icon.search {
|
||||
background-position: -2em 0;
|
||||
}
|
||||
|
||||
.icon.folders {
|
||||
background-position: -3em -1em;
|
||||
}
|
||||
|
||||
.icon.twitter {
|
||||
background-position: -4em -1em;
|
||||
}
|
||||
|
||||
header {
|
||||
background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
|
||||
color: var(--white);
|
||||
border: 0px solid transparent;
|
||||
display: relative;
|
||||
padding-top: 150px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#terminal {
|
||||
background: var(--terminal);
|
||||
max-width: 520px;
|
||||
box-shadow: 0 -2px 16px 0 var(--black-shadow);
|
||||
border-radius: 6px;
|
||||
min-height: 120px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
transform: translateY(75px);
|
||||
color: var(--off-white);
|
||||
font-family: "Monaco", "Courier New";
|
||||
font-size: 18px;
|
||||
padding: 45px 20px 0px 20px;
|
||||
line-height: 165%;
|
||||
}
|
||||
|
||||
#terminal b {
|
||||
font-weight: normal;
|
||||
color: var(--off-white);
|
||||
}
|
||||
|
||||
#terminal i {
|
||||
font-style: normal;
|
||||
color: var(--light-purple);
|
||||
}
|
||||
|
||||
#terminal:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: var(--grey);
|
||||
box-shadow: 25px 0 0 var(--grey), 50px 0 0 var(--grey);
|
||||
}
|
||||
|
||||
#typed:before {
|
||||
content: "$ ";
|
||||
color: var(--mid-purple);
|
||||
}
|
||||
|
||||
#twitter {
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-decoration: none;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
border: 1px solid var(--white);
|
||||
padding: 5px 10px;
|
||||
color: var(--white);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#twitter .icon {
|
||||
transform: scale(0.5);
|
||||
vertical-align: -18%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#twitter:hover,
|
||||
#twitter:active {
|
||||
text-decoration: none;
|
||||
box-shadow: 0 2px 25px 0 var(--black-shadow);
|
||||
transition: all .5s ease;
|
||||
}
|
||||
|
||||
#title {
|
||||
max-width: 630px;
|
||||
margin: 0 auto;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
#prompt {
|
||||
max-width: 700px;
|
||||
margin: 25px auto 100px auto;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
header img {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--dark-purple);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--bright-purple);
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav a#twitter-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
color: var(--dark-purple);
|
||||
font-size: 20px;
|
||||
line-height: 2.5em;
|
||||
margin: 0 40px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:visited:hover {
|
||||
color: var(--bright-purple);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
nav a.cta {
|
||||
display: inline-block;
|
||||
color: var(--white);
|
||||
background-image: linear-gradient(259deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
|
||||
box-shadow: 0 2px 8px 0 var(--blacker-shadow);
|
||||
border-radius: 50px;
|
||||
padding: 0 2em;
|
||||
white-space: nowrap;
|
||||
transition: all 0.1s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a.cta:hover {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(259deg, var(--bright-purple) 0%, var(--dark-purple) 100%);
|
||||
box-shadow: 0 4px 16px 0 var(--black-shadow);
|
||||
color: var(--off-white);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
max-width: 920px;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px 20px;
|
||||
padding-top: 30px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex section {
|
||||
/*margin: 20px;*/
|
||||
margin-top: 40px;
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.flex section:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.flex section:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.flex section i {
|
||||
float: left;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin: 0px auto 10px auto;
|
||||
}
|
||||
|
||||
.flex section h3 {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
color: var(--dark-purple);
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 300;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.flex section p {
|
||||
padding-left: 40px;
|
||||
color: var(--grey);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(--grey);
|
||||
max-width: 700px;
|
||||
margin: 70px auto 20px;
|
||||
padding: 0 20px 20px 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
.flex {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.flex section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
nav a,
|
||||
nav a#twitter-nav {
|
||||
display: inline-block;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
nav a.cta {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
header #twitter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header #logo {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
header #title br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
BIN
docs_theme/assets/readme-header.png
Normal file
BIN
docs_theme/assets/readme-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
311
docs_theme/assets/theme.css
Normal file
311
docs_theme/assets/theme.css
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
/* ------------------------------------------------------------ */
|
||||
/* Overrides for jrnl theme */
|
||||
/* ------------------------------------------------------------ */
|
||||
|
||||
body.wy-body-for-nav,
|
||||
section.wy-nav-content-wrap {
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.rst-content pre {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 1em -1em;
|
||||
}
|
||||
|
||||
.rst-content code {
|
||||
color: var(--darkest-purple);
|
||||
background-color: var(--off-white);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.rst-content pre code {
|
||||
color: var(--off-white);
|
||||
background: var(--darkest-purple);
|
||||
padding: 1em 1.5em;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
font-weight: 200 !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
p,
|
||||
td,
|
||||
tr,
|
||||
div,
|
||||
li {
|
||||
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-weight: 00;
|
||||
font-size: 18px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
/* No-one likes lines that are 400 characters long. */
|
||||
div.rst-content {
|
||||
max-width: 54em;
|
||||
}
|
||||
|
||||
.wy-side-nav-search,
|
||||
.wy-menu-vertical li.current {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wy-nav-top {
|
||||
background-image: linear-gradient(-211deg, var(--light-purple) 0%, var(--dark-purple) 100%);
|
||||
}
|
||||
|
||||
.wy-nav-top .fa-bars {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.wy-side-nav-search a.icon-home {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
a.icon-home:before {
|
||||
display: block;
|
||||
width: 84px;
|
||||
height: 70px;
|
||||
content: "";
|
||||
background: url(../img/logo_white.svg) center center no-repeat;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.wy-menu-vertical a,
|
||||
.wy-menu-vertical li ul li a {
|
||||
font-size: 16px;
|
||||
color: var(--off-white);
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.wy-menu-vertical a:hover {
|
||||
background-color: var(--black-shadow);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.wy-menu-vertical li.on a {
|
||||
transition: all .25s ease;
|
||||
background: var(--dark-purple);
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wy-menu-vertical li.current>a {
|
||||
background: var(--darkest-purple);
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wy-menu-vertical li.current>a:hover {
|
||||
background: var(--darkest-purple);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wy-menu-vertical li.on a,
|
||||
.wy-menu-vertical li.current a {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.wy-menu-vertical li.on a,
|
||||
.wy-menu-vertical li.current>a:after {
|
||||
position: absolute;
|
||||
right: 0em;
|
||||
z-index: 999;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent;
|
||||
border-bottom: 1em solid transparent;
|
||||
border-right: 1em solid var(--white);
|
||||
}
|
||||
.wy-menu-vertical li li.toctree-l2 {
|
||||
font-weight: 800 !important;
|
||||
font-size: 50px;
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.toctree-expand:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rst-versions,
|
||||
.rst-versions .rst-current-version {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wy-menu-vertical span {
|
||||
color: var(--white);
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.wy-menu-vertical li a {
|
||||
color: var(--off-white) !important;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
.wy-nav-side {
|
||||
background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
|
||||
font-weight: 300;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wy-side-nav-search input[type=text],
|
||||
form .search-query {
|
||||
background-color: var(--black-shadow) !important;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin-bottom: 1em;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.wy-side-nav-search input[type=text]::placeholder,
|
||||
form .search-query::placeholder {
|
||||
color: var(--off-white);
|
||||
}
|
||||
|
||||
.wy-side-nav-search > a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.toctree-l2 a:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ */
|
||||
/* Logo: ; */
|
||||
/* ------------------------------------------------------------ */
|
||||
|
||||
.logo {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
vertical-align: middle;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ */
|
||||
/* Code blocks in callouts */
|
||||
/* ------------------------------------------------------------ */
|
||||
|
||||
div.admonition {
|
||||
border-radius: 5px;
|
||||
margin: 1em -1em;
|
||||
}
|
||||
|
||||
div.admonition p.admonition-title {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
div.admonition>p {
|
||||
padding: 0em .5em;
|
||||
}
|
||||
|
||||
|
||||
div.admonition div.highlight {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ */
|
||||
/* Fancy ordered lists. */
|
||||
/* ------------------------------------------------------------ */
|
||||
|
||||
ol {
|
||||
counter-reset: li;
|
||||
margin-left: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
list-style: none !important;
|
||||
margin-bottom: 1.5em;
|
||||
margin-left: 3em !important;
|
||||
}
|
||||
|
||||
ol>li:before {
|
||||
content: counter(li);
|
||||
counter-increment: li;
|
||||
background-color: var(--sidebar);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: -3em;
|
||||
margin-top: -.3em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
color: var(--dark-purple);
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------------------------------------ */
|
||||
/* Accessibility-related changes */
|
||||
/* ------------------------------------------------------------ */
|
||||
.rst-content div[role="main"] a,
|
||||
.rst-content div[role="main"] a:visited {
|
||||
color: var(--mid-purple);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rst-content div[role="main"] a:hover {
|
||||
color: var(--bright-purple);
|
||||
}
|
||||
|
||||
.rst-content div[role="navigation"] a,
|
||||
.rst-content div[role="navigation"] a:visited {
|
||||
color: var(--mid-purple);
|
||||
}
|
||||
|
||||
.mkdocs-search {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.wy-side-nav-search input[type="text"] {
|
||||
border-radius: 50px 0 0 50px;
|
||||
height: 32px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.mkdocs-search button {
|
||||
background-color: var(--black-shadow);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: var(--white);
|
||||
border-radius: 0 50px 50px 0;
|
||||
height: 32px;
|
||||
width: 2.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue