|
|
| 第1行： |
第1行： |
| .mw-hero {
| | /* ===== Home Layout ===== */ |
| text-align: center;
| |
| padding: 80px 20px 60px;
| |
| background: linear-gradient(135deg, #e6ecff, #ffffff 40%);
| |
| border-radius: 20px;
| |
| margin-bottom: 40px;
| |
| }
| |
|
| |
|
| .mw-hero-title { | | .home { |
| font-size: 3rem; | | max-width: 1100px; |
| font-weight: 700; | | margin: 0 auto; |
| margin-bottom: 10px; | | padding: 24px 16px; |
| } | | } |
|
| |
|
| .mw-hero-sub { | | .home-grid { |
| font-size: 1.3rem; | | display: grid; |
| color: #555; | | grid-template-columns: 1fr 1fr; |
| | gap: 32px; |
| } | | } |
|
| |
|
| | | @media (max-width: 768px) { |
| .mw-home-container { | | .home-grid { |
| display: flex;
| | grid-template-columns: 1fr; |
| gap: 30px;
| | } |
| align-items: flex-start;
| |
| margin-top: 20px; | |
| } | | } |
|
| |
|
| .mw-left { | | .home-section { |
| flex: 2; | | margin-bottom: 32px; |
| } | | } |
|
| |
|
| .mw-right { | | .section-title { |
| flex: 1; | | font-size: 1.4em; |
| | font-weight: 600; |
| | margin-bottom: 16px; |
| } | | } |
|
| |
|
| | /* ===== Latest Pages ===== */ |
|
| |
|
| /*****************************
| | .latest-list { |
| * Info Panel（右侧栏）Wikipedia 风
| | border: 1px solid #e5e7eb; |
| *****************************/
| | border-radius: 8px; |
| .mw-panel { | | overflow: hidden; |
| background: #fff; | |
| padding: 20px;
| |
| border-radius: 14px; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.06); | |
| margin-bottom: 20px;
| |
| } | | } |
|
| |
|
| .mw-panel h2 { | | .latest-item { |
| margin-top: 0; | | padding: 12px 16px; |
| border-bottom: 1px solid #eee; | | border-bottom: 1px solid #e5e7eb; |
| padding-bottom: 8px;
| |
| margin-bottom: 12px;
| |
| } | | } |
|
| |
|
| .mw-panel-content { | | .latest-item:last-child { |
| font-size: 0.95rem; | | border-bottom: none; |
| line-height: 1.4;
| |
| } | | } |
|
| |
|
| .mw-panel-content ul { | | .latest-title a { |
| margin: 0; | | text-decoration: none; |
| padding-left: 18px; | | color: #111827; |
| | font-weight: 500; |
| } | | } |
|
| |
|
| | | .latest-title a:hover { |
| .mw-card { | | text-decoration: underline; |
| padding: 18px; | |
| border-radius: 16px;
| |
| background: white;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| margin-bottom: 18px;
| |
| cursor: pointer;
| |
| transition: 0.2s;
| |
| } | | } |
|
| |
|
| .mw-card:hover {
| | /* ===== Featured Pages ===== */ |
| box-shadow: 0 4px 14px rgba(0,0,0,0.15);
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
|
| .mw-card-title { | | .featured-list { |
| font-size: 1.3em; | | display: flex; |
| font-weight: bold; | | flex-direction: column; |
| margin-bottom: 6px; | | gap: 12px; |
| } | | } |
|
| |
|
| .mw-card-desc { | | .featured-item { |
| font-size: 0.9em; | | padding: 14px 16px; |
| color: #555;
| | border: 1px solid #fde68a; |
| }
| |
| | |
| .mw-featured-article {
| |
| border: 1px solid #ddd; | |
| padding: 15px;
| |
| margin-bottom: 20px;
| |
| background-color: #fdfdfd;
| |
| border-radius: 8px; | | border-radius: 8px; |
| | background: #fffbeb; |
| } | | } |
|
| |
|
| .mw-featured-article h2 { | | .featured-title a { |
| margin-top: 0;
| |
| font-size: 1.3em;
| |
| }
| |
| | |
| .mw-featured-article .mw-card-content {
| |
| margin-top: 10px;
| |
| }
| |
| | |
| .card {
| |
| display: block;
| |
| text-decoration: none; | | text-decoration: none; |
| color: inherit; | | color: #92400e; |
| | font-weight: 600; |
| } | | } |
|
| |
|
| .recent-pages-list { | | .featured-title a:hover { |
| list-style: none;
| |
| padding-left: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .recent-pages-list li {
| |
| margin-bottom: 6px;
| |
| font-size: 0.95em;
| |
| }
| |
| | |
| .recent-pages-list li a {
| |
| text-decoration: none;
| |
| color: #0645ad;
| |
| }
| |
| | |
| .recent-pages-list li a:hover {
| |
| text-decoration: underline; | | text-decoration: underline; |
| } | | } |
|
| |
|
| @media (prefers-color-scheme: dark) {
| | /* ===== Footer Link ===== */ |
| .fa-box { background: rgba(24,24,27,0.6); box-shadow: 0 6px 18px rgba(0,0,0,0.28); color: #eaeaea; }
| |
| .fa-extract { color: #dcdcdc; }
| |
| .fa-link a { background: rgba(255,255,255,0.06); color: #eaeaea; }
| |
| .fa-link a:hover { background: rgba(255,255,255,0.09); }
| |
| }
| |
|
| |
|
| @media (max-width: 900px) {
| | .section-footer { |
| .mw-home-container { | | margin-top: 12px; |
| flex-direction: column;
| | font-size: 0.9em; |
| }
| |
| } | | } |
