christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Assemble le logo et passe le site en fond noir

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 13:20:14 +02:00
parent b63be49a6f
commit f95dc80e09
9 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
application.html
View File

@@ -8,7 +8,7 @@
content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette." content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette."
/> />
<title>ChessCubing Arena | Application</title> <title>ChessCubing Arena | Application</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" /> <link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="setup"> <body data-page="setup">
@@ -19,7 +19,8 @@
<header class="hero hero-setup"> <header class="hero hero-setup">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing"> <a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" /> <img class="hero-logo-icon" src="logo.png" alt="Icône ChessCubing" />
<img class="hero-logo" src="transparent.png" alt="Logo ChessCubing" />
</a> </a>
<p class="eyebrow">Application officielle de match</p> <p class="eyebrow">Application officielle de match</p>
<h1>ChessCubing Arena</h1> <h1>ChessCubing Arena</h1>

5
chrono.html
View File

@@ -8,14 +8,15 @@
content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face." content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face."
/> />
<title>ChessCubing Arena | Phase Chrono</title> <title>ChessCubing Arena | Phase Chrono</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" /> <link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="chrono" class="phase-body"> <body data-page="chrono" class="phase-body">
<main class="phase-shell"> <main class="phase-shell">
<header class="phase-header"> <header class="phase-header">
<a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application"> <a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application">
<img class="brand-link-mark" src="logo.jpeg" alt="Logo ChessCubing" /> <img class="brand-link-icon" src="logo.png" alt="Icône ChessCubing" />
<img class="brand-link-mark" src="transparent.png" alt="Logo ChessCubing" />
</a> </a>
<div class="phase-title"> <div class="phase-title">
<p class="eyebrow">Phase chrono</p> <p class="eyebrow">Phase chrono</p>

5
cube.html
View File

@@ -8,14 +8,15 @@
content="Phase cube de ChessCubing Arena avec gros boutons de fin." content="Phase cube de ChessCubing Arena avec gros boutons de fin."
/> />
<title>ChessCubing Arena | Phase Cube</title> <title>ChessCubing Arena | Phase Cube</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" /> <link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="cube" class="phase-body"> <body data-page="cube" class="phase-body">
<main class="phase-shell cube-shell"> <main class="phase-shell cube-shell">
<header class="phase-header"> <header class="phase-header">
<a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application"> <a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application">
<img class="brand-link-mark" src="logo.jpeg" alt="Logo ChessCubing" /> <img class="brand-link-icon" src="logo.png" alt="Icône ChessCubing" />
<img class="brand-link-mark" src="transparent.png" alt="Logo ChessCubing" />
</a> </a>
<div class="phase-title"> <div class="phase-title">
<p class="eyebrow">Phase cube</p> <p class="eyebrow">Phase cube</p>

5
index.html
View File

@@ -8,7 +8,7 @@
content="Découvrez ChessCubing, l'association et le jeu qui réunit échecs et Rubik's Cube dans un format simple, vivant et spectaculaire." content="Découvrez ChessCubing, l'association et le jeu qui réunit échecs et Rubik's Cube dans un format simple, vivant et spectaculaire."
/> />
<title>ChessCubing Arena | Accueil</title> <title>ChessCubing Arena | Accueil</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" /> <link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body class="home-body"> <body class="home-body">
@@ -19,7 +19,8 @@
<header class="hero hero-home"> <header class="hero hero-home">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing"> <a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" /> <img class="hero-logo-icon" src="logo.png" alt="Icône ChessCubing" />
<img class="hero-logo" src="transparent.png" alt="Logo ChessCubing" />
</a> </a>
<p class="eyebrow">Association ChessCubing</p> <p class="eyebrow">Association ChessCubing</p>
<h1>Les échecs rencontrent le Rubik's Cube</h1> <h1>Les échecs rencontrent le Rubik's Cube</h1>

BIN
logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 KiB

0
logo.jpeg → logotxt.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

5
reglement.html
View File

@@ -8,7 +8,7 @@
content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time." content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time."
/> />
<title>ChessCubing Arena | Règlement officiel</title> <title>ChessCubing Arena | Règlement officiel</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" /> <link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body class="rules-body"> <body class="rules-body">
@@ -19,7 +19,8 @@
<header class="hero hero-rules"> <header class="hero hero-rules">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing"> <a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" /> <img class="hero-logo-icon" src="logo.png" alt="Icône ChessCubing" />
<img class="hero-logo" src="transparent.png" alt="Logo ChessCubing" />
</a> </a>
<p class="eyebrow">Référentiel officiel</p> <p class="eyebrow">Référentiel officiel</p>
<h1>Règlement ChessCubing</h1> <h1>Règlement ChessCubing</h1>

70
styles.css
View File

@@ -38,11 +38,7 @@ body {
min-height: 100vh; min-height: 100vh;
font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-family: "Segoe UI", "Trebuchet MS", sans-serif;
color: var(--text); color: var(--text);
background: background: #000;
radial-gradient(circle at 16% 18%, rgba(255, 122, 0, 0.28), transparent 22%),
radial-gradient(circle at 78% 18%, rgba(23, 98, 255, 0.24), transparent 22%),
radial-gradient(circle at bottom center, rgba(255, 122, 0, 0.1), transparent 26%),
linear-gradient(180deg, #020202 0%, #090b12 48%, #0c1018 100%);
} }
body::before { body::before {
@@ -50,11 +46,7 @@ body::before {
position: fixed; position: fixed;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
background-image: background: none;
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
} }
body::after { body::after {
@@ -62,20 +54,11 @@ body::after {
position: fixed; position: fixed;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
background: background: none;
radial-gradient(circle at 50% 110%, rgba(255, 122, 0, 0.16), transparent 24%),
linear-gradient(180deg, transparent 0 58%, rgba(23, 98, 255, 0.07) 72%, transparent 100%);
mix-blend-mode: screen;
} }
.ambient { .ambient {
position: fixed; display: none;
width: 30rem;
height: 30rem;
border-radius: 50%;
filter: blur(90px);
opacity: 0.28;
pointer-events: none;
} }
.ambient-left { .ambient-left {
@@ -255,23 +238,31 @@ p {
.logo-lockup { .logo-lockup {
display: inline-flex; display: inline-flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.55rem 0.8rem; padding: 0;
border-radius: 24px; border: 0;
border: 1px solid rgba(255, 255, 255, 0.06); background: transparent;
background: rgba(0, 0, 0, 0.72); box-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.02),
0 0 22px rgba(23, 98, 255, 0.08);
} }
.logo-lockup:hover { .logo-lockup:hover {
text-decoration: none; text-decoration: none;
} }
.hero-logo-icon {
display: block;
width: clamp(72px, 9vw, 112px);
height: auto;
filter:
drop-shadow(0 0 10px rgba(255, 122, 0, 0.1))
drop-shadow(0 0 14px rgba(23, 98, 255, 0.14));
}
.hero-logo { .hero-logo {
display: block; display: block;
width: clamp(220px, 29vw, 360px); width: clamp(300px, 42vw, 620px);
height: auto; height: auto;
filter: filter:
drop-shadow(0 0 12px rgba(255, 122, 0, 0.08)) drop-shadow(0 0 12px rgba(255, 122, 0, 0.08))
@@ -555,14 +546,27 @@ textarea:focus {
} }
.brand-link-logo { .brand-link-logo {
padding: 0.5rem 0.7rem; display: inline-flex;
border-color: rgba(255, 255, 255, 0.08); align-items: center;
background: rgba(0, 0, 0, 0.78); gap: 0.8rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.brand-link-icon {
display: block;
width: 2.7rem;
height: auto;
filter:
drop-shadow(0 0 8px rgba(255, 122, 0, 0.1))
drop-shadow(0 0 10px rgba(23, 98, 255, 0.14));
} }
.brand-link-mark { .brand-link-mark {
display: block; display: block;
width: 7.6rem; width: 10.4rem;
height: auto; height: auto;
filter: filter:
drop-shadow(0 0 8px rgba(255, 122, 0, 0.08)) drop-shadow(0 0 8px rgba(255, 122, 0, 0.08))

BIN
transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB