index.css (6782B)
1 :root { 2 --bg: #121212; 3 --fg: #eeeeee; 4 --fg-dim: #aaaaaa; 5 --dim: #777; 6 --muted: #444; 7 --border: #222; 8 --border2: #2a2a2a; 9 --link: #599cab; 10 11 --serif: "Georgia", serif; 12 --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 13 } 14 15 * { box-sizing: border-box; margin: 0; } 16 17 a { color: var(--link); text-decoration: none; } 18 a:hover { text-decoration: underline; } 19 20 body { 21 background: var(--bg); 22 color: var(--fg); 23 font-family: var(--serif); 24 font-size: 1.05rem; 25 max-width: 900px; 26 margin: 0 auto; 27 padding: 40px 20px 80px; 28 line-height: 1.7; 29 } 30 31 hr { border: none; border-top: 1px solid var(--border); margin: 0 0 40px; } 32 33 /* ---------- Navbar ---------- */ 34 .nav-container { 35 display: flex; 36 margin-bottom: 60px; 37 min-height: 30px; 38 flex-wrap: wrap; 39 gap: 12px; 40 } 41 .home-nav { justify-content: flex-start; gap: 28px; } 42 .post-nav { justify-content: space-between; align-items: baseline; } 43 .post-nav .post-nav-links { display: flex; gap: 22px; flex-wrap: wrap; } 44 45 .nav-container a { 46 color: var(--dim); 47 font-family: var(--sans); 48 font-size: 0.9rem; 49 font-weight: 500; 50 } 51 .nav-container a:hover { color: var(--fg); text-decoration: none; } 52 53 .centered-post-title a { 54 font-family: var(--sans); 55 color: var(--fg); 56 font-weight: 600; 57 font-size: 1rem; 58 letter-spacing: 0.02em; 59 } 60 61 /* ---------- Home: hero ---------- */ 62 .hero { display: flex; align-items: flex-start; gap: 60px; margin-bottom: 80px; } 63 .hero-text { flex: 1; } 64 .hero-text h1 { 65 font-size: 2.4rem; 66 font-weight: normal; 67 letter-spacing: -0.5px; 68 margin-bottom: 20px; 69 color: #fff; 70 line-height: 1.2; 71 } 72 .hero-text p { color: var(--fg-dim); font-size: 1rem; line-height: 1.8; max-width: 540px; } 73 .hero-text p + p { margin-top: 14px; } 74 .hero-photo { flex-shrink: 0; width: 130px; } 75 .hero-photo img { 76 width: 130px; height: 130px; 77 border-radius: 50%; 78 object-fit: cover; 79 filter: grayscale(20%); 80 border: 1px solid var(--border); 81 } 82 83 /* ---------- Home: sections ---------- */ 84 85 section h2 { 86 font-family: var(--sans); 87 font-size: 0.72rem; 88 font-weight: 600; 89 text-transform: uppercase; 90 letter-spacing: 1.4px; 91 color: var(--dim); 92 border-bottom: 1px solid var(--border); 93 padding-bottom: 8px; 94 margin-bottom: 22px; 95 } 96 97 .posts { list-style: none; padding: 0; } 98 .posts li { margin-bottom: 20px; } 99 .posts a { display: block; color: var(--fg); font-size: 0.98rem; line-height: 1.4; } 100 .posts a:hover { color: var(--link); text-decoration: none; } 101 .post-excerpt { font-size: 0.88rem; color: var(--dim); margin-top: 2px; font-style: italic; } 102 .post-meta { font-family: var(--sans); font-size: 0.78rem; color: var(--dim); margin-top: 3px; } 103 104 .linklist { list-style: none; padding: 0; } 105 .linklist li { margin-bottom: 13px; } 106 .linklist a { color: var(--fg-dim); font-size: 0.97rem; } 107 .linklist a:hover { color: var(--link); text-decoration: none; } 108 109 .ver-todos { display: inline-block; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin-top: 14px; } 110 .ver-todos:hover { color: var(--link); text-decoration: none; } 111 112 .tag, .post-tag { 113 display: inline-block; 114 font-family: var(--sans); 115 font-size: 0.68rem; 116 color: var(--dim); 117 border: 1px solid var(--muted); 118 padding: 1px 6px; 119 border-radius: 2px; 120 vertical-align: middle; 121 margin-left: 5px; 122 text-decoration: none; 123 transition: color 0.15s, border-color 0.15s; 124 } 125 .tag:hover, .post-tag:hover { color: var(--fg); border-color: var(--dim); text-decoration: none; } 126 .post-tags-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } 127 128 /* ---------- Posts / generic single & list pages ---------- */ 129 .post-body { font-size: 1.05rem; max-width: 750px; margin: 0 auto; } 130 .post-header { margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } 131 .post-header h1 { font-size: 1.9rem; font-weight: normal; color: #eee; margin: 0 0 8px; line-height: 1.3; } 132 .post-header .post-excerpt-lead { color: #888; font-style: italic; font-size: 1rem; margin: 0 0 10px; } 133 .post-header .post-date { color: var(--dim); font-size: 0.85rem; margin: 0; } 134 135 .content h2 { margin-top: 2em; color: #fff; } 136 .content hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } 137 138 .content p { margin: 0 0 1.2em; } 139 .content ul, .content ol { margin: 0 0 1.2em; padding-left: 1.4em; } 140 .content li { margin-bottom: 0.4em; } 141 .content h1, .content h2, .content h3, .content h4 { margin: 1.6em 0 0.7em; line-height: 1.3; } 142 .content h1:first-child, .content h2:first-child, .content h3:first-child { margin-top: 0; } 143 .content blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 2px solid var(--border); color: #aaa; font-style: italic; } 144 .content table { margin: 1.4em 0; border-collapse: collapse; width: 100%; } 145 .content th, .content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 0.92rem; } 146 .content th { color: #ccc; } 147 .content img { max-width: 100%; margin: 1.4em 0; border-radius: 3px; } 148 .content code { background: #1a1a1a; padding: 2px 5px; border-radius: 3px; font-size: 0.9em; } 149 .content pre { background: #1a1a1a; padding: 14px 16px; border-radius: 4px; overflow-x: auto; margin: 1.4em 0; } 150 .content pre code { background: none; padding: 0; } 151 .content sup { line-height: 0; } 152 153 .back-link { display: inline-block; font-family: var(--sans); font-size: 0.85rem; color: var(--dim); margin-bottom: 40px; } 154 .back-link:hover { color: var(--fg); text-decoration: none; } 155 156 .page-title { font-size: 1.9rem; font-weight: normal; color: #eee; margin-bottom: 10px; } 157 .page-intro { font-family: var(--sans); font-size: 0.9rem; color: var(--dim); margin-bottom: 30px; max-width: 540px; } 158 159 .recent-posts { list-style: none; padding: 0; } 160 .recent-posts li { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px; gap: 12px; flex-wrap: wrap; } 161 .recent-posts .recent-post-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } 162 .recent-posts .recent-post-date { color: var(--dim); font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; } 163 164 /* ---------- Footer ---------- */ 165 footer { 166 margin-top: 100px; 167 padding-top: 24px; 168 border-top: 1px solid var(--border); 169 display: flex; 170 justify-content: space-between; 171 color: var(--dim); 172 font-family: var(--sans); 173 font-size: 0.8rem; 174 flex-wrap: wrap; 175 gap: 8px; 176 } 177 footer a { color: var(--dim); } 178 footer a:hover { color: var(--fg); } 179 180 @media (max-width: 650px) { 181 .hero { flex-direction: column-reverse; gap: 30px; } 182 .hero-photo { width: 90px; } 183 .hero-photo img { width: 90px; height: 90px; } 184 .hero-text h1 { font-size: 1.8rem; } 185 }