Feat: page Play — backgroundColor, playLink, play-icon + fix slug jouer
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m22s
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m22s
- Renommage dossier content 3_play → 3_jouer (slug /jouer) - Champ backgroundColor (code-editor) dans game.yml + exposé en API - playLinks simplifié en champ url simple → playLink dans l'API - Variable CSS --background-color sur la section .play - Bouton "Jouer" avec icône play-icon (SVG data URI dans buttons.css) - Plugin sylvainjule/code-editor ajouté via composer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
3cafcf3167
commit
5eaf99f7cd
25 changed files with 669 additions and 113 deletions
|
|
@ -1,76 +1,81 @@
|
|||
@font-face {
|
||||
font-family: 'Terminal Grotesque';
|
||||
src: url('fonts/terminal-grotesque.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: "Terminal Grotesque";
|
||||
src: url("fonts/terminal-grotesque.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Danzza';
|
||||
src: url('fonts/Danzza-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-family: "Danzza";
|
||||
src: url("fonts/Danzza-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Danzza';
|
||||
src: url('fonts/Danzza-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: "Danzza";
|
||||
src: url("fonts/Danzza-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Danzza';
|
||||
src: url('fonts/Danzza-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family: "Danzza";
|
||||
src: url("fonts/Danzza-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Danzza';
|
||||
src: url('fonts/Danzza-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-family: "Danzza";
|
||||
src: url("fonts/Danzza-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root{
|
||||
--font-title: 'Terminal Grotesque', sans-serif;
|
||||
--font-body: 'Danzza', sans-serif;
|
||||
:root {
|
||||
--font-title: "Terminal Grotesque", sans-serif;
|
||||
--font-body: "Danzza", sans-serif;
|
||||
|
||||
--font-sans: 'Danzza', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
--text-h1: 3em;
|
||||
--font-sans: "Danzza", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
|
||||
--color-green-perso: #04fea0;
|
||||
--text-h1: 3em;
|
||||
|
||||
--color-black: #0B1632;
|
||||
--color-white: #ffffff;
|
||||
--color-green-perso: #04fea0;
|
||||
|
||||
--color-gray-200: #BCCAF0;
|
||||
--color-gray-100: #BCCAF0;
|
||||
--color-gray-250: #8BA3E5;
|
||||
--color-gray-300: #7A95E1;
|
||||
--color-gray-400: #597BD9;
|
||||
--color-gray-500: #3761D2;
|
||||
--color-gray-600: #224196;
|
||||
--color-gray-700: #1A3274;
|
||||
--color-gray-800: #172C64;
|
||||
--color-gray-850: #132553;
|
||||
--color-gray-900: #0e1e43;
|
||||
--color-gray-950: #0d1a38;
|
||||
--color-black: #0b1632;
|
||||
--color-white: #ffffff;
|
||||
|
||||
--button-cancel-filled-color-back: light-dark( var(--color-gray-300), var(--color-gray-950) );
|
||||
--color-icon-perso: light-dark( var(--color-gray-700), var(--color-gray-400) );
|
||||
--color-gray-200: #bccaf0;
|
||||
--color-gray-100: #bccaf0;
|
||||
--color-gray-250: #8ba3e5;
|
||||
--color-gray-300: #7a95e1;
|
||||
--color-gray-400: #597bd9;
|
||||
--color-gray-500: #3761d2;
|
||||
--color-gray-600: #224196;
|
||||
--color-gray-700: #1a3274;
|
||||
--color-gray-800: #172c64;
|
||||
--color-gray-850: #132553;
|
||||
--color-gray-900: #0e1e43;
|
||||
--color-gray-950: #0d1a38;
|
||||
|
||||
--color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
|
||||
--dropdown-color-hr:var(--color-gray-800);
|
||||
--button-cancel-filled-color-back: light-dark(
|
||||
var(--color-gray-300),
|
||||
var(--color-gray-950)
|
||||
);
|
||||
--color-icon-perso: light-dark(var(--color-gray-700), var(--color-gray-400));
|
||||
|
||||
--color-focus: var(--color-green-perso);
|
||||
--color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
|
||||
--dropdown-color-hr: var(--color-gray-800);
|
||||
|
||||
--color-red-h: 355;
|
||||
--color-green-h: 152;
|
||||
--color-orange-h: 15;
|
||||
--color-blue-h: 220;
|
||||
--color-focus: var(--color-green-perso);
|
||||
|
||||
--color-red-h: 355;
|
||||
--color-green-h: 152;
|
||||
--color-orange-h: 15;
|
||||
--color-blue-h: 220;
|
||||
}
|
||||
|
||||
.k-dialog-button-cancel:where([data-variant="filled"]) {
|
||||
|
|
@ -81,25 +86,27 @@
|
|||
--icon-color: var(--color-icon-perso);
|
||||
}
|
||||
|
||||
.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search){
|
||||
color: var(--color-green-perso);
|
||||
.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search) {
|
||||
color: var(--color-green-perso);
|
||||
}
|
||||
|
||||
|
||||
.k-header-title{
|
||||
font-family: var(--font-title);
|
||||
.k-header-title {
|
||||
font-family: var(--font-title);
|
||||
}
|
||||
.k-panel[data-template="home"] .k-header-title-text, .k-panel[data-template="expertise"] .k-header-title-text,
|
||||
.k-panel[data-template="portfolio"] .k-header-title-text, .k-panel[data-template="jouer"] .k-header-title-text,
|
||||
.k-panel[data-template="about"] .k-header-title-text, .k-panel[data-template="blog"] .k-header-title-text{
|
||||
text-transform: uppercase;
|
||||
.k-panel[data-template="home"] .k-header-title-text,
|
||||
.k-panel[data-template="expertise"] .k-header-title-text,
|
||||
.k-panel[data-template="portfolio"] .k-header-title-text,
|
||||
.k-panel[data-template="jouer"] .k-header-title-text,
|
||||
.k-panel[data-template="about"] .k-header-title-text,
|
||||
.k-panel[data-template="blog"] .k-header-title-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.k-header-title .k-icon{
|
||||
--icon-size: 28px;
|
||||
.k-header-title .k-icon {
|
||||
--icon-size: 28px;
|
||||
}
|
||||
|
||||
.k-text a{
|
||||
color: var(--color-green-perso);
|
||||
.k-text a {
|
||||
color: var(--color-green-perso);
|
||||
}
|
||||
|
||||
.k-block-container:not(:last-of-type) {
|
||||
|
|
@ -107,35 +114,46 @@
|
|||
}
|
||||
|
||||
/*modif card pour ressembler au site web*/
|
||||
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"]{
|
||||
display: grid;
|
||||
grid-template-columns: 2fr auto 1fr;
|
||||
grid-template-rows: auto;
|
||||
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr auto 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-image{
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/3;
|
||||
.k-panel[data-template="blog"]
|
||||
.k-item.k-cards-item[data-template="article"]
|
||||
.k-item-image {
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-content{
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
.k-panel[data-template="blog"]
|
||||
.k-item.k-cards-item[data-template="article"]
|
||||
.k-item-content {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-options{
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/2;
|
||||
align-items: start;
|
||||
.k-panel[data-template="blog"]
|
||||
.k-item.k-cards-item[data-template="article"]
|
||||
.k-item-options {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/2;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Logo sur la page de login */
|
||||
.k-login-view .k-login-form::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 auto 2rem auto;
|
||||
background-image: url('logo-panel.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
content: "";
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 auto 2rem auto;
|
||||
background-image: url("logo-panel.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Code editor style */
|
||||
.k-code-editor-input[data-size="custom-size"] {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue