Set font (#6)

* Add external CSS and JS plugins for enhanced functionality

* Update banner details with new writer, title, content, and price

* Refactor SCSS variables for improved readability and update primary font

* Update homepage YAML and HTML for improved content presentation and localization

* Update purchase button text to Japanese for localization

Author: shunk031

config.toml

@@ -18,6 +18,8 @@ URL = "plugins/slick/slick.css"
 URL = "plugins/themify-icons/themify-icons.css"
 [[params.plugins.css]]
 URL = "plugins/magnific-popup/magnific-popup.css"
+[[params.plugins.css]]
+URL = "https://cdn.jsdelivr.net/npm/[email protected]/line-seed-jp.min.css"
 
 # JS Plugins
 [[params.plugins.js]]
@@ -28,7 +30,8 @@ URL = "plugins/bootstrap/bootstrap.min.js"
 URL = "plugins/slick/slick.min.js"
 [[params.plugins.js]]
 URL = "plugins/magnific-popup/magnific-popup.min.js"
-
+[[params.plugins.js]]
+URL = "https://unpkg.com/budoux/bundle/budoux-ja.min.js"
 
 ############################## navigation ###############################
 [menu]

data/homepage.yml

@@ -1,12 +1,12 @@
 ########################## Banner #############################
 banner:
   enable : true
-  writer : "George Stewart"
-  title : "The Man in the <br>Glass House"
+  writer : "北田俊輔（著）"
+  title : "Pythonで学ぶ画像生成"
   image : "images/about/book.png"
-  content : "We work with our partners to streamline project plans that don’t just deliver on
-            product perfection, but also delivers on time."
-  price : "14.99"
+  content : "近年の技術の発展により、画像生成技術はますます身近になっています。本書は、画像生成について実践的に学べるように、Pythonを使った実装を示しています。"
+  price : "3,850円"
+  breakdown: "本体3,500円+税10%"
 
 ######################## Book Preview ##########################
 preview:

themes/influencer-hugo/assets/scss/_variables.scss

@@ -1,10 +1,10 @@
 $light: #fff;
-$primary-color:#cc302b;
+$primary-color: #cc302b;
 $secondary-color: #385777;
 $black: #222;
 $black-light: #3f4451;
 $black-lighter: #888;
-$border-color:#eee;
-$primary-font: 'Lora', serif;
-$secondary-font:'Open Sans', sans-serif;
+$border-color: #eee;
+$primary-font: 'LINE Seed JP', serif;
+$secondary-font: 'Open Sans', sans-serif;
 $gray : #f7fdfc;

themes/influencer-hugo/layouts/index.html

@@ -9,16 +9,21 @@
       <div class="col-lg-7 col-md-8">
         <div class="main-banner">
           <span class="text-color font-weight-bold">{{ .writer | markdownify }}</span>
-          <h1 class="mb-3 mt-2">{{ .title | markdownify }}</h1>
+          <h1 class="mb-3 mt-2"><budoux-ja>{{ .title | markdownify }}</budoux-ja></h1>
 
           <div class="mb-4">
-            <h4>Price :- <span class="text-color">${{ .price }}</span></h4>
+            <h4>
+              <span class="text-color">{{ .price }}</span>
+              <span class="mb-4">({{ .breakdown }})</span>
+            </h4>
           </div>
-          <p class="mb-4">{{ .content | markdownify }}</p>
+          <p>
+            <budoux-ja class="mb-4">{{ .content | markdownify }}</budoux-ja>
+          </p>
           <button class="snipcart-add-item btn btn-main mt-2" data-item-id="1"
             data-item-name="{{ .title | markdownify }}" data-item-image="{{ .image | absURL }}"
             data-item-price="{{ .price }}" data-item-url="/">
-            Purchase now <i class="ti-angle-right ml-3"></i>
+            購入はこちら<i class="ti-angle-right ml-3"></i>
           </button>
         </div>
       </div>

themes/influencer-hugo/layouts/partials/header.html

@@ -37,12 +37,14 @@ <h2 class="mb-0 text-color">{{ .Site.Title }}</h2>
 
         {{ if .Site.Params.navButton.enable }}
         {{ "<!-- nav btn -->" | safeHTML }}
-          <button class="snipcart-add-item btn btn-border-tp btn-small ml-0 ml-lg-3 mb-3 mb-lg-0" data-item-id="1"
-          data-item-name="{{ .Site.Data.homepage.banner.title | markdownify }}" data-item-image="{{ .Site.Data.homepage.banner.image | absURL }}" data-item-price="{{ .Site.Data.homepage.banner.price }}" data-item-url="/">
-          Purchase now
+        <button class="snipcart-add-item btn btn-border-tp btn-small ml-0 ml-lg-3 mb-3 mb-lg-0" data-item-id="1"
+          data-item-name="{{ .Site.Data.homepage.banner.title | markdownify }}"
+          data-item-image="{{ .Site.Data.homepage.banner.image | absURL }}"
+          data-item-price="{{ .Site.Data.homepage.banner.price }}" data-item-url="/">
+          購入はこちら
         </button>
         {{ end }}
       </div>
     </div>
   </nav>
-</div>
+</div>