Refactor Gemini style

This commit is contained in:
Mimi 2020-08-15 00:38:30 +08:00
parent f8b59a2b63
commit 19160b8a15
2 changed files with 24 additions and 70 deletions

View File

@ -28,30 +28,35 @@
background: initial; background: initial;
box-shadow: initial; box-shadow: initial;
padding: initial; padding: initial;
}
// Post & Comments blocks. .sub-menu, .post-block, .comments, .pagination {
.post-block { background: var(--content-bg-color);
background: var(--content-bg-color); border-radius: $border-radius-inner;
border-radius: $border-radius-inner; box-shadow: $box-shadow-inner;
box-shadow: $box-shadow-inner;
padding: $content-desktop-padding;
// When blocks are siblings (homepage). &:not(:first-child):not(.sub-menu) {
& + .post-block { border-radius: $border-radius;
border-radius: $border-radius; box-shadow: $box-shadow;
// Rewrite shadows & borders because all blocks have offsets. margin-top: $sidebar-offset;
box-shadow: $box-shadow;
margin-top: $sidebar-offset; +tablet() {
margin-top: $content-tablet-padding;
}
+mobile() {
margin-top: $content-mobile-padding;
}
}
} }
} }
// Comments blocks. // Sub-menu(s).
.comments { .sub-menu {
background: var(--content-bg-color); border-bottom: initial;
border-radius: $border-radius; }
box-shadow: $box-shadow;
margin-top: $sidebar-offset; // Post & Comments blocks.
.post-block, .comments {
padding: $content-desktop-padding; padding: $content-desktop-padding;
} }
@ -66,34 +71,10 @@
// Pagination. // Pagination.
.pagination { .pagination {
background: var(--content-bg-color);
border-radius: $border-radius;
border-top: initial; border-top: initial;
box-shadow: $box-shadow;
margin: $sidebar-offset 0 0;
padding: 10px 0 10px; padding: 10px 0 10px;
} }
// Sub-menu(s).
.sub-menu {
border-bottom: initial;
box-shadow: $box-shadow-inner;
// Adapt submenu(s) with post-blocks.
+ .post-block {
box-shadow: $box-shadow;
margin-top: $sidebar-offset;
+tablet() {
margin-top: $content-tablet-padding;
}
+mobile() {
margin-top: $content-mobile-padding;
}
}
}
// ================================================== // ==================================================
// Headers. // Headers.
// ================================================== // ==================================================
@ -124,28 +105,15 @@
} }
.post-block { .post-block {
border-radius: $border-radius;
// Rewrite shadows & borders because all blocks have offsets.
box-shadow: $box-shadow;
// Inside posts blocks content padding (default 40px). // Inside posts blocks content padding (default 40px).
padding: ($content-tablet-padding * 2); padding: ($content-tablet-padding * 2);
} }
// Only if blocks are siblings need bottom margin (homepage).
.post-block + .post-block {
margin-top: $content-tablet-padding;
}
.comments { .comments {
margin-top: $content-tablet-padding;
padding: $content-tablet-padding ($content-tablet-padding * 2); padding: $content-tablet-padding ($content-tablet-padding * 2);
// padding: initial; // padding: initial;
// padding-top: $content-tablet-padding; // padding-top: $content-tablet-padding;
} }
.pagination {
margin: $content-tablet-padding 0 0;
}
} }
// ================================================== // ==================================================
@ -165,24 +133,11 @@
} }
.post-block { .post-block {
border-radius: $border-radius;
// Rewrite shadows & borders because all blocks have offsets.
box-shadow: $box-shadow;
// Inside posts blocks content padding (default 40px). // Inside posts blocks content padding (default 40px).
padding: $sidebar-offset; padding: $sidebar-offset;
} }
// Only if blocks are siblings need bottom margin (homepage).
.post-block + .post-block {
margin-top: $content-mobile-padding;
}
.comments { .comments {
margin-top: $content-mobile-padding;
padding: 10px $sidebar-offset; padding: 10px $sidebar-offset;
} }
.pagination {
margin: $content-mobile-padding 0 0;
}
} }

View File

@ -1,5 +1,4 @@
.sub-menu { .sub-menu {
background: var(--content-bg-color);
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color;
margin: 0; margin: 0;
padding: 6px 0; padding: 6px 0;