aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
authorGabriel Arakaki Giovanini <mail@gabrielgio.me>2023-10-06 18:30:34 +0200
committerGabriel Arakaki Giovanini <mail@gabrielgio.me>2023-10-06 18:41:13 +0200
commit99a7e9ab02ae1980874be35f6a2651ca4bfdb951 (patch)
tree71d4a3f2a7e7df2b527344158dc8b7c684fef518 /scss
parent91f7c40479aa9ef18c7927913be49a014a8a3115 (diff)
downloadlens-99a7e9ab02ae1980874be35f6a2651ca4bfdb951.tar.gz
lens-99a7e9ab02ae1980874be35f6a2651ca4bfdb951.tar.bz2
lens-99a7e9ab02ae1980874be35f6a2651ca4bfdb951.zip
feat: Simplify mosaic
The old implementation was not good and would render the list on mobile in the wrong order
Diffstat (limited to 'scss')
-rw-r--r--scss/main.scss50
1 files changed, 33 insertions, 17 deletions
diff --git a/scss/main.scss b/scss/main.scss
index 532a38a..95db99f 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -15,6 +15,8 @@ $card-content-padding: 0;
$table-cell-padding: 0.5em;
$table-cell-border-width: 0;
+$section-padding: 0 1.5rem;
+
$tag-delete-margin: 15px;
$title-weight: normal;
@@ -57,19 +59,6 @@ a.is-danger {
margin-top: 30px;
}
-.card-image {
- padding: 5px;
-}
-
-.image.is-fit {
- height: auto;
- width: 100%;
-}
-
-.column {
- padding: 0;
-}
-
th {
font-weight: normal;
}
@@ -79,10 +68,6 @@ form {
padding-right: 15px;
}
-.img {
- object-fit: cover;
-}
-
.text-size-1{
@extend .is-size-4 !optional;
}
@@ -90,3 +75,34 @@ form {
.text-size-2{
@extend .is-size-5 !optional;
}
+
+.gallary_container{
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+ grid-auto-rows: 15.5em;
+ padding: 10px;
+}
+
+.image_container img{
+ width: 100%;
+ height: 100%;
+ box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
+ object-fit: cover;
+}
+
+@media screen and (min-width: $breakpoint) {
+ .image-tall {
+ grid-row: span 2 / auto;
+ }
+
+ .image-wide {
+ grid-column: span 2 / auto;
+ }
+}
+
+// Fix horizontal scroll on iOS
+.scrolling-element {
+ overflow-x: scroll; /* Must be 'scroll' not 'auto' */
+ -webkit-overflow-scrolling: touch;
+}