Optimize organization detail page style

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Optimize global line height
 - Optimize the workflow log page style
 - Optimize repository header name style
+- Optimize organization detail page style
 
 ### 🐞 Fix
 

styles/components/org.ts

@@ -2,8 +2,24 @@ import { css, themeVars } from "src/types/vars";
 
 export const org = css`
   .page-content.organization {
+    // 组织成员头像
+    .members .ui.avatar {
+      border-radius: 9999px;
+    }
+    // 组织头像
+    .org-avatar {
+      margin: 8px 24px 16px 0px;
+    }
+    // 组织信息
     #org-info {
-      .ui.header {
+      margin-top: 8px; // 与头像对齐
+      gap: 8px;
+      // 组织名称
+      > .ui.header {
+        font-size: 24px;
+        > .org-visibility {
+          margin-left: 8px;
+        }
         // 组织页面的 RSS 订阅按钮
         .ui.label.button {
           padding: 4px 16px;
@@ -16,6 +32,17 @@ export const org = css`
           }
         }
       }
+      // 组织描述
+      > .markup {
+        color: ${themeVars.color.text.light.num1};
+      }
+      // 组织信息
+      > .meta {
+        font-size: 12px;
+        svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+      }
     }
   }
 `;

styles/components/repo.ts

@@ -17,8 +17,7 @@ export const repoHeader = css`
           display: flex;
           align-items: center;
           color: ${themeVars.color.text.self};
-          font-size: 20px;
-          line-height: 1.3;
+          font-size: 18px;
           text-decoration: none !important;
           min-width: 3ch;
           padding: 0px 6px;

styles/components/setting.ts

@@ -83,3 +83,12 @@ export const label = css`
     }
   }
 `;
+
+// 修复组织设置界面的组织设置中多余的边框
+export const fixOrgSetting = css`
+  .page-content.organization.settings {
+    .org-setting-content {
+      border: 0;
+    }
+  }
+`;