Modifying jekyll-theme-chirpy.scss caused the overall page layout to change.

[zcyisiee]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Custom CSS Issue with Chirpy Theme

Problem Description

I'm trying to customize CSS in the chirpy-starter branch and encountering layout issues.

Steps I've taken:

1. Using the chirpy-starter branch to customize CSS.
2. Made the following modifications to the chirpy-starter branch files:
   • Changed the language to zh
   • Modified the URL to my personal URL: "https://zcyisiee.github.io"
   • Added my MD files to the posts folder and placed corresponding files in the assets folder
   • Copied the official /assets/css/jekyll-theme-chirpy.scss file to the corresponding location in my project and added my custom CSS code:

---
---
@use 'main
{%- if jekyll.environment == ' production ' -%}
  .bundle
{%- endif -%}
';
/* append your custom style below */
/* Custom introduction style */
.prompt-introduction {
  position: relative;
  background-color: #e6f7ff; /* Light blue background */
  border-left: 4px solid #1890ff; /* Blue left border */
  padding: 15px 15px 15px 40px; /* Left padding for icon */
  margin-bottom: 20px;
  border-radius: 4px;
}
/* Add introduction icon */
.prompt-introduction:before {
  content: '\f075'; /* Using Font Awesome comment icon, you can replace with other icon codes */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 15px;
  left: 15px;
  color: #1890ff;
}

3. After updating these changes, GitHub Actions shows everything is normal. However, when I open my github.io page, I notice the layout has changed significantly: the table of contents sidebar on the right has disappeared! And many icons are also noticeably disordered!

Operations you have already tried

I've gone to great lengths trying to fix this issue. I eventually deleted my original github.io repository and created a new one, making only minimal changes as described above. However, after adding custom CSS, the page styling still undergoes uncontrollable changes, which is extremely frustrating.
I would greatly appreciate if someone could help me with this issue. 🥹

Anything else?

No response

[zcyisiee]

In fact, even if the language is changed to 'en', the same issue still occurs 🥹

[zcyisiee]

Friends!!! I found a solution! Just change the environment variable in pages-deploy.yml under the .github folder to JEKYLL_ENV: "development" and it works!!!

[tis-starlight]

Remove the extra spaces around production in the jekyll-theme-chirpy.scss file. Do not use Prettier to format the document, and avoid pressing CTRL+S.

- {%- if jekyll.environment == ' production ' -%}
+ {%- if jekyll.environment == 'production' -%}