mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 16:44:57 +02:00
Code Issues Releases Wiki Activity

feat: Tweak grid

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 23:41:16 +07:00
parent 76d2095257
commit b8251bc9df
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
styles/_common.scss
View File

@@ -27,6 +27,6 @@ body {
@media (min-width: 1024px) { @media (min-width: 1024px) {
:root { :root {
--container-width: 48rem; --container-width: 64rem;
} }
} }

15
styles/blocks/_category.scss
View File

@@ -8,8 +8,9 @@
.category__posts { .category__posts {
display: grid; display: grid;
grid-template-columns: repeat(var(--category__post-num-columns), 1fr); grid-template-columns: repeat(var(--category__post-num-columns), 1fr);
column-gap: 1rem; background-color: #fff;
row-gap: 1rem; border-radius: 0.5rem;
box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%);
} }
.category__link { .category__link {
background: #4338ca; background: #4338ca;
@@ -22,9 +23,19 @@
margin: 1rem auto; margin: 1rem auto;
width: 12rem; width: 12rem;
} }
@media (min-width: 640px) {
:root {
--category__post-num-columns: 2;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
:root { :root {
--category__name-font-size: 2rem; --category__name-font-size: 2rem;
--category__post-num-columns: 3;
}
}
@media (min-width: 1024px) {
:root {
--category__post-num-columns: 5; --category__post-num-columns: 5;
} }
} }

7
styles/blocks/_pattern.scss
View File

@@ -1,8 +1,7 @@
.pattern__item { .pattern__item {
background-color: #fff; border-bottom: 1px solid #d1d5db;
border-radius: 0.5rem; border-right: 1px solid #d1d5db;
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1); padding: 1rem;
padding: 0.5rem;
text-align: center; text-align: center;
} }
.pattern__link { .pattern__link {