Skip to content

Commit dd80b0c

Browse files
GaspardKiriraGaspardKirira
committed
Merge branch 'dev'
2 parents 6e119a9 + b4cf7dd commit dd80b0c

28 files changed

+4237
-468
lines changed

‎assets/index-BHbR-ftr.js‎

Lines changed: 0 additions & 196 deletions
This file was deleted.

‎assets/index-BnszfoTu.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/index-BzLezTcK.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎assets/index-Di1g2_co.js‎

Lines changed: 256 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474
}
7575
}
7676
</script>
77-
<script type="module" crossorigin src="/assets/index-BHbR-ftr.js"></script>
78-
<link rel="stylesheet" crossorigin href="/assets/index-BzLezTcK.css">
77+
<script type="module" crossorigin src="/assets/index-Di1g2_co.js"></script>
78+
<link rel="stylesheet" crossorigin href="/assets/index-BnszfoTu.css">
7979
</head>
8080

8181
<body>

‎vix-site/src/App.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,21 @@ import SiteFooter from "./components/SiteFooter.vue";
1414
</script>
1515

1616
<style scoped>
17-
.app { min-height: 100vh; display: flex; flex-direction: column; }
18-
.main { flex: 1; }
17+
/* hauteur approximative du header (desktop + mobile) */
18+
.app {
19+
--header-h: 64px;
20+
}
21+
22+
/* ✅ pousse toutes les pages sous le header fixed */
23+
.main {
24+
padding-top: calc(var(--header-h) + 18px);
25+
min-height: calc(100vh - var(--header-h));
26+
}
27+
28+
/* mobile: header souvent plus “épais” */
29+
@media (max-width: 900px) {
30+
.app {
31+
--header-h: 76px;
32+
}
33+
}
1934
</style>

‎vix-site/src/assets/styles/codeblock.css‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
2+
.code-card{
3+
border: 1px solid rgba(148,163,184,.18);
4+
background: rgba(2,6,23,.72);
5+
border-radius: 16px;
6+
overflow: hidden;
7+
box-shadow: 0 18px 46px rgba(0,0,0,.55);
8+
}
9+
10+
.code-head{
11+
display:flex;
12+
align-items:center;
13+
justify-content:space-between;
14+
gap: 12px;
15+
padding: 10px 12px;
16+
background: linear-gradient(to bottom, rgba(2,6,23,.92), rgba(2,6,23,.72));
17+
border-bottom: 1px solid rgba(148,163,184,.14);
18+
}
19+
20+
.head-left{
21+
display:flex;
22+
align-items:center;
23+
gap:10px;
24+
min-width: 0;
25+
}
26+
27+
.dot{ width:10px; height:10px; border-radius:999px; background:#475569; }
28+
.dot-red{ background:#fb923c; }
29+
.dot-yellow{ background:#facc15; }
30+
.dot-green{ background:#22c55e; }
31+
32+
.head-title{
33+
color:#e5e7eb;
34+
font-size:.82rem;
35+
font-weight:600;
36+
letter-spacing:.01em;
37+
white-space:nowrap;
38+
}
39+
40+
.chips{
41+
display:flex;
42+
align-items:center;
43+
gap:8px;
44+
min-width: 0;
45+
flex-wrap: wrap;
46+
}
47+
48+
.chip{
49+
display:inline-flex;
50+
align-items:center;
51+
padding: 2px 8px;
52+
border-radius: 999px;
53+
font-size: .72rem;
54+
color: #cbd5e1;
55+
border: 1px solid rgba(34,197,154,.22);
56+
background: rgba(2,44,34,.35);
57+
}
58+
59+
.head-right{
60+
display:flex;
61+
align-items:center;
62+
gap:10px;
63+
flex-shrink:0;
64+
}
65+
66+
.tabs{
67+
display:flex;
68+
align-items:center;
69+
gap:6px;
70+
padding: 4px;
71+
border-radius: 999px;
72+
background: rgba(15,23,42,.55);
73+
border: 1px solid rgba(148,163,184,.16);
74+
}
75+
76+
.tab{
77+
border: 0;
78+
background: transparent;
79+
color:#cbd5e1;
80+
font-size:.75rem;
81+
padding: 6px 10px;
82+
border-radius: 999px;
83+
cursor:pointer;
84+
transition: background .15s ease, color .15s ease;
85+
}
86+
87+
.tab:hover{
88+
background: rgba(148,163,184,.12);
89+
color:#e5e7eb;
90+
}
91+
92+
.tab.active{
93+
background: rgba(34,197,154,.18);
94+
color:#d1fae5;
95+
}
96+
97+
.copy{
98+
border: 1px solid rgba(148,163,184,.18);
99+
background: rgba(15,23,42,.45);
100+
color:#e5e7eb;
101+
font-size:.75rem;
102+
padding: 7px 10px;
103+
border-radius: 10px;
104+
cursor:pointer;
105+
transition: transform .12s ease, background .15s ease, border-color .15s ease;
106+
}
107+
108+
.copy:hover{
109+
transform: translateY(-1px);
110+
background: rgba(15,23,42,.65);
111+
border-color: rgba(34,197,154,.28);
112+
}
113+
114+
/* Footer note */
115+
.code-foot{
116+
border-top: 1px solid rgba(148,163,184,.12);
117+
background: rgba(2,6,23,.62);
118+
padding: 10px 12px;
119+
}
120+
121+
.code-note{
122+
margin:0;
123+
color:#94a3b8;
124+
font-size:.85rem;
125+
line-height: 1.55;
126+
}
127+
128+
/* Scrollbars */
129+
.code-body::-webkit-scrollbar{ height: 8px; width: 10px; }
130+
.code-body::-webkit-scrollbar-thumb{
131+
background: rgba(34,197,154,.35);
132+
border-radius: 999px;
133+
}
134+
.code-body::-webkit-scrollbar-track{
135+
background: rgba(2,6,23,.9);
136+
}
137+
138+
/* Highlight colors */
139+
.cpp-directive { color:#60a5fa; }
140+
.cpp-include { color:#38bdf8; }
141+
.cpp-keyword { color:#fb7185; }
142+
.cpp-type { color:#22c55e; }
143+
.cpp-string { color:#34d399; }
144+
.cpp-comment { color:#94a3b8; font-style: italic; opacity:.85; }
145+
.cpp-fn { color:#fbbf24; }
146+
147+
.shell-prompt { color:#22c55e; font-weight: 800; }
148+
.shell-cmd { color:#38bdf8; font-weight: 800; }
149+
.shell-flag { color:#f97316; font-weight: 800; }
150+
.shell-path { color:#a5b4fc; }
151+
.shell-success { color:#22c55e; font-weight: 900; }
152+
.shell-pill-dev { color:#38bdf8; font-weight: 900; }
153+
154+
.code-card {
155+
min-width: 0;
156+
max-width: 100%;
157+
}
158+
159+
.cli-grid > * {
160+
min-width: 0;
161+
}
162+
163+
pre,
164+
code {
165+
max-width: 100%;
166+
}
167+
/* ✅ le card ne doit jamais dépasser son parent */
168+
.code-card{
169+
width: 100%;
170+
max-width: 100%;
171+
min-width: 0;
172+
}
173+
174+
/* ✅ le scroll reste DEDANS */
175+
.code-body{
176+
width: 100%;
177+
max-width: 100%;
178+
min-width: 0;
179+
overflow: auto;
180+
-webkit-overflow-scrolling: touch;
181+
background: #020617;
182+
}
183+
184+
.code-body{
185+
width: 100%;
186+
max-width: 100%;
187+
min-width: 0;
188+
overflow: auto;
189+
-webkit-overflow-scrolling: touch;
190+
background: #020617;
191+
}
192+
193+
.code-pre{
194+
margin:0;
195+
padding: 14px 14px;
196+
197+
width: 100%;
198+
max-width: 100%;
199+
min-width: 0; /* ✅ */
200+
white-space: pre;
201+
line-height: 1.65;
202+
203+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
204+
font-size: .88rem;
205+
color: #e2e8f0;
206+
}
207+
208+
/* ✅ permet le scroll horizontal SANS forcer la largeur du card */
209+
.code-pre > code{
210+
display: inline-block; /* ✅ important */
211+
min-width: 100%; /* ✅ fond plein */
212+
}
213+
214+
215+
216+
@media (min-width: 900px) {
217+
.cli-grid .code-pre { padding: 12px 12px; }
218+
}
219+
.code-card {
220+
width: 100%;
221+
max-width: 100%;
222+
}
223+
224+
225+
@media (max-width: 720px){
226+
.head-title{
227+
max-width: 35vw;
228+
overflow:hidden;
229+
text-overflow: ellipsis;
230+
}
231+
.code-pre{
232+
font-size: .84rem;
233+
min-width: 640px;
234+
}
235+
}

‎vix-site/src/components/CardGrid.vue‎

Lines changed: 74 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,81 @@
1+
<script setup>
2+
const props = defineProps({
3+
// items: [{ title: string, text: string, ...optional fields }]
4+
items: { type: Array, default: () => [] },
5+
6+
columns: { type: Number, default: 3 },
7+
dense: { type: Boolean, default: false },
8+
});
9+
</script>
10+
111
<template>
2-
<div class="grid">
3-
<article v-for="it in items" :key="it.title" class="card">
4-
<h3 class="h3">{{ it.title }}</h3>
5-
<p class="p">{{ it.text }}</p>
12+
<div
13+
class="grid"
14+
:class="{ dense }"
15+
:style="{ '--cols': String(columns) }"
16+
>
17+
<article
18+
v-for="(item, idx) in items"
19+
:key="item?.title || idx"
20+
class="card"
21+
>
22+
<h3 class="card-title">{{ item.title }}</h3>
23+
<p v-if="item.text" class="card-text">{{ item.text }}</p>
24+
25+
<slot
26+
name="card"
27+
:item="item"
28+
:index="idx"
29+
/>
630
</article>
731
</div>
832
</template>
933

10-
<script setup>
11-
defineProps({ items: { type: Array, default: () => [] } });
12-
</script>
13-
1434
<style scoped>
15-
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
16-
@media (min-width: 860px) { .grid { grid-template-columns: repeat(3, 1fr); } }
17-
.card { padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }
18-
.h3 { margin: 0 0 6px 0; font-size: 14px; }
19-
.p { margin: 0; opacity: 0.8; font-size: 13px; line-height: 1.5; }
35+
.grid {
36+
--cols: 3;
37+
display: grid;
38+
gap: 1rem;
39+
grid-template-columns: 1fr;
40+
}
41+
42+
@media (min-width: 720px) {
43+
.grid {
44+
grid-template-columns: repeat(2, minmax(0, 1fr));
45+
gap: 1.15rem;
46+
}
47+
}
48+
49+
@media (min-width: 1024px) {
50+
.grid {
51+
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
52+
gap: 1.25rem;
53+
}
54+
}
55+
56+
.grid.dense {
57+
gap: 0.85rem;
58+
}
59+
60+
.card {
61+
border-radius: 16px;
62+
border: 1px solid rgba(255, 255, 255, 0.12);
63+
background: rgba(255, 255, 255, 0.04);
64+
padding: 1.05rem 1.05rem 1.1rem;
65+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
66+
}
67+
68+
.card-title {
69+
margin: 0;
70+
font-size: 1.05rem;
71+
line-height: 1.25;
72+
letter-spacing: -0.01em;
73+
}
74+
75+
.card-text {
76+
margin: 0.6rem 0 0;
77+
line-height: 1.6;
78+
opacity: 0.85;
79+
font-size: 0.98rem;
80+
}
2081
</style>

0 commit comments

Comments
 (0)