fix: 优化页面布局与欢迎文本对齐效果
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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: 应用部署平台
|
||||
Reference in New Issue
Block a user