fix: 优化页面布局与欢迎文本对齐效果

This commit is contained in:
Zuoling Rong
2025-07-07 01:49:45 +08:00
parent 4c7a5e6a60
commit edbf1aaf97
2 changed files with 122 additions and 11 deletions

View File

@@ -761,9 +761,9 @@ body .content.expanded {
/* 欢迎区域 */
.welcome-section {
width: 100%;
max-width: 1200px;
max-width: 1300px;
margin: 0 auto 3.5rem auto;
padding: 0 6rem 0 8rem;
padding: 0 6rem 0 2rem;
text-align: left;
position: relative;
z-index: 5;
@@ -831,9 +831,9 @@ body .content.expanded {
background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
border-radius: 16px;
padding: 2rem;
margin: 0 1rem 2.5rem 1rem;
width: calc(100% - 2rem);
max-width: 1100px;
margin: 0 1rem 2.5rem 2rem;
width: calc(100% - 3rem);
max-width: 1300px;
position: relative;
z-index: 1;
opacity: 0;
@@ -862,7 +862,7 @@ body .content.expanded {
/* 网站卡片网格 */
.sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
position: relative;
z-index: 1;
@@ -1155,12 +1155,12 @@ body .content.expanded {
/* 响应式设计 */
@media (max-width: 1200px) {
.welcome-section {
padding: 0 4rem;
padding: 0 4rem 0 1.5rem;
margin-bottom: 3rem;
}
.category {
max-width: 900px;
max-width: 1100px;
margin-bottom: 2rem;
margin-left: 1.5rem; /* 增加左边距 */
margin-right: 1.5rem; /* 增加右边距 */
@@ -1334,7 +1334,7 @@ body .content.expanded {
@media (max-width: 480px) {
.welcome-section {
padding: 0 1.5rem;
padding: 0 1rem;
margin-bottom: 2rem;
}
@@ -1464,7 +1464,7 @@ body .content.expanded {
/* 确保搜索结果中的网格有正确的间距 */
.search-section .sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 1.2rem;
margin-top: 1rem;
}

View File

@@ -28,6 +28,18 @@ categories:
url: https://chat.openai.com
icon: fas fa-robot
description: AI智能助手
- name: YouTube
url: https://www.youtube.com
icon: fab fa-youtube
description: 视频分享平台
- name: Twitter
url: https://twitter.com
icon: fab fa-twitter
description: 社交媒体平台
- name: Reddit
url: https://www.reddit.com
icon: fab fa-reddit
description: 社区讨论平台
- name: 学习资源
icon: fas fa-graduation-cap
sites:
@@ -47,6 +59,22 @@ categories:
url: https://leetcode.cn
icon: fas fa-code
description: 算法刷题平台
- name: Coursera
url: https://www.coursera.org
icon: fas fa-university
description: 在线课程平台
- name: edX
url: https://www.edx.org
icon: fas fa-graduation-cap
description: 高质量在线教育
- name: Udemy
url: https://www.udemy.com
icon: fas fa-chalkboard-teacher
description: 技能学习平台
- name: MDN Web Docs
url: https://developer.mozilla.org
icon: fas fa-file-code
description: Web开发文档
- name: 开发工具
icon: fas fa-tools
sites:
@@ -66,6 +94,22 @@ categories:
url: https://www.docker.com
icon: fab fa-docker
description: 容器化平台
- name: JetBrains
url: https://www.jetbrains.com
icon: fas fa-laptop-code
description: 专业开发IDE
- name: npm
url: https://www.npmjs.com
icon: fab fa-npm
description: Node.js包管理器
- name: Webpack
url: https://webpack.js.org
icon: fas fa-box-open
description: 前端打包工具
- name: GitHub Copilot
url: https://github.com/features/copilot
icon: fas fa-robot
description: AI编程助手
- name: 设计资源
icon: fas fa-palette
sites:
@@ -85,6 +129,22 @@ categories:
url: https://www.iconfont.cn
icon: fas fa-icons
description: 图标资源库
- name: Unsplash
url: https://unsplash.com
icon: fas fa-camera
description: 免费高质量图片
- name: Adobe XD
url: https://www.adobe.com/products/xd.html
icon: fab fa-adobe
description: UI/UX设计工具
- name: Sketch
url: https://www.sketch.com
icon: fas fa-pencil-ruler
description: 矢量设计工具
- name: Canva
url: https://www.canva.com
icon: fas fa-paint-brush
description: 在线平面设计
- name: 在线工具
icon: fas fa-wrench
sites:
@@ -104,3 +164,54 @@ categories:
url: https://carbon.now.sh
icon: fas fa-code
description: 代码图片生成器
- name: RegExr
url: https://regexr.com
icon: fas fa-search
description: 正则表达式测试
- name: Excalidraw
url: https://excalidraw.com
icon: fas fa-pencil-alt
description: 手绘风格图表工具
- name: Notion
url: https://www.notion.so
icon: fas fa-sticky-note
description: 多功能笔记工具
- name: Grammarly
url: https://www.grammarly.com
icon: fas fa-spell-check
description: 英文语法检查工具
- name: 云服务平台
icon: fas fa-cloud
sites:
- name: AWS
url: https://aws.amazon.com
icon: fab fa-aws
description: 亚马逊云服务
- name: Azure
url: https://azure.microsoft.com
icon: fab fa-microsoft
description: 微软云平台
- name: Google Cloud
url: https://cloud.google.com
icon: fab fa-google
description: 谷歌云平台
- name: Cloudflare
url: https://www.cloudflare.com
icon: fas fa-cloud
description: CDN与安全服务
- name: Vercel
url: https://vercel.com
icon: fas fa-server
description: 前端部署平台
- name: Netlify
url: https://www.netlify.com
icon: fas fa-globe
description: 静态网站托管
- name: DigitalOcean
url: https://www.digitalocean.com
icon: fab fa-digital-ocean
description: 简单云服务器
- name: Heroku
url: https://www.heroku.com
icon: fas fa-h-square
description: 应用部署平台