marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refine public pages card styling

Browse source
This commit is contained in:
Marco Allegretti 2026-01-31 13:15:47 +01:00
parent 27f7c898d9
commit 8b904c1919
5 changed files with 8 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -540,13 +540,14 @@
}
.ui-card-interactive {
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.ui-card-interactive:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
background: rgba(255, 255, 255, 0.05);
box-shadow: var(--shadow-md);
}
.ui-card-glass {

17
frontend/src/pages/about.astro
View file

@ -178,15 +178,15 @@ import PublicLayout from '../layouts/PublicLayout.astro';
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">
<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">
<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">
<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>
@ -283,10 +283,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
}
.is-item, .isnot-item {
border-radius: var(--radius-md);
}
.is-item {
border-left: 3px solid var(--color-success);
}
@ -313,10 +309,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
margin-top: 1.5rem;
}
.audience-block {
border-radius: var(--radius-md);
}
.audience-block h4 {
font-size: 1.125rem;
color: var(--color-primary);
@ -363,7 +355,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
/* Tech table */
.tech-table {
border-radius: var(--radius-md);
overflow: hidden;
margin: 1.5rem 0;
}
@ -427,14 +418,12 @@ import PublicLayout from '../layouts/PublicLayout.astro';
.cta-card {
display: block;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--motion-fast) var(--easing-standard);
}
.cta-card:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
.cta-card h4 {

8
frontend/src/pages/demo.astro
View file

@ -346,14 +346,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
}
}
.community-card {
transition: all var(--motion-normal) var(--easing-standard);
}
.community-card:hover {
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
flex-direction: column;

10
frontend/src/pages/features.astro
View file

@ -448,10 +448,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
}
.feature-item {
border-radius: var(--radius-md);
}
.feature-item h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
@ -478,7 +474,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
flex: 1;
max-width: 280px;
text-align: center;
border-radius: var(--radius-lg);
}
.phase-icon {
@ -534,7 +529,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
.mod-feature {
border-radius: var(--radius-md);
border-left: 3px solid var(--color-success);
}
@ -564,10 +558,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
}
.plugin-category {
border-radius: var(--radius-md);
}
.plugin-category h4 {
font-size: 1rem;
margin-bottom: 1rem;

22
frontend/src/pages/index.astro
View file

@ -28,7 +28,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<div class="section-container">
<h2>What is Likwid?</h2>
<div class="what-grid">
<div class="what-card ui-card">
<div class="what-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
@ -39,7 +39,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h3>Modular Architecture</h3>
<p>Every component is a plugin. Voting methods, delegation systems, integrations, and workflows can be added, removed, or customized per community.</p>
</div>
<div class="what-card ui-card">
<div class="what-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
@ -49,7 +49,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h3>Process-Oriented</h3>
<p>Governance is a process, not a feature. Likwid structures deliberation, voting, and implementation as distinct phases with clear transitions.</p>
</div>
<div class="what-card ui-card">
<div class="what-card ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@ -283,17 +283,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
}
.what-card {
padding: 1.75rem;
transition: all var(--motion-normal) var(--easing-standard);
}
.what-card:hover {
border-color: var(--color-border-hover);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.what-icon {
width: 56px;
height: 56px;
@ -371,10 +360,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
}
}
.capability {
border-radius: var(--radius-md);
}
.capability h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
@ -460,7 +445,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
.tech-item {
text-align: center;
border-radius: var(--radius-md);
}
.tech-item strong {