blog_detail.css (2528B)
1 .blog-article-header { 2 margin-bottom: 18px; 3 padding-bottom: 16px; 4 border-bottom: 1px solid var(--border); 5 } 6 7 .blog-article-header-top { 8 display: flex; 9 align-items: flex-start; 10 justify-content: space-between; 11 gap: 16px; 12 } 13 14 .blog-article-title { 15 font-size: var(--fs-24); 16 font-weight: 500; 17 color: var(--accent); 18 margin: 0 0 8px; 19 line-height: 1.3; 20 overflow-wrap: anywhere; 21 } 22 23 .blog-share-btn { 24 background: transparent; 25 border: 1px solid var(--border); 26 color: var(--fg-dim); 27 padding: 6px 12px; 28 cursor: pointer; 29 font-family: inherit; 30 font-size: var(--fs-12); 31 } 32 33 .blog-share-btn:hover { 34 background: var(--bg-alt); 35 color: var(--accent); 36 border-color: var(--accent); 37 } 38 39 .blog-share-btn.copied { 40 color: var(--green); 41 border-color: var(--green); 42 } 43 44 .blog-article-meta { 45 display: flex; 46 align-items: center; 47 justify-content: space-between; 48 } 49 50 .blog-article-date { 51 color: var(--fg-dim); 52 font-size: var(--fs-13); 53 } 54 55 .blog-share-btn-mobile { 56 display: none; 57 } 58 59 .blog-article-content { 60 font-size: var(--fs-14); 61 line-height: 1.7; 62 color: var(--fg); 63 padding-bottom: 32px; 64 } 65 66 .blog-article-content p { 67 margin-bottom: 16px; 68 } 69 70 .blog-article-content h2 { 71 font-size: var(--fs-20); 72 color: var(--accent); 73 margin: 32px 0 12px; 74 } 75 76 .blog-article-content h3 { 77 font-size: var(--fs-17); 78 color: var(--accent); 79 margin: 24px 0 10px; 80 } 81 82 .blog-article-content pre { 83 display: block; 84 background: var(--bg-alt); 85 border: 1px solid var(--border); 86 padding: 16px; 87 margin: 16px 0; 88 overflow-x: auto; 89 font-size: var(--fs-13); 90 } 91 92 .blog-article-content code { 93 background: var(--bg-alt); 94 padding: 2px 6px; 95 font-size: var(--fs-13); 96 } 97 98 .blog-article-content pre code { 99 background: transparent; 100 padding: 0; 101 font-size: inherit; 102 } 103 104 .blog-article-content a { 105 color: var(--light-blue); 106 } 107 108 .blog-article-content ul, 109 .blog-article-content ol { 110 margin: 12px 0; 111 padding-left: 24px; 112 } 113 114 .blog-article-content table { 115 width: 100%; 116 border-collapse: collapse; 117 margin: 16px 0; 118 font-size: var(--fs-13); 119 } 120 121 .blog-article-content th, 122 .blog-article-content td { 123 border: 1px solid var(--border); 124 padding: 10px 14px; 125 text-align: left; 126 } 127 128 .blog-article-content th { 129 background: var(--bg-alt); 130 color: var(--accent); 131 } 132 133 @media (max-width: 768px) { 134 .blog-article-title { 135 font-size: var(--fs-20); 136 } 137 138 .blog-share-btn-desktop { 139 display: none; 140 } 141 142 .blog-share-btn-mobile { 143 display: block; 144 } 145 146 .blog-article-content { 147 font-size: var(--fs-13); 148 } 149 }