mirror of
https://github.com/jrnl-org/jrnl.git
synced 2025-05-10 08:38:32 +02:00
870f9aed17
* add background-color as fallback for gradients on docs site This is both for old browser support, and for accessibility. Some accessibility tools turn off gradients since they can make text hard to read for those with visual impairment. * change mobile header color for docs site The mobile header was using a light-purple to dark-purple gradient, even though every other gradient on the site is mid-purple to dark-purple. This commit changes that both for consistency on the site, and because light-purple causes an accessibility issue with the white text in the header (even though the accessibility tools don't notice because of the gradient).
316 lines
6.1 KiB
CSS
316 lines
6.1 KiB
CSS
/* Copyright (C) 2012-2021 jrnl contributors
|
|
License: https://www.gnu.org/licenses/gpl-3.0.html */
|
|
|
|
/* ------------------------------------------------------------ */
|
|
/* 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-color: --mid-purple;
|
|
background-image: linear-gradient(-211deg, var(--mid-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-color: --mid-purple;
|
|
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;
|
|
}
|