mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-10 16:14:19 +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) {
:root {
--container-width: 48rem;
--container-width: 64rem;
}
}

17
styles/blocks/_category.scss
View File

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

7
styles/blocks/_pattern.scss
View File

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