Skip to content

🎨 Palette: [UX improvement] Enhanced Welcome Screen & README Accessibility #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
christopherfoxjr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Enhanced Welcome Screen & README Accessibility #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img width="1430" height="892" alt="image" src="https://github.com/user-attachments/assets/6709be99-ea56-44c9-8863-fc784c0c744f" />
<img width="1430" height="892" alt="Screenshot of KibaOS showing the Budgie Desktop with a Cutefish-inspired aesthetic, featuring a floating bottom panel, dark navy theme, and modern UI elements." src="https://github.com/user-attachments/assets/6709be99-ea56-44c9-8863-fc784c0c744f" />

</p>

Expand Down
73 changes: 38 additions & 35 deletions build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1608,6 +1608,7 @@ cat > /usr/share/kibaos/welcome.html << 'WELCOMEHTML'
transition: background .12s;
}
.btn:hover { background:var(--accent-dark); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.secondary {
background:var(--surface); color:var(--accent);
border:1.5px solid var(--border);
Expand All @@ -1633,42 +1634,44 @@ cat > /usr/share/kibaos/welcome.html << 'WELCOMEHTML'
<p>A fast, polished Budgie desktop built on Arch Linux — by WolfTech Innovations</p>
</header>

<div class="card-row">
<div class="card">
<h2>Budgie 10.10 Wayland</h2>
<p>Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.</p>
<main>
<div class="card-row">
<div class="card">
<h2>Budgie 10.10 Wayland</h2>
<p>Fully Wayland-native. Powered by labwc for smooth, compositor-agnostic window management.</p>
</div>
<div class="card">
<h2>Built on Arch Linux</h2>
<p>Rolling release. Always the latest software, straight from upstream with full AUR access.</p>
</div>
<div class="card">
<h2>Unified Design</h2>
<p>Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.</p>
</div>
<div class="card">
<h2>Private by Default</h2>
<p>Full disk encryption support. No telemetry. Your data stays yours.</p>
</div>
</div>
<div class="card">
<h2>Built on Arch Linux</h2>
<p>Rolling release. Always the latest software, straight from upstream with full AUR access.</p>
</div>
<div class="card">
<h2>Unified Design</h2>
<p>Inspired by DDE's curves, Paper's flat surfaces, and Cutefish's airy, floating aesthetic.</p>
</div>
<div class="card">
<h2>Private by Default</h2>
<p>Full disk encryption support. No telemetry. Your data stays yours.</p>
</div>
</div>

<section>
<h2>Ready to Install?</h2>
<p>Click <strong>Install KibaOS</strong> on the desktop, or run:</p>
<div class="tip"><code>sudo calamares</code></div>
<br>
<a class="btn" href="https://github.com/WolfTech-Innovations/Kiba/blob/main/WIKI.md">Wiki</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba/issues">Report Issue</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba">GitHub</a>

<h2>Design Language</h2>
<p>KibaOS's visual identity draws from three reference desktops:</p>
<div class="design-pills">
<span class="pill">DDE — smooth rounded corners, cohesive icon language, dark navy base</span>
<span class="pill">Paper DE — flat material surfaces, colored accents, minimal depth shadows</span>
<span class="pill">Cutefish — floating dock, translucent panels, generous whitespace, airy cards</span>
</div>
</section>

<section>
<h2>Ready to Install?</h2>
<p>Click <strong>Install KibaOS</strong> on the desktop, or run:</p>
<div class="tip"><code>sudo calamares</code></div>
<br>
<a class="btn" href="https://github.com/WolfTech-Innovations/Kiba/blob/main/WIKI.md" target="_blank" rel="noopener noreferrer" aria-label="Open KibaOS Wiki in a new tab">📖 Wiki</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba/issues" target="_blank" rel="noopener noreferrer" aria-label="Report an issue on GitHub in a new tab">🐞 Report Issue</a>
<a class="btn secondary" href="https://github.com/WolfTech-Innovations/Kiba" target="_blank" rel="noopener noreferrer" aria-label="View KibaOS source code on GitHub in a new tab">💻 GitHub</a>

<h2>Design Language</h2>
<p>KibaOS's visual identity draws from three reference desktops:</p>
<div class="design-pills">
<span class="pill">DDE — smooth rounded corners, cohesive icon language, dark navy base</span>
<span class="pill">Paper DE — flat material surfaces, colored accents, minimal depth shadows</span>
<span class="pill">Cutefish — floating dock, translucent panels, generous whitespace, airy cards</span>
</div>
</section>
</main>

<footer>KibaOS Rolling — WolfTech Innovations — github.com/WolfTech-Innovations/Kiba</footer>
</body>
Expand Down