Compare commits
3 commits
3e9657430f
...
d81eaa1c15
| Author | SHA1 | Date | |
|---|---|---|---|
|
d81eaa1c15 | ||
|
|
dc66d57306 | ||
|
|
b7d825b2f0 |
9 changed files with 114 additions and 378 deletions
|
|
@ -39,7 +39,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: var(--z-cursor);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
z-index: var(--z-header);
|
||||
font-family: "Danzza";
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: normal;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
left: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
z-index: var(--z-header);
|
||||
}
|
||||
|
||||
.wg-logo {
|
||||
|
|
@ -102,6 +102,11 @@
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.navbar--open {
|
||||
background-color: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.navbar--open .navbar-list {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -112,7 +117,7 @@
|
|||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
z-index: var(--z-content);
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
|
@ -128,7 +133,7 @@
|
|||
right: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
z-index: var(--z-header);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -14,16 +14,15 @@
|
|||
$effect(() => {
|
||||
if (!dialogEl) return
|
||||
if (isMenuOpen) {
|
||||
dialogEl.showModal()
|
||||
dialogEl.show()
|
||||
const onKeyDown = (e) => { if (e.key === 'Escape') navigation.closeMenu() }
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
return () => window.removeEventListener('keydown', onKeyDown)
|
||||
} else if (dialogEl.open) {
|
||||
dialogEl.close()
|
||||
}
|
||||
})
|
||||
|
||||
function handleCancel() {
|
||||
navigation.closeMenu()
|
||||
}
|
||||
|
||||
function handleNavClick() {
|
||||
navigation.closeMenu()
|
||||
// La navigation elle-même est gérée par le router via le <a href>
|
||||
|
|
@ -50,81 +49,84 @@
|
|||
<dialog
|
||||
bind:this={dialogEl}
|
||||
id="main-menu"
|
||||
class="menu golden-grid"
|
||||
class="menu"
|
||||
aria-label="Menu principal"
|
||||
oncancel={handleCancel}
|
||||
>
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line vertical-line-col8"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line vertical-line-col14"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
<div class="menu-inner golden-grid">
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line vertical-line-col8"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line vertical-line-col14"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="menu-list font-face-terminal" aria-label="Navigation principale">
|
||||
<p class="menu-title">{t('menu')}</p>
|
||||
<ol class="menu-nav-list font-face-danzza-bold">
|
||||
{#each slides.all as slide, i}
|
||||
<li class="menu-nav-item">
|
||||
<a
|
||||
href={slide.path}
|
||||
onclick={handleNavClick}
|
||||
class="menu-nav-link"
|
||||
class:active={activeId === slide.id}
|
||||
aria-current={activeId === slide.id ? 'page' : undefined}
|
||||
>
|
||||
<span class="menu-nav-number font-face-danzza-medium">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="menu-nav-label">
|
||||
{getTitle(slide)}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
<!-- Navigation -->
|
||||
<nav class="menu-list font-face-terminal" aria-label="Navigation principale">
|
||||
<p class="menu-title">{t('menu')}</p>
|
||||
<ol class="menu-nav-list font-face-danzza-bold">
|
||||
{#each slides.all as slide, i}
|
||||
<li class="menu-nav-item">
|
||||
<a
|
||||
href={slide.path}
|
||||
onclick={handleNavClick}
|
||||
class="menu-nav-link"
|
||||
class:active={activeId === slide.id}
|
||||
aria-current={activeId === slide.id ? 'page' : undefined}
|
||||
>
|
||||
<span class="menu-nav-number font-face-danzza-medium">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="menu-nav-label">
|
||||
{getTitle(slide)}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Connect -->
|
||||
<aside class="menu-connect" aria-label="Contact">
|
||||
<p class="menu-connect-title">{t('connect')}</p>
|
||||
<!-- Connect -->
|
||||
<aside class="menu-connect" aria-label="Contact">
|
||||
<p class="menu-connect-title">{t('connect')}</p>
|
||||
|
||||
{#if contact.address}
|
||||
<p class="menu-connect-label">{t('address')}</p>
|
||||
<p class="menu-connect-info">{@html contact.address}</p>
|
||||
{/if}
|
||||
{#if contact.address}
|
||||
<p class="menu-connect-label">{t('address')}</p>
|
||||
<p class="menu-connect-info">{@html contact.address}</p>
|
||||
{/if}
|
||||
|
||||
{#if contact.email}
|
||||
<p class="menu-connect-label">MAIL</p>
|
||||
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
|
||||
{contact.email}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if contact.socials?.length}
|
||||
<p class="menu-connect-label">{t('socials')}</p>
|
||||
{#each contact.socials as social}
|
||||
<a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
|
||||
{social.label}
|
||||
{#if contact.email}
|
||||
<p class="menu-connect-label">MAIL</p>
|
||||
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
|
||||
{contact.email}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if contact.legalNotice}
|
||||
<a
|
||||
href={contact.legalNotice}
|
||||
download
|
||||
class="menu-connect-legal"
|
||||
>
|
||||
{t('legal')}
|
||||
</a>
|
||||
{/if}
|
||||
</aside>
|
||||
{#if contact.socials?.length}
|
||||
<p class="menu-connect-label">{t('socials')}</p>
|
||||
{#each contact.socials as social}
|
||||
<a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
|
||||
{social.label}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if contact.legalNotice}
|
||||
<a
|
||||
href={contact.legalNotice}
|
||||
download
|
||||
class="menu-connect-legal"
|
||||
>
|
||||
{t('legal')}
|
||||
</a>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
/* Dialog reset + full screen */
|
||||
dialog.menu {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -132,10 +134,16 @@
|
|||
max-height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: var(--z-menu);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
dialog.menu::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
290
src/style.css
290
src/style.css
|
|
@ -1,290 +0,0 @@
|
|||
/* FONT SIZING SYSTEM - Consistent typography across the site */
|
||||
:root {
|
||||
/* Base font sizes for desktop */
|
||||
--font-size-paragraph: 18px;
|
||||
--font-size-paragraph-small: 16px;
|
||||
--font-size-subtitle: 20px;
|
||||
--font-size-title-section: 32px;
|
||||
--font-size-title-main: 48px;
|
||||
--font-size-title-hero: 96px;
|
||||
--font-size-button: 13px;
|
||||
--font-size-caption: 12px;
|
||||
|
||||
/* Mobile font sizes */
|
||||
--font-size-paragraph-mobile: 16px;
|
||||
--font-size-paragraph-small-mobile: 12px;
|
||||
--font-size-subtitle-mobile: 16px;
|
||||
--font-size-title-section-mobile: 24px;
|
||||
--font-size-title-main-mobile: 32px;
|
||||
--font-size-title-hero-mobile: 48px;
|
||||
--font-size-button-mobile: 11px;
|
||||
--font-size-caption-mobile: 10px;
|
||||
|
||||
/* Tablet font sizes */
|
||||
--font-size-paragraph-tablet: 16px;
|
||||
--font-size-paragraph-small-tablet: 14px;
|
||||
--font-size-subtitle-tablet: 18px;
|
||||
--font-size-title-section-tablet: 28px;
|
||||
--font-size-title-main-tablet: 40px;
|
||||
--font-size-title-hero-tablet: 64px;
|
||||
--font-size-button-tablet: 12px;
|
||||
--font-size-caption-tablet: 11px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Danzza Regular", "Danzza", -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
cursor: none;
|
||||
background: #000;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* Font faces */
|
||||
@font-face {
|
||||
font-family: "Terminal";
|
||||
font-weight: bold;
|
||||
src: local("terminal-grotesque"),
|
||||
url("/assets/fonts/terminal-grotesque.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Danzza";
|
||||
src: local("Danzza Regular"),
|
||||
url("/assets/fonts/Danzza-Regular.woff") format("woff"),
|
||||
url("/assets/fonts/Danzza-Regular.otf") format("opentype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Danzza Light";
|
||||
src: local("Danzza Light"),
|
||||
url("/assets/fonts/Danzza-Light.woff") format("woff"),
|
||||
url("/assets/fonts/Danzza-Light.otf") format("opentype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Danzza Medium";
|
||||
src: local("Danzza Medium"),
|
||||
url("/assets/fonts/Danzza-Medium.woff") format("woff"),
|
||||
url("/assets/fonts/Danzza-Medium.otf") format("opentype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Danzza Bold";
|
||||
src: local("Danzza Bold"),
|
||||
url("/assets/fonts/Danzza-Bold.woff") format("woff"),
|
||||
url("/assets/fonts/Danzza-Bold.otf") format("opentype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.font-face-terminal {
|
||||
font-family: "Terminal";
|
||||
}
|
||||
|
||||
.font-face-danzza {
|
||||
font-family: "Danzza";
|
||||
}
|
||||
|
||||
.font-face-danzza-light {
|
||||
font-family: "Danzza Light";
|
||||
}
|
||||
|
||||
.font-face-danzza-medium {
|
||||
font-family: "Danzza Medium";
|
||||
}
|
||||
|
||||
.font-face-danzza-bold {
|
||||
font-family: "Danzza Bold";
|
||||
}
|
||||
|
||||
/* Golden Grid */
|
||||
.golden-grid {
|
||||
height: 100vh !important;
|
||||
min-height: 100% !important;
|
||||
display: grid !important;
|
||||
position: relative;
|
||||
grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Vertical Lines */
|
||||
.vertical-line {
|
||||
z-index: 1;
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-start {
|
||||
z-index: 1;
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/6 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-center {
|
||||
z-index: 1;
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/11 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-end {
|
||||
z-index: 1;
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/16 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
width: 14vmax;
|
||||
min-width: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
padding: 12px 16px;
|
||||
transition: 0.5s ease-out;
|
||||
font-family: "Danzza Bold";
|
||||
background-color: #04fea0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-position: left;
|
||||
background-color: transparent;
|
||||
outline: solid 2px #04fea0;
|
||||
}
|
||||
|
||||
.button p {
|
||||
color: black;
|
||||
margin: 0;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.button:hover p {
|
||||
color: #04fea0 !important;
|
||||
}
|
||||
|
||||
.earth-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url("/assets/img/icon-earth-green.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-right: 8px;
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
|
||||
.button:hover .earth-icon {
|
||||
filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
|
||||
hue-rotate(91deg) brightness(101%) contrast(97%);
|
||||
}
|
||||
|
||||
/* Clickable elements */
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Cursor */
|
||||
#cursor-dot,
|
||||
#cursor-dot-outline,
|
||||
#cursor-circle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 99999;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#cursor-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#cursor-circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #04fea0;
|
||||
}
|
||||
|
||||
#cursor-dot-outline {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
#cursor-dot,
|
||||
#cursor-dot-outline,
|
||||
#cursor-circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body,
|
||||
* {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background: #04fea0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #04fea0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #03d98c;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
z-index: var(--z-base);
|
||||
padding: 12px 16px;
|
||||
transition: 0.5s ease-out;
|
||||
font-family: "Danzza Bold";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 99999;
|
||||
z-index: var(--z-cursor);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -15,27 +15,27 @@
|
|||
|
||||
/* Vertical Lines */
|
||||
.vertical-line {
|
||||
z-index: 1;
|
||||
z-index: var(--z-base);
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-start {
|
||||
z-index: 1;
|
||||
z-index: var(--z-base);
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/6 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-center {
|
||||
z-index: 1;
|
||||
z-index: var(--z-base);
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/11 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.vertical-line-end {
|
||||
z-index: 1;
|
||||
z-index: var(--z-base);
|
||||
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
||||
grid-area: 1/16 / span 20 / span 1;
|
||||
height: 150%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,25 @@
|
|||
/* CSS Variables */
|
||||
:root {
|
||||
/* Base font sizes for desktop */
|
||||
/* Colors */
|
||||
--color-primary: #04fea0;
|
||||
--color-primary-hover: #03d98c;
|
||||
--color-background: #000;
|
||||
--color-text: #fff;
|
||||
|
||||
/* Z-INDEX SCALE
|
||||
* --z-base : éléments décoratifs (lignes verticales, bg)
|
||||
* --z-content : contenu de slides (textes, overlays légers)
|
||||
* --z-menu : overlay menu plein écran
|
||||
* --z-header : barre de navigation (toujours au-dessus du menu)
|
||||
* --z-cursor : curseur personnalisé (toujours au-dessus de tout)
|
||||
*/
|
||||
--z-base: 1;
|
||||
--z-content: 5;
|
||||
--z-menu: 100;
|
||||
--z-header: 200;
|
||||
--z-cursor: 9999;
|
||||
|
||||
/* Font sizes — desktop */
|
||||
--font-size-paragraph: 18px;
|
||||
--font-size-paragraph-small: 16px;
|
||||
--font-size-subtitle: 20px;
|
||||
|
|
@ -10,7 +29,7 @@
|
|||
--font-size-button: 13px;
|
||||
--font-size-caption: 12px;
|
||||
|
||||
/* Mobile font sizes */
|
||||
/* Font sizes — mobile */
|
||||
--font-size-paragraph-mobile: 16px;
|
||||
--font-size-paragraph-small-mobile: 12px;
|
||||
--font-size-subtitle-mobile: 16px;
|
||||
|
|
@ -20,7 +39,7 @@
|
|||
--font-size-button-mobile: 11px;
|
||||
--font-size-caption-mobile: 10px;
|
||||
|
||||
/* Tablet font sizes */
|
||||
/* Font sizes — tablet */
|
||||
--font-size-paragraph-tablet: 16px;
|
||||
--font-size-paragraph-small-tablet: 14px;
|
||||
--font-size-subtitle-tablet: 18px;
|
||||
|
|
@ -29,10 +48,4 @@
|
|||
--font-size-title-hero-tablet: 64px;
|
||||
--font-size-button-tablet: 12px;
|
||||
--font-size-caption-tablet: 11px;
|
||||
|
||||
/* Colors */
|
||||
--color-primary: #04fea0;
|
||||
--color-primary-hover: #03d98c;
|
||||
--color-background: #000;
|
||||
--color-text: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
/* Text overlay */
|
||||
.home-text {
|
||||
z-index: 5;
|
||||
z-index: var(--z-content);
|
||||
grid-area: 9/1 / span 6 / span 20;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue