packages/shared-ui/src/root-layout.module.css
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 3rem 0;
min-height: calc(100vh - 55px);
}
.description {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap !important;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
padding: 10px;
padding-right: 100px;
position: sticky;
top: 0;
backdrop-filter: blur(3px);
}
.description a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.description p {
position: relative;
margin: 0;
padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
border-radius: var(--border-radius);
}
.code {
font-weight: 700;
font-family: var(--font-mono);
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
flex-wrap: wrap;
padding: 3rem;
gap: 20px 50px;
}
.center > div {
position: relative;
}
.center::before {
background: var(--secondary-glow);
border-radius: 50%;
width: 480px;
height: 360px;
margin-left: -400px;
pointer-events: none;
}
.center::after {
background: var(--primary-glow);
width: 240px;
height: 180px;
z-index: -1;
}
.center::before,
.center::after {
content: "";
left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
}
.logo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-left: 16px;
transform: translateZ(0);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0px 2px 8px -1px #0000001a;
padding: 2px;
}
.logo p {
background: var(--bg-color);
}
.logo::before,
.logo::after {
content: " ";
position: absolute;
z-index: -1;
}
/* Conic Gradient Animation */
.logo::before {
animation: 3s rotate infinite linear;
width: 800%;
height: 800%;
background: var(--tile-border);
}
/* Inner Square */
.logo::after {
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
background: linear-gradient(
to bottom right,
rgba(var(--tile-start-rgb), 1),
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
}
.by {
display: flex;
gap: 20px;
}
/* Mobile and Tablet */
@media (max-width: 800px) {
.center {
padding: 4rem;
}
.description {
padding: 30px;
padding-right: 100px;
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}