Skip to content

Commit 054c285

Browse files
DrombeysForserXSt4lker0k765GladiatorVSmnelenpridumivat
committed
Update website and documentation
Co-authored-by: ForserX <sv3nk@yandex.ru> Co-authored-by: St4lker0k765 <126080360+St4lker0k765@users.noreply.github.com> Co-authored-by: GladiatorVS <gladiatorvsoff@gmail.com> Co-authored-by: mnelenpridumivat <ragrind@mail.ru> Co-authored-by: kola2451 <kolyanemovdev@gmail.com> Co-authored-by: FFx0001 <vip.ffx0001@mail.ru>
1 parent b31b3b4 commit 054c285

File tree

22 files changed

+2059
-959
lines changed

22 files changed

+2059
-959
lines changed

‎docs/components/Download.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,13 +92,17 @@ const findAssetLink = (keywords: string[]) => {
9292
return asset?.browser_download_url || null
9393
}
9494
95+
const preferReleaseLink = (keywords: string[]) => {
96+
return findAssetLink([...keywords, 'release']) || findAssetLink(keywords)
97+
}
98+
9599
const assetLinks = computed(() => ({
96100
game: findAssetLink(['engine', 'game']),
97101
developer: findAssetLink(['engine', 'develop']),
98-
utilitiesBin: findAssetLink(['utilities', 'bin']),
99-
utilitiesLib: findAssetLink(['utilities', 'lib']),
100-
serverBin: findAssetLink(['server', 'bin']),
101-
serverLib: findAssetLink(['server', 'lib']),
102+
utilitiesBin: preferReleaseLink(['utilities', 'bin']),
103+
utilitiesLib: preferReleaseLink(['utilities', 'lib']),
104+
serverBin: preferReleaseLink(['server', 'bin']),
105+
serverLib: preferReleaseLink(['server', 'lib']),
102106
}))
103107
104108
const heroTitle = computed(() => copy.value.hero.title.replace('{version}', releaseVersion.value))

‎docs/components/ModsList.vue‎

Lines changed: 235 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -88,45 +88,53 @@ const mods = computed(() => copy.value.mods as ModCard[])
8888
</header>
8989

9090
<div class="mods__grid">
91-
<article v-for="mod in mods" :key="mod.id" class="mod-card">
92-
<div v-if="mod.image" class="mod-card__media">
93-
<img :src="mod.image" :alt="mod.title" loading="lazy" />
94-
</div>
95-
<div class="mod-card__head">
96-
<div>
97-
<p class="mod-card__eyebrow">
98-
<span v-if="mod.updated">{{ mod.updated }}</span>
99-
<span v-if="mod.version"> В· v{{ mod.version }}</span>
100-
</p>
101-
<h3 class="mod-card__title">{{ mod.title }}</h3>
102-
</div>
103-
<span v-if="mod.tag" class="pill">{{ mod.tag }}</span>
104-
</div>
105-
106-
<p class="mod-card__desc">{{ mod.description }}</p>
107-
108-
<p class="mod-card__meta" v-if="mod.author">
109-
{{ mod.author }}
110-
</p>
111-
112-
<div class="mod-card__footer">
113-
<a
114-
v-if="mod.link"
115-
class="btn"
116-
:href="mod.link"
117-
target="_blank"
118-
rel="noreferrer"
119-
>
120-
{{ labels.view }}
121-
</a>
122-
<span v-else class="muted">{{ labels.soon }}</span>
123-
</div>
91+
<article v-for="mod in mods" :key="mod.id" class="mod-card mod-card--vertical">
92+
<a class="mod-card__link"
93+
:href="mod.link || '#'"
94+
:aria-disabled="!mod.link"
95+
target="_blank"
96+
rel="noreferrer">
97+
<div class="mod-card__media">
98+
<img :src="mod.image" :alt="mod.title" loading="lazy">
99+
<span v-if="mod.tag" class="mod-card__badge">{{mod.tag}}</span>
100+
</div>
101+
102+
<div class="mod-card__body">
103+
<h3 class="mod-card__title">{{ mod.title }}</h3>
104+
<div class="mod-card__meta" v-if="mod.author">
105+
<span class="mod-card__author">{{ mod.author }}</span>
106+
<!--<span class="mod-card__dot"></span>
107+
<span class="mod-card__info">(ещё какая-то инфа)</span>-->
108+
</div>
109+
110+
<p class="mod-card__desc">
111+
{{mod.description}}
112+
</p>
113+
114+
115+
116+
<button class="mod-card__btn" type="button" v-if="mod.link">
117+
{{ labels.view }}
118+
</button>
119+
</div>
120+
</a>
124121
</article>
125122
</div>
126123
</section>
127124
</template>
128125

129126
<style scoped>
127+
128+
:first-child {
129+
--mod-card-radius: 16px;
130+
--mod-card-bg: #05070a;
131+
--mod-card-border: rgba(255, 255, 255, 0.06);
132+
--mod-card-accent: #72d6ff;
133+
--mod-card-accent-soft: rgba(114, 214, 255, 0.18);
134+
--mod-card-text-muted: #a3adc2;
135+
--mod-card-text-soft: #7b85a0;
136+
}
137+
130138
.mods {
131139
display: flex;
132140
flex-direction: column;
@@ -168,89 +176,185 @@ const mods = computed(() => copy.value.mods as ModCard[])
168176
}
169177
170178
.mod-card {
171-
border: 1px solid var(--vp-c-divider);
172-
border-radius: 14px;
173-
padding: 14px;
174-
background: var(--vp-c-bg-alt);
175-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
176-
display: grid;
177-
gap: 10px;
179+
//min-height: 510px;
180+
height: 100%;
181+
position: relative;
182+
border-radius: var(--mod-card-radius);
183+
background: radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.08), transparent 55%),
184+
radial-gradient(circle at 100% 100%, rgba(100, 214, 255, 0.12), transparent 55%),
185+
white;
186+
border: 1px solid var(--mod-card-border);
187+
188+
189+
overflow: hidden;
190+
box-shadow:
191+
0 10px 26px rgba(0, 0, 0, 0.17),
192+
0 0 0 1px rgba(255, 255, 255, 0.02);
193+
transition:
194+
transform 0.18s ease,
195+
box-shadow 0.18s ease,
196+
border-color 0.18s ease,
197+
background 0.18s ease;
178198
}
179199
200+
201+
202+
/* Вертикальная: тянется по ширине колонки, высота из aspect-ratio */
203+
.mod-card--vertical {
204+
width: 100%; /* управляешь шириной через grid/col */
205+
aspect-ratio: 3 / 5; /* ~0.6 */
206+
display: flex;
207+
}
208+
209+
.mod-card__link {
210+
display: flex;
211+
flex-direction: column;
212+
text-decoration: none;
213+
color: inherit;
214+
width: 100%;
215+
}
216+
217+
/* Верхняя область с изображением */
180218
.mod-card__media {
181-
border-radius: 10px;
219+
position: relative;
220+
flex: 0 0 55%;
182221
overflow: hidden;
183-
border: 1px solid var(--vp-c-divider);
222+
}
223+
224+
.mod-card__media::before {
225+
content: "";
226+
position: absolute;
227+
inset: -25%;
228+
background:
229+
radial-gradient(circle at 20% 0, rgba(114, 214, 255, 0.3), transparent 60%),
230+
radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
231+
mix-blend-mode: screen;
232+
opacity: 0.5;
233+
pointer-events: none;
184234
}
185235
186236
.mod-card__media img {
187-
display: block;
188237
width: 100%;
189-
height: auto;
238+
height: 100%;
190239
object-fit: cover;
240+
filter: saturate(1.1) contrast(1.05);
241+
transform-origin: center;
242+
transition: transform 0.3s ease, filter 0.3s ease;
191243
}
192244
193-
.mod-card__head {
194-
display: flex;
195-
justify-content: space-between;
196-
gap: 8px;
197-
align-items: flex-start;
198-
margin-bottom: 6px;
245+
/* Бейдж поверх */
246+
.mod-card__badge {
247+
position: absolute;
248+
left: 0.75rem;
249+
top: 0.75rem;
250+
padding: 0.2rem 0.55rem;
251+
border-radius: 999px;
252+
background: rgba(7, 235, 196, 0.16);
253+
border: 1px solid rgba(7, 235, 196, 0.5);
254+
color: #8fffe1;
255+
font-size: 0.6rem;
256+
text-transform: uppercase;
257+
letter-spacing: 0.08em;
258+
font-weight: 600;
199259
}
200260
201-
.mod-card__eyebrow {
202-
margin: 0 0 4px;
203-
font-size: 12px;
204-
color: var(--vp-c-text-2);
261+
/* Текстовая часть */
262+
.mod-card__body {
263+
flex: 1;
264+
min-height: 0;
265+
padding: 0.65rem 0.7rem 0.75rem;
266+
display: flex;
267+
flex-direction: column;
268+
gap: 0.4rem;
205269
}
206270
207271
.mod-card__title {
208272
margin: 0;
209-
font-size: 17px;
210-
color: var(--vp-c-text-1);
273+
font-size: 0.95rem;
274+
line-height: 1.2;
275+
font-weight: 700;
276+
color: #374151;
211277
}
212278
213279
.mod-card__desc {
214-
margin: 0 0 10px;
215-
font-size: 13px;
216-
color: var(--vp-c-text-2);
280+
flex: 1;
281+
overflow: hidden;
282+
margin: 0;
283+
font-size: 0.78rem;
284+
line-height: 1.4;
285+
color: #4b5563;
217286
}
218287
288+
/* Метаданные */
219289
.mod-card__meta {
220-
margin: 0 0 10px;
221-
font-size: 12px;
222-
color: var(--vp-c-text-2);
223-
}
224-
225-
.mod-card__footer {
226290
display: flex;
291+
flex-wrap: wrap;
292+
gap: 0.35rem;
227293
align-items: center;
228-
justify-content: space-between;
294+
font-size: 0.7rem;
295+
color: var(--mod-card-text-soft);
229296
}
230297
231-
.pill {
232-
display: inline-flex;
233-
align-items: center;
234-
padding: 4px 8px;
298+
.mod-card__author {
299+
font-weight: 500;
300+
color: #636e85;;
301+
}
302+
303+
.mod-card__dot {
304+
width: 0.2rem;
305+
height: 0.2rem;
306+
border-radius: 50%;
307+
background: rgba(163, 173, 194, 0.7);
308+
}
309+
310+
.mod-card__info {
311+
opacity: 0.9;
312+
}
313+
314+
/* Кнопка действия */
315+
.mod-card__btn {
316+
margin-top: auto;
317+
align-self: stretch;
318+
padding: 0.45rem 0.7rem;
235319
border-radius: 999px;
236-
font-size: 11px;
237-
background: var(--vp-c-brand-1);
238-
color: #fff;
239-
border: 1px solid var(--vp-c-brand-2);
320+
border: none;
321+
background:
322+
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.4), transparent 55%),
323+
linear-gradient(135deg, #363bd3, #8f7bff);
324+
color: white;
325+
font-size: 0.7rem;
326+
font-weight: 600;
327+
letter-spacing: 0.08em;
328+
text-transform: uppercase;
329+
cursor: pointer;
330+
box-shadow:
331+
0 0 0 1px rgba(0, 0, 0, 0.05),
332+
0 6px 18px rgba(76, 210, 255, 0.35);
333+
transition:
334+
transform 0.18s ease,
335+
box-shadow 0.18s ease,
336+
filter 0.2s ease;
240337
}
241338
242-
.btn {
243-
display: inline-flex;
244-
align-items: center;
245-
gap: 6px;
246-
padding: 8px 12px;
247-
border-radius: 10px;
248-
background: var(--vp-c-brand-1);
249-
color: var(--vp-c-white);
250-
text-decoration: none;
251-
font-size: 13px;
252-
border: 1px solid var(--vp-c-brand-2);
253-
transition: transform 0.15s ease, box-shadow 0.15s ease;
339+
/* Hover */
340+
.mod-card:hover {
341+
transform: translateY(-3px);
342+
box-shadow:
343+
0 18px 40px rgba(0, 0, 0, 0.20),
344+
0 0 22px var(--mod-card-accent-soft);
345+
border-color: rgba(114, 214, 255, 0.5);
346+
}
347+
348+
.mod-card:hover .mod-card__media img {
349+
transform: scale(1.05);
350+
filter: saturate(1.25) contrast(1.08);
351+
}
352+
353+
.mod-card__btn:hover {
354+
transform: translateY(-1px);
355+
box-shadow:
356+
0 10px 24px rgba(76, 210, 255, 0.55);
357+
filter: brightness(1.05);
254358
}
255359
256360
.btn:hover {
@@ -262,4 +366,49 @@ const mods = computed(() => copy.value.mods as ModCard[])
262366
font-size: 12px;
263367
color: var(--vp-c-text-3);
264368
}
369+
.mod-card__link[aria-disabled="true"] {
370+
pointer-events: none;
371+
cursor: default;
372+
}
373+
374+
/* D.A.R.K. */
375+
376+
:root.dark .mod-card {
377+
background: radial-gradient(circle at 0 0, rgba(114, 214, 255, 0.12), transparent 55%),
378+
radial-gradient(circle at 100% 100%, rgba(120, 100, 255, 0.18), transparent 55%),
379+
var(--mod-card-bg);
380+
border: 1px solid var(--mod-card-border);
381+
box-shadow:
382+
0 10px 26px rgba(0, 0, 0, 0.7),
383+
0 0 0 1px rgba(255, 255, 255, 0.02);
384+
}
385+
:root.dark .mod-card:hover {
386+
transform: translateY(-3px);
387+
box-shadow:
388+
0 18px 40px rgba(0, 0, 0, 0.85),
389+
0 0 22px var(--mod-card-accent-soft);
390+
border-color: rgba(114, 214, 255, 0.5);
391+
392+
}
393+
394+
:root.dark .mod-card__btn {
395+
background:
396+
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.4), transparent 55%),
397+
linear-gradient(135deg, #4fe6ff, #8f7bff);
398+
color: #02040a;
399+
box-shadow:
400+
0 0 0 1px rgba(0, 0, 0, 0.8),
401+
0 6px 18px rgba(76, 210, 255, 0.35);
402+
}
403+
404+
:root.dark .mod-card__title {
405+
color: #f5f7ff;
406+
}
407+
408+
:root.dark .mod-card__desc {
409+
color: var(--mod-card-text-muted);
410+
}
411+
:root.dark .mod-card__author {
412+
color: var(--mod-card-text-muted);
413+
}
265414
</style>

0 commit comments

Comments
 (0)