fix hero
This commit is contained in:
@@ -115,3 +115,93 @@ featureGrid:
|
|||||||
ctaLink:
|
ctaLink:
|
||||||
text: learn more
|
text: learn more
|
||||||
url: /docs/
|
url: /docs/
|
||||||
|
|
||||||
|
imageText:
|
||||||
|
enable: false
|
||||||
|
weight: 25
|
||||||
|
template: image text
|
||||||
|
|
||||||
|
title: Built with performance and accessability in mind. Top scores on Google's Lighthouse
|
||||||
|
subtitle: A default Lotus Docs deployment is capable of achieving 4 x 100 scores on Google's Lighthouse performance analysis tool.
|
||||||
|
|
||||||
|
list:
|
||||||
|
- text: Blazing fast page loads
|
||||||
|
icon: speed
|
||||||
|
|
||||||
|
- text: Sensible default SEO friendly settings
|
||||||
|
icon: area_chart
|
||||||
|
|
||||||
|
- text: Designed to be accessible
|
||||||
|
icon: accessibility
|
||||||
|
|
||||||
|
image:
|
||||||
|
path: "images/templates/single"
|
||||||
|
filename: "google_lighthouse_circle_v1.0.svg"
|
||||||
|
alt: "Google LightHouse 100% Illustration" # Optional but recommended
|
||||||
|
|
||||||
|
imgOrder:
|
||||||
|
desktop: 2
|
||||||
|
mobile: 1
|
||||||
|
|
||||||
|
ctaButton:
|
||||||
|
text: Learn more
|
||||||
|
url: "/docs/"
|
||||||
|
|
||||||
|
# Image compare
|
||||||
|
imageCompare:
|
||||||
|
enable: false
|
||||||
|
weight: 30
|
||||||
|
template: image compare
|
||||||
|
|
||||||
|
title: Customise The Lotus Docs Appearance
|
||||||
|
subtitle: Much of Lotus Docs' appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.
|
||||||
|
|
||||||
|
items:
|
||||||
|
- title: Dark Mode
|
||||||
|
config: {
|
||||||
|
startingPoint: 50,
|
||||||
|
addCircle: true,
|
||||||
|
addCircleBlur: false,
|
||||||
|
showLabels: true,
|
||||||
|
labelOptions: {
|
||||||
|
before: 'Dark',
|
||||||
|
after: 'Light',
|
||||||
|
onHover: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imagePath: "images/screenshots"
|
||||||
|
imageBefore: "lotusdocs_dark_v0.8.webp"
|
||||||
|
imageAfter: "lotusdocs_light_v0.8.webp"
|
||||||
|
|
||||||
|
- title: Custom Fonts
|
||||||
|
config: {
|
||||||
|
controlColor: "#3C4257",
|
||||||
|
startingPoint: 25,
|
||||||
|
addCircle: true,
|
||||||
|
addCircleBlur: false,
|
||||||
|
showLabels: true,
|
||||||
|
labelOptions: {
|
||||||
|
before: 'Inter',
|
||||||
|
after: 'Life Saver',
|
||||||
|
onHover: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imagePath: "images/screenshots"
|
||||||
|
imageBefore: "lotusdocs_google_font_demo_inter_screenshot.webp"
|
||||||
|
imageAfter: "lotusdocs_google_font_demo_lifesavers_screenshot.webp"
|
||||||
|
|
||||||
|
- title: Accent Color
|
||||||
|
config: {
|
||||||
|
startingPoint: 25,
|
||||||
|
addCircle: true,
|
||||||
|
addCircleBlur: true,
|
||||||
|
showLabels: true,
|
||||||
|
labelOptions: {
|
||||||
|
before: 'Blue',
|
||||||
|
after: 'Cardinal',
|
||||||
|
onHover: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imagePath: "images/screenshots"
|
||||||
|
imageBefore: "lotusdocs_blue_theme_colour.webp"
|
||||||
|
imageAfter: "lotusdocs_cardinal_theme_colour.webp"
|
||||||
|
|||||||
@@ -26,15 +26,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -87,8 +81,6 @@
|
|||||||
<script src="/js/bootstrap.js" defer></script>
|
<script src="/js/bootstrap.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="http://localhost:1313/js/image-compare.js" ></script>
|
|
||||||
</head><body>
|
</head><body>
|
||||||
<div>
|
<div>
|
||||||
<header id="topnav">
|
<header id="topnav">
|
||||||
@@ -187,16 +179,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const viewers = document.querySelectorAll(".image-compare");
|
|
||||||
let configs = [
|
|
||||||
{"addCircle":true,"addCircleBlur":false,"labelOptions":{"after":"Light","before":"Dark","onHover":false},"showLabels":true,"startingPoint":50},{"addCircle":true,"addCircleBlur":false,"controlColor":"#3C4257","labelOptions":{"after":"Life Saver","before":"Inter","onHover":false},"showLabels":true,"startingPoint":25},{"addCircle":true,"addCircleBlur":true,"labelOptions":{"after":"Cardinal","before":"Blue","onHover":false},"showLabels":true,"startingPoint":25}
|
|
||||||
];
|
|
||||||
viewers.forEach((element, i) => {
|
|
||||||
let view = new ImageCompare(element, configs[i]).mount();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -26,15 +26,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -88,8 +82,6 @@
|
|||||||
<script src="/js/bootstrap.js" defer></script>
|
<script src="/js/bootstrap.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="http://localhost:1313/js/image-compare.js" ></script>
|
|
||||||
</head><body>
|
</head><body>
|
||||||
<div>
|
<div>
|
||||||
<header id="topnav">
|
<header id="topnav">
|
||||||
@@ -167,6 +159,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -485,131 +484,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section id="imageCompare">
|
|
||||||
<div class="container mt-100 mt-60">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<div class="section-title mb-4 pb-2">
|
|
||||||
|
|
||||||
<h4 class="title fw-bold mb-4">Customise The Lotus Docs Appearance</h4>
|
|
||||||
|
|
||||||
|
|
||||||
<p class="text-muted para-desc mb-0 mx-auto">Much of Lotus Docs’ appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-lg-8 col-md-12 mt-3 pt-2 text-center">
|
|
||||||
<ul class="nav nav-pills nav-justified flex-column flex-sm-row rounded bg-primary" id="pills-tab-imageCompare" role="tablist">
|
|
||||||
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link rounded active" id="dark-mode-tab" data-bs-toggle="pill" href="#pills-imageCompare-dark-mode" role="tab" aria-controls="pills-dark-mode" aria-selected="false">
|
|
||||||
<div class="text-center py-2">
|
|
||||||
<p class="mb-0 fs-6 fw-semibold">Dark Mode</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link rounded" id="custom-fonts-tab" data-bs-toggle="pill" href="#pills-imageCompare-custom-fonts" role="tab" aria-controls="pills-custom-fonts" aria-selected="false">
|
|
||||||
<div class="text-center py-2">
|
|
||||||
<p class="mb-0 fs-6 fw-semibold">Custom Fonts</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link rounded" id="accent-color-tab" data-bs-toggle="pill" href="#pills-imageCompare-accent-color" role="tab" aria-controls="pills-accent-color" aria-selected="false">
|
|
||||||
<div class="text-center py-2">
|
|
||||||
<p class="mb-0 fs-6 fw-semibold">Accent Color</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 mt-4 pt-2">
|
|
||||||
<div class="tab-content" id="pills-tab-imageCompareContent">
|
|
||||||
|
|
||||||
<div class="tab-pane fade show active" id="pills-imageCompare-dark-mode" role="tabpanel" aria-labelledby="dark-mode-tab">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-md-12">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="dark-mode-compare" class="image-compare rounded-md border">
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_dark_v0.8.webp" alt="/images/screenshots/lotusdocs_dark_v0.8.webp" />
|
|
||||||
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_light_v0.8.webp" alt="/images/screenshots/lotusdocs_light_v0.8.webp" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-pane fade show" id="pills-imageCompare-custom-fonts" role="tabpanel" aria-labelledby="custom-fonts-tab">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-md-12">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="custom-fonts-compare" class="image-compare rounded-md border">
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_google_font_demo_inter_screenshot.webp" alt="/images/screenshots/lotusdocs_google_font_demo_inter_screenshot.webp" />
|
|
||||||
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_google_font_demo_lifesavers_screenshot.webp" alt="/images/screenshots/lotusdocs_google_font_demo_lifesavers_screenshot.webp" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-pane fade show" id="pills-imageCompare-accent-color" role="tabpanel" aria-labelledby="accent-color-tab">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-md-12">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="accent-color-compare" class="image-compare rounded-md border">
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_blue_theme_colour.webp" alt="/images/screenshots/lotusdocs_blue_theme_colour.webp" />
|
|
||||||
|
|
||||||
|
|
||||||
<img src="/images/screenshots/lotusdocs_cardinal_theme_colour.webp" alt="/images/screenshots/lotusdocs_cardinal_theme_colour.webp" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -642,16 +522,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const viewers = document.querySelectorAll(".image-compare");
|
|
||||||
let configs = [
|
|
||||||
{"addCircle":true,"addCircleBlur":false,"labelOptions":{"after":"Light","before":"Dark","onHover":false},"showLabels":true,"startingPoint":50},{"addCircle":true,"addCircleBlur":false,"controlColor":"#3C4257","labelOptions":{"after":"Life Saver","before":"Inter","onHover":false},"showLabels":true,"startingPoint":25},{"addCircle":true,"addCircleBlur":true,"labelOptions":{"after":"Cardinal","before":"Blue","onHover":false},"showLabels":true,"startingPoint":25}
|
|
||||||
];
|
|
||||||
viewers.forEach((element, i) => {
|
|
||||||
let view = new ImageCompare(element, configs[i]).mount();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user