Use primer variables to apply fonts and containers

11 files changed, 60 insertions, 55 deletions

diff --git a/assets/sass/_font.scss b/assets/sass/_font.scss
deleted file mode 100644
index 65c9299..0000000
--- a/assets/sass/_font.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// general font setting
-body {
-    font-family: $font-normal;
-    font-display: swap;
-    font-size: 16px;
-}
\ No newline at end of file
diff --git a/assets/sass/_markdown.scss b/assets/sass/_markdown.scss
index 5ca2b70..26630e3 100644
--- a/assets/sass/_markdown.scss
+++ b/assets/sass/_markdown.scss
@@ -1,7 +1,5 @@
 // primer CSS markdown color remap
 @mixin markdown-remap {
-    font-family: inherit !important;
-
     h1, h2, h3, h4, h5, h6 {
         color: $color-primary;
     }
diff --git a/assets/sass/_primer.scss b/assets/sass/_primer.scss
new file mode 100644
index 0000000..fed5c27
--- /dev/null
+++ b/assets/sass/_primer.scss
@@ -0,0 +1,50 @@
+@font-face {
+    font-family: 'Product Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Product Sans'), local('ProductSans-Regular'),
+        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Product Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Product Sans Bold'), local('ProductSans-Bold'),
+        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Cascadia Code';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Cascadia Code'), local('Cascadia Mono'),
+        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2') format('woff2'),
+}
+
+@font-face {
+    font-family: 'PingFang SC Web';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('PingFang SC Medium'),
+        /* Modern Browsers */
+        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/pingfang/pingfang-medium.woff2') format('woff2'),
+}
+
+// @primer/css/support/variables/layout.scss
+// Fixed-width container variables
+$container-width: 900px;
+// Large screen / desktop (900 + (16 * 2)) <= container + gutters
+$width-lg: 932px;
+
+// @primer/css/support/variables/typography.scss
+// Font stacks
+$body-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Source Han Sans SC', 'Source Han Sans CN', 'Source Han Sans', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+// Monospace font stack
+$mono-font: 'Cascadia Code', 'SFMono-Regular', Consolas, $body-font;
+// The base body size
+$body-font-size: 16px;
\ No newline at end of file
diff --git a/assets/sass/_var.scss b/assets/sass/_var.scss
index 3a98ac6..52baa50 100644
--- a/assets/sass/_var.scss
+++ b/assets/sass/_var.scss
@@ -8,44 +8,6 @@ $color-spliter: #E5E2E4 !default; // https://irocore.com/komachinezu/
 // spliter css
 $spliter: 1px solid $color-spliter;
 
-// custom web fonts
-@font-face {
-    font-family: 'Product Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Product Sans'), local('ProductSans-Regular'),
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Product Sans';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Product Sans Bold'), local('ProductSans-Bold'),
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Cascadia Code';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Cascadia Code'), local('Cascadia Mono'),
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2') format('woff2'),
-}
-
-// adjust weight to use with Product Sans
-@font-face {
-    font-family: 'PingFang SC Web';
-    font-style: normal;
-    font-weight: 400;
-    src: local('PingFang SC Medium'),
-        /* Modern Browsers */
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/pingfang/pingfang-medium.woff2') format('woff2'),
-}
-
-$font-pdsans: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace;
-$font-normal: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Source Han Sans SC', 'Source Han Sans CN', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
-
 // font size list
 $font-size-logo: 2.5em; // Logo Only
 $font-size-l1: 1.75em; // Primer CSS H1
@@ -78,7 +40,7 @@ $font-size-l4: 1em; // Primer CSS H4 & Normal Text
 
 // title css which also used in 404
 @mixin pdsans-title {
-    font-family: $font-pdsans;
+    font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace;
     font-weight: 700;
     font-display: swap;
     font-size: $font-size-logo;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index a72b1fc..13c1fdf 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,3 +1,6 @@
+// Cover
+@import "_primer.scss";
+
 // Only used part of @primer/css/core
 // Include .octicon base styles
 @import "@primer/octicons/index.scss";
@@ -14,8 +17,6 @@
 
 @import "_var";
 
-@import "_font";
-
 @import "_header";
 
 @import "_list";
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 0275644..a4ab2b7 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main>
-    <div class="container-md clearfix">
+    <div class="container-lg clearfix">
         <!-- list -->
         <div class="col-md-9 col-12 float-left" id="content">
             <span id="not-found">404 NOT FOUND</span>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9da2c59..36695be 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main>
-    <div class="container-md clearfix">
+    <div class="container-lg clearfix">
         <!-- list -->
         <div class="col-md-9 col-12 float-left" id="content">
             <article>
diff --git a/layouts/index.html b/layouts/index.html
index 3561075..d20006b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main>
-    <div class="container-md clearfix">
+    <div class="container-lg clearfix">
         <!-- list -->
         <div class="col-md-9 col-12 float-left" id="content">
             <!-- homepage range in posts -->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a5317e1..31dd791 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
 <footer>
-    <div class="container-md text-center">
+    <div class="container-lg text-center">
         <p>
             &copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> |
             Powered by <a href="https://gohugo.io/" target="_blank">Hugo {{ hugo.Version }}</a>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7f3a254..ca01fa6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <header>
     <!-- fake navbar header-->
-    <div class="container-md clearfix">
+    <div class="container-lg clearfix">
         <div class="col-12 p-3">
             <a id="main-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
             <span id="sub-title">{{ .Site.Params.subTitle }}</span>
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 076cfc9..9fa241d 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main>
-    <div class="container-md clearfix">
+    <div class="container-lg clearfix">
         <!-- list -->
         <div class="col-md-9 col-12 float-left" id="content">
             <!-- tags page range in posts -->