source/documentation/static/index.css
@import "normalize.css";
@import "highlight.js/styles/monokai.css";
@custom-media --medium (max-width: 30em);
@custom-media --large (max-width: 60em);
@custom-media --larger (max-width: 80em);
@custom-selector :--githubteaser .jogwheel-teaser;
@custom-selector :--mainnavigation .jogwheel-main-navigation;
@custom-selector :--mainnavigationlist .jogwheel-main-navigation-list;
@custom-selector :--header .jogwheel-header;
@custom-selector :--claim .jogwheel-claim;
@custom-selector :--logo .jogwheel-logo;
@custom-selector :--name .jogwheel-name;
@custom-selector :--navigation .jogwheel-navigation;
@custom-selector :--archiveteaser .jogwheel-archive-teaser;
@custom-selector :--saucelabs a[href="https://saucelabs.com/u/jogwheel-unit"];
@custom-selector :--lastseparator body > hr:last-of-type;
@custom-selector :--lastparagraph body > p:last-of-type;
@keyframes pan {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
:root {
--primaryColor: rgb(94, 199, 146);
--primaryDarkColor: rgb(131, 182, 156);
--backgroundColor: #222;
--textColor: #efefef;
--fontCascade: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--sPadding: 20px;
}
* {
box-sizing: border-box;
}
:root {
padding: 0;
margin: 0;
background: var(--backgroundColor);
font-family: var(--fontCascade);
color: var(--textColor);
}
body {
margin: 0 auto;
padding: 0 var(--sPadding);
min-width: 20em;
max-width: 80em;
border: 0 solid rgba(255, 255, 255, 0.05);
border-left-width: 20px;
border-right-width: 20px;
box-sizing: content-box;
}
a,
a:link,
a:visited {
text-decoration: none;
color: var(--primaryColor);
transition: 0.3s color ease-in-out;
}
a:hover,
a:active {
color: var(--primaryDarkColor);
}
img {
max-width: 100%;
}
h1[id],
h2[id],
h3[id] {
margin-top: 80px;
}
hr {
border: 3px solid rgba(255, 255, 255, 0.05);
margin-bottom: 0;
margin-top: 20px;
}
blockquote {
margin-bottom: 0;
padding: 0.5em 1em 1em 1em;
}
blockquote p {
margin: 0;
}
blockquote + p {
padding: 0 1em 0.5em 1em;
}
blockquote,
blockquote + p {
border-left: 5px solid rgba(255, 255, 255, 0.2);
margin-left: 0;
margin-top: 0;
}
:--mainnavigation {
width: 100%;
margin: 0;
padding: 0;
background: var(--backgroundColor);
overflow: auto;
}
:--mainnavigationlist {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
border-bottom: 1px solid var(--backgroundColor);
}
:--mainnavigationlist .jogwheel-item {
display: inline-block;
border-bottom: 7px solid transparent;
transition: 0.3s border-color ease-in-out;
}
:--mainnavigationlist .jogwheel-item.jogwheel-item--active {
border-color: var(--primaryColor);
}
:--mainnavigationlist a {
padding: 20px 10px;
text-align: center;
}
:--githubteaser {
margin: 0 -var(--sPadding);
text-align: center;
background: #000;
animation: pan 1s linear;
animation-play-state: paused;
animation-fill-mode: forwards;
}
:--githubteaser a {
display: block;
padding: 20px;
transition: 0.3s background-color ease-in-out;
}
:--githubteaser a:hover {
background: rgba(255, 255, 255, 0.1);
}
:--header {
display: flex;
flex-direction: column;
padding-top: 60px;
margin: 0 -var(--sPadding);
background: var(--primaryColor);
color: var(--backgroundColor);
}
:--logo {
position: relative;
z-index: 1;
order: 1;
}
:--name {
position: relative;
z-index: 1;
order: 2;
margin: 0;
padding: 40px 0 0;
font-size: 50px;
color: #fff;
background: inherit;
}
:--claim {
position: relative;
z-index: 1;
order: 3;
margin: 0;
padding: 0 0 60px 0;
font-size: 25px;
text-align: center;
color: #eee;
background: inherit;
}
:--navigation {
display: none;
}
:--archiveteaser {
padding: 0 20px 20px 20px;
margin-left: -var(--sPadding);
margin-right: -var(--sPadding);
background: #fff;
color: var(--backgroundColor);
}
:--saucelabs {
display: block;
width: 100%;
max-width: 800px;
margin: 20px auto;
}
:--saucelabs img {
width: 100%;
}
:--lastseparator {
display: none;
}
:--lastparagraph {
margin-top: 160px;
margin-bottom: 0;
margin-left: -var(--sPadding);
margin-right: -var(--sPadding);
padding: 20px;
background: #fff;
color: var(--backgroundColor);
}
table td,
table th {
padding: 7.5px 10px;
border: 1px solid rgba(255, 255, 255, 0.25);
}
table tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.05);
}
.emoji {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
max-width: none;
background: transparent;
}
@media (--medium) {
body {
border: none;
}
table {
display: block;
}
thead {
display: none;
}
tr {
display: block;
}
table tr:nth-child(even) td {
background: none;
}
table td {
display: block;
padding: 5px 0;
border: none;
text-align: left;
}
table td:last-child {
padding-bottom: 15px;
}
}