Skip to content

Commit

Permalink
Refactor Gemini style
Browse files Browse the repository at this point in the history
  • Loading branch information
stevenjoezhang committed Aug 14, 2020
1 parent f8b59a2 commit 19160b8
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 70 deletions.
93 changes: 24 additions & 69 deletions source/css/_schemes/Gemini/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,35 @@
background: initial;
box-shadow: initial;
padding: initial;
}

// Post & Comments blocks.
.post-block {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;
padding: $content-desktop-padding;
.sub-menu, .post-block, .comments, .pagination {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;

&:not(:first-child):not(.sub-menu) {
border-radius: $border-radius;
box-shadow: $box-shadow;
margin-top: $sidebar-offset;

// When blocks are siblings (homepage).
& + .post-block {
border-radius: $border-radius;
// Rewrite shadows & borders because all blocks have offsets.
box-shadow: $box-shadow;
margin-top: $sidebar-offset;
+tablet() {
margin-top: $content-tablet-padding;
}

+mobile() {
margin-top: $content-mobile-padding;
}
}
}
}

// Comments blocks.
.comments {
background: var(--content-bg-color);
border-radius: $border-radius;
box-shadow: $box-shadow;
margin-top: $sidebar-offset;
// Sub-menu(s).
.sub-menu {
border-bottom: initial;
}

// Post & Comments blocks.
.post-block, .comments {
padding: $content-desktop-padding;
}

Expand All @@ -66,34 +71,10 @@

// Pagination.
.pagination {
background: var(--content-bg-color);
border-radius: $border-radius;
border-top: initial;
box-shadow: $box-shadow;
margin: $sidebar-offset 0 0;
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.
// ==================================================
Expand Down Expand Up @@ -124,28 +105,15 @@
}

.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).
padding: ($content-tablet-padding * 2);
}

// Only if blocks are siblings need bottom margin (homepage).
.post-block + .post-block {
margin-top: $content-tablet-padding;
}

.comments {
margin-top: $content-tablet-padding;
padding: $content-tablet-padding ($content-tablet-padding * 2);
// padding: initial;
// padding-top: $content-tablet-padding;
}

.pagination {
margin: $content-tablet-padding 0 0;
}
}

// ==================================================
Expand All @@ -165,24 +133,11 @@
}

.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).
padding: $sidebar-offset;
}

// Only if blocks are siblings need bottom margin (homepage).
.post-block + .post-block {
margin-top: $content-mobile-padding;
}

.comments {
margin-top: $content-mobile-padding;
padding: 10px $sidebar-offset;
}

.pagination {
margin: $content-mobile-padding 0 0;
}
}
1 change: 0 additions & 1 deletion source/css/_schemes/Pisces/_sub-menu.styl
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.sub-menu {
background: var(--content-bg-color);
border-bottom: 1px solid $table-border-color;
margin: 0;
padding: 6px 0;
Expand Down

2 comments on commit 19160b8

@aixiu
Copy link

@aixiu aixiu commented on 19160b8 Aug 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

尊敬的 @stevenjoezhang 你好。又来麻烦你了。其它的主题没测试。只测试了Gemini主题。

.main-inner {
.sub-menu, .post-block, .comments, .pagination {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;

// Post blocks.
.main-inner {
  .sub-menu, .post-block, .comments, .pagination {
    background: var(--content-bg-color);
    border-radius: $border-radius-inner;
    box-shadow: $box-shadow-inner;

应更改为:

// Post blocks.
.main-inner {
  .sub-menu, .post-block, .comments, .pagination {
    background: var(--content-bg-color);
    border-radius: $border-radius-inner;
    box-shadow: $box-shadow-inner;

.comments --> .tabs-comment

效图:
正确:
image
原来为:
image
阴影错位了。

@stevenjoezhang
Copy link
Member Author

@stevenjoezhang stevenjoezhang commented on 19160b8 Aug 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

谢谢反馈,问题并不在这里,原来的样式也没有包含 .tabs-comment

检查了一下,由于 .main-inner .comments 优先级与 .tabs-comment .comments 相同,所以没有覆盖成功。稍后修复。

搞定,顺便把 Gemini 下 .main-inner 的子元素样式统一了 8d57b6d

Please sign in to comment.