From ddec81c876735e1ed208a55f74f945fc3786b25f Mon Sep 17 00:00:00 2001
From: Junyi Hou <hji200914@gmail.com>
Date: Tue, 9 Apr 2024 19:56:30 +0800
Subject: [PATCH] advanced style

---
 .../assets/css/custom1.scss                   | 11 ++-
 .../assets/css/custom2.css                    |  2 +-
 .../assets/css/foundation/_code.scss          |  2 +-
 .../content/posts/advanced-style.md           | 42 ------------
 .../content/posts/advanced-style/index.md     | 68 +++++++++++++++++++
 .../content/posts/advanced-style/style.css    |  8 +++
 6 files changed, 82 insertions(+), 51 deletions(-)
 delete mode 100644 exampleSiteMultilingual/content/posts/advanced-style.md
 create mode 100644 exampleSiteMultilingual/content/posts/advanced-style/index.md
 create mode 100644 exampleSiteMultilingual/content/posts/advanced-style/style.css

diff --git a/exampleSiteMultilingual/assets/css/custom1.scss b/exampleSiteMultilingual/assets/css/custom1.scss
index aa327f5..2ead31f 100644
--- a/exampleSiteMultilingual/assets/css/custom1.scss
+++ b/exampleSiteMultilingual/assets/css/custom1.scss
@@ -1,17 +1,14 @@
 @import 'foundation/code';
 
 $font-stack: Helvetica, sans-serif;
-$primary-color: yellow;
-$background-color: pink;
+$primary-color: rgb(255, 255, 168);
+$background-color: rgb(85, 85, 85);
 
 junyi {
+    display: block;
     font: 100% $font-stack;
     color: $primary-color;
     background-color: $background-color;
+    margin-top: 1em;
 }
 
-body .container {
-    max-width: none;
-    padding-left: 5em;
-    padding-right: 5em;
-}
\ No newline at end of file
diff --git a/exampleSiteMultilingual/assets/css/custom2.css b/exampleSiteMultilingual/assets/css/custom2.css
index 63633d5..3dbe013 100644
--- a/exampleSiteMultilingual/assets/css/custom2.css
+++ b/exampleSiteMultilingual/assets/css/custom2.css
@@ -4,4 +4,4 @@
     padding: 1em;
     border-radius: 0.3em;
     border: 1px solid black;
-}
\ No newline at end of file
+}
diff --git a/exampleSiteMultilingual/assets/css/foundation/_code.scss b/exampleSiteMultilingual/assets/css/foundation/_code.scss
index 5a98919..c0fa7fd 100644
--- a/exampleSiteMultilingual/assets/css/foundation/_code.scss
+++ b/exampleSiteMultilingual/assets/css/foundation/_code.scss
@@ -2,4 +2,4 @@ code {
   padding: .25em;
   line-height: 2;
   background-color: rgb(189, 204, 255);
-}
\ No newline at end of file
+}
diff --git a/exampleSiteMultilingual/content/posts/advanced-style.md b/exampleSiteMultilingual/content/posts/advanced-style.md
deleted file mode 100644
index e09b87f..0000000
--- a/exampleSiteMultilingual/content/posts/advanced-style.md
+++ /dev/null
@@ -1,42 +0,0 @@
-+++
-author = "Hugo Authors"
-title = "Advanced Style"
-date = "2024-04-09"
-description = "Guide to advanced usage of Anubis2"
-tags = [
-    "emoji",
-]
-+++
-
-<div class="anubis-custom-style">
-The custom <code>.css</code> <code>.scss</code> <code>.sass</code> file should be placed in <code>assets/</code> folder. (instead of <code>static/</code>)
-</div>
-
-This page is affected by `assets/css/custom1.scss` and `assets/css/custom2.css`
-
-## How to use PoseCSS
-
-First, make sure your Hugo version supports Hugo Pipes. Hugo Pipes is available in Hugo `0.46` and later versions.
-
-Then, add the following content to your Hugo configuration file (such as config.toml) to enable PostCSS:
-
-```toml
-[build]
-  writeStats = true
-
-[params]
-  usePostCSS = true
-```
-
-In addition, you need to create a postcss.config.js file in the root directory of your project, with the following content:
-
-```js
-module.exports = {
-  plugins: [
-    require('postcss-import')(),
-    require('postcss-url')(),
-    require('autoprefixer')(),
-    // Add more PostCSS plugins here if needed
-  ]
-};
-```
diff --git a/exampleSiteMultilingual/content/posts/advanced-style/index.md b/exampleSiteMultilingual/content/posts/advanced-style/index.md
new file mode 100644
index 0000000..250fe0d
--- /dev/null
+++ b/exampleSiteMultilingual/content/posts/advanced-style/index.md
@@ -0,0 +1,68 @@
++++
+author = "Hugo Authors"
+title = "Advanced Style"
+date = "2024-04-09"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+    "emoji",
+]
++++
+
+<div class="anubis-custom-style">
+The custom <code>.css</code> <code>.scss</code> <code>.sass</code> file should be placed in <code>assets/</code> folder. (instead of <code>static/</code>)
+</div>
+
+<junyi>
+This page is affected by <code>assets/css/custom1.scss</code> and <code>assets/css/custom2.css</code> and <code>advanced-style/style.css</code>
+</junyi>
+
+<junyi><code>advanced-style/style.css</code> affects only the current page.</junyi>
+
+```html
+<style>
+  @import 'style.css';
+</style>
+```
+
+<style>
+  @import 'style.css';
+</style>
+
+<junyi><code>assets/css/custom1.scss</code> and <code>assets/css/custom2.scss</code> will have global effect.
+
+```scss
+// assets/css/custom2.css
+.anubis-custom-style {
+    background-color: pink;
+    color: black;
+    padding: 1em;
+    border-radius: 0.3em;
+    border: 1px solid black;
+}
+```
+
+```scss
+// assets/css/foundation/_code.scss
+code {
+  padding: .25em;
+  line-height: 2;
+  background-color: rgb(189, 204, 255);
+}
+```
+
+```scss
+// assets/css/custom1.scss
+@import 'foundation/code';
+
+$font-stack: Helvetica, sans-serif;
+$primary-color: rgb(255, 255, 168);
+$background-color: rgb(85, 85, 85);
+
+junyi {
+    display: block;
+    font: 100% $font-stack;
+    color: $primary-color;
+    background-color: $background-color;
+    margin-top: 1em;
+}
+```
\ No newline at end of file
diff --git a/exampleSiteMultilingual/content/posts/advanced-style/style.css b/exampleSiteMultilingual/content/posts/advanced-style/style.css
new file mode 100644
index 0000000..6937f22
--- /dev/null
+++ b/exampleSiteMultilingual/content/posts/advanced-style/style.css
@@ -0,0 +1,8 @@
+@import 'subfolder/hello.scss';
+
+.container {
+    max-width: none;
+    padding-left: 5em;
+    padding-right: 5em;
+    background-color: white;
+}
\ No newline at end of file