Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progress sync to test on live
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Cyper
2025-07-11 01:50:05 -04:00
parent 0c2243ee32
commit 62c34b6fb4
3 changed files with 147 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
public/css/home.css
View File

@ -68,27 +68,119 @@
margin: auto;
}
main > * {
padding: 3rem;
}
main > :nth-child(2n) {
background-color: rgba(var(--brown), 0.21);
}
.home-text {
display: grid;
place-items: center;
text-align: center;
}
.home-text > div > * {
margin: 2rem 0;
}
.home-text h1 {
font-size: 3rem;
font-weight: 600;
}
.featured {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.featured > h1 {
font-size: 3.25rem;
font-weight: 400;
color: rgba(var(--black), 0.86);
}
.featured > div {
display: flex;
flex-direction: column;
margin-top: 2rem;
}
.featured p, .featured a {
margin-top: 1rem;
display: inline-block;
}
.featured > div > * {
text-align: end;
}
.featured h2 {
font-size: 2.25rem;
font-weight: 300;
}
/* Grid Pattern */
.home-grid-container {
padding: 0 15% 2rem 15%;
display: flex;
justify-content: center;
align-items: center;
}
.home-grid {
display: grid;
aspect-ratio: 1 / 1;
width: 100%;
width: 30rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
box-sizing: border-box;
}
.home-grid > * {
animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
}
.home-grid > *:hover {
animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
}
.home-grid svg {
width: 100%;
height: 100%;
display: block;
}
@keyframes spin-in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* -md */
@media (min-width: 992px) {
.home-grid-container {
padding: 0;
}
.home-text {
padding: 0 2rem;
}
.home-text h1 {
font-size: 4rem;
}
.featured > h1 {
font-size: 4rem;
}
.featured > div {
flex-direction: row;
}
.featured > div > :first-child {
flex: 1;
}
.featured > div > :last-child {
flex: 2;
}
}