mirror of
https://github.com/dillonzq/LoveIt.git
synced 2025-03-24 23:57:31 +01:00
fix: font family style
This commit is contained in:
parent
de88a28db7
commit
b79ebc8141
10 changed files with 59 additions and 37 deletions
|
@ -9,7 +9,7 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
|
||||
main [id] {
|
||||
scroll-margin-top: $header-height + .5rem;
|
||||
scroll-margin-top: calc(var(--header-height) + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@ header {
|
|||
}
|
||||
|
||||
.header-title {
|
||||
font-family: $header-title-font-family;
|
||||
font-family: var(--header-title-font-family);
|
||||
font-weight: bold;
|
||||
margin-right: .5rem;
|
||||
min-width: 10%;
|
||||
|
@ -148,8 +148,8 @@ header {
|
|||
#header-desktop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
height: var(--header-height);
|
||||
line-height: var(--header-height);
|
||||
|
||||
[data-header-desktop=normal] & {
|
||||
position: static;
|
||||
|
@ -159,7 +159,7 @@ header {
|
|||
padding: 0 2rem 0 10vh;
|
||||
|
||||
.header-title {
|
||||
font-size: $header-title-font-size;
|
||||
font-size: var(--header-title-font-size);
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
@ -213,8 +213,8 @@ header {
|
|||
#header-mobile {
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
height: var(--header-height);
|
||||
line-height: var(--header-height);
|
||||
|
||||
[data-header-mobile=normal] & {
|
||||
position: static;
|
||||
|
@ -230,7 +230,7 @@ header {
|
|||
@include transition(margin-top 0.3s ease);
|
||||
|
||||
.header-title {
|
||||
font-size: $header-title-font-size;
|
||||
font-size: var(--header-title-font-size);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
|
@ -289,7 +289,7 @@ header {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: ($header-height - 2.5rem) / 2 1rem;
|
||||
padding: calc((var(--header-height) - 2.5rem) / 2) 1rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
|
@ -328,7 +328,7 @@ header {
|
|||
|
||||
&.open {
|
||||
.header-wrapper {
|
||||
margin-top: -$header-height;
|
||||
margin-top: -var(--header-height);
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
@ -349,7 +349,7 @@ header {
|
|||
.search-dropdown {
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
top: $header-height;
|
||||
top: var(--header-height);
|
||||
@include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
|
||||
|
||||
&.desktop {
|
||||
|
@ -372,7 +372,7 @@ header {
|
|||
|
||||
.suggestions {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - #{$header-height});
|
||||
max-height: calc(100vh - var(--header-height));
|
||||
|
||||
.suggestion {
|
||||
padding: .75rem 1rem;
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
width: 100%;
|
||||
|
||||
[data-header-mobile] & {
|
||||
padding-top: $header-height;
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
||||
[data-header-mobile=normal] & {
|
||||
|
|
|
@ -1,6 +1,30 @@
|
|||
: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-weight: #{$global-font-weight};
|
||||
--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 ========== //
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
margin: 0 auto;
|
||||
|
||||
[data-header-desktop] & {
|
||||
padding-top: $header-height;
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
||||
[data-header-desktop=normal] & {
|
||||
|
|
|
@ -290,7 +290,7 @@
|
|||
@include border-radius(3px);
|
||||
@include box-shadow(inset 0 -1px 0 $global-border-color);
|
||||
font-size: .8rem;
|
||||
font-family: $code-font-family;
|
||||
font-family: var(--code-font-family);
|
||||
color: $code-color;
|
||||
|
||||
[theme=dark] & {
|
||||
|
@ -316,7 +316,7 @@
|
|||
.highlight {
|
||||
padding: .375rem;
|
||||
font-size: .875rem;
|
||||
font-family: $code-font-family;
|
||||
font-family: var(--code-font-family);
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
@ -4,8 +4,8 @@ code {
|
|||
padding: 0 .4rem;
|
||||
@include overflow-wrap(break-word);
|
||||
@include line-break(anywhere);
|
||||
font-size: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
font-size: var(--code-font-size);
|
||||
font-family: var(--code-font-family);
|
||||
color: $code-color;
|
||||
|
||||
[theme=dark] & {
|
||||
|
@ -38,8 +38,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
}
|
||||
|
||||
.highlight {
|
||||
font-family: $code-font-family;
|
||||
font-size: $code-font-size;
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
line-height: 1.4em;
|
||||
margin: .5rem 0;
|
||||
|
||||
|
@ -210,8 +210,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
}
|
||||
|
||||
.gist {
|
||||
font-family: $code-font-family;
|
||||
font-size: $code-font-size;
|
||||
font-family: var(--code-font-family);
|
||||
font-size: var(--code-font-size);
|
||||
|
||||
.table-wrapper {
|
||||
> table,
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
.toc {
|
||||
.toc-title {
|
||||
font-size: $toc-title-font-size;
|
||||
font-size: var(--toc-title-font-size);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
font-size: $toc-content-font-size;
|
||||
font-size: var(--toc-content-font-size);
|
||||
|
||||
ul {
|
||||
text-indent: -0.85rem;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// ========== Global ========== //
|
||||
// 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-weight: 400;
|
||||
$global-line-height: 1.5rem;
|
||||
|
@ -52,14 +52,14 @@ $selection-color-dark: rgba(50, 112, 194, 0.4) !default;
|
|||
// Height of the header
|
||||
$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
|
||||
$header-background-color: #f8f8f8 !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
|
||||
$header-hover-color: #161209 !default;
|
||||
$header-hover-color-dark: #fff !default;
|
||||
|
@ -106,6 +106,10 @@ $pagination-link-hover-color-dark: #fff !default;
|
|||
// ========== Pagination ========== //
|
||||
|
||||
// ========== 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
|
||||
$code-color: #E74C3C !default;
|
||||
$code-color-dark: #E5BF78 !default;
|
||||
|
@ -117,12 +121,6 @@ $code-background-color-dark: #272C34 !default;
|
|||
$code-info-color: #9c9c9c !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: (
|
||||
// Custom code type
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue