chore: refactor code style
This commit is contained in:
Dillon
79
assets/css/_partial/_single/_admonition.scss
Normal file
79
assets/css/_partial/_single/_admonition.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
.admonition {
|
||||
position: relative;
|
||||
margin: .9765em 0;
|
||||
padding: 0 .75rem;
|
||||
background-color: map-get($admonition-background-color-map, 'note');
|
||||
border-left: .25rem solid map-get($admonition-color-map, 'note');
|
||||
overflow: auto;
|
||||
|
||||
.admonition-title {
|
||||
margin: 0 -0.75rem;
|
||||
padding: .5rem .75rem .5rem 2.5rem;
|
||||
border-bottom: .1rem solid map-get($admonition-background-color-map, 'note');
|
||||
background-color: map-get($admonition-background-color-map, 'note');
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
font-size: 16px;
|
||||
color: map-get($admonition-color-map, 'note');
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
left: .75rem;
|
||||
top: .75rem;
|
||||
}
|
||||
|
||||
@each $type, $color in $admonition-color-map {
|
||||
&.#{$type} {
|
||||
border-left-color: $color;
|
||||
|
||||
i.icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $color in $admonition-background-color-map {
|
||||
&.#{$type} {
|
||||
background-color: $color;
|
||||
|
||||
.admonition-title {
|
||||
border-bottom-color: $color;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
details.admonition {
|
||||
summary {
|
||||
display: block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.details {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
color: $global-font-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.admonition[open] {
|
||||
i.details {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
109
assets/css/_partial/_single/_code.scss
Normal file
109
assets/css/_partial/_single/_code.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
code {
|
||||
font-size: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
padding: .2rem .4rem;
|
||||
color: $code-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
code, pre, .highlight table, .highlight tr, .highlight td {
|
||||
background: $code-background-color;
|
||||
|
||||
.dark-theme & {
|
||||
background: $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight > .chroma {
|
||||
margin: 1rem 0;
|
||||
line-height: round($code-font-size * 1.4);
|
||||
|
||||
code, pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding: .4rem;
|
||||
font-family: $global-font-family;
|
||||
font-size: $code-font-size;
|
||||
font-weight: bold;
|
||||
color: $code-info-color;
|
||||
background: darken($code-background-color, 3%);
|
||||
content: 'Code';
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-info-color-dark;
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.#{$type}::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
table, tr, td {
|
||||
margin: 0;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .2rem .4rem;
|
||||
}
|
||||
|
||||
.lntd {
|
||||
&:first-child {
|
||||
width: 1.2rem;
|
||||
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
color: $code-info-color;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
display: block;
|
||||
background-color: darken($code-background-color, 5%);
|
||||
|
||||
.dark-theme & {
|
||||
background-color: darken($code-background-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-family: $code-font-family;
|
||||
/* Comment */ .c,
|
||||
/* CommentHashbang */ .ch,
|
||||
/* CommentMultiline */ .cm,
|
||||
/* CommentSingle */ .c1,
|
||||
/* CommentSpecial */ .cs,
|
||||
/* CommentPreproc */ .cp,
|
||||
/* CommentPreprocFile */ .cpf { font-style: italic }
|
||||
/* GenericUnderline */ .gl { text-decoration: underline }
|
||||
|
||||
@each $class, $color in $code-highlight-color-map {
|
||||
.#{$class} { color: $color; }
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
@each $class, $color in $code-highlight-color-map-dark {
|
||||
.#{$class} { color: $color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
3
assets/css/_partial/_single/_comment.scss
Normal file
3
assets/css/_partial/_single/_comment.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.comment {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
94
assets/css/_partial/_single/_footer.scss
Normal file
94
assets/css/_partial/_single/_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: $single-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $single-link-color-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $single-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $single-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/_single/_toc.scss
Normal file
134
assets/css/_partial/_single/_toc.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
.post-toc {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
margin-left: 1000px;
|
||||
padding: 0 .8rem;
|
||||
border-left: 1px solid $global-border-color;
|
||||
overflow-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;
|
||||
margin: .8rem 0;
|
||||
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: $single-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $single-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
font-weight: bold;
|
||||
color: $single-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $single-link-hover-color-dark;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-weight: bolder;
|
||||
color: $single-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $single-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user