Skip to content

Commit 9be5a57

Browse files
osaengineosaengine
committed
фиксы
1 parent 451cc32 commit 9be5a57

File tree

2 files changed

+309
-23
lines changed

2 files changed

+309
-23
lines changed

‎assets/css/style.css‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2562,6 +2562,234 @@ main {
25622562
text-decoration: underline;
25632563
}
25642564

2565+
/* Platform Section Styles for Download Page */
2566+
.platform-section {
2567+
background: var(--bg-card);
2568+
border: 1px solid var(--border-color);
2569+
border-radius: var(--border-radius);
2570+
padding: 0;
2571+
margin-bottom: 2rem;
2572+
box-shadow: var(--shadow-md);
2573+
transition: var(--transition);
2574+
overflow: hidden;
2575+
}
2576+
2577+
.platform-section:hover {
2578+
transform: translateY(-3px);
2579+
box-shadow: var(--shadow-xl);
2580+
border-color: var(--primary-color);
2581+
}
2582+
2583+
.platform-header {
2584+
padding: 1.5rem;
2585+
background: var(--bg-secondary);
2586+
border-bottom: 1px solid var(--border-color);
2587+
display: flex;
2588+
align-items: center;
2589+
gap: 1rem;
2590+
}
2591+
2592+
/* Ограничение размера картинок */
2593+
.platform-logo {
2594+
width: 60px;
2595+
height: 60px;
2596+
object-fit: cover;
2597+
border-radius: 8px;
2598+
flex-shrink: 0;
2599+
border: 1px solid var(--border-color);
2600+
}
2601+
2602+
.platform-header h3 {
2603+
margin: 0;
2604+
color: var(--text-primary);
2605+
font-size: 1.5rem;
2606+
font-weight: 600;
2607+
}
2608+
2609+
.platform-content {
2610+
padding: 1.5rem;
2611+
}
2612+
2613+
.platform-content > p {
2614+
color: var(--text-secondary);
2615+
margin-bottom: 1rem;
2616+
line-height: 1.6;
2617+
}
2618+
2619+
.platform-advantages {
2620+
display: flex;
2621+
flex-wrap: wrap;
2622+
gap: 0.5rem;
2623+
margin-bottom: 1.5rem;
2624+
}
2625+
2626+
.advantage-tag {
2627+
background: var(--bg-secondary);
2628+
color: var(--text-secondary);
2629+
padding: 0.25rem 0.75rem;
2630+
border-radius: 50px;
2631+
font-size: 0.75rem;
2632+
border: 1px solid var(--border-color);
2633+
white-space: nowrap;
2634+
}
2635+
2636+
.platform-details {
2637+
background: var(--bg-secondary);
2638+
border-radius: 8px;
2639+
padding: 1rem;
2640+
margin-bottom: 1.5rem;
2641+
}
2642+
2643+
.detail-item {
2644+
margin-bottom: 0.75rem;
2645+
display: flex;
2646+
flex-direction: column;
2647+
gap: 0.25rem;
2648+
}
2649+
2650+
.detail-item:last-child {
2651+
margin-bottom: 0;
2652+
}
2653+
2654+
.detail-item strong {
2655+
color: var(--text-primary);
2656+
font-size: 0.9rem;
2657+
font-weight: 600;
2658+
}
2659+
2660+
.detail-item span {
2661+
color: var(--text-secondary);
2662+
font-size: 0.85rem;
2663+
line-height: 1.4;
2664+
}
2665+
2666+
.detail-item code {
2667+
background: var(--bg-primary);
2668+
color: var(--primary-color);
2669+
padding: 0.25rem 0.5rem;
2670+
border-radius: 4px;
2671+
font-size: 0.8rem;
2672+
border: 1px solid var(--border-color);
2673+
font-family: 'Courier New', monospace;
2674+
}
2675+
2676+
/* Красивые стилизованные ссылки */
2677+
.platform-links {
2678+
display: grid;
2679+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
2680+
gap: 0.75rem;
2681+
}
2682+
2683+
.platform-link {
2684+
display: flex;
2685+
align-items: center;
2686+
justify-content: center;
2687+
gap: 0.5rem;
2688+
padding: 0.75rem 1rem;
2689+
border-radius: 8px;
2690+
text-decoration: none;
2691+
font-weight: 500;
2692+
font-size: 0.9rem;
2693+
transition: var(--transition);
2694+
border: 1px solid var(--border-color);
2695+
position: relative;
2696+
overflow: hidden;
2697+
}
2698+
2699+
.link-icon {
2700+
font-size: 1.1rem;
2701+
flex-shrink: 0;
2702+
}
2703+
2704+
.link-text {
2705+
white-space: nowrap;
2706+
}
2707+
2708+
/* Цветовая схема для разных типов ссылок */
2709+
.download-link {
2710+
background: var(--primary-color);
2711+
color: white;
2712+
border-color: var(--primary-color);
2713+
}
2714+
2715+
.download-link:hover {
2716+
background: var(--primary-hover);
2717+
color: white;
2718+
transform: translateY(-2px);
2719+
box-shadow: var(--shadow-md);
2720+
}
2721+
2722+
.github-link {
2723+
background: #24292e;
2724+
color: white;
2725+
border-color: #24292e;
2726+
}
2727+
2728+
.github-link:hover {
2729+
background: #1a1e22;
2730+
color: white;
2731+
transform: translateY(-2px);
2732+
box-shadow: var(--shadow-md);
2733+
}
2734+
2735+
.website-link {
2736+
background: var(--secondary-color);
2737+
color: white;
2738+
border-color: var(--secondary-color);
2739+
}
2740+
2741+
.website-link:hover {
2742+
background: #059669;
2743+
color: white;
2744+
transform: translateY(-2px);
2745+
box-shadow: var(--shadow-md);
2746+
}
2747+
2748+
.docs-link {
2749+
background: #f59e0b;
2750+
color: white;
2751+
border-color: #f59e0b;
2752+
}
2753+
2754+
.docs-link:hover {
2755+
background: #d97706;
2756+
color: white;
2757+
transform: translateY(-2px);
2758+
box-shadow: var(--shadow-md);
2759+
}
2760+
2761+
.chat-link {
2762+
background: #0088cc;
2763+
color: white;
2764+
border-color: #0088cc;
2765+
}
2766+
2767+
.chat-link:hover {
2768+
background: #006ba3;
2769+
color: white;
2770+
transform: translateY(-2px);
2771+
box-shadow: var(--shadow-md);
2772+
}
2773+
2774+
/* Эффект волны при наведении */
2775+
.platform-link::before {
2776+
content: '';
2777+
position: absolute;
2778+
top: 50%;
2779+
left: 50%;
2780+
width: 0;
2781+
height: 0;
2782+
background: rgba(255, 255, 255, 0.2);
2783+
border-radius: 50%;
2784+
transform: translate(-50%, -50%);
2785+
transition: width 0.6s, height 0.6s;
2786+
}
2787+
2788+
.platform-link:hover::before {
2789+
width: 300px;
2790+
height: 300px;
2791+
}
2792+
25652793
#comments {
25662794
margin-top: 2rem;
25672795
min-height: 100px;
@@ -2629,6 +2857,32 @@ main {
26292857
margin-bottom: 0.5rem;
26302858
margin-right: 0;
26312859
}
2860+
2861+
/* Platform Section Mobile */
2862+
.platform-header {
2863+
padding: 1rem;
2864+
flex-direction: column;
2865+
text-align: center;
2866+
gap: 0.75rem;
2867+
}
2868+
2869+
.platform-logo {
2870+
width: 50px;
2871+
height: 50px;
2872+
}
2873+
2874+
.platform-content {
2875+
padding: 1rem;
2876+
}
2877+
2878+
.platform-links {
2879+
grid-template-columns: 1fr;
2880+
}
2881+
2882+
.platform-link {
2883+
padding: 0.6rem;
2884+
font-size: 0.85rem;
2885+
}
26322886
}
26332887

26342888
@media (max-width: 480px) {

‎download.md‎

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,61 @@ OS Engine — это общее название для платформ с от
2323
## Популярные платформы OS Engine
2424

2525
{% for project in site.data.projects %}
26-
### {{ project.name }}
27-
28-
![{{ project.name }}]({{ project.image }})
29-
30-
{{ project.description }}
31-
32-
**Преимущества:**
33-
{% for advantage in project.advantages %}
34-
- {{ advantage }}
35-
{% endfor %}
36-
37-
**Системные требования:** {{ project.system_requirements }}
38-
39-
**Установка:** `{{ project.install_command }}`
40-
41-
**Ссылки:**
42-
- [⬇️ Скачать]({{ project.download_url }})
43-
- [📁 GitHub]({{ project.github }})
44-
- [🌐 Сайт]({{ project.website }})
45-
{% if project.documentation %}- [📖 Документация]({{ project.documentation }}){% endif %}
46-
{% if project.telegram_chat %}- [💬 Чат]({{ project.telegram_chat }}){% endif %}
47-
48-
---
26+
<div class="platform-section">
27+
<div class="platform-header">
28+
<img src="{{ project.image }}" alt="{{ project.name }}" class="platform-logo">
29+
<h3>{{ project.name }}</h3>
30+
</div>
31+
32+
<div class="platform-content">
33+
<p>{{ project.description }}</p>
34+
35+
<div class="platform-advantages">
36+
{% for advantage in project.advantages %}
37+
<span class="advantage-tag">{{ advantage }}</span>
38+
{% endfor %}
39+
</div>
40+
41+
<div class="platform-details">
42+
<div class="detail-item">
43+
<strong>Системные требования:</strong>
44+
<span>{{ project.system_requirements }}</span>
45+
</div>
46+
47+
<div class="detail-item">
48+
<strong>Установка:</strong>
49+
<code>{{ project.install_command }}</code>
50+
</div>
51+
</div>
52+
53+
<div class="platform-links">
54+
<a href="{{ project.download_url }}" class="platform-link download-link" target="_blank">
55+
<span class="link-icon">⬇️</span>
56+
<span class="link-text">Скачать</span>
57+
</a>
58+
<a href="{{ project.github }}" class="platform-link github-link" target="_blank">
59+
<span class="link-icon">📁</span>
60+
<span class="link-text">GitHub</span>
61+
</a>
62+
<a href="{{ project.website }}" class="platform-link website-link" target="_blank">
63+
<span class="link-icon">🌐</span>
64+
<span class="link-text">Сайт</span>
65+
</a>
66+
{% if project.documentation %}
67+
<a href="{{ project.documentation }}" class="platform-link docs-link" target="_blank">
68+
<span class="link-icon">📖</span>
69+
<span class="link-text">Документация</span>
70+
</a>
71+
{% endif %}
72+
{% if project.telegram_chat %}
73+
<a href="{{ project.telegram_chat }}" class="platform-link chat-link" target="_blank">
74+
<span class="link-icon">💬</span>
75+
<span class="link-text">Чат</span>
76+
</a>
77+
{% endif %}
78+
</div>
79+
</div>
80+
</div>
4981
{% endfor %}
5082

5183
## Как выбрать платформу

0 commit comments

Comments
 (0)