documentation/assets/style.scss

843 lines
14 KiB
SCSS

@import 'fontawesome.scss';
@import 'roboto.scss';
@import 'roboto-mono.scss';
$white: #fff ; // color5
$lightest: #d9e1e8; // color2
$lighter: #9baec8; // color3
$darkest: #1F232B; // color1
$black: #000 ; // color8
$darker: lighten($darkest, 34%);
$vibrant: #2b90d9; // color4
$error: #df405a; // color6
$success: #79bd9a; // color7
$transition-in: 100ms linear;
$transition-out: 250ms linear;
$content-width: 1080px;
$mobile-width: 600px;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
box-sizing: border-box;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
outline: 0;
}
body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
text-rendering: optimizeLegibility;
background-color: $darkest;
color: $lighter;
font-size: 13px;
line-height: 18px;
font-weight: 400;
padding-top: 30px;
}
.container {
box-sizing: border-box;
max-width: $content-width;
margin: 0 auto;
padding: 0 20px;
}
.sidebar-layout {
display: grid;
grid-gap: 15px;
grid-template-columns: 260px minmax(300px, ($content-width - 260px));
grid-template-rows: auto;
margin-bottom: 30px;
@media screen and (max-width: $mobile-width) {
display: block;
}
}
.sidebar {
@media screen and (max-width: $mobile-width) {
margin-bottom: 60px;
}
.brand {
display: flex;
justify-content: flex-start;
align-items: center;
color: $darkest;
margin-top: 12px;
margin-bottom: 52px;
img {
height: 38px;
}
@media screen and (max-width: $mobile-width) {
justify-content: center;
img {
position: static;
}
}
}
& > ul > li {
margin-bottom: 26px;
&:last-child {
margin-bottom: 0;
}
}
.sub-title {
display: block;
padding: 10px;
font-weight: 500;
text-transform: uppercase;
}
& > ul a {
display: block;
color: $white;
text-decoration: none;
font-weight: 500;
padding: 10px;
}
.sub-menu {
a.active {
color: $vibrant;
}
&.collapsed {
display: none;
}
.sub-menu {
padding-left: 15px;
}
}
}
.footer {
padding-bottom: 30px;
.legal {
margin-top: 30px;
&--right {
float: right;
text-align: right;
@media screen and (max-width: $mobile-width) {
float: none;
text-align: left;
}
}
a {
color: $darker;
text-decoration: none;
}
}
}
main {
h1 {
font-size: 36px;
line-height: 1.48;
font-weight: 600;
color: $lightest;
padding-bottom: 35px;
border-bottom: 1px solid lighten($darkest, 8%);
margin-bottom: 35px;
margin-left: -2.63px;
text-align: left;
position: relative;
}
h2 {
font-size: 26px;
margin-left: -1.63px;
line-height: 1.22;
text-align: left;
margin-top: 50px;
margin-bottom: 30px;
font-weight: 600;
color: $lightest;
}
h3 {
font-size: 21px;
line-height: 1.22;
font-weight: 500;
color: $lightest;
margin-top: 25px;
margin-bottom: 30px;
margin-left: -1.75px;
text-align: left;
}
h4 {
font-size: 18px;
line-height: 1.22;
font-weight: 500;
color: $lightest;
margin-top: 25px;
margin-bottom: 30px;
margin-left: -1.75px;
text-align: left;
}
h5 {
font-size: 18px;
line-height: 1.22;
font-weight: 500;
color: $lightest;
margin-top: 25px;
margin-bottom: 30px;
margin-left: -1.75px;
text-align: left;
}
h6 {
font-weight: 700;
margin-top: 25px;
margin-left: -1.75px;
text-align: left;
color: $lightest;
font-size: 16px;
line-height: 28px;
margin-bottom: 26px;
}
blockquote {
color: $lightest;
font-size: 16px;
line-height: 28px;
font-style: italic;
border-left: 3px solid $vibrant;
padding-left: 20px;
margin-left: -23px;
padding-bottom: 2px;
margin-bottom: 26px;
p:last-child {
margin-bottom: 0;
}
}
p {
color: $lightest;
font-size: 16px;
line-height: 28px;
font-weight: normal;
margin-bottom: 26px;
hyphens: auto;
}
a {
color: lighten($vibrant, 18%);
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35);
}
.image-large {
margin-bottom: 50px;
}
.image-pull-left {
float: left;
}
em {
font-style: italic;
}
strong {
font-weight: 600;
color: #fff;
}
ul,
ol {
counter-reset: post;
margin-bottom: 26px;
}
ul li,
ol li {
margin-left: 30px;
margin-bottom: 14px;
color: $lightest;
font-size: 16px;
line-height: 28px;
&::before {
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 78px;
margin-left: -78px;
text-align: right;
padding-top: 4px;
padding-right: 15px;
content: '\2022';
}
}
ol > li {
&::before {
padding-top: 0;
content: counter(post) ". ";
counter-increment: post;
}
}
li > ul,
li > ol {
margin-top: 14px;
}
table {
width: 100%;
margin-bottom: 26px;
color: $lightest;
tr:nth-child(2n),
thead tr {
background-color: darken($darkest, 4%);
}
th,
td {
font-size: 16px;
line-height: 28px;
padding: 10px 15px;
vertical-align: middle;
border: 1px solid lighten($darkest, 8%);
.fa-check {
color: $success;
}
.fa-times {
color: $error;
}
}
thead th {
font-weight: 500;
}
}
figure {
figcaption {
margin-top: 8px;
text-align: center;
&,
p {
color: $darker;
}
}
}
hr {
background: transparent;
border: 0;
border-top: 1px solid $darker;
margin: 26px 0;
}
pre {
margin-bottom: 26px;
font-size: 16px;
line-height: 28px;
background-color: lighten($darkest, 8%);
border-radius: 4px;
padding: 16px;
overflow: auto;
}
figure pre {
margin-bottom: 0;
}
code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
font-family: 'Roboto Mono', monospace;
background-color: lighten($darkest, 8%);
border-radius: 3px;
hyphens: none;
white-space: pre;
}
pre code {
background: transparent;
padding: 0;
}
dl {
color: $lightest;
font-size: 16px;
line-height: 28px;
font-weight: normal;
margin-bottom: 26px;
hyphens: auto;
dt {
font-weight: 700;
background: lighten($darkest, 8%);
padding: 2px 16px;
max-width: max-content;
margin-bottom: 4px;
}
dd {
margin-left: 16px;
margin-bottom: 16px;
}
}
.mastodon-embed,
iframe {
width: 100%;
display: block;
margin: 0 auto;
margin-bottom: 26px;
border-radius: 4px;
box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35);
}
}
.mascot {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 60px;
@media screen and (max-width: $mobile-width) {
display: none;
}
}
#TableOfContents {
color: $lighter;
ul li {
color: inherit;
}
& > ul > li {
margin-left: 0;
&::before {
display: none;
}
}
a {
text-decoration: none;
color: inherit;
}
padding-bottom: 35px - 14px;
border-bottom: 1px solid lighten($darkest, 8%);
margin-bottom: 35px;
}
.cta-banner {
background: $vibrant;
border-radius: 4px;
text-align: center;
padding: 40px;
h4 {
font-size: 24px;
line-height: 1.08;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
}
p {
color: #fff;
font-size: 18px;
line-height: 1.22;
margin-bottom: 20px;
}
& > a {
font-weight: 500;
color: $vibrant;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: inherit;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
line-height: 36px;
padding: 4px 16px;
margin: 0 auto;
border: 0;
cursor: pointer;
&.secondary {
padding: 2px 14px;
border: 2px solid #fff;
background: transparent;
margin-left: 4px;
color: #fff;
}
@media screen and (max-width: 375px) {
margin-bottom: 10px;
}
}
}
.hint {
margin: 26px 0;
padding: 16px 16px 16px 56px;
position: relative;
border-left: 4px solid;
border-radius: 4px;
background-color: lighten($darkest, 8%);
color: $white;
font-size: 16px;
line-height: 28px;
&-info {
border-color: $vibrant;
.hint-icon {
color: $vibrant;
}
}
&-warning {
border-color: #ca8f04;
.hint-icon {
color: #ca8f04;
}
}
&-success {
border-color: $success;
.hint-icon {
color: $success;
}
}
&-danger {
border-color: $error;
.hint-icon {
color: $error;
}
}
&-icon {
position: absolute;
top: 18px;
left: 16px;
font-size: 24px;
}
}
.page-ref {
display: block;
background: lighten($darkest, 4%);
color: $vibrant;
text-decoration: none;
font-weight: 500;
font-size: 18px;
position: relative;
margin: 26px 0;
padding: 24px 24px 24px 50px;
border-radius: 4px;
&-icon {
position: absolute;
top: 20px;
left: 16px;
font-size: 24px;
}
&:hover,
&:focus,
&:active {
background: lighten($darkest, 8%);
}
}
.api-method {
display: flex;
align-items: center;
font-weight: 500;
font-size: 18px;
&-method {
display: inline-flex;
align-items: center;
padding: 2px 0;
border-radius: 9999px;
height: 21px;
color: $white;
background: $vibrant;
margin: 0;
margin-right: 8px;
span {
display: inline-block;
padding: 0 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 15px;
}
}
&-url {
background: lighten($darkest, 4%);
border-radius: 4px;
padding: 8px;
font-size: 16px;
margin: 26px 0;
line-height: 1.7;
}
&-host {
color: $darker;
}
&-path {
font-weight: 700;
color: $white;
}
}
.api-method-parameters-list {
border: 1px solid lighten($darkest, 8%);
border-radius: 4px;
margin-bottom: 26px;
}
.api-method-parameters-type {
font-weight: 400;
color: $darker;
}
.api-method-parameters-type,
.api-method-response-example h5 {
font-size: 16px;
margin-bottom: 16px;
}
.api-method-parameter {
display: flex;
border-bottom: 1px solid lighten($darkest, 8%);
&:last-child {
border-bottom: 0;
}
&-cell {
box-sizing: border-box;
padding: 16px 10px;
color: $white;
}
&-required {
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: $error;
}
&-optional {
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: $darker;
}
&-name {
width: 180px;
font-size: 16px;
& > div:first-child {
margin-bottom: 2px;
}
}
&-type {
width: 100px;
}
&-description {
flex: 1 1 0%;
font-size: 15px;
}
}
.api-method-response-example {
&-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: $success;
&-error {
background: $error;
}
}
}
.sponsorship {
background: darken($darkest, 4%);
border-radius: 4px;
padding: 40px 0;
h2 {
line-height: 21px;
font-weight: 500;
font-size: 16px;
color: lighten($darkest, 40%);
text-align: center;
margin-bottom: 20px;
}
.logo-grid {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
& > div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
a {
display: inline-block;
text-decoration: none;
padding: 0 10px;
img {
display: block;
margin: 0;
height: 28px;
width: auto;
opacity: 0.8;
transition: all $transition-in;
filter: grayscale(100%);
}
&:hover {
img {
opacity: 0.9;
transition: all $transition-out;
filter: grayscale(0%);
}
}
}
}
h2 {
color: $lightest;
}
.logo-grid > div {
flex-wrap: wrap;
}
.logo-grid a {
padding: 20px;
}
}
.heading {
display: flex;
align-items: center;
&__anchor-link {
display: inline-flex;
align-content: center;
margin-left: 0.25em;
}
}