mirror of
https://github.com/jrnl-org/jrnl.git
synced 2025-05-10 16:48:31 +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).
322 lines
6.8 KiB
CSS
322 lines
6.8 KiB
CSS
/* Copyright (C) 2012-2021 jrnl contributors
|
|
License: https://www.gnu.org/licenses/gpl-3.0.html */
|
|
/* 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-color: --mid-purple;
|
|
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(--blacker-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-color: --mid-purple;
|
|
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-color: --mid-purple;
|
|
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;
|
|
}
|
|
}
|