basho/documentation/third-party-materials-basho/index.html
2025-06-11 23:00:42 +10:00

836 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="auto-dark-mode">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Basho — User Documentation</title>
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex nofollow">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
<script data-host="https://app.microanalytics.io" data-dnt="false" src="https://app.microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
<style>@font-face {
font-family: 'Lausanne';
font-style: normal;
font-weight: 300;
font-display: block;
src: url("https://fueko.net/assets/fonts/TWKLausanne-300.woff2") format('woff2');
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("https://fueko.net/assets/fonts/RobotoMono-Regular.ttf") format('truetype');
}
</style>
<link rel="stylesheet" type="text/css" href="https://fueko.net/assets/css/screen.css">
<style>/* //////////////////////////////////////////////////////////////////////////
Docs
//////////////////////////////////////////////////////////////////////////
I. Customize
|
├─ Light version
└─ Dark version
II. Theme
|
├─ 1.Release
├─ 2.Header
├─ 3.Sidebar
├─ 4.Docs
├─ 5.Changelog
├─ 6.Third-party materials
└─ 7.GScan
//////////////////////////////////////////////////////////////////////////
I. Customize
////////////////////////////////////////////////////////////////////////// */
:root {
/* Light version
*/
--color-border: #ebebec;
--color-code-inline: #edeef0;
--color-blue: #1b58ff;
--color-red: #ff362a;
--ghost-accent-color: #96ff65;
}
/* Dark version
*/
.dark-mode {
--color-border: #3c3e48;
--color-code-inline: #323345;
}
/* Automatic dark version [duplicate dark version]
*/
@media (prefers-color-scheme:dark) {
.auto-dark-mode {
--color-border: #3c3e48;
--color-code-inline: #323345;
}
}
/* //////////////////////////////////////////////////////////////////////////
II. Theme
////////////////////////////////////////////////////////////////////////// */
/*
1.Release
*/
.release-wrap {
display: grid;
width: 100%;
gap: var(--gap);
grid-auto-columns: 1fr;
grid-gap: var(--gap);
grid-template-columns: repeat(3, 1fr);
}
/* Item
*/
.release-item {
font-family: var(--font-family-monospace);
font-size: 7rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1;
box-sizing: border-box;
width: 100%;
padding: .4em;
transition: transform .2s ease;
background-color: var(--color-two);
will-change: transform;
}
.release-item:hover {
transform: translateY(-3px);
}
.release-item small {
font-size: 2rem;
line-height: 1.3;
display: block;
margin: 1.2em 0 0 2px;
color: var(--color-font-two);
}
.release-item:first-child {
background-color: var(--ghost-accent-color);
}
.release-item:first-child,
.release-item:first-child small {
color: var(--color-font-black);
}
/* RWD — Release
*/
@media (max-width:1024px) {
.release-wrap {
grid-template-columns: repeat(1, 1fr);
}
.release-item {
font-size: 4rem;
}
.release-item small {
font-size: 1.4rem;
}
}
@media (max-width:480px) {
.release-wrap {
gap: calc(var(--gap) * 3);
grid-gap: calc(var(--gap) * 3);
}
}
/*
2.Header
*/
header nav.is-back {
margin-right: auto;
margin-left: 0;
}
header nav.is-back a {
line-height: 38px;
box-sizing: border-box;
width: 42px;
height: 42px;
margin-left: -4px;
transition: color .15s ease;
text-align: center;
color: var(--color-font-two);
border: 2px solid;
border-radius: 100px;
background-color: var(--color-body);
}
header nav.is-back a:hover {
color: var(--color-font-one);
}
header nav a.is-version {
pointer-events: none;
}
header nav a.is-version span {
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-monospace-regular);
}
body.is-scroll-nav header nav.is-back a {
transform: translateY(0);
opacity: 1;
}
/* RWD — Header
*/
@media (max-width:768px) {
header nav.is-back a {
display: block;
margin-left: 0px;
}
body.is-scroll-nav header nav a.is-see-themes {
transform: translateY(-30px);
opacity: 0;
}
}
/*
3.Sidebar
*/
.sidebar-section {
flex: 0 0 24%;
min-width: 280px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sidebar-section > ul {
position: fixed;
top: 0;
overflow-y: auto;
width: 100%;
max-width: 280px;
height: 100%;
margin: 0;
padding: 0;
}
/* Wrap
*/
.sidebar-wrap:first-child {
margin-top: 15vh;
}
/* Title
*/
.sidebar-title {
font-size: 2.4rem;
display: inline-block;
margin: 0 0 1.5vh;
}
/* List
*/
.sidebar-wrap:not(.active) .sidebar-list {
display: none;
}
.sidebar-list {
margin: .5vh 0 1.8vh 0;
padding: 0;
}
.sidebar-list li {
font-size: 1.8rem;
line-height: 1.2;
position: relative;
display: block;
margin: 0 0 0 17px;
padding: 0 0 1.4vh;
list-style: none;
pointer-events: none;
}
.sidebar-list li a {
pointer-events: auto;
color: var(--color-font-two);
}
.sidebar-list li.active a,
.sidebar-list li:hover a {
color: var(--color-font-one);
}
/* Active dot
*/
.sidebar-list li.active::before {
position: absolute;
top: 5px;
left: -15px;
display: block;
width: 8px;
height: 8px;
content: '';
border-radius: 100px;
background-color: var(--ghost-accent-color);
}
/* RWD — Sidebar
*/
@media (max-width:1024px) {
.sidebar-section {
display: none;
}
}
/*
4.Docs
*/
.docs-section {
display: flex;
flex-wrap: wrap;
}
.docs-wrap {
flex: 1 0 50%;
max-width: 860px;
}
.docs-content small,
.docs-content h6 {
font-family: var(--font-family-monospace);
font-size: 1.8rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1.4;
}
/* Margins
*/
.docs-content .kg-image-card,
.docs-content pre,
.docs-content .kg-code-card,
.docs-content .kg-code-card figcaption,
.docs-content blockquote,
.docs-content mark,
.docs-content ol {
margin: 0 0 5vh;
}
/* Content
*/
.docs-content {
margin-bottom: 16vh;
}
.docs-wrap div:last-child .docs-content:last-child {
margin-bottom: 0;
}
.docs-content::before {
display: block;
visibility: hidden;
height: 15vh;
margin-top: -15vh;
content: '';
}
/* Links */
.docs-content a {
text-decoration: var(--underline);
color: var(--color-link);
}
.docs-content a:hover {
text-decoration: var(--underline-hover);
color: var(--color-link-hover);
}
/* Paragraphs */
.docs-content small {
color: var(--color-font-two);
}
.docs-content p {
font-size: 2rem;
line-height: 1.6;
width: 100%;
margin: 0 0 20px;
padding: 0;
}
/* Headers */
.docs-content h2 {
font-size: 7.8rem;
line-height: 1.1;
margin: 0;
}
.docs-content h3,
.docs-content h4 {
font-size: 4rem;
}
.docs-content h6 {
display: inline-block;
width: 100%;
margin: 0 0 20px;
padding: 5vh 0 10px;
color: var(--color-font-one);
border-bottom: 1px solid var(--color-border);
}
/* Images */
.docs-content img {
line-height: 1;
width: 100%;
height: auto;
box-shadow: 0 10px 45px 0 rgba(0, 0, 0, .13);
}
/* Code */
.docs-content code {
font-family: var(--font-family-monospace);
font-size: 80%;
font-weight: var(--font-weight-monospace-regular);
padding: 1px 6px 3px;
color: var(--color-font-one);
border-radius: 5px;
background-color: var(--color-code-inline);
}
.docs-content pre code {
font-size: 80%;
display: block;
margin: 0 0 10px;
padding: 25px 30px;
white-space: pre-wrap;
background-color: var(--color-two);
}
.docs-content .kg-code-card pre {
margin: 0;
}
/* Figcaption */
.docs-content figcaption,
.docs-content figcaption p {
font-size: 1.6rem;
color: var(--color-font-two);
}
/* Alerts */
.docs-content blockquote,
.docs-content mark {
font-size: 2rem;
display: block;
box-sizing: border-box;
width: 100%;
max-width: 90%;
padding: 12px 20px;
border-left: 3px solid;
background-color: var(--color-body);
}
.docs-content blockquote {
border-color: var(--color-blue);
}
.docs-content mark {
color: var(--color-font-one);
border-color: var(--color-red);
}
/* Lists */
.docs-content ol {
font-size: 1.7rem;
display: block;
box-sizing: border-box;
width: 100%;
padding-left: 43px;
counter-reset: li;
}
.docs-content ol li {
font-size: 2rem;
line-height: 1.6;
position: relative;
z-index: 1;
box-sizing: border-box;
width: 100%;
padding-bottom: 20px;
list-style: none;
counter-increment: li;
}
.docs-content ol li:last-of-type {
padding-bottom: 0;
}
.docs-content ol li::before {
font-family: var(--font-family-monospace);
font-size: 1.6rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 32px;
position: absolute;
z-index: -1;
top: 14px;
left: -45px;
display: block;
width: 32px;
height: 32px;
margin-top: 2px;
content: counter(li);
transform: translate(0, -50%);
text-align: center;
color: var(--color-white);
border-radius: 50%;
background-color: var(--color-blue);
}
.docs-content ol.alert {
margin-top: 40px;
}
.docs-content ol.alert li::before {
content: '!';
background-color: var(--color-red);
}
/* Colors
*/
.docs-content h6 + .colors {
margin-top: 10px;
}
.docs-content section {
position: relative;
display: flex;
align-content: center;
flex: 1 0 calc(50% - 40px);
flex-wrap: wrap;
box-sizing: border-box;
min-width: 315px;
max-width: calc(45% - 40px);
height: 100px;
margin: 0 40px 30px 0;
padding: 15px;
border: 1px solid var(--color-border);
border-radius: 100px;
}
.docs-content section h3 {
font-size: 2rem;
line-height: 1;
display: block;
width: 100%;
margin: -2px 0 12px 90px;
}
.docs-content section.default h3::after {
font-family: var(--font-family-monospace);
font-size: 1.3rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1.6;
position: absolute;
margin-left: 10px;
padding-right: 5px;
padding-left: 7px;
content: 'Default';
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-white);
border-radius: 4px;
background-color: var(--color-blue);
}
.docs-content section h3::before {
position: absolute;
top: 14px;
left: 15px;
width: 70px;
height: 70px;
content: '';
border-radius: 50%;
}
.docs-content section code {
font-size: 1.7rem;
line-height: 1;
margin-left: 90px;
}
/* RWD — Docs
*/
@media (max-width:1280px) {
.docs-content h2 {
font-size: 5rem;
}
.docs-content h3,
.docs-content h4 {
font-size: 3rem;
}
.docs-content {
margin-bottom: 10vh;
}
}
@media (max-width:480px) {
.docs-content h2 {
font-size: 4rem;
}
.docs-content h3,
.docs-content h4 {
font-size: 2.6rem;
}
}
/*
5.Changelog
*/
.changelog-item h3,
.changelog-item code {
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-monospace-regular);
}
.changelog-item h3 {
font-size: 7.8rem;
margin: 0;
}
.changelog-item code {
font-size: 75%;
padding: 1px 6px 3px;
border-radius: 5px;
background-color: var(--color-code-inline);
}
.changelog-item span {
font-family: var(--font-family-one);
font-weight: var(--font-weight-one-light);
color: var(--color-font-two);
}
.changelog-item ul {
margin: 3vh 0 9vh;
padding: 0;
}
.changelog-item ul li {
font-size: 2.4rem;
display: block;
align-items: baseline;
width: 100%;
padding-bottom: 8px;
list-style: none;
}
.changelog-item ul li strong {
font-size: 1.3rem;
display: inline-block;
margin-right: 10px;
padding: 3px 6px;
transform: translateY(-3px);
letter-spacing: 1.5px;
word-break: normal;
border: 1px solid var(--color-four);
border-radius: 100px;
}
/* RWD — Changelog
*/
@media (max-width:1024px) {
.changelog-item h3 {
font-size: 6rem;
}
.changelog-item span {
line-height: 1;
display: block;
}
}
@media (max-width:480px) {
.changelog-item h3 {
font-size: 4rem;
}
.changelog-item ul {
margin-bottom: 5vh;
}
.changelog-item ul li {
font-size: 1.8rem;
}
.changelog-item ul li strong {
font-size: 1rem;
}
}
/*
6.Third-party materials
*/
.third-party-section a {
font-size: 6rem;
display: inline-block;
margin-right: 1vw;
pointer-events: none;
}
.third-party-section a span {
pointer-events: auto;
}
.third-party-section a sup {
font-size: 65%;
margin-left: 3px;
transition: color .1s ease;
color: var(--color-font-two);
}
.third-party-section a:hover,
.third-party-section a:hover sup {
color: var(--ghost-accent-color);
}
/* RWD — Third-party materials
*/
@media (max-width:1024px) {
.third-party-section a {
font-size: 3.6rem;
}
}
@media (max-width:480px) {
.third-party-section a {
font-size: 3rem;
display: block;
}
}
/*
7.GScan
*/
.kg-width-wide,.kg-width-full,.kg-gallery-container,.kg-gallery-row,.kg-gallery-image,.kg-bookmark-card,.kg-bookmark-container,.kg-bookmark-content,.kg-bookmark-metadata,.kg-bookmark-title,.kg-bookmark-description,.kg-bookmark-icon,.kg-bookmark-author,.kg-bookmark-publisher,.kg-bookmark-thumbnail,.kg-callout-card,.kg-callout-card-emoji,.kg-callout-card-text,.kg-callout-card-background-grey,.kg-callout-card-background-white,.kg-callout-card-background-blue,.kg-callout-card-background-green,.kg-callout-card-background-yellow,.kg-callout-card-background-red,.kg-callout-card-background-pink,.kg-callout-card-background-purple,.kg-callout-card-background-accent,.kg-nft-card,.kg-nft-card-container,.kg-nft-metadata,.kg-nft-image,.kg-nft-header,.kg-nft-title,.kg-nft-logo,.kg-nft-creator,.kg-nft-description,.kg-toggle-card,.kg-toggle-heading,.kg-toggle-heading-text,.kg-toggle-card-icon,.kg-toggle-content,.kg-audio-card,.kg-audio-thumbnail,.kg-audio-thumbnail.placeholder,.kg-audio-player-container,.kg-audio-title,.kg-audio-player,.kg-audio-current-time,.kg-audio-time,.kg-audio-duration,.kg-audio-play-icon,.kg-audio-pause-icon,.kg-audio-seek-slider,.kg-audio-playback-rate,.kg-audio-mute-icon,.kg-audio-unmute-icon,.kg-audio-volume-slider,.kg-video-card,.kg-video-hide,.kg-video-container,.kg-video-overlay,.kg-video-large-play-icon,.kg-video-thumbnail,.kg-video-thumbnail.placeholder,.kg-video-player-container,.kg-video-title,.kg-video-player,.kg-video-current-time,.kg-video-time,.kg-video-duration,.kg-video-play-icon,.kg-video-pause-icon,.kg-video-seek-slider,.kg-video-playback-rate,.kg-video-mute-icon,.kg-video-unmute-icon,.kg-video-volume-slider,.kg-button-card,.kg-button-card.kg-align-left,.kg-button-card.kg-align-center,.kg-btn,.kg-btn-accent,.kg-product-card,.kg-product-card-btn-accent,.kg-product-card-button,.kg-product-card-container,.kg-product-card-description,.kg-product-card-image,.kg-product-card-rating,.kg-product-card-rating-active,.kg-product-card-rating-star,.kg-product-card-title,.kg-product-card-title-container,.kg-before-after-card,.kg-before-after-card-image-before,.kg-before-after-card-image-after,.kg-file-card,.kg-file-card-container,.kg-file-card-contents,.kg-file-card-title,.kg-file-card-caption,.kg-file-card-filename,.kg-file-card-filesize,.kg-file-card-medium,.kg-file-card-small,.kg-blockquote-alt{display:none}
</style>
<script>
(function(){if(window.location.href.search(new RegExp("\.zip[\\/]","i"))>=0){alert("It looks like you are in the preview mode of the zip archive. The documentation files are not displayed correctly. Please extract the zip archive (right-click on the archive downloaded from Themeforest and select 'Extract All'). Then reopen the index.html file from new location.");}})();
</script>
</head> <body>
<header>
<nav class="is-back">
<ul><li><a href="../index.html" aria-label="back"></a></li></ul>
</nav>
<nav>
<ul>
<li><a href="../index.html" class="is-version">Basho — User Documentation</a></li>
<li><a href="https://fueko.net/themes/" class="global-button is-accent-color is-see-themes">See Themes</a></li>
</ul>
</nav>
</header>
<main>
<div class="third-party-section global-padding">
<h1 class="global-title-big">Third-Party Materials</h1>
<h2 class="global-title-medium">With these resources, this theme can be even better. <span>A huge thank you to all who contributed to this!</span></h2>
<!--kg-card-begin: html-->
<div class="global-subtitle-section">
<h3 class="global-title-small">CSS</h3>
</div>
<a href="https://necolas.github.io/normalize.css/" target="_blank" rel="noopener"><span>Normalize.css</span><sup></sup></a>
<!--kg-card-end: html-->
<!--kg-card-begin: html-->
<div class="global-subtitle-section">
<h3 class="global-title-small">JavaScript</h3>
</div>
<a href="https://clipboardjs.com" target="_blank" rel="noopener"><span>clipboard.js</span><sup></sup></a>
<a href="https://samclarke.com/lazy-loading-disqus" target="_blank" rel="noopener"><span>disqusLazy</span><sup></sup></a>
<a href="https://flickity.metafizzy.co" target="_blank" rel="noopener"><span>Flickity</span><sup></sup></a>
<a href="https://fusejs.io" target="_blank" rel="noopener"><span>Fuse.js</span><sup></sup></a>
<a href="https://infinite-scroll.com" target="_blank" rel="noopener"><span>infinite-scroll</span><sup></sup></a>
<a href="https://sparanoid.com/work/lightense-images/" target="_blank" rel="noopener"><span>lightense-images</span><sup></sup></a>
<a href="https://dollarshaveclub.github.io/reframe.js/" target="_blank" rel="noopener"><span>Reframe.js</span><sup></sup></a>
<!--kg-card-end: html-->
<!--kg-card-begin: html-->
<div class="global-subtitle-section">
<h3 class="global-title-small">Fonts</h3>
</div>
<a href="https://fonts.google.com/specimen/Archivo" target="_blank" rel="noopener"><span>Archivo</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Bona+Nova" target="_blank" rel="noopener"><span>Bona Nova</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Inter" target="_blank" rel="noopener"><span>Inter</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Lato" target="_blank" rel="noopener"><span>Lato</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/EB+Garamond" target="_blank" rel="noopener"><span>EB Garamond</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Lora" target="_blank" rel="noopener"><span>Lora</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Nunito" target="_blank" rel="noopener"><span>Nunito</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Oswald" target="_blank" rel="noopener"><span>Oswald</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Playfair+Display" target="_blank" rel="noopener"><span>Playfair Display</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Poppins" target="_blank" rel="noopener"><span>Poppins</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Raleway" target="_blank" rel="noopener"><span>Raleway</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Roboto" target="_blank" rel="noopener"><span>Roboto</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Space+Grotesk" target="_blank" rel="noopener"><span>Space Grotesk</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Sora" target="_blank" rel="noopener"><span>Sora</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Syne" target="_blank" rel="noopener"><span>Syne</span><sup></sup></a>
<a href="https://fonts.google.com/specimen/Work+Sans" target="_blank" rel="noopener"><span>Work Sans</span><sup></sup></a>
<!--kg-card-end: html-->
</div>
</main>
<footer>
<div class="global-padding">
<div class="footer-copyright">
&copy; 2025 <a href="https://fueko.net">fueko</a>.
Made with ♥ for <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>. All Right Reserved.
</div>
<div class="footer-nav">
<nav>
<ul>
<li><a href="../changelog-basho/index.html">Changelog</a></li>
<li><a href="index.html">Third-Party Materials</a></li>
<li><a href="https://fueko.net/privacy/">Privacy Policy</a></li>
</ul>
</nav>
</div>
<div class="global-top-button"><span></span></div>
</div>
</footer> <script>document.addEventListener("DOMContentLoaded",function(){const n=document.body,g=document.querySelector(".global-top-button");window.addEventListener("scroll",function(){1500<window.scrollY?n.classList.add("is-scroll-back"):n.classList.remove("is-scroll-back")}),g.addEventListener("click",function(){window.scrollTo(0,0)});window.addEventListener("scroll",function(){50<window.scrollY?n.classList.add("is-scroll-nav"):n.classList.remove("is-scroll-nav")})});</script>
</body>
</html>