From 2d8a32478c19ec05c536e37b6cedb79e1bea8d6e Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Mon, 30 Dec 2024 18:09:54 +0800
Subject: [PATCH] style: reorganize styles into custom.scss

- Moved universal styles, typography, header, and footer styles
  from application.scss to custom.scss for better organization.
- Introduced SCSS variables for colors to enhance maintainability.
- Updated the hover state for the logo and footer links to use
  the new color variable.

This change improves the structure of the stylesheets, making it
more manageable and easier to maintain in the future.
---
 app/assets/stylesheets/application.scss | 97 +------------------------
 app/assets/stylesheets/custom.scss      | 91 +++++++++++++++++++++++
 2 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 95ddea1..7142317 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -7,101 +7,12 @@
  * depending on specificity.
  *
  * Consider organizing styles into separate files for maintainability.
+ * 把 app/assets/stylesheets 目录中的所有 CSS 文件(包含子目录中的文件)都引入应用的 CSS 文件
+ *= require_tree .
+ * 把当前文件中的 CSS 也加载进来。
+ *= require_self
  */
 
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
-/* universal */
-body {
-  padding-top: 60px;
-}
-section {
-  overflow: auto;
-}
-textarea {
-  resize: vertical;
-}
-.center {
-  text-align: center;
-}
-.center h1 {
-  margin-bottom: 10px;
-}
-
-/* typography */
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1;
-}
-
-h1 {
-  font-size: 3em;
-  letter-spacing: -2px;
-  margin-bottom: 30px;
-  text-align: center;
-}
-
-h2 {
-  font-size: 1.2em;
-  letter-spacing: -1px;
-  margin-bottom: 30px;
-  text-align: center;
-  font-weight: normal;
-  color: #777;
-}
-
-p {
-  font-size: 1.1em;
-  line-height: 1.7em;
-}
-
-/* header */
-#logo {
-  float: left;
-  margin-right: 10px;
-  font-size: 1.7em;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: -1px;
-  padding-top: 9px;
-  font-weight: bold;
-}
-
-#logo:hover {
-  color: #777;
-  text-decoration: none;
-}
-
-img {
-  display: none;
-}
-
-/* footer */
-footer {
-  margin-top: 45px;
-  padding-top: 5px;
-  border-top: 1px solid #eaeaea;
-  color: #777;
-}
-
-footer a {
-  color: #555;
-}
-
-footer a:hover {
-  color: #222;
-}
-
-footer small {
-  float: left;
-}
-
-footer ul {
-  float: right;
-  list-style: none;
-}
-
-footer ul li {
-  float: left;
-  margin-left: 15px;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
index e69de29..ef00b8b 100644
--- a/app/assets/stylesheets/custom.scss
+++ b/app/assets/stylesheets/custom.scss
@@ -0,0 +1,91 @@
+/* color */
+$light-gray: #777;
+
+/* universal */
+body {
+  padding-top: 60px;
+}
+section {
+  overflow: auto;
+}
+textarea {
+  resize: vertical;
+}
+.center {
+  text-align: center;
+  h1 {
+    margin-bottom: 10px;
+  }
+}
+
+/* typography */
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1;
+}
+
+h1 {
+  font-size: 3em;
+  letter-spacing: -2px;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.2em;
+  letter-spacing: -1px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-weight: normal;
+  color: $light-gray;
+}
+
+p {
+  font-size: 1.1em;
+  line-height: 1.7em;
+}
+
+/* header */
+#logo {
+  float: left;
+  margin-right: 10px;
+  font-size: 1.7em;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  padding-top: 9px;
+  font-weight: bold;
+  &:hover {
+    color: $light-gray;
+    text-decoration: none;
+  }
+}
+
+img {
+  display: none;
+}
+
+/* footer */
+footer {
+  margin-top: 45px;
+  padding-top: 5px;
+  border-top: 1px solid #eaeaea;
+  color: $light-gray;
+  a {
+    color: #555;
+    &hover {
+      color: #222;
+    }
+  }
+  small {
+    float: left;
+  }
+  ul {
+    float: right;
+    list-style: none;
+    li {
+      float: left;
+      margin-left: 15px;
+    }
+  }
+}
+