feat(style): add header title style config (#170)

pogor-dev · Mar 16, 2020 · ee1c5c2 · ee1c5c2
1 parent 6e091b6
commit ee1c5c2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -8,7 +8,7 @@ header {
   }
 
   .header-title {
-    font-size: 1.5rem;
+    font-family: $header-title-font-family;
     font-weight: bold;
     overflow: hidden;
     white-space: nowrap;
@@ -55,6 +55,7 @@ header {
     justify-content: space-between;
 
     .header-title {
+      font-size: $header-title-font-size-desktop;
       max-width: 30%;
     }
 
@@ -105,6 +106,7 @@ header {
 
       .header-title {
         max-width: 80%;
+        font-size: $header-title-font-size-mobile;
       }
 
       .menu-toggle {

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -57,6 +57,12 @@ $header-height-mobile: 3.5rem !default;
 $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-desktop: 1.5rem !default;
+$header-title-font-size-mobile: 1.5rem !default;
+
 // Position of the header
 $header-position-desktop: if($header-normal-mode-desktop, static, fixed) !default;
 $header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -9,6 +9,10 @@ theme = "LoveIt"
 # 主题目录
 themesDir = "../.."
 
+# website title
+# 网站标题
+title = "LoveIt"
+
 # whether to use robots.txt
 # 是否使用 robots.txt
 enableRobotsTXT = true
@@ -24,8 +28,6 @@ enableEmoji = true
     weight = 1
     # language code
     languageCode = "en"
-    # website title
-    title = "LoveIt"
     # language name
     languageName = "English"
     # whether to include Chinese/Japanese/Korean
@@ -248,8 +250,6 @@ enableEmoji = true
     weight = 2
     # 网站语言, 仅在这里 CN 大写
     languageCode = "zh-CN"
-    # 网站标题
-    title = "LoveIt"
     # 语言名称
     languageName = "简体中文"
     # 是否包括中日韩文字
@@ -470,8 +470,6 @@ enableEmoji = true
     weight = 3
     # language code
     languageCode = "fr"
-    # website title
-    title = "LoveIt"
     # language name
     languageName = "Français"
     # whether to include Chinese/Japanese/Korean

diff --git a/exampleSite/config/css/_override.scss b/exampleSite/config/css/_override.scss
@@ -2,3 +2,7 @@
 // Override Variables
 // 覆盖变量
 // ==============================
+
+@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');
+
+$header-title-font-family: 'Baloo 2', $global-font-family;
diff --git a/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content b/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content