.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; } h2, .h2 { line-height: 1.35; margin-top: 3rem; } h3, .h3 { line-height: 1.4; margin-top: 1rem; } code { /* background-color: #f5f8fa !important; */ border-radius: 3px; padding: 0.2em 0.4em; line-height: normal; font-size: .9rem; color: #e83e8c; word-wrap: break-word; } pre code { /* background-color: #f5f8fa !important; */ border-radius: 3px; padding: 0.2em 0.4em; line-height: normal; font-size: .9rem; color: #e83e8c; word-wrap: break-word; } .language-sql>code{ padding: 0; } .kg-card { padding-top: 1rem; padding-bottom: 1rem; } /* Ghost Callout Cards */ .kg-callout-card, .kg-callout-card * { box-sizing: border-box; } .kg-callout-card { display: flex; padding: 1.2em 1.6em; border-radius: 3px; } .kg-callout-card-grey { background: rgba(124, 139, 154, 0.13); } .kg-callout-card-white { background: transparent; box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25); } .kg-callout-card-blue { background: rgba(33, 172, 232, 0.12); } .kg-callout-card-green { background: rgba(52, 183, 67, 0.12); } .kg-callout-card-yellow { background: rgba(240, 165, 15, 0.13); } .kg-callout-card-red { background: rgba(209, 46, 46, 0.11); } .kg-callout-card-pink { background: rgba(225, 71, 174, 0.11); } .kg-callout-card-purple { background: rgba(135, 85, 236, 0.12); } .kg-callout-card-accent { background: var(--ghost-accent-color); color: #fff; } .kg-callout-card.kg-callout-card-accent a { color: #fff; text-decoration: underline; } .kg-callout-card div.kg-callout-emoji { padding-right: 0.8em; line-height: 1.25em; font-size: 1.15em; } .kg-callout-card div.kg-callout-text { font-size: 0.95em; line-height: 1.5em; } .kg-callout-card + .kg-callout-card { margin-top: 1em; } .kg-card img { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } /* .documentation .kg-card { padding-top: 1rem; padding-bottom: 1rem; border-radius: 2px; background-color: #f5f8fa; text-align: center; } */ .documentation .kg-card img { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; max-width: 95% } @media (min-width: 1200px) { .documentation .kg-card img { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; /* max-width: 90% */ } .documentation .kg-card img.max-width-75 { max-width: 75% } .documentation .kg-card img.max-width-50 { max-width: 50% } } .changelog .kg-card img { transition: none; box-shadow: none; } /*.kg-width-wide {*/ /* max-width: 500px;*/ /* height:auto;*/ /* display: block;*/ /* margin-right: auto;*/ /*}*/ /*.kg-width-full {*/ /* max-height: 500px;*/ /* width:auto;*/ /* margin-right: auto;*/ /*}*/ .kg-image { margin-top: 1rem; margin-bottom: 0.5rem; line-height: 1; max-width:100%; height:auto; border-radius: 0.25rem !important; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important } /* Style images in markdown/post content */ .post img, .post-content img, .documentation img, article img, .prose img { margin: 1.5rem auto; max-width: 100%; height: auto; border-radius: 0.375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); display: block; } /* Constrain image width in documentation to avoid overly large images */ .documentation img, .post-content img { max-width: min(100%, 750px); } /* Large wide screenshots should be smaller */ .documentation img[src*="@2x"], .post-content img[src*="@2x"] { max-width: min(100%, 650px); } /* For smaller screens, allow full width */ @media (max-width: 991px) { .documentation img, .post-content img { max-width: 100%; } } /* Don't apply shadow to small inline images or icons */ .post img[src*="icon"], .post-content img[src*="icon"], .documentation img[src*="icon"], img[width="16"], img[width="24"], img[width="32"] { box-shadow: none; display: inline; margin: 0; border-radius: 0; } /* Style videos in markdown/post content */ .post video, .post-content video, .documentation video, article video, .prose video { margin: 1.5rem auto; max-width: min(100%, 750px); height: auto; border-radius: 0.375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); display: block; } /* For smaller screens, allow full width videos */ @media (max-width: 991px) { .documentation video, .post-content video { max-width: 100%; } } figcaption { font-size: 90%; color: #6c757d; text-align: center!important; } hr.gray { border: 2px solid #eee; border-radius: 3px; } /* Custom CSS */ .shape:not([class*=shape-blur]) { overflow: hidden; } .shape-end { bottom: 0; left: 0; right: 0; top: 0; } .shape:not([class*=shape-blur])>* { transform: scale(2); } .shape-fluid-y>* { height: 100%; width: auto; } .shape-end>* { bottom: inherit; position: inherit; right: inherit; top: inherit; transform-origin: center left; } .table td, .table th { padding: 0.25em 0.5rem; vertical-align: top; border: 1px solid #f1f4f8; } .btn-group-xsm>.btn, .btn-xsm { padding: 0.2rem 0.5rem; /* font-size: 1.0625rem; */ /* line-height: 1.6; */ border-radius: 0.375rem;} .post>p { margin: 1rem 0; } .share-block span { display: inline-block; font-weight: bold; margin-right: 1rem; font-size: 1.5rem; } .share-block a { display: inline-block; transition: all 0.3s; margin: 0 0.25rem; } .share-block a:hover { transform: scale(1.1); } .examples-index-card-body { position: absolute; bottom: 0; background-color: white; box-shadow: 0 6px 16px rgb(50 50 50 / 15%); } .faq-header { text-align: center; } .faq-item { margin: 1rem 0; } .faq-question { display:flex; flex-direction: row; align-items: flex-start; gap: 5px; } .collapsed>.faq-icon { transition: .35s ease; transform: rotate(0deg); } .faq-icon{ transition: .35s ease; transform: rotate(45deg); } .video-container-16-9 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .examples-index .card { max-height: 30rem; min-height: 25rem; overflow: hidden; } .example-more-posts .card { max-height: 27rem; min-height: 24rem; overflow: hidden; } .docs-nav-item { display:flex; flex-direction: row; align-items: center; gap: 5px; } .collapsed>.docs-nav-item-icon { transition: .35s ease; transform: rotate(0deg); } .docs-nav-item-icon{ fill: #506690; transition: .35s ease; transform: rotate(90deg); }