saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(exampleSite): add some posts to exampleSite

Browse Source
This commit is contained in:
Dillon
2020-02-01 19:47:58 +08:00
parent 8aa4b6dce6
commit 437ef95e14
25 changed files with 343 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/_core/_base.scss
View File

@@ -1,35 +1,37 @@
html {
font-family: $global-font-family;
}
/* scrollbar, only support webkit */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* scrollbar, only support webkit */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
height: 40px;
background-color: #87878D;
border-radius: 16px;
::-webkit-scrollbar-thumb {
background-color: $scrollbar-color;
&:hover {
background-color: #A9A9B3;
}
&:hover {
background-color: $scrollbar-hover-color;
}
}
::selection {
background: rgba(0, 149, 255, 0.1);
background: $selection-color;
.dark-theme & {
background: $selection-color-dark;
}
}
body {
font-size: 16px;
font-weight: 400;
line-height: 26px;
line-height: 1.5rem;
background-color: $global-background-color;
color: $global-font-color;
&:before {
&::before {
content: "";
background-repeat: no-repeat;
background-position: center;

18
assets/css/_core/_layout.scss
View File

@@ -2,17 +2,17 @@
.wrapper {
display: flex;
flex-direction: column;
min-height: 98vh;
min-height: 97.5vh;
width: 100%;
}
.main {
flex: 1 0 auto;
}
main {
flex: 1 0 auto;
.container {
padding-left: 1rem;
padding-right: 1rem;
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
}
.footer {
@@ -27,4 +27,4 @@
font-size: 2rem;
transform: translateY(35vh);
text-align: center;
}
}

10
assets/css/_core/_media.scss
View File

@@ -1,5 +1,5 @@
@media only screen and (max-width: 1800px) {
.warpper {
.page {
max-width: 780px;
.post-toc {
@@ -10,7 +10,7 @@
}
@media only screen and (max-width: 1440px) {
.warpper {
.page {
max-width: 680px;
.post-toc {
@@ -21,7 +21,7 @@
}
@media only screen and (max-width: 1200px) {
.warpper {
.page {
max-width: 560px;
.post-toc {
@@ -38,7 +38,7 @@
}
}
.warpper {
.page {
max-width: 80%;
.post-toc {
@@ -60,7 +60,7 @@
display: block;
}
.warpper {
.page {
max-width: 100%;
.categories-card {

2
assets/css/_page/_index.scss
View File

@@ -1,6 +1,6 @@
@import "_home";
.warpper {
.page {
position: relative;
width: 100%;
max-width: 980px;

8
assets/css/_page/_post.scss
View File

@@ -138,6 +138,14 @@
.table-wrapper {
overflow-x: auto;
&::-webkit-scrollbar {
background-color: $table-background-color;
.dark-theme & {
background-color: $table-background-color-dark;
}
}
> table {
width: 100%;
max-width: 100%;

84
assets/css/_partial/_post/_code.scss
View File

@@ -1,19 +1,9 @@
code,
pre {
padding: 7px;
font-size: $code-font-size;
font-family: $code-font-family;
background: $code-background-color;
.dark-theme & {
background: $code-background-color-dark;
}
}
code {
padding: 3px 5px;
border-radius: 4px;
color: $code-color;
padding: 5px;
background: $code-background-color;
.dark-theme & {
@@ -22,50 +12,46 @@ code {
}
}
p > code {
background: darken($code-background-color, 3%);
.dark-theme & {
color: $code-color-dark;
background: darken($code-background-color-dark, 3%);
}
.highlight > pre.chroma {
padding: 38px 7px 8px;
overflow-x: auto;
}
// chroma
.highlight > .chroma {
margin: 1em 0;
border-radius: 6px;
overflow-x: auto;
position: relative;
background: $code-background-color;
font-family: $code-font-family;
code {
padding: 0;
}
table {
position: relative;
pre {
margin: 0;
padding: 38px 7px 8px;
overflow-x: visible;
}
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-weight: bold;
color: darken($code-info-color, 10%);
background: darken($code-background-color, 3%);
content: 'Code';
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-weight: bold;
color: $code-info-color;
background: darken($code-background-color, 3%);
content: 'Code';
.dark-theme & {
background: darken($code-background-color-dark, 3%);
}
.dark-theme & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 3%);
}
}
@each $sign, $text in $code-type-list {
&.#{$sign} table::after {
&.#{$sign}::after {
content: $text;
}
}
@@ -77,20 +63,10 @@ p > code {
&:first-child {
width: 10px;
pre {
margin: 0;
padding: 38px 7px 8px;
}
}
&:last-child {
vertical-align: top;
pre {
margin: 0;
padding: 38px 10px 8px;
}
}
}
@@ -106,10 +82,14 @@ p > code {
}
}
/* LineNumbersTable */ .lnt { color: $code-info-color; }
/* LineHighlight */ .hl {
/* LineNumbersTable */
.lnt {
color: $code-info-color;
}
/* LineHighlight */
.hl {
display: block;
width: 100%;
background-color: darken($code-background-color, 5%);
.dark-theme & {

17
assets/css/_variables.scss
View File

@@ -11,7 +11,7 @@ $global-font-family: Lato, -apple-system, BlinkMacSystemFont, PingFang-SC-Regula
$global-background-color: #fff !default;
$global-background-color-dark: #292a2d !default;
$navbar-background-color: #FAFAFA !default;
$navbar-background-color: #fafafa !default;
$navbar-background-color-dark: #252627 !default;
// Text color of the body.
@@ -29,6 +29,12 @@ $global-link-hover-color-dark: #fff !default;
$global-border-color: #dcdcdc !default;
$global-border-color-dark: #4a4b50 !default;
$scrollbar-color: #87878d !default;
$scrollbar-hover-color: #a9a9b3 !default;
$selection-color: rgba(38, 139, 211, 0.2) !default;
$selection-color-dark: rgba(38, 139, 211, 0.3) !default;
$navbar-hover-color: #161209 !default;
$navbar-hover-color-dark: #fff !default;
@@ -47,7 +53,7 @@ $table-background-color: #fff !default;
$table-background-color-dark: #272c34 !default;
// Color of the table thead.
$table-thead-color: #EDEDED !default;
$table-thead-color: #ededed !default;
$table-thead-color-dark: #20252b !default;
// ========== Code ========== //
@@ -59,13 +65,16 @@ $code-color-dark: #E5BF78 !default;
$code-background-color: #f5f5f5 !default;
$code-background-color-dark: #272C34 !default;
$code-info-color: #cacaca !default;
$code-info-color: #b1b0b0 !default;
$code-info-color-dark: #b1b0b0 !default;
// Font size of code.
$code-font-size: 13px !default;
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
// Font family of the code.
$code-font-family: Source Code Pro, Consolas, Liberation Mono, Menlo, Courier, monospace !default;
$code-font-family: Fira Mono, Source Code Pro, Menlo, monospace !default;
// Code type list.
$code-type-list: (

3
assets/css/style.scss
View File

@@ -1,4 +1,5 @@
@import "_variables";
@import "_custom";
@import "_core/normalize";
@import "_core/base";
@@ -11,5 +12,3 @@
@import "_partial/pagination";
@import "_core/media";
@import "_custom";