project_detail.css (4500B)
1 /* path and clone share the top line; the tags sit under the path, so a long 2 clone url never pushes them onto a wrapped line of their own */ 3 .detail-header { 4 display: grid; 5 grid-template-columns: minmax(0, 1fr) auto; 6 grid-template-areas: 7 "path clone" 8 "tags tags"; 9 align-items: center; 10 gap: 8px 14px; 11 margin-bottom: 16px; 12 } 13 14 .detail-path { 15 grid-area: path; 16 } 17 18 .tech-stack { 19 grid-area: tags; 20 } 21 22 .clone-bar { 23 grid-area: clone; 24 } 25 26 .detail-path { 27 min-width: 0; 28 font-size: var(--fs-19); 29 font-weight: 400; 30 } 31 32 .detail-path-text { 33 color: var(--accent); 34 overflow-wrap: anywhere; 35 } 36 37 .tech-stack { 38 display: flex; 39 flex-wrap: wrap; 40 gap: 6px; 41 } 42 43 .clone-bar { 44 display: flex; 45 align-items: stretch; 46 border: 1px solid var(--border); 47 background: var(--bg-alt); 48 font-size: var(--fs-12); 49 margin-left: auto; 50 min-width: 0; 51 max-width: 100%; 52 transition: border-color 0.15s; 53 } 54 55 .clone-bar:hover, 56 .clone-bar:focus-within { 57 border-color: var(--accent-dim); 58 } 59 60 .clone-tabs { 61 display: flex; 62 flex-shrink: 0; 63 border-right: 1px solid var(--border); 64 } 65 66 .clone-tab { 67 border: none; 68 background: transparent; 69 color: var(--fg-dim); 70 padding: 3px 9px; 71 font-family: inherit; 72 font-size: inherit; 73 cursor: pointer; 74 transition: color 0.15s, background 0.15s; 75 } 76 77 .clone-tab:hover { 78 color: var(--fg); 79 } 80 81 .clone-tab.active { 82 background: var(--accent); 83 color: var(--bg); 84 } 85 86 .clone-tab:focus-visible, 87 .clone-copy:focus-visible { 88 outline: 1px solid var(--accent); 89 outline-offset: -1px; 90 } 91 92 .clone-cmd { 93 flex: 1; 94 min-width: 0; 95 padding: 3px 9px; 96 color: var(--fg); 97 white-space: nowrap; 98 overflow-x: auto; 99 scrollbar-width: none; 100 background: transparent; 101 font-family: inherit; 102 } 103 104 .clone-cmd::-webkit-scrollbar { 105 display: none; 106 } 107 108 .clone-dollar { 109 color: var(--green); 110 } 111 112 .clone-url { 113 color: var(--light-blue); 114 user-select: all; 115 } 116 117 .clone-copy { 118 flex-shrink: 0; 119 min-width: 58px; 120 border: none; 121 border-left: 1px solid var(--border); 122 background: transparent; 123 color: var(--fg-dim); 124 padding: 3px 9px; 125 font-family: inherit; 126 font-size: inherit; 127 cursor: pointer; 128 transition: color 0.15s, background 0.15s; 129 } 130 131 .clone-copy:hover { 132 color: var(--accent); 133 background: var(--bg); 134 } 135 136 .clone-copy.copied { 137 color: var(--green); 138 } 139 140 .readme-content { 141 flex: 0 0 auto; 142 min-height: auto; 143 overflow: visible; 144 font-size: var(--fs-14); 145 line-height: 1.5; 146 color: var(--fg); 147 margin-top: 16px; 148 padding-top: 16px; 149 padding-right: 0; 150 border-top: 1px solid var(--border); 151 } 152 153 .readme-content p { 154 margin-bottom: 12px; 155 } 156 157 /* headings stay on the body text scale: same size as the text (h1 one step 158 up, still under the ~/projects path above), set apart by color and weight */ 159 .readme-content h1, 160 .readme-content h2, 161 .readme-content h3, 162 .readme-content h4, 163 .readme-content h5, 164 .readme-content h6 { 165 color: var(--accent); 166 font-size: var(--fs-14); 167 font-weight: 700; 168 line-height: 1.5; 169 margin: 16px 0 6px; 170 } 171 172 .readme-content h1 { 173 font-size: var(--fs-16); 174 } 175 176 .readme-content > :first-child { 177 margin-top: 0; 178 } 179 180 .readme-content pre { 181 display: block; 182 background: var(--bg-alt); 183 border: 1px solid var(--border); 184 padding: 12px; 185 margin: 12px 0; 186 overflow-x: auto; 187 font-size: var(--fs-12); 188 } 189 190 .readme-content code { 191 background: var(--bg-alt); 192 padding: 2px 6px; 193 font-size: var(--fs-12); 194 } 195 196 .readme-content pre code { 197 background: transparent; 198 padding: 0; 199 font-size: inherit; 200 } 201 202 .readme-content a { 203 color: var(--light-blue); 204 } 205 206 .readme-content img { 207 display: block; 208 width: auto; 209 max-width: min(75%, 640px); 210 max-height: 320px; 211 height: auto; 212 object-fit: contain; 213 margin: 12px auto; 214 border: 1px solid var(--border); 215 } 216 217 .readme-content ul, 218 .readme-content ol { 219 margin: 8px 0; 220 padding-left: 20px; 221 } 222 223 .readme-content table { 224 width: 100%; 225 border-collapse: collapse; 226 margin: 12px 0; 227 font-size: var(--fs-12); 228 } 229 230 .readme-content th, 231 .readme-content td { 232 border: 1px solid var(--border); 233 padding: 8px 12px; 234 text-align: left; 235 } 236 237 .readme-content th { 238 background: var(--bg-alt); 239 color: var(--accent); 240 font-weight: 500; 241 } 242 243 @media (max-width: 768px) { 244 .detail-header { 245 grid-template-columns: minmax(0, 1fr); 246 grid-template-areas: 247 "path" 248 "tags" 249 "clone"; 250 align-items: start; 251 } 252 253 .clone-bar { 254 margin-left: 0; 255 justify-self: start; 256 } 257 258 .detail-path { 259 font-size: var(--fs-17); 260 } 261 262 .readme-content img { 263 max-width: 100%; 264 } 265 }