drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-19 19:21:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: configurable cols for feature-grid shortcode (#342)

Browse Source 
* feat: configurable cols for feature-grid shortcode

* chore: update css files

* chore: add hextra prefix to cards css var

* chore: rebuild css
This commit is contained in:
Xin
2024-03-31 23:06:26 +02:00
committed by GitHub
parent 24fb13b221
commit 5080877576
7 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/css/compiled/main.css
View File

@ -836,9 +836,6 @@ video {
-moz-appearance: none;
appearance: none;
}
.hx-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hx-flex-col {
flex-direction: column;
}
@ -2227,7 +2224,7 @@ article details > summary::before {
background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
}
.hextra-cards {
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
}
.hextra-card img {
-webkit-user-select: none;
@ -2552,6 +2549,11 @@ nav .search-wrapper {
--tw-bg-opacity: 0.8;
}
}
@media (min-width: 1024px) {
.hextra-feature-grid {
grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr))
}
}
html {
font-size: 1rem;
-webkit-font-smoothing: antialiased;
@ -3381,6 +3383,12 @@ body {
transform: translate3d(0,-100%,0);
}
}
@media not all and (min-width: 640px) {
.max-sm\:hx-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 640px) {
.sm\:hx-block {
@ -3395,10 +3403,6 @@ body {
width: 110%;
}
.sm\:hx-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:hx-items-start {
align-items: flex-start;
}
@ -3406,6 +3410,13 @@ body {
.sm\:hx-text-xl {
font-size: 1.25rem;
}
@media not all and (min-width: 1024px) {
.sm\:max-lg\:hx-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
}
@media (min-width: 768px) {
@ -3482,12 +3493,6 @@ body {
right: auto;
}
}
@media (min-width: 1024px) {
.lg\:hx-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.xl\:hx-block {

2
assets/css/components/cards.css
View File

@ -1,5 +1,5 @@
.hextra-cards {
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
}
.hextra-card img {

5
assets/css/components/hextra/feature-grid.css Normal file
View File

@ -0,0 +1,5 @@
.hextra-feature-grid {
@media (min-width: 1024px) {
grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr));
}
}

1
assets/css/styles.css
View File

@ -9,6 +9,7 @@
@import "components/navbar.css";
@import "components/scrollbar.css";
@import "components/code-copy.css";
@import "components/hextra/feature-grid.css";
html {
@apply hx-text-base hx-antialiased;