mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 13:03:10 +00:00
ui: improve about page navigation
This commit is contained in:
parent
2d915da2c4
commit
1843dd80c3
1 changed files with 461 additions and 440 deletions
|
|
@ -1,440 +1,461 @@
|
|||
---
|
||||
import PublicLayout from '../layouts/PublicLayout.astro';
|
||||
---
|
||||
|
||||
<PublicLayout title="About" description="Learn about Likwid, a modular governance engine for distributed organizations, open source communities, and civic movements.">
|
||||
<article class="about-page">
|
||||
<header class="page-header">
|
||||
<h1>About Likwid</h1>
|
||||
<p class="lead">
|
||||
Likwid is a modular governance engine designed for organizations that need
|
||||
structured, transparent, and auditable decision-making processes.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>What Problem Does Likwid Solve?</h2>
|
||||
<p>
|
||||
Most organizations—whether open source projects, political movements, or member associations—struggle
|
||||
with collective decision-making. They often rely on informal processes, ad-hoc polls, or tools designed
|
||||
for other purposes (forums, chat platforms, issue trackers).
|
||||
</p>
|
||||
<p>
|
||||
These approaches fail in predictable ways:
|
||||
</p>
|
||||
<ul class="problem-list">
|
||||
<li><strong>Lack of structure</strong> — Discussions drift without resolution. Decisions are made implicitly or by whoever speaks loudest.</li>
|
||||
<li><strong>No audit trail</strong> — When moderation happens, there's no record of why. Shadow banning and hidden decisions erode trust.</li>
|
||||
<li><strong>Limited voting methods</strong> — Simple majority voting fails for complex decisions with multiple options or competing priorities.</li>
|
||||
<li><strong>Participation barriers</strong> — Members who can't attend synchronous meetings or follow high-volume discussions are effectively excluded.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Likwid addresses these problems by providing governance as infrastructure: a system that structures
|
||||
deliberation, enforces transparency, and supports sophisticated decision-making methods.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>What Likwid Is</h2>
|
||||
<div class="is-grid">
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>A Governance Engine</h4>
|
||||
<p>Likwid provides the core infrastructure for collective decision-making: proposals, deliberation, voting, and implementation tracking.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Modular by Design</h4>
|
||||
<p>Every component is a plugin. Communities choose their voting methods, delegation rules, moderation policies, and integrations.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Transparent by Default</h4>
|
||||
<p>All moderation actions are logged with reasons. There is no shadow banning. Audit trails are cryptographically verifiable.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Self-Hostable</h4>
|
||||
<p>Organizations control their own data. Likwid runs on your infrastructure with no vendor lock-in.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>What Likwid Is Not</h2>
|
||||
<div class="isnot-grid">
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Social Network</h4>
|
||||
<p>Likwid is not designed for casual conversation, content sharing, or social interactions. It's governance infrastructure.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Simple Poll Tool</h4>
|
||||
<p>While Likwid supports voting, it's designed for complex decisions with deliberation phases, multiple options, and sophisticated tallying methods.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Forum</h4>
|
||||
<p>Discussions in Likwid are structured and goal-oriented. They're part of a decision process, not open-ended conversation.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a CRM or Membership System</h4>
|
||||
<p>Likwid handles governance, not member management, donations, or communications. It integrates with those systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Who Is Likwid For?</h2>
|
||||
<div class="audience-section">
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Open Source & FLOSS Communities</h4>
|
||||
<p>
|
||||
Projects that need to make technical and organizational decisions collectively.
|
||||
Maintainers, contributors, and users participating in governance alongside code contribution.
|
||||
Integration with development workflows (GitLab, Forgejo, Gitea) and documentation systems.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Associations & NGOs</h4>
|
||||
<p>
|
||||
Member-driven organizations requiring formal decision processes.
|
||||
Annual general meetings, board decisions, and policy changes with proper record-keeping.
|
||||
Transparent moderation for community standards enforcement.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Political Movements & Parties</h4>
|
||||
<p>
|
||||
Grassroots organizations, civic lists, and political parties.
|
||||
Delegate assemblies, policy development, and candidate selection.
|
||||
Liquid democracy features for modern participatory politics.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Federated & Distributed Organizations</h4>
|
||||
<p>
|
||||
Networks of chapters, working groups, or autonomous units.
|
||||
Coordination across geographic or functional boundaries.
|
||||
Federation features for inter-community governance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Core Principles</h2>
|
||||
<div class="principles-grid">
|
||||
<div class="principle">
|
||||
<h4>Transparency Over Convenience</h4>
|
||||
<p>Every moderation action is logged with a reason. Audit trails are public. There are no hidden decisions or shadow bans.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Privacy Where It Matters</h4>
|
||||
<p>Civic identities (who you are in discussions) and voting identities (how you voted) are separated. Participate openly while voting privately.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Process Over Features</h4>
|
||||
<p>Governance is a process, not a feature list. Likwid structures deliberation with clear phases: inform, discuss, decide.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Flexibility Over Prescription</h4>
|
||||
<p>Organizations differ. Likwid's plugin architecture lets communities configure governance to match their needs and culture.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Technical Foundation</h2>
|
||||
<p>
|
||||
Likwid is free and open source software (EUPL-1.2), built with modern, auditable technology:
|
||||
</p>
|
||||
<div class="tech-table ui-card">
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Backend</span>
|
||||
<span class="tech-value">Rust (Axum framework)</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Frontend</span>
|
||||
<span class="tech-value">Astro + TypeScript</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Database</span>
|
||||
<span class="tech-value">PostgreSQL</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Containers</span>
|
||||
<span class="tech-value">Podman / Docker</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">License</span>
|
||||
<span class="tech-value">EUPL-1.2</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tech-note">
|
||||
The choice of Rust provides memory safety and performance. PostgreSQL ensures data integrity
|
||||
for critical governance records. The EUPL-1.2 license guarantees that improvements to Likwid
|
||||
remain available to the community.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section cta-section">
|
||||
<h2>Learn More</h2>
|
||||
<p>
|
||||
Explore Likwid's capabilities, understand our vision, or see the system in action.
|
||||
</p>
|
||||
<div class="cta-grid">
|
||||
<a href="/features" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Features</h4>
|
||||
<p>Detailed explanation of voting methods, delegation, and moderation tools.</p>
|
||||
</a>
|
||||
<a href="/manifesto" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Manifesto</h4>
|
||||
<p>The technical and political vision behind Likwid's design.</p>
|
||||
</a>
|
||||
<a href="/demo" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Demo</h4>
|
||||
<p>Explore a live instance with pre-populated governance history.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</PublicLayout>
|
||||
|
||||
<style>
|
||||
.about-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
padding: 3rem 0 4rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 2.5rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.content-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
color: var(--color-text);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.problem-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.problem-list li {
|
||||
padding: 0.75rem 0 0.75rem 1.5rem;
|
||||
position: relative;
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.problem-list li::before {
|
||||
content: "×";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-error);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.problem-list li strong {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Is/IsNot grids */
|
||||
.is-grid, .isnot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.is-grid, .isnot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.is-item {
|
||||
border-left: 3px solid var(--color-success);
|
||||
}
|
||||
|
||||
.isnot-item {
|
||||
border-left: 3px solid var(--color-neutral);
|
||||
}
|
||||
|
||||
.is-item h4, .isnot-item h4 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.is-item p, .isnot-item p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Audience section */
|
||||
.audience-section {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.audience-block h4 {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.audience-block p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Principles grid */
|
||||
.principles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.principles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.principle {
|
||||
padding: 1.5rem;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.principle h4 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.principle p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Tech table */
|
||||
.tech-table {
|
||||
overflow: hidden;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.tech-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.tech-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tech-label {
|
||||
width: 140px;
|
||||
padding: 1rem;
|
||||
background: var(--color-bg-alt);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.tech-value {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.tech-note {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CTA section */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.cta-section > p {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.cta-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.cta-card h4 {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-card p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
---
|
||||
import PublicLayout from '../layouts/PublicLayout.astro';
|
||||
---
|
||||
|
||||
<PublicLayout title="About" description="Learn about Likwid, a modular governance engine for distributed organizations, open source communities, and civic movements.">
|
||||
<article class="about-page">
|
||||
<header class="page-header">
|
||||
<h1>About Likwid</h1>
|
||||
<p class="lead">
|
||||
Likwid is a modular governance engine designed for organizations that need
|
||||
structured, transparent, and auditable decision-making processes.
|
||||
</p>
|
||||
<nav class="page-nav" aria-label="On this page">
|
||||
<a class="ui-pill ui-pill-recommended" href="#problem">Problem</a>
|
||||
<a class="ui-pill ui-pill-core" href="#is">What it is</a>
|
||||
<a class="ui-pill ui-pill-core" href="#is-not">What it is not</a>
|
||||
<a class="ui-pill ui-pill-core" href="#audience">Who it's for</a>
|
||||
<a class="ui-pill ui-pill-core" href="#principles">Principles</a>
|
||||
<a class="ui-pill ui-pill-core" href="#technical">Tech</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="content-section" id="problem">
|
||||
<h2>What Problem Does Likwid Solve?</h2>
|
||||
<p>
|
||||
Most organizations—whether open source projects, political movements, or member associations—struggle
|
||||
with collective decision-making. They often rely on informal processes, ad-hoc polls, or tools designed
|
||||
for other purposes (forums, chat platforms, issue trackers).
|
||||
</p>
|
||||
<p>
|
||||
These approaches fail in predictable ways:
|
||||
</p>
|
||||
<ul class="problem-list">
|
||||
<li><strong>Lack of structure</strong> — Discussions drift without resolution. Decisions are made implicitly or by whoever speaks loudest.</li>
|
||||
<li><strong>No audit trail</strong> — When moderation happens, there's no record of why. Shadow banning and hidden decisions erode trust.</li>
|
||||
<li><strong>Limited voting methods</strong> — Simple majority voting fails for complex decisions with multiple options or competing priorities.</li>
|
||||
<li><strong>Participation barriers</strong> — Members who can't attend synchronous meetings or follow high-volume discussions are effectively excluded.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Likwid addresses these problems by providing governance as infrastructure: a system that structures
|
||||
deliberation, enforces transparency, and supports sophisticated decision-making methods.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="is">
|
||||
<h2>What Likwid Is</h2>
|
||||
<div class="is-grid">
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>A Governance Engine</h4>
|
||||
<p>Likwid provides the core infrastructure for collective decision-making: proposals, deliberation, voting, and implementation tracking.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Modular by Design</h4>
|
||||
<p>Every component is a plugin. Communities choose their voting methods, delegation rules, moderation policies, and integrations.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Transparent by Default</h4>
|
||||
<p>All moderation actions are logged with reasons. There is no shadow banning. Audit trails are cryptographically verifiable.</p>
|
||||
</div>
|
||||
<div class="is-item ui-card ui-card-pad-lg">
|
||||
<h4>Self-Hostable</h4>
|
||||
<p>Organizations control their own data. Likwid runs on your infrastructure with no vendor lock-in.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="is-not">
|
||||
<h2>What Likwid Is Not</h2>
|
||||
<div class="isnot-grid">
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Social Network</h4>
|
||||
<p>Likwid is not designed for casual conversation, content sharing, or social interactions. It's governance infrastructure.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Simple Poll Tool</h4>
|
||||
<p>While Likwid supports voting, it's designed for complex decisions with deliberation phases, multiple options, and sophisticated tallying methods.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a Forum</h4>
|
||||
<p>Discussions in Likwid are structured and goal-oriented. They're part of a decision process, not open-ended conversation.</p>
|
||||
</div>
|
||||
<div class="isnot-item ui-card ui-card-pad-lg">
|
||||
<h4>Not a CRM or Membership System</h4>
|
||||
<p>Likwid handles governance, not member management, donations, or communications. It integrates with those systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="audience">
|
||||
<h2>Who Is Likwid For?</h2>
|
||||
<div class="audience-section">
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Open Source & FLOSS Communities</h4>
|
||||
<p>
|
||||
Projects that need to make technical and organizational decisions collectively.
|
||||
Maintainers, contributors, and users participating in governance alongside code contribution.
|
||||
Integration with development workflows (GitLab, Forgejo, Gitea) and documentation systems.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Associations & NGOs</h4>
|
||||
<p>
|
||||
Member-driven organizations requiring formal decision processes.
|
||||
Annual general meetings, board decisions, and policy changes with proper record-keeping.
|
||||
Transparent moderation for community standards enforcement.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Political Movements & Parties</h4>
|
||||
<p>
|
||||
Grassroots organizations, civic lists, and political parties.
|
||||
Delegate assemblies, policy development, and candidate selection.
|
||||
Liquid democracy features for modern participatory politics.
|
||||
</p>
|
||||
</div>
|
||||
<div class="audience-block ui-card ui-card-pad-lg">
|
||||
<h4>Federated & Distributed Organizations</h4>
|
||||
<p>
|
||||
Networks of chapters, working groups, or autonomous units.
|
||||
Coordination across geographic or functional boundaries.
|
||||
Federation features for inter-community governance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="principles">
|
||||
<h2>Core Principles</h2>
|
||||
<div class="principles-grid">
|
||||
<div class="principle">
|
||||
<h4>Transparency Over Convenience</h4>
|
||||
<p>Every moderation action is logged with a reason. Audit trails are public. There are no hidden decisions or shadow bans.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Privacy Where It Matters</h4>
|
||||
<p>Voting results visibility can be permissioned. Communities decide who can view results details while keeping participation accessible.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Process Over Features</h4>
|
||||
<p>Governance is a process, not a feature list. Likwid structures deliberation with clear phases: inform, discuss, decide.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h4>Flexibility Over Prescription</h4>
|
||||
<p>Organizations differ. Likwid's plugin architecture lets communities configure governance to match their needs and culture.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="technical">
|
||||
<h2>Technical Foundation</h2>
|
||||
<p>
|
||||
Likwid is free and open source software (EUPL-1.2), built with modern, auditable technology:
|
||||
</p>
|
||||
<div class="tech-table ui-card">
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Backend</span>
|
||||
<span class="tech-value">Rust (Axum framework)</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Frontend</span>
|
||||
<span class="tech-value">Astro + TypeScript</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Database</span>
|
||||
<span class="tech-value">PostgreSQL</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">Containers</span>
|
||||
<span class="tech-value">Podman / Docker</span>
|
||||
</div>
|
||||
<div class="tech-row">
|
||||
<span class="tech-label">License</span>
|
||||
<span class="tech-value">EUPL-1.2</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tech-note">
|
||||
The choice of Rust provides memory safety and performance. PostgreSQL ensures data integrity
|
||||
for critical governance records. The EUPL-1.2 license guarantees that improvements to Likwid
|
||||
remain available to the community.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section cta-section" id="learn-more">
|
||||
<h2>Learn More</h2>
|
||||
<p>
|
||||
Explore Likwid's capabilities, understand our vision, or see the system in action.
|
||||
</p>
|
||||
<div class="cta-grid">
|
||||
<a href="/features" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Features</h4>
|
||||
<p>Detailed explanation of voting methods, delegation, and moderation tools.</p>
|
||||
</a>
|
||||
<a href="/manifesto" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Manifesto</h4>
|
||||
<p>The technical and political vision behind Likwid's design.</p>
|
||||
</a>
|
||||
<a href="/demo" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
|
||||
<h4>Demo</h4>
|
||||
<p>Explore a live instance with pre-populated governance history.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</PublicLayout>
|
||||
|
||||
<style>
|
||||
.about-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
padding: 3rem 0 4rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
margin-top: 1.75rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 2.5rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
scroll-margin-top: 6.5rem;
|
||||
}
|
||||
|
||||
.content-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
color: var(--color-text);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.problem-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.problem-list li {
|
||||
padding: 0.75rem 0 0.75rem 1.5rem;
|
||||
position: relative;
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.problem-list li::before {
|
||||
content: "×";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-error);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.problem-list li strong {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Is/IsNot grids */
|
||||
.is-grid, .isnot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.is-grid, .isnot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.is-item {
|
||||
border-left: 3px solid var(--color-success);
|
||||
}
|
||||
|
||||
.isnot-item {
|
||||
border-left: 3px solid var(--color-neutral);
|
||||
}
|
||||
|
||||
.is-item h4, .isnot-item h4 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.is-item p, .isnot-item p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Audience section */
|
||||
.audience-section {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.audience-block h4 {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.audience-block p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Principles grid */
|
||||
.principles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.principles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.principle {
|
||||
padding: 1.5rem;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.principle h4 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.principle p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Tech table */
|
||||
.tech-table {
|
||||
overflow: hidden;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.tech-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.tech-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tech-label {
|
||||
width: 140px;
|
||||
padding: 1rem;
|
||||
background: var(--color-bg-alt);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.tech-value {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.tech-note {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CTA section */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.cta-section > p {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.cta-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.cta-card h4 {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-card p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue