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

fix: font family style

Browse Source
This commit is contained in:
Dillon
2022-05-15 23:41:35 +08:00
parent de88a28db7
commit b79ebc8141
10 changed files with 59 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
main [id] { main [id] {
scroll-margin-top: $header-height + .5rem; scroll-margin-top: calc(var(--header-height) + .5rem);
} }
} }

22
assets/css/_core/_header.scss
View File

@@ -36,7 +36,7 @@ header {
} }
.header-title { .header-title {
font-family: $header-title-font-family; font-family: var(--header-title-font-family);
font-weight: bold; font-weight: bold;
margin-right: .5rem; margin-right: .5rem;
min-width: 10%; min-width: 10%;
@@ -148,8 +148,8 @@ header {
#header-desktop { #header-desktop {
display: block; display: block;
position: fixed; position: fixed;
height: $header-height; height: var(--header-height);
line-height: $header-height; line-height: var(--header-height);
[data-header-desktop=normal] & { [data-header-desktop=normal] & {
position: static; position: static;
@@ -159,7 +159,7 @@ header {
padding: 0 2rem 0 10vh; padding: 0 2rem 0 10vh;
.header-title { .header-title {
font-size: $header-title-font-size; font-size: var(--header-title-font-size);
} }
.menu { .menu {
@@ -213,8 +213,8 @@ header {
#header-mobile { #header-mobile {
display: none; display: none;
position: fixed; position: fixed;
height: $header-height; height: var(--header-height);
line-height: $header-height; line-height: var(--header-height);
[data-header-mobile=normal] & { [data-header-mobile=normal] & {
position: static; position: static;
@@ -230,7 +230,7 @@ header {
@include transition(margin-top 0.3s ease); @include transition(margin-top 0.3s ease);
.header-title { .header-title {
font-size: $header-title-font-size; font-size: var(--header-title-font-size);
max-width: 80%; max-width: 80%;
} }
@@ -289,7 +289,7 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: ($header-height - 2.5rem) / 2 1rem; padding: calc((var(--header-height) - 2.5rem) / 2) 1rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
@@ -328,7 +328,7 @@ header {
&.open { &.open {
.header-wrapper { .header-wrapper {
margin-top: -$header-height; margin-top: -var(--header-height);
} }
.menu { .menu {
@@ -349,7 +349,7 @@ header {
.search-dropdown { .search-dropdown {
position: fixed; position: fixed;
z-index: 200; z-index: 200;
top: $header-height; top: var(--header-height);
@include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1)); @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
&.desktop { &.desktop {
@@ -372,7 +372,7 @@ header {
.suggestions { .suggestions {
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - #{$header-height}); max-height: calc(100vh - var(--header-height));
.suggestion { .suggestion {
padding: .75rem 1rem; padding: .75rem 1rem;

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

@@ -53,7 +53,7 @@
width: 100%; width: 100%;
[data-header-mobile] & { [data-header-mobile] & {
padding-top: $header-height; padding-top: var(--header-height);
} }
[data-header-mobile=normal] & { [data-header-mobile=normal] & {

26
assets/css/_core/_variables.scss
View File

@@ -1,6 +1,30 @@
:root { :root {
--global-font-family: #{$global-font-family}; // ========== Global ========== //
// Font and Line Height
--global-font-family: #{inspect($global-font-family)};
--global-font-size: #{$global-font-size}; --global-font-size: #{$global-font-size};
--global-font-weight: #{$global-font-weight}; --global-font-weight: #{$global-font-weight};
--global-line-height: #{$global-line-height}; --global-line-height: #{$global-line-height};
// ========== Global ========== //
// ========== Header ========== //
// Height of the header
--header-height: #{$header-height};
// Font family and size of the header title
--header-title-font-family: #{inspect($header-title-font-family)};
--header-title-font-size: #{$header-title-font-size};
// ========== Header ========== //
// ========== Single Content ========== //
// Font size of the TOC
--toc-title-font-size: #{$toc-title-font-size};
--toc-content-font-size: #{$toc-content-font-size};
// ========== Single Content ========== //
// ========== Code ========== //
// Font family and size of the code
--code-font-family: #{inspect($code-font-family)};
--code-font-size: #{$code-font-size};
// ========== Code ========== //
} }

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

@@ -5,7 +5,7 @@
margin: 0 auto; margin: 0 auto;
[data-header-desktop] & { [data-header-desktop] & {
padding-top: $header-height; padding-top: var(--header-height);
} }
[data-header-desktop=normal] & { [data-header-desktop=normal] & {

4
assets/css/_page/_single.scss
View File

@@ -290,7 +290,7 @@
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(inset 0 -1px 0 $global-border-color); @include box-shadow(inset 0 -1px 0 $global-border-color);
font-size: .8rem; font-size: .8rem;
font-family: $code-font-family; font-family: var(--code-font-family);
color: $code-color; color: $code-color;
[theme=dark] & { [theme=dark] & {
@@ -316,7 +316,7 @@
.highlight { .highlight {
padding: .375rem; padding: .375rem;
font-size: .875rem; font-size: .875rem;
font-family: $code-font-family; font-family: var(--code-font-family);
font-weight: bold; font-weight: bold;
word-break: break-all; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;

12
assets/css/_partial/_single/_code.scss
View File

@@ -4,8 +4,8 @@ code {
padding: 0 .4rem; padding: 0 .4rem;
@include overflow-wrap(break-word); @include overflow-wrap(break-word);
@include line-break(anywhere); @include line-break(anywhere);
font-size: $code-font-size; font-size: var(--code-font-size);
font-family: $code-font-family; font-family: var(--code-font-family);
color: $code-color; color: $code-color;
[theme=dark] & { [theme=dark] & {
@@ -38,8 +38,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
} }
.highlight { .highlight {
font-family: $code-font-family; font-family: var(--code-font-family);
font-size: $code-font-size; font-size: var(--code-font-size);
line-height: 1.4em; line-height: 1.4em;
margin: .5rem 0; margin: .5rem 0;
@@ -210,8 +210,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
} }
.gist { .gist {
font-family: $code-font-family; font-family: var(--code-font-family);
font-size: $code-font-size; font-size: var(--code-font-size);
.table-wrapper { .table-wrapper {
> table, > table,

4
assets/css/_partial/_single/_toc.scss
View File

@@ -1,12 +1,12 @@
.toc { .toc {
.toc-title { .toc-title {
font-size: $toc-title-font-size; font-size: var(--toc-title-font-size);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
.toc-content { .toc-content {
font-size: $toc-content-font-size; font-size: var(--toc-content-font-size);
ul { ul {
text-indent: -0.85rem; text-indent: -0.85rem;

20
assets/css/_variables.scss
View File

@@ -4,7 +4,7 @@
// ========== Global ========== // // ========== Global ========== //
// Font and Line Height // Font and Line Height
$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default; $global-font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$global-font-size: 16px; $global-font-size: 16px;
$global-font-weight: 400; $global-font-weight: 400;
$global-line-height: 1.5rem; $global-line-height: 1.5rem;
@@ -52,14 +52,14 @@ $selection-color-dark: rgba(50, 112, 194, 0.4) !default;
// Height of the header // Height of the header
$header-height: 3.5rem !default; $header-height: 3.5rem !default;
// Font family and size of the header title
$header-title-font-family: $global-font-family !default;
$header-title-font-size: 1.5rem !default;
// Color of the header background // Color of the header background
$header-background-color: #f8f8f8 !default; $header-background-color: #f8f8f8 !default;
$header-background-color-dark: #252627 !default; $header-background-color-dark: #252627 !default;
// Font style of the header title
$header-title-font-family: $global-font-family !default;
$header-title-font-size: 1.5rem !default;
// Color of the hover header item // Color of the hover header item
$header-hover-color: #161209 !default; $header-hover-color: #161209 !default;
$header-hover-color-dark: #fff !default; $header-hover-color-dark: #fff !default;
@@ -106,6 +106,10 @@ $pagination-link-hover-color-dark: #fff !default;
// ========== Pagination ========== // // ========== Pagination ========== //
// ========== Code ========== // // ========== Code ========== //
// Font family and size of the code
$code-font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace, $global-font-family !default;
$code-font-size: .875rem !default;
// Color of the code // Color of the code
$code-color: #E74C3C !default; $code-color: #E74C3C !default;
$code-color-dark: #E5BF78 !default; $code-color-dark: #E5BF78 !default;
@@ -117,12 +121,6 @@ $code-background-color-dark: #272C34 !default;
$code-info-color: #9c9c9c !default; $code-info-color: #9c9c9c !default;
$code-info-color-dark: #b1b0b0 !default; $code-info-color-dark: #b1b0b0 !default;
// Font size of the code
$code-font-size: .875rem !default;
// Font family of the code
$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
// Code type map // Code type map
$code-type-map: ( $code-type-map: (
// Custom code type // Custom code type

2
resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content
View File

File diff suppressed because one or more lines are too long