chore(style): update code style
This commit is contained in:
Dillon
@@ -50,110 +50,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
max-width: 300px;
|
||||
margin-left: 980px;
|
||||
padding: .8rem;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 12rem;
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: .625rem;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc-mobile {
|
||||
display: none;
|
||||
padding-top: .8rem;
|
||||
|
||||
details {
|
||||
summary {
|
||||
.post-toc-title {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
padding: 0 .625rem;
|
||||
background: $code-background-color;
|
||||
|
||||
i.details {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
background: $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
i.details {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
border: 2px solid $code-background-color;
|
||||
|
||||
>nav>ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: .625rem;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
border: 2px solid $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "../_partial/_post/toc";
|
||||
|
||||
.post-content {
|
||||
.post-dummy-target:target {
|
||||
@@ -454,101 +351,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
margin-top: 3rem;
|
||||
@import "../_partial/_post/footer";
|
||||
|
||||
.post-info {
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
padding: 1rem 0 0.3rem;
|
||||
|
||||
.dark-theme & {
|
||||
border-bottom: 1px solid $global-border-color-dark;
|
||||
}
|
||||
|
||||
.post-info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.post-info-mod {
|
||||
font-size: 0.8em;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-license {
|
||||
font-size: 0.8em;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-md
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-more {
|
||||
padding: 0.3rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
& a.prev,
|
||||
& a.next {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
transition-duration: .3s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
& a.prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
& a.prev:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
& a.next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
& a.next:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-comment {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
@import "../_partial/_post/comment";
|
||||
|
||||
@@ -32,10 +32,10 @@
|
||||
|
||||
&.active {
|
||||
font-weight: 900;
|
||||
color: $navbar-active-color;
|
||||
color: $navbar-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $navbar-active-color-dark;
|
||||
color: $navbar-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,11 +31,11 @@
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: $pagination-link-active-color;
|
||||
color: $pagination-link-hover-color;
|
||||
}
|
||||
|
||||
.dark-theme &:hover a {
|
||||
color: $pagination-link-active-color-dark;
|
||||
color: $pagination-link-hover-color-dark;
|
||||
}
|
||||
|
||||
&:before,
|
||||
@@ -44,14 +44,14 @@
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: $pagination-link-active-color;
|
||||
background: $pagination-link-hover-color;
|
||||
transition: 0.3s;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.dark-theme &:before,
|
||||
.dark-theme &:after {
|
||||
background: $pagination-link-active-color-dark;
|
||||
background: $pagination-link-hover-color-dark;
|
||||
}
|
||||
|
||||
&:before .active,
|
||||
@@ -77,11 +77,11 @@
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $pagination-link-active-color;
|
||||
color: $pagination-link-hover-color;
|
||||
}
|
||||
|
||||
.dark-theme & a {
|
||||
color: $pagination-link-active-color-dark;
|
||||
color: $pagination-link-hover-color-dark;
|
||||
}
|
||||
|
||||
&:before,
|
||||
|
||||
3
assets/css/_partial/_post/_comment.scss
Normal file
3
assets/css/_partial/_post/_comment.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.post-comment {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
94
assets/css/_partial/_post/_footer.scss
Normal file
94
assets/css/_partial/_post/_footer.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
.post-footer {
|
||||
margin-top: 3rem;
|
||||
|
||||
.post-info {
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
padding: 1rem 0 0.3rem;
|
||||
|
||||
.dark-theme & {
|
||||
border-bottom: 1px solid $global-border-color-dark;
|
||||
}
|
||||
|
||||
.post-info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.post-info-mod {
|
||||
font-size: 0.8em;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-license {
|
||||
font-size: 0.8em;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-md
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-info-more {
|
||||
padding: 0.3rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
& a.prev,
|
||||
& a.next {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
transition-duration: .3s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
& a.prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
& a.prev:hover {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
& a.next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
& a.next:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
134
assets/css/_partial/_post/_toc.scss
Normal file
134
assets/css/_partial/_post/_toc.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
.post-toc {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
max-width: 300px;
|
||||
margin-left: 980px;
|
||||
padding: .8rem;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 12rem;
|
||||
|
||||
.dark-theme & {
|
||||
border-left: 1px solid $global-border-color-dark;
|
||||
}
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-indent: -0.85rem;
|
||||
padding-left: .625rem;
|
||||
list-style: none;
|
||||
|
||||
a::before {
|
||||
content: "|";
|
||||
font-weight: bolder;
|
||||
margin-right: .5rem;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
font-weight: bold;
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-weight: bolder;
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc-mobile {
|
||||
display: none;
|
||||
padding-top: .8rem;
|
||||
|
||||
details {
|
||||
summary {
|
||||
.post-toc-title {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
padding: 0 .625rem;
|
||||
background: $code-background-color;
|
||||
|
||||
i.details {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
background: $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
i.details {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
border: 2px solid $code-background-color;
|
||||
|
||||
>nav>ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: .625rem;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
border: 2px solid $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,8 +29,8 @@ $global-link-hover-color-dark: #fff !default;
|
||||
$global-border-color: #dcdcdc !default;
|
||||
$global-border-color-dark: #4a4b50 !default;
|
||||
|
||||
$navbar-active-color: #161209 !default;
|
||||
$navbar-active-color-dark: #fff !default;
|
||||
$navbar-hover-color: #161209 !default;
|
||||
$navbar-hover-color-dark: #fff !default;
|
||||
|
||||
$post-link-color: #2d96bd !default;
|
||||
$post-link-color-dark: #eee !default;
|
||||
@@ -39,8 +39,8 @@ $post-link-hover-color-dark: #2d96bd !default;
|
||||
|
||||
$pagination-link-color: #2d96bd !default;
|
||||
$pagination-link-color-dark: #a9a9b3 !default;
|
||||
$pagination-link-active-color: #000 !default;
|
||||
$pagination-link-active-color-dark: #fff !default;
|
||||
$pagination-link-hover-color: #000 !default;
|
||||
$pagination-link-hover-color-dark: #fff !default;
|
||||
|
||||
// Color of the table background.
|
||||
$table-background-color: #fff !default;
|
||||
|
||||
Reference in New Issue
Block a user