blog.css (3340B)
1 #blog { 2 width: 100%; 3 } 4 5 .blog-empty { 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 justify-content: center; 10 height: 100%; 11 width: 100%; 12 gap: 8px; 13 } 14 15 .blog-list-view { 16 display: flex; 17 align-items: flex-start; 18 justify-content: center; 19 height: 100%; 20 width: 100%; 21 overflow-y: auto; 22 padding: 24px 28px; 23 } 24 25 .blog-list-view.hidden { 26 display: none; 27 } 28 29 .blog-fs-shell { 30 width: 100%; 31 max-width: 860px; 32 border: 1px solid var(--border); 33 background: var(--bg-alt); 34 } 35 36 .blog-fs-header { 37 color: var(--accent); 38 border-bottom: 1px solid var(--border); 39 padding: 10px 14px; 40 font-size: var(--fs-14); 41 } 42 43 .blog-list-columns { 44 display: grid; 45 grid-template-columns: 92px 112px minmax(220px, 1.2fr) minmax(0, 0.8fr) 24px; 46 gap: 10px; 47 color: var(--fg-dim); 48 border-bottom: 1px solid var(--border); 49 padding: 8px 14px; 50 font-size: var(--fs-12); 51 } 52 53 .blog-list-container { 54 width: 100%; 55 padding: 8px; 56 } 57 58 .blog-list-item { 59 display: grid; 60 grid-template-columns: 92px 112px minmax(220px, 1.2fr) minmax(0, 0.8fr) 24px; 61 align-items: center; 62 gap: 10px; 63 padding: 10px 6px; 64 border: 1px solid var(--border); 65 margin-bottom: 8px; 66 cursor: pointer; 67 transition: background 0.15s ease, border-color 0.15s ease; 68 } 69 70 .blog-list-item:hover { 71 background: var(--selection); 72 border-color: var(--accent); 73 } 74 75 .blog-list-item.selected { 76 background: var(--bg-alt); 77 border-color: var(--accent); 78 } 79 80 .blog-list-date { 81 color: var(--fg-dim); 82 font-size: var(--fs-13); 83 } 84 85 .blog-list-mode { 86 color: var(--blue); 87 font-size: var(--fs-12); 88 } 89 90 .blog-list-file { 91 color: var(--light-blue); 92 font-weight: 500; 93 font-size: var(--fs-14); 94 text-decoration: underline; 95 text-decoration-color: transparent; 96 transition: text-decoration-color 0.15s; 97 } 98 99 .blog-list-name { 100 min-width: 0; 101 } 102 103 .blog-list-title { 104 display: none; 105 } 106 107 .blog-list-desc { 108 color: var(--fg-dim); 109 font-size: var(--fs-12); 110 max-width: 34ch; 111 white-space: nowrap; 112 overflow: hidden; 113 text-overflow: ellipsis; 114 } 115 116 .blog-list-arrow { 117 color: var(--fg-dim); 118 font-size: var(--fs-13); 119 justify-self: end; 120 } 121 122 .blog-list-item:hover .blog-list-file, 123 .blog-list-item.selected .blog-list-file { 124 text-decoration-color: currentColor; 125 } 126 127 .blog-post-view { 128 display: flex; 129 justify-content: center; 130 height: 100%; 131 width: 100%; 132 overflow-y: auto; 133 padding: 32px; 134 } 135 136 .blog-post-view.hidden { 137 display: none; 138 } 139 140 .blog-post-container { 141 max-width: 760px; 142 width: 100%; 143 } 144 145 .blog-back-btn { 146 background: transparent; 147 border: 1px solid var(--border); 148 color: var(--fg-dim); 149 padding: 6px 12px; 150 cursor: pointer; 151 font-family: inherit; 152 font-size: var(--fs-13); 153 margin-bottom: 14px; 154 } 155 156 .blog-back-btn:hover { 157 background: var(--bg-alt); 158 color: var(--accent); 159 border-color: var(--accent); 160 } 161 162 @media (max-width: 768px) { 163 .blog-list-view { 164 padding: 12px; 165 } 166 167 .blog-fs-header { 168 font-size: var(--fs-12); 169 } 170 171 .blog-list-columns, 172 .blog-list-item { 173 grid-template-columns: 98px minmax(0, 1fr) 18px; 174 } 175 176 .blog-list-columns .col-mode, 177 .blog-list-columns .col-desc, 178 .blog-list-mode { 179 display: none; 180 } 181 182 .blog-list-date { 183 font-size: var(--fs-11); 184 } 185 186 .blog-list-desc { 187 display: none; 188 } 189 190 .blog-list-container { 191 padding: 6px; 192 } 193 194 .blog-post-view { 195 padding: 16px; 196 } 197 }