mirror of
https://github.com/praktimarc/kst4contest.git
synced 2026-07-14 00:26:52 +02:00
modify interactive aircraft scatter hero effect
This commit is contained in:
Marc Froehlich
@@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<title>{{ title or "KST4Contest" }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#08110b">
|
||||
<meta name="description" content="{{ description or 'KST4Contest is a contest-optimized ON4KST chat client for VHF, UHF and SHF ham radio contests.' }}">
|
||||
<link rel="canonical" href="https://kst4contest.hamradioonline.de{{ page.url }}">
|
||||
|
||||
@@ -12,34 +13,33 @@
|
||||
<meta property="og:description" content="{{ description or 'Contest-optimized ON4KST chat client for VHF, UHF and SHF ham radio contests.' }}">
|
||||
<meta property="og:url" content="https://kst4contest.hamradioonline.de{{ page.url }}">
|
||||
<meta property="og:site_name" content="KST4Contest">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta property="og:image" content="https://kst4contest.hamradioonline.de/assets/social/kst4contest-og.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ title or 'KST4Contest' }}">
|
||||
<meta name="twitter:description" content="{{ description or 'Contest-optimized ON4KST chat client for VHF, UHF and SHF ham radio contests.' }}">
|
||||
<meta name="twitter:image" content="https://kst4contest.hamradioonline.de/assets/social/kst4contest-og.png">
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v={{ build.version }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="KST4Contest News" href="/feed.xml">
|
||||
|
||||
<meta property="og:image" content="https://kst4contest.hamradioonline.de/assets/social/kst4contest-og.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta name="twitter:image" content="https://kst4contest.hamradioonline.de/assets/social/kst4contest-og.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-bg"></div>
|
||||
<div class="site-bg" aria-hidden="true"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<a class="brand" href="/">
|
||||
<span class="brand-mark">◎</span>
|
||||
<a class="brand" href="/" aria-label="KST4Contest home">
|
||||
<span class="brand-mark" aria-hidden="true">◎</span>
|
||||
<span>
|
||||
<strong>KST4Contest</strong>
|
||||
<small>ON4KST Contest Client</small>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<nav class="site-nav" aria-label="Main navigation">
|
||||
{% for item in navigation %}
|
||||
<a href="{{ item.url }}">{{ item.title }}</a>
|
||||
{% endfor %}
|
||||
@@ -47,9 +47,7 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<main>{{ content | safe }}</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-grid">
|
||||
@@ -57,7 +55,6 @@
|
||||
<strong>KST4Contest</strong>
|
||||
<p>Contest-optimized ON4KST workflow for VHF/UHF/SHF operators.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Project</strong>
|
||||
<p><a href="/features/">Features</a></p>
|
||||
@@ -65,7 +62,6 @@
|
||||
<p><a href="/manual/">Manual</a></p>
|
||||
<p><a href="/roadmap/">Roadmap</a></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Community</strong>
|
||||
<p><a href="https://github.com/praktimarc/kst4contest">GitHub Repository</a></p>
|
||||
@@ -73,7 +69,6 @@
|
||||
<p><a href="/contact/">Contact</a></p>
|
||||
<p><a href="/support/">❤️ Support KST4Contest</a></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Legal</strong>
|
||||
<p><a href="/legal-notice/">Legal Notice</a></p>
|
||||
@@ -85,6 +80,5 @@
|
||||
{% if heroFx %}
|
||||
<script src="/assets/js/hero-radio-fx.js?v={{ build.version }}" defer></script>
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
+214
-33
@@ -11,18 +11,6 @@
|
||||
--accent2: #a855f7;
|
||||
--accent3: #22c55e;
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
|
||||
|
||||
--accent: #54d63d;
|
||||
--accent2: #8aef64;
|
||||
--accent3: #31b54a;
|
||||
|
||||
--fx-plane: #79ff73;
|
||||
--fx-plane-muted: rgba(121, 255, 115, 0.42);
|
||||
--fx-beam: #52ff65;
|
||||
--fx-beam-glow: rgba(82, 255, 101, 0.28);
|
||||
--fx-reflection: #d2ffc8;
|
||||
--fx-trail: rgba(121, 255, 115, 0.17);
|
||||
--fx-grid: rgba(121, 255, 115, 0.055);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -37,7 +25,6 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
background:
|
||||
radial-gradient(circle at 14% 12%, rgba(168, 85, 247, 0.30), transparent 28%),
|
||||
radial-gradient(circle at 82% 16%, rgba(56, 189, 248, 0.24), transparent 30%),
|
||||
@@ -575,52 +562,246 @@ a:hover {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
/* ================================================================
|
||||
KST4Contest brand recovery: green operator-console identity
|
||||
and full-screen interactive hero
|
||||
================================================================ */
|
||||
|
||||
/*
|
||||
* Full-width, full-height home hero
|
||||
*/
|
||||
:root {
|
||||
--bg: #050806;
|
||||
--bg2: #0b140f;
|
||||
--panel: rgba(15, 28, 20, 0.82);
|
||||
--panel2: rgba(24, 43, 31, 0.84);
|
||||
--border: rgba(125, 178, 134, 0.22);
|
||||
--text: #f4f7f3;
|
||||
--muted: #a9b8ad;
|
||||
--soft: #6e8173;
|
||||
--accent: #54d63d;
|
||||
--accent2: #8aef64;
|
||||
--accent3: #31b54a;
|
||||
--fx-plane: #79ff73;
|
||||
--fx-plane-muted: rgba(121, 255, 115, 0.42);
|
||||
--fx-beam: #52ff65;
|
||||
--fx-beam-glow: rgba(82, 255, 101, 0.28);
|
||||
--fx-reflection: #d2ffc8;
|
||||
--fx-trail: rgba(121, 255, 115, 0.17);
|
||||
--fx-grid: rgba(121, 255, 115, 0.055);
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 14% 12%, rgba(52, 165, 57, 0.20), transparent 30%),
|
||||
radial-gradient(circle at 82% 16%, rgba(95, 218, 82, 0.14), transparent 32%),
|
||||
radial-gradient(circle at 50% 85%, rgba(32, 126, 55, 0.12), transparent 36%),
|
||||
linear-gradient(180deg, #070b09 0%, #0b1410 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(60, 173, 61, 0.18), transparent 28%),
|
||||
radial-gradient(circle at 78% 18%, rgba(97, 222, 80, 0.13), transparent 30%),
|
||||
radial-gradient(circle at 45% 80%, rgba(34, 122, 53, 0.11), transparent 26%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
background-image:
|
||||
linear-gradient(rgba(160,255,160,0.032) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(160,255,160,0.032) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.site-bg {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(5, 8, 6, 0.10), rgba(5, 8, 6, 0.84)),
|
||||
radial-gradient(circle at 8% 24%, rgba(52, 165, 57, 0.14), transparent 26%),
|
||||
radial-gradient(circle at 82% 20%, rgba(95, 218, 82, 0.12), transparent 30%);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
background: rgba(5, 8, 7, 0.82);
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
.nav-cta,
|
||||
.button {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
box-shadow:
|
||||
0 0 26px rgba(84, 214, 61, 0.42),
|
||||
0 0 50px rgba(49, 181, 74, 0.16);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
color: #061008 !important;
|
||||
box-shadow: 0 0 22px rgba(84, 214, 61, 0.28);
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero.hero-split {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-height: calc(100vh - 77px);
|
||||
padding:
|
||||
clamp(56px, 7vh, 100px)
|
||||
clamp(28px, 6vw, 110px);
|
||||
min-height: calc(100vh - 73px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
|
||||
gap: clamp(40px, 5vw, 110px);
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: clamp(56px, 7vh, 100px) clamp(28px, 6vw, 110px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero.hero-split > div:first-of-type {
|
||||
.hero.hero-split > *:not(.hero-radio-fx):not(.hero-fx-vignette) {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.hero.hero-split .hero-panel {
|
||||
width: min(100%, 700px);
|
||||
.hero.hero-split h1 {
|
||||
font-size: clamp(3.4rem, 8vw, 7rem);
|
||||
background: linear-gradient(90deg, #ffffff 0%, #c9ffd0 28%, #77ec70 58%, #45bd4d 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.eyebrow {
|
||||
color: #caffc0;
|
||||
background: rgba(52, 165, 57, 0.12);
|
||||
border-color: rgba(105, 232, 88, 0.32);
|
||||
box-shadow: 0 0 22px rgba(82, 255, 101, 0.08);
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #041007;
|
||||
box-shadow:
|
||||
0 16px 44px rgba(84, 214, 61, 0.22),
|
||||
inset 0 1px 0 rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
color: white;
|
||||
background: rgba(28, 43, 32, 0.90);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
width: min(100%, 760px);
|
||||
justify-self: center;
|
||||
transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.card,
|
||||
.cta-panel {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.045), transparent 42%),
|
||||
rgba(15, 28, 20, 0.82);
|
||||
}
|
||||
|
||||
.mini-card {
|
||||
background: rgba(12, 25, 17, 0.88);
|
||||
border-color: rgba(148, 184, 155, 0.16);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: rgba(84, 214, 61, 0.42);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.055), transparent 42%),
|
||||
rgba(12, 25, 17, 0.94);
|
||||
box-shadow:
|
||||
0 26px 90px rgba(0,0,0,0.50),
|
||||
0 0 30px rgba(84,214,61,0.07);
|
||||
}
|
||||
|
||||
.hero-radio-fx {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.hero-fx-vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg,
|
||||
rgba(7,11,9,0.92) 0%,
|
||||
rgba(7,11,9,0.70) 32%,
|
||||
rgba(7,11,9,0.17) 62%,
|
||||
rgba(7,11,9,0.38) 100%),
|
||||
linear-gradient(180deg,
|
||||
rgba(7,11,9,0.08),
|
||||
rgba(7,11,9,0.58));
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
--bg: #f4f4f2;
|
||||
--bg2: #ffffff;
|
||||
--panel: rgba(255,255,255,0.90);
|
||||
--panel2: rgba(242,242,239,0.94);
|
||||
--border: rgba(91,91,86,0.20);
|
||||
--text: #252522;
|
||||
--muted: #656560;
|
||||
--soft: #888881;
|
||||
--accent: #d33732;
|
||||
--accent2: #f25a51;
|
||||
--accent3: #ae2727;
|
||||
--fx-plane: #df3732;
|
||||
--fx-plane-muted: rgba(211,55,50,0.38);
|
||||
--fx-beam: #ef4039;
|
||||
--fx-beam-glow: rgba(239,64,57,0.22);
|
||||
--fx-reflection: #ff8d84;
|
||||
--fx-trail: rgba(211,55,50,0.15);
|
||||
--fx-grid: rgba(185,47,43,0.045);
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.hero.hero-split {
|
||||
grid-template-columns:
|
||||
minmax(520px, 0.85fr)
|
||||
minmax(600px, 1.15fr);
|
||||
gap: clamp(50px, 6vw, 130px);
|
||||
grid-template-columns: minmax(520px, 0.85fr) minmax(620px, 1.15fr);
|
||||
}
|
||||
|
||||
.hero.hero-split .hero-panel {
|
||||
width: min(100%, 780px);
|
||||
.hero-panel {
|
||||
width: min(100%, 820px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1000px) {
|
||||
.hero.hero-split {
|
||||
min-height: auto;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
grid-template-columns: 1fr;
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
width: min(100%, 760px);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.hero-radio-fx {
|
||||
opacity: 0.50;
|
||||
}
|
||||
|
||||
.hero-fx-vignette {
|
||||
background: linear-gradient(180deg, rgba(7,11,9,0.84), rgba(7,11,9,0.34));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-radio-fx {
|
||||
opacity: 0.28;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+5
-10
@@ -6,15 +6,10 @@ heroFx: true
|
||||
---
|
||||
|
||||
<section class="hero hero-split">
|
||||
|
||||
<canvas
|
||||
class="hero-radio-fx"
|
||||
data-hero-radio-fx
|
||||
aria-hidden="true">
|
||||
</canvas>
|
||||
|
||||
<canvas class="hero-radio-fx" data-hero-radio-fx aria-hidden="true"></canvas>
|
||||
<div class="hero-fx-vignette" aria-hidden="true"></div>
|
||||
<div>
|
||||
|
||||
<div class="hero-copy">
|
||||
<p class="badge">The contest-optimized ON4KST client</p>
|
||||
<h1>KST4Contest</h1>
|
||||
<p class="lead">
|
||||
@@ -82,7 +77,7 @@ heroFx: true
|
||||
<div class="actions">
|
||||
<a class="button" href="/download/">Download KST4Contest</a>
|
||||
<a class="button secondary" href="/features/">Explore features</a>
|
||||
<a class="button ghost" href="/support/">❤️ Support Development</a>
|
||||
<a class="button ghost" href="/support/">❤️ Support development</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -98,4 +93,4 @@ heroFx: true
|
||||
"downloadUrl":"https://github.com/praktimarc/kst4contest/releases",
|
||||
"description":"Contest-optimized ON4KST client for VHF, UHF and SHF amateur radio contests."
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user