fix hero
This commit is contained in:
@@ -26,15 +26,9 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -88,8 +82,6 @@
|
||||
<script src="/js/bootstrap.js" defer></script>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" src="http://localhost:1313/js/image-compare.js" ></script>
|
||||
</head><body>
|
||||
<div>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user