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

Updated responsive layout

Browse Source
This commit is contained in:
Cyper
2025-07-06 01:10:23 -04:00
parent b18871471b
commit 0c4e89dc9a
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/home.css
View File

@ -69,16 +69,17 @@
} }
/* Grid Pattern */ /* Grid Pattern */
.home-grid-container {
padding: 0 15% 2rem 15%;
}
.home-grid { .home-grid {
display: grid; display: grid;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
width: 100%; width: 100%;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
.home-grid svg { .home-grid svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -87,7 +88,7 @@
/* -md */ /* -md */
@media (min-width: 992px) { @media (min-width: 992px) {
.home-grid { .home-grid-container {
padding: 0; padding: 0;
} }
} }

4
src/_includes/layout.html
View File

@ -36,7 +36,8 @@
<main> <main>
<div class="container flex-adaptive"> <div class="container flex-adaptive">
<div class="flex-1">Text</div> <div class="flex-1">Text</div>
<div class="flex-1 home-grid"> <div class="flex-1 home-grid-container">
<div class="home-grid">
<div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div> <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
<div class="fill-background fill-black diamond"></div> <div class="fill-background fill-black diamond"></div>
<div class="fill-background fill-brown border-round-2 border-round-tr"></div> <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
@ -54,6 +55,7 @@
<div class="fill-background fill-tan border-round-2 border-round-tr"></div> <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
</div> </div>
</div> </div>
</div>
</main> </main>
<footer> <footer>
<div class="container"> <div class="container">