Skip to content

Commit d847f6d

Browse files
KSemenenkoKSemenenko
committed
web pages styel
1 parent cab7fef commit d847f6d

6 files changed

Lines changed: 99 additions & 199 deletions

File tree

‎github-pages/assets/css/cards.css‎

Lines changed: 11 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
/* ================================================================
2-
Cards — directory cards with animated conic gradient glow
2+
Cards — clean directory cards
33
================================================================ */
44

5-
@property --card-angle {
6-
syntax: "<angle>";
7-
initial-value: 0deg;
8-
inherits: false;
9-
}
10-
115
.directory-card {
126
--card-accent: var(--accent);
137
--card-accent-rgb: 255, 126, 93;
@@ -22,75 +16,22 @@
2216
background: var(--bg-elevated);
2317
border: 1px solid var(--line);
2418
box-shadow: var(--shadow-xs);
25-
transition: box-shadow 400ms ease, border-color 300ms ease, transform 300ms ease;
26-
}
27-
28-
/* Animated conic gradient border on hover */
29-
.directory-card::before {
30-
content: "";
31-
position: absolute;
32-
inset: -1px;
33-
border-radius: inherit;
34-
padding: 1.5px;
35-
background: conic-gradient(
36-
from var(--card-angle),
37-
transparent 0%,
38-
var(--card-accent) 25%,
39-
transparent 50%,
40-
var(--card-accent) 75%,
41-
transparent 100%
42-
);
43-
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
44-
-webkit-mask-composite: xor;
45-
mask-composite: exclude;
46-
opacity: 0;
47-
transition: opacity 400ms ease;
48-
pointer-events: none;
49-
z-index: 1;
50-
}
51-
52-
/* Soft category-matched glow behind the card */
53-
.directory-card::after {
54-
content: "";
55-
position: absolute;
56-
inset: 0;
57-
border-radius: inherit;
58-
box-shadow: 0 0 0 0 transparent;
59-
transition: box-shadow 400ms ease;
60-
pointer-events: none;
19+
transition: box-shadow 300ms ease, border-color 200ms ease, transform 200ms ease;
6120
}
6221

6322
.directory-card:hover {
64-
border-color: transparent;
65-
transform: translateY(-3px);
66-
}
67-
68-
.directory-card:hover::before {
69-
opacity: 1;
70-
animation: card-border-spin 3s linear infinite;
71-
}
72-
73-
.directory-card:hover::after {
23+
border-color: rgba(var(--card-accent-rgb), 0.3);
24+
transform: translateY(-2px);
7425
box-shadow:
75-
0 0 0 1px rgba(var(--card-accent-rgb), 0.15),
76-
0 4px 20px -4px rgba(var(--card-accent-rgb), 0.2),
77-
0 0 40px -8px rgba(var(--card-accent-rgb), 0.08);
78-
}
79-
80-
@keyframes card-border-spin {
81-
to { --card-angle: 360deg; }
26+
0 2px 12px -2px rgba(var(--card-accent-rgb), 0.12),
27+
0 0 0 1px rgba(var(--card-accent-rgb), 0.08);
8228
}
8329

84-
/* Permanent colored left accent stripe */
85-
.skill-card { border-left: 3px solid var(--card-accent); }
86-
.agent-card { border-left: 3px solid var(--card-accent); }
87-
.package-card { border-left: 3px solid var(--card-accent); }
88-
.category-card { border-left: 3px solid var(--card-accent); }
89-
90-
/* Subtle type-tinted background */
91-
.directory-card.skill-card {
92-
background: linear-gradient(135deg, var(--bg-elevated) 85%, rgba(var(--card-accent-rgb), 0.04) 100%);
93-
}
30+
/* Accent top bar */
31+
.skill-card { border-top: 2px solid var(--card-accent); }
32+
.agent-card { border-top: 2px solid var(--card-accent); }
33+
.package-card { border-top: 2px solid var(--card-accent); }
34+
.category-card { border-top: 2px solid var(--card-accent); }
9435

9536
.directory-card.is-clickable { cursor: pointer; }
9637

‎github-pages/assets/css/header.css‎

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -61,66 +61,3 @@ body.page-about .nav-link-about {
6161
background: rgba(0,0,0,0.06);
6262
}
6363

64-
/* Install command bar in header */
65-
.header-install {
66-
display: inline-flex;
67-
align-items: center;
68-
gap: 6px;
69-
padding: 3px 10px;
70-
border-radius: var(--r);
71-
background: var(--bg-code);
72-
cursor: pointer;
73-
transition: all 150ms ease;
74-
border: 1px solid transparent;
75-
}
76-
77-
.header-install:hover {
78-
border-color: var(--accent);
79-
box-shadow: 0 0 8px rgba(99,102,241,0.15);
80-
}
81-
82-
.header-install code {
83-
color: #d4d4d4;
84-
font-family: "JetBrains Mono", monospace;
85-
font-size: 11px;
86-
font-weight: 400;
87-
white-space: nowrap;
88-
}
89-
90-
.header-install::after {
91-
content: "⎘";
92-
color: var(--ink-3);
93-
font-size: 12px;
94-
transition: color 150ms;
95-
}
96-
97-
.header-install:hover::after {
98-
color: var(--accent);
99-
}
100-
101-
.release-pill {
102-
display: inline-flex;
103-
align-items: center;
104-
gap: 8px;
105-
padding: 2px 10px 2px 8px;
106-
border-radius: var(--r);
107-
background: var(--bg-sunken);
108-
font-size: 11px;
109-
color: var(--ink-2);
110-
}
111-
112-
.release-label {
113-
font-size: 9px;
114-
font-weight: 600;
115-
text-transform: uppercase;
116-
letter-spacing: 0.06em;
117-
color: var(--ink-3);
118-
}
119-
120-
.release-value {
121-
font-weight: 600;
122-
color: var(--ink);
123-
font-variant-numeric: tabular-nums;
124-
font-family: "JetBrains Mono", monospace;
125-
font-size: 11px;
126-
}

‎github-pages/assets/css/layout.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,12 @@ body.page-categories .panel #listing-grid { grid-template-columns: repeat(3, min
9696
}
9797

9898
.sidebar-stack { display: grid; gap: 12px; }
99+
100+
.featured-subheading {
101+
margin: 0;
102+
font-size: 13px;
103+
font-weight: 600;
104+
text-transform: uppercase;
105+
letter-spacing: 0.05em;
106+
color: var(--ink-3);
107+
}

‎github-pages/assets/css/responsive.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
.site-header-inner { flex-direction: column; align-items: stretch; padding: 10px 0; height: auto; }
1616
.brand { margin-right: 0; }
1717
.site-nav { justify-content: flex-start; }
18-
.release-pill { align-self: flex-start; }
1918
body.page-home .page-hero { grid-template-columns: 1fr; }
2019
body.page-home .page-hero .metric-grid { grid-column: 1; grid-row: auto; margin-top: 16px; }
2120
.footer-grid { grid-template-columns: 1fr 1fr; }
@@ -47,7 +46,6 @@
4746
body.page-home .page-title { max-width: none; }
4847
.site-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px; }
4948
.nav-link { padding: 4px 0; text-align: center; font-size: 11px; }
50-
.release-pill { width: 100%; justify-content: space-between; }
5149
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
5250
.hero-actions, .command-row, .sidebar-links, .section-links { display: grid; grid-template-columns: 1fr; }
5351
.hero-actions .button, .command-row .button, .sidebar-links .pill-link, .section-links .pill-link { width: 100%; }
@@ -73,7 +71,6 @@
7371
.site-header-inner { gap: 6px; padding: 8px 0; }
7472
.site-nav { gap: 2px; }
7573
.nav-link { font-size: 10px; }
76-
.release-pill { gap: 4px; padding: 2px 6px; }
7774
.site-main { padding-top: 12px; padding-bottom: 40px; }
7875
.page-hero { padding: 16px; border-radius: var(--r2); }
7976
.eyebrow-row, .breadcrumb { gap: 4px; margin-bottom: 8px; }

‎github-pages/index.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,21 +55,12 @@
5555

5656
<nav class="site-nav" aria-label="Primary">
5757
<a href="ROOT_HREF_PLACEHOLDER" class="nav-link nav-link-home">Home</a>
58-
<a href="ROOT_PREFIX_PLACEHOLDERpackages/" class="nav-link nav-link-packages">Skill Stacks</a>
58+
<a href="ROOT_PREFIX_PLACEHOLDERpackages/" class="nav-link nav-link-packages">Packages</a>
5959
<a href="ROOT_PREFIX_PLACEHOLDERcategories/" class="nav-link nav-link-categories">Categories</a>
6060
<a href="ROOT_PREFIX_PLACEHOLDERskills/" class="nav-link nav-link-skills">Skills</a>
6161
<a href="ROOT_PREFIX_PLACEHOLDERagents/" class="nav-link nav-link-agents">Agents</a>
6262
<a href="ROOT_PREFIX_PLACEHOLDERabout/" class="nav-link nav-link-about">About</a>
6363
</nav>
64-
65-
<div class="header-install" data-copy="dotnet tool install --global dotnet-skills" role="button" tabindex="0" title="Click to copy">
66-
<code>dotnet tool install --global dotnet-skills</code>
67-
</div>
68-
69-
<a class="release-pill" href="RELEASE_URL_PLACEHOLDER" target="_blank" rel="noreferrer">
70-
<span class="release-label">Current release</span>
71-
<span class="release-value">RELEASE_TAG_PLACEHOLDER</span>
72-
</a>
7364
</div>
7465
</header>
7566

@@ -88,7 +79,7 @@ <h2>dotnet-skills</h2>
8879
<h3>Browse</h3>
8980
<ul>
9081
<li><a href="ROOT_HREF_PLACEHOLDER">Home</a></li>
91-
<li><a href="ROOT_PREFIX_PLACEHOLDERpackages/">Skill Stacks</a></li>
82+
<li><a href="ROOT_PREFIX_PLACEHOLDERpackages/">Packages</a></li>
9283
<li><a href="ROOT_PREFIX_PLACEHOLDERcategories/">Categories</a></li>
9384
<li><a href="ROOT_PREFIX_PLACEHOLDERskills/">Skills</a></li>
9485
<li><a href="ROOT_PREFIX_PLACEHOLDERagents/">Agents</a></li>

0 commit comments

Comments
 (0)