ligo/gitlab-pages/website/static/css/custom.css
2020-03-05 09:35:32 +01:00

1010 lines
17 KiB
CSS

@import url('/fonts/inter.css');
:root {
--ifm-color-primary: #0e74ff;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: #92e0d0;
--blockquote-color: #efefef;
--ifm-code-font-size: .9rem;
/* header */
--ifm-navbar-link-hover-color: #0e74ff;
/* footer */
--ifm-footer-title-color: #fff;
--ifm-footer-background-color: #0d0f33;
--ifm-footer-link-hover-color: hsla(0,0%,100%,.6);
--ifm-footer-color: #fff;
}
:root {
--secondary-brand-color: #fc683a;
--blue: #3aa0ff;
--lighter-blue: #e1f1ff;
--light-blue: #eff7ff;
--hover-orange: rgba(255, 72, 0, 0.5);
--search-background: rgba(73, 114, 158, 0.4);
--default-max-width: 1100px;
--color-primary-text: #0d0f33;
--color-secondary-text: #5a5c74;
--color-gray: #ebebeb;
--color-light-blue: #ebf6ff;
--color-light-gray: #fafafa;
--color-white: #ffffff;
--color-code-background2: #d2dfe9;
--padding-level-1: 20px;
--padding-level-2: 25px;
--padding-level-3: 30px;
--padding-level-4: 45px;
--padding-level-5: 60px;
--padding-level-6: 100px;
}
html[data-theme='dark'] {
--color-primary-text: white;
--blockquote-color: var(--ifm-navbar-background-color);
}
html {
font-size: 16px;
}
body {
font-family: 'Open Sans', sans-serif;
font-family: 'Inter var',SF Pro Text,Roboto,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;
font-weight: 400;
font-size: 1rem;
color: var(--color-primary-text);
margin: 0 auto;
}
/**
* Docusaurus overrides
*/
code {
/* font-family: 'Source Code Pro', monospace; */
font-family: Menlo,Roboto Mono,SFMono-Regular,Segoe UI,Courier,monospace;
margin-left: 2px;
margin-right: 2px;
border-radius: 2px;
border: none;
outline: none;
}
pre {
margin: 0px;
}
h1,
h2,
h3,
h4 {
font-family: 'DM Sans', sans-serif;
font-weight: bold;
margin-top: 2rem;
}
h1 {
font-size: 2.625rem;
}
h2 {
margin-bottom: 0.5rem;
margin-top: 1.5rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.125rem;
}
p {
line-height: 25px;
}
.projectTitle {
font-size: 2.5rem;
text-align: left;
margin-bottom: 25px;
line-height: 47px;
}
.projectTitle small {
max-width: 700px;
text-align: center;
margin: 0 auto;
margin-top: 0.7em;
}
.fixedHeaderContainer {
background-color: #ffffff;
color: var(--color-primary-text);
padding: 0px;
}
.fixedHeaderContainer a {
color: var(--color-primary-text);
}
.fixedHeaderContainer .headerWrapper header a:nth-child(2) {
background-color: #efefef;
margin-left: 50px;
padding: 4px 7px;
font-weight: normal;
}
.fixedHeaderContainer .headerWrapper header h3 {
margin: 0;
color: var(--color-primary-text);
text-decoration: none;
}
.headerWrapper.wrapper {
margin-top: 21px;
}
.fixedHeaderContainer header .headerTitleWithLogo {
display: none;
}
.fixedHeaderContainer {
left: 0;
min-height: 80px;
}
.nav-footer {
background: var(--color-primary-text);
}
.nav-footer .copyright {
text-align: left;
margin-top: 3em;
border-top: 1px solid white;
padding-top: 3em;
}
.nav-footer .footer-wrapper {
margin: 0 auto;
margin-top: var(--padding-level-4);
max-width: var(--default-max-width);
padding: 0 20px;
}
.nav-footer .sitemap {
margin: 0;
max-width: var(--default-max-width);
}
.navigationSlider .slidingNav {
background: white;
}
.navigationSlider .slidingNav ul {
background: white;
color: var(--color-primary-text) !important;
}
.navigationSlider .slidingNav ul li a {
text-transform: lowercase;
font-size: 16px;
line-height: 22px;
color: var(--color-primary-text);
}
.navigationSlider .slidingNav ul li a:hover {
color: var(--blue);
}
.navigationSlider .slidingNav ul li > a:focus,
.navigationSlider .slidingNav ul li > a:hover,
.navigationSlider .slidingNav ul li.siteNavItemActive > a,
.navigationSlider .slidingNav ul li.siteNavGroupActive > a {
background-color: white;
color: var(--ifm-color-primary) !important;
}
.navSearchWrapper:before {
border: 3px solid white;
}
.navSearchWrapper:after {
background: white;
}
.navSearchWrapper input#search_input_react {
background-color: var(--search-background);
color: white;
opacity: 0.8;
}
.navSearchWrapper input#search_input_react::placeholder {
color: white;
opacity: 0.8;
}
/**
* Code example style for the Home page and Docusaurus
*/
.tabs {
margin: 0 auto;
border-top: none;
}
.tabs .nav-tabs > div {
font-size: 1em;
font-weight: normal;
cursor: pointer;
color: #24292e;
border-bottom: none;
padding-bottom: 8px;
}
.tabs .nav-tabs > div:hover {
color: var(--secondary-brand-color);
}
.tabs .nav-tabs > div.active {
border-bottom: 4px solid var(--secondary-brand-color);
}
.tab-content {
border-top: 4px solid var(--lighter-blue);
border-bottom: 4px solid var(--lighter-blue);
padding-top: 16px;
margin-bottom: 16px;
}
.nav-tabs {
border: none;
position: relative;
top: 4px;
}
.disabled {
cursor: default;
color: #24292e64 !important;
border-bottom: none;
}
blockquote {
background-color: var(--blockquote-color);
border-left: 5px solid var(--color-primary-text);
color: var(--color-primary-text);
border-radius: 2px;
}
blockquote code {
opacity: 1;
}
a,
a:hover {
color: var(--ifm-color-primary);
}
.docMainWrapper a:hover {
text-decoration: underline;
}
.promoSection .promoRow {
padding-top: 0;
margin-top: 30px;
}
.promoSection .promoRow .pluginRowBlock .pluginWrapper {
padding: 0 4px;
}
.blockElement {
color: #1a1a1a;
}
.blockImage {
margin-bottom: 0px;
}
.blockContent {
margin-top: -25px;
}
.mainContainer {
padding-top: 60px;
}
.mainContainer > * {
padding: var(--padding-level-4) 0;
}
.tocActive .onPageNav > .toc-headings {
padding-top: 24px;
}
.docsSliderActive #tocToggler {
opacity: 0;
visibility: hidden;
}
.toc .toggleNav {
margin-top: 12px;
}
.toc .toggleNav ul {
padding: 0px;
}
.toc .toggleNav ul li a {
font-size: 16px;
line-height: 25px;
color: var(--color-primary-text);
}
.toc .toggleNav .navGroup {
margin-bottom: 30px;
}
.toc .toggleNav .navGroup .navGroupCategoryTitle {
color: var(--color-secondary-text);
font-size: 12px;
line-height: 16px;
margin-bottom: 20px;
}
.navListItemActive a {
color: var(--ifm-color-primary) !important;
}
.onPageNav > .toc-headings {
border-color: var(--color-gray);
}
.onPageNav .toc-headings > li > a {
color: var(--color-secondary-text);
}
.onPageNav .toc-headings > li > a.active {
color: var(--color-primary-text);
}
.cheatsheet tr > td:first-of-type {
min-width: 240px;
}
.button {
border: none;
color: var(--color-white);
font-size: 1rem;
font-weight: normal;
line-height: 1.375rem;
text-transform: none;
text-align: center;
}
.button,
.button:hover {
border-radius: 36px;
padding: 10px 20px;
background-color: var(--ifm-color-primary);
min-width: 130px;
color: var(--color-white);
}
.button:hover {
box-shadow: 0px 2px 15px rgba(58, 160, 255, 0.3);
}
.button:focus {
background-color: #0078e8;
}
.button[disabled] {
background: rgba(58, 160, 255, 0.35);
}
.version-button {
background-color: var(--color-gray);
padding: 5px;
border-radius: 2px;
color: var(--color-primary-text);
}
.version-button:hover {
background-color: var(--color-light-blue);
}
.version-button:focus {
background: rgba(47, 152, 249, 0.3);
}
.version-button[disabled] {
background: rgba(58, 160, 255, 0.35);
}
/**
* Code highlighting
*/
.hljs {
display: block;
overflow-x: auto;
padding: 20px;
background: var(--light-blue);
color: black;
margin-bottom: 16px;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #008000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #00f;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}
.hljs-doctag {
color: #808080;
}
.hljs-attr {
color: #f00;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/**
* Shared styling
*/
.centered {
display: flex;
width: 100%;
max-width: var(--default-max-width);
padding: 0 20px;
margin: 0 auto;
}
.primary {
color: var(--ifm-color-primary);
}
.secondary {
color: var(--secondary-brand-color);
}
#contactPage,
#pageNotFoundPage {
font-weight: lighter;
margin-top: 80px;
margin-bottom: 80px;
}
/**
* Home page
*/
#homePage {
display: flex;
flex-direction: column;
margin-top: 80px;
}
#homePage .tab-content {
padding: 0;
}
#homePage .hljs {
margin: 0;
}
#homePage h1 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 1.875em;
}
#homePage #intro {
display: flex;
justify-content: space-between;
width: 100%;
}
#callToAction {
margin-top: 300px;
}
#homePage #intro #callToAction ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#homePage #intro #callToAction ul li {
cursor: pointer;
font-weight: normal;
font-size: 2em;
border-left: 4px solid;
padding: 30px 50px;
}
#homePage #intro #callToAction ul li + li {
margin-top: 1.8em;
}
#homePage #intro #callToAction ul li:hover {
color: white;
}
#homePage #intro #callToAction ul li.primary:hover {
background-color: var(--ifm-color-primary);
border-left: 4px solid var(--ifm-color-primary);
}
#homePage #intro #callToAction ul li.secondary:hover {
background-color: var(--secondary-brand-color);
border-left: 4px solid var(--secondary-brand-color);
}
#homePage #intro #callToAction ul li a {
color: inherit;
text-decoration: none;
}
#homePage #intro #preview {
min-height: 450px;
max-width: 400px
}
#homePage #intro #preview p {
font-style: italic;
font-size: 1.5em;
}
#features {
margin: 100px auto;
display: flex;
justify-content: space-between;
flex: 1;
}
#features .feature {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#features .feature p {
text-align: center;
font-size: 1.25rem;
}
#partners {
background-color: var(--ifm-color-primary);
color: white;
font-size: 2.8rem;
font-weight: bold;
padding: 50px 0;
margin-top: auto;
flex: 1;
}
#partners .wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#partners #heading {
word-wrap: break-word;
width: 200px;
line-height: 1em;
}
#partners #list {
display: flex;
}
#partners a {
line-height: 0;
}
#partners a + a {
margin-left: 50px;
}
#partners img {
height: 80px;
}
/**
* Contact page
*/
#contactPage #mural {
display: flex;
}
#contactPage #mural .column {
display: flex;
flex-direction: column;
}
#contactPage #mural .offset {
padding-top: 25%;
margin-left: -15px;
}
#contactPage #mural .portraitContainer {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 2px;
overflow: hidden;
}
#contactPage #mural .portraitContainer .overlay {
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
background-color: var(--hover-orange);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.25em;
font-weight: normal;
color: white;
}
#contactPage #mural .portraitContainer:hover .overlay {
opacity: 1;
}
#contactPage #message {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 8em;
flex: 1;
}
#contactPage #message .title {
font-size: 3.125rem;
}
#contactPage #message .communicationOptions {
display: flex;
flex-direction: column;
font-size: 1.25rem;
background-color: var(--light-blue);
width: 100%;
margin-top: 3em;
}
#contactPage #message .communicationOptions .option {
display: flex;
align-items: center;
padding: 30px;
width: 100%;
border-left: 6px solid var(--light-blue);
color: inherit;
}
#contactPage #message .communicationOptions .option:hover {
cursor: pointer;
background-color: var(--lighter-blue);
border-left: 6px solid var(--blue);
}
#contactPage #message .communicationOptions .option .icon {
margin-right: 30px;
}
/**
* 404 page
*/
#pageNotFoundPage #mural {
position: relative;
width: 320px;
height: 500px;
}
#pageNotFoundPage #mural img {
position: absolute;
}
#pageNotFoundPage #mural .muralPolygon1 {
transform: translateX(5em);
}
#pageNotFoundPage #mural .muralPolygon2 {
transform: translateX(6em);
}
#pageNotFoundPage #mural .muralPolygon3 {
transform: translateY(11em);
}
#pageNotFoundPage #mural .muralPolygon4 {
transform: translateX(2.5em) translateY(10em);
}
#pageNotFoundPage #mural .muralPolygon5 {
transform: translateX(16em) translateY(11em);
}
#pageNotFoundPage #message {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 6em;
flex: 1;
}
#pageNotFoundPage .title {
font-size: 6.25rem;
}
#pageNotFoundPage .lookingForSomething {
font-size: 1.8em;
}
#pageNotFoundPage .discoveriesHappen {
font-size: 2.3em;
}
#pageNotFoundPage .letUsHelpWrapper {
display: flex;
flex-direction: column;
margin-top: 2.5em;
}
#pageNotFoundPage .letUsHelp {
display: flex;
justify-content: flex-end;
font-size: 1.25em;
}
#pageNotFoundPage .algoliaSearch {
position: relative;
}
/**
* Algolia search box/results styling, copied from Docusaurus main.css and tweaked
* a little bit to make search on a 404 page cosistent with Docusaurus styling.
*/
.algoliaSearch .icon {
position: absolute;
z-index: 1;
width: 3.75em;
}
.algoliaSearch input#searchDocs {
background-color: var(--search-background);
border: none;
border-radius: 1em;
color: white;
font-size: 1.8em;
font-weight: 300;
line-height: 2em;
outline: none;
padding-left: 2em;
position: relative;
width: 21em;
}
.algoliaSearch input#searchDocs::placeholder {
color: white;
opacity: 0.8;
}
.algoliaSearch .aa-dropdown-menu {
background: #f9f9f9;
border: 3px solid rgba(57, 57, 57, 0.25);
color: #393939;
font-size: 14px;
font-weight: 400;
left: auto !important;
line-height: 1.2em;
right: 0 !important;
}
.algoliaSearch
.aa-dropdown-menu
.algolia-docsearch-suggestion--category-header {
background: $primaryColor;
color: white;
}
.algoliaSearch
.aa-dropdown-menu
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--highlight {
background-color: $primaryColor;
color: #fff;
}
.algoliaSearch
.aa-dropdown-menu
.algolia-docsearch-suggestion--title
.algolia-docsearch-suggestion--highlight,
.algoliaSearch
.aa-dropdown-menu
.algolia-docsearch-suggestion--subcategory-column
.algolia-docsearch-suggestion--highlight {
color: $primaryColor;
}
.algoliaSearch .aa-dropdown-menu .algolia-docsearch-suggestion__secondary,
.algoliaSearch
.aa-dropdown-menu
.algolia-docsearch-suggestion--subcategory-column {
border-color: rgba(57, 57, 57, 0.3);
}
@media (min-width: 1024px) {
.row .col {
padding-left: 3rem;
padding-right: 3rem;
}
.nav-footer .footer-wrapper {
max-width: 1400px;
}
.nav-footer .sitemap {
max-width: 1400px;
}
#homePage #intro #preview {
min-width: 700px;
}
}
@media (min-width: 1500px) {
.centered {
max-width: 1400px;
}
}
@media (max-width: 1023px) {
.centered {
flex-direction: column;
align-items: center;
}
#pageNotFoundPage #message,
#contactPage #message {
margin-left: 0;
align-items: center;
}
#homePage #intro #preview {
order: 1;
min-width: 100%;
}
#homePage #intro #preview .hljs {
min-width: 100%;
}
#homePage #intro #callToAction {
order: 2;
width: 100%;
}
#homePage #intro #callToAction ul {
display: flex;
justify-content: space-around;
}
#homePage #intro #callToAction ul li {
min-width: 260px;
}
#homePage #intro #callToAction ul li + li {
margin-top: 0;
}
#partners #heading {
text-align: center;
word-wrap: normal;
width: auto;
margin-bottom: 50px;
}
#partners #list {
display: flex;
flex-direction: column;
justify-content: center;
}
#partners a + a {
margin: 25px auto;
}
}
@media (max-width: 560px) {
#homePage #intro #callToAction ul {
display: block;
}
#homePage #intro #callToAction ul li + li {
margin-left: 0;
margin-top: 1.8em;
}
#pageNotFoundPage #mural {
margin: -180px 0 -150px 0;
transform: scale(0.5);
}
#pageNotFoundPage #message {
font-size: 0.7em;
margin: 0 10px;
}
.algoliaSearch input#searchDocs {
width: 15em;
}
}
/* ReasonLIGO specific syntax highlighting */
.language-reasonligo .hljs-operator {
color: #a626a4;
}
.language-reasonligo .hljs-character {
color: #50a14f;
}
.language-reasonligo .hljs-module-identifier {
color: #00f;
}
.language-reasonligo .hljs-constructor {
color: #a31515;
}
.badge {
display: none;
}