/* Button: <a><div class="button"><p><span>icon</span><p>Click</div></a>*/ .button { background-color: var(--code-primary); margin: 1rem; padding: .5rem 2rem; box-sizing: border-box; border-radius: 1rem; box-shadow: 0 8px 16px rgba(0, 0, 0, .12); transition: all 200ms ease; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; } .button:hover { transform: translateY(-4px); box-shadow: 0 16px 18px rgba(0, 0, 0, .1); } .button p { color: var(--white); } /* Tiny displacement for icons within a button */ .button .material-symbols-outlined { transform: translateY(2px); } .button > * { padding: 0; margin: 0; /* TODO : Useful ? */ display: block; } .button > *:nth-child(2) { margin-left: 8px; } /* Go back home button */ .button-home { position: absolute; } html { scroll-behavior: smooth; } body { padding: 0; margin: 0; overflow-x: hidden; } body { /* TODO : Text */ /* Grey */ --white: #fcfcfc; --white-surface: #f3f3f3; --black: #121212; --bg-dark: #211d22; /* Code color palette */ --code-primary: #2297F3; --code-primary-light: #64B5F6; /* Art color palette */ --art-primary: #a12f81; --art-primary-container: #ffd8ec; --art-on-primary-container: #7b4998; --art-secondary: #7b4998; --art-secondary-container: #f5d9ff; --art-on-secondary-container: #30004a; --art-tertiary: #3a5ba9; --art-tertiary-container: #dae2ff; --art-on-tertiary-container: #001847; --art-surface: #F7F2FA; } .page { width: 100vw; height: 100vh; box-sizing: border-box; } p, h1, h2, h3, h4, h5, h6, q, a { font-family: 'Roboto'; } .flex-grow { flex-grow: 1; }