Federated_Computer/enterprise.federated.computer
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix hero

Browse Source
This commit is contained in:
david
2025-08-25 13:54:37 -06:00
parent 15551f86c4
commit cc28ec6725
3 changed files with 107 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
data/landing.yaml
View File

@@ -115,3 +115,93 @@ featureGrid:
ctaLink:
text: learn more
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"

24
public/404.html
View File

@@ -26,15 +26,9 @@
@@ -87,8 +81,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">
@@ -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>
</html>

158
public/index.html
View File

@@ -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&rsquo; 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>