From 9e814e14a087246dc577fa3b45c3d876940ba358 Mon Sep 17 00:00:00 2001
From: zgq354 <zgq354@gmail.com>
Date: Sun, 24 Dec 2023 16:23:24 +0800
Subject: [PATCH] feat: update custom style

---
 README.md                  | 13 +++--
 resources/less/custom.less | 97 +++++++++++++++++++++++---------------
 2 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index fe8ae89..7195a14 100644
--- a/README.md
+++ b/README.md
@@ -12,17 +12,16 @@ The customizations of **Flarum 0x** consists of these parts:
 1. Initialized [Flarum Skeleton](https://github.com/flarum/flarum) with our custom `composer.json` / `composer.lock` config (contains the extensions we are using).
 2. Patches for the extensions in `vendor/` to make some small changes without publishing new Composer Packages (see [patches/README.md](patches/README.md)).
 3. Custom [flarum extenders](https://docs.flarum.org/extend/start#extenders) in `extend.php`.
-4. *(Will be added if needed)* Custom third party extension integrated into this repo as submodules.
+4. Custom third party extension integrated into this repo as submodules.
 
 The features we have customised include:
 1. Support global assets CDN config.
 2. Save avatars to S3-compatible Storage instead of local disk (thanks to [askvortsov1/flarum-azure-poc](https://github.com/askvortsov1/flarum-azure-poc)).
 3. Add support for [blomstra/flarum-redis](https://github.com/blomstra/flarum-redis) extension (for Queue / Cache / Session), enable the Queue Worker to consume the [Background Tasks](https://docs.flarum.org/internal/package-manager#background-tasks) asynchronously.
 4. Add support for custom head HTML like add some `<script>` / `<link>` / `<meta>` tags in `config.php`.
-5. Customised Chinese Pinyin slug generation logic.
-6. Replace some hard-coded JsDelivr resource URLs with ByteDance's cdn (for mainland China users).
-7. All the extensions required at `composer.json`
-8. ...
+5. Replace some hard-coded JsDelivr resource URLs with ByteDance's cdn (for mainland China users).
+6. All the extensions required at `composer.json`
+7. ...
 
 ## Local Development Env Setup
 We are using [Development Containers](https://containers.dev/) with our LNMP config to save the time required to configure the environment.
@@ -41,7 +40,7 @@ Basically running a **Flarum 0x** website requires two Docker container instance
 1. **Flarum 0x**, latest pre-built image: `ghcr.io/0xffff-one/flarum-0x:latest`.
 2. **A MySQL-compatible DBMS**, MySQL, MariaDB or other, use MySQL with [ngram](https://dev.mysql.com/doc/refman/5.7/en/fulltext-search-ngram.html) support for CJK full-text search.
 
-We are currently using [fly.io](https://fly.io/) to host our website, you can also deploy them via [Docker Compose](./docker-compose.yml).
+You can deploy them via [Docker Compose](./docker-compose.yml).
 
 ## Contribution
 Any contributions are welcome. Please feel free to:
@@ -58,7 +57,7 @@ Thank you for willing to contribute to this project!
  - [x] new Dev Envionment setup config
  - [x] build process for Front-end Patching
  - [x] Update latest README.md about Dev Env setup and Production deployment
- - [ ] Optimize the production Docker image config
+ - [x] Optimize the production Docker image config
 
 ## Contributors
 This project exists thanks to all the people who contribute.
diff --git a/resources/less/custom.less b/resources/less/custom.less
index 777c666..75820e6 100644
--- a/resources/less/custom.less
+++ b/resources/less/custom.less
@@ -1,58 +1,56 @@
-
 .Hero-close {
   display: none;
 }
 
 .katex .katex-mathml {
-    position: absolute;
-    clip: rect(1px,1px,1px,1px);
-    padding: 0;
-    border: 0;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
 }
 
-
 .Post-body h1 {
-    font-size: 175%;
+  font-size: 175%;
 }
 
 .Post-body h2 {
-    font-size: 150%;
+  font-size: 150%;
 }
 
 .Post-body h3 {
-    font-size: 125%;
+  font-size: 125%;
 }
 
 // for image size optimize
-.Post-body img[width][height]:not([width=""]):not([height=""]) {
-    height: auto;
+.Post-body img[width][height]:not([width='']):not([height='']) {
+  height: auto;
 }
 
 .Post-body img {
-    object-fit: contain;
+  object-fit: contain;
 }
 
 @media (max-width: 767px) {
-    .App {
-        padding-bottom: 0px;
-    }
+  .App {
+    padding-bottom: 0px;
+  }
 
-    .App-content {
-        padding-bottom: 30px;
-    }
+  .App-content {
+    padding-bottom: 30px;
+  }
 
-    .PostStream-item {
-        overflow: hidden;
-    }
+  .PostStream-item {
+    overflow: hidden;
+  }
 }
 
 .DiscussionListItem-info .item-excerpt {
-    max-height: 3em;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  max-height: 3em;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 /* fix iPhone X problem */
@@ -64,29 +62,28 @@
 #header,
 #content,
 .Post .PostUser-avatar {
-    -webkit-user-select: none;
-    user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .DiscussionHero-items,
 .CommentPost .Post-header,
 .CommentPost .Post-body {
-    -webkit-user-select: text;
-    user-select: text;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 .Pages-container {
-    white-space: inherit !important;
-    -webkit-user-select: text;
-    user-select: text;
+  white-space: inherit !important;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 .Post-body h3 {
-    font-size: 125%;
-    margin-top: 1.5em;
+  font-size: 125%;
+  margin-top: 1.5em;
 }
 
-
 .DiffDropdown {
   left: -10px;
   top: 1px;
@@ -99,3 +96,29 @@
 a {
   outline: none;
 }
+
+// Fix to prevent horizontal scrolling bug on iOS
+@media @phone {
+  html {
+    overflow-x: hidden;
+  }
+}
+
+// cf turnstile
+.Blomstra-Turnstile {
+  height: 65px;
+  margin-bottom: 12px;
+}
+
+.Blomstra-Turnstile > iframe {
+  width: 100% !important;
+}
+
+.Badge--social {
+  margin: -3px 3px -3px 0;
+}
+
+.social-settings > .fa-cog.fa-cog {
+  border-left: none;
+  margin-left: 3px;
+}