diff --git a/styles.css b/styles.css index 8a8a31a..4b96e38 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,4 @@ -/* — THE FOLD WITHIN — */ -/* Refined gold-on-black aesthetic for markdown-native blogging */ +/* — THE FOLD WITHIN — refined gold-on-black aesthetic */ :root { --bg-dark: #0f0d0e; @@ -12,11 +11,7 @@ --transition: all 0.3s ease; } -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} +* { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg-dark); @@ -26,193 +21,75 @@ body { overflow-x: hidden; } -/* — Links — */ -a { - color: var(--gold); - text-decoration: none; - transition: var(--transition); -} -a:hover { - text-shadow: 0 0 6px var(--gold); -} +a { color: var(--gold); text-decoration: none; transition: var(--transition); } +a:hover { text-shadow: 0 0 6px var(--gold); } -/* — Header & Nav — */ header { padding: 2rem 1rem; text-align: center; border-bottom: 1px solid var(--border); } nav { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 960px; - margin: 0 auto 2rem; -} -.logo { - font-size: 1.6rem; - letter-spacing: 3px; -} -nav ul { - list-style: none; - display: flex; - gap: 2rem; -} -nav li { - font-size: 0.95rem; - text-transform: uppercase; - letter-spacing: 1px; + display: flex; justify-content: space-between; align-items: center; + max-width: 960px; margin: 0 auto 2rem; } +.logo { font-size: 1.6rem; letter-spacing: 3px; } +nav ul { list-style: none; display: flex; gap: 2rem; } +nav li { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; } -/* — Hero — */ -.hero { - margin: 3rem auto; - text-align: center; - max-width: 720px; -} +.hero { margin: 3rem auto; text-align: center; max-width: 720px; } .glyph { - margin: 0 auto 1.5rem; - width: 100px; - height: 100px; - border: 2px solid var(--gold); - border-radius: 50%; - position: relative; - transition: var(--transition); + margin: 0 auto 1.5rem; width: 100px; height: 100px; + border: 2px solid var(--gold); border-radius: 50%; + position: relative; transition: var(--transition); } .glyph::before { - content: ''; - position: absolute; - inset: 25%; - border: 2px solid var(--gold); - transform: rotate(45deg); - transition: var(--transition); -} -.glyph:hover { - transform: rotate(5deg); - box-shadow: 0 0 12px rgba(212,175,55,0.3); -} -.hero h1 { - font-size: 2.1rem; - text-transform: uppercase; - margin-top: 1rem; - letter-spacing: 2px; + content: ""; position: absolute; inset: 25%; + border: 2px solid var(--gold); transform: rotate(45deg); transition: var(--transition); } +.glyph:hover { transform: rotate(5deg); box-shadow: 0 0 12px rgba(212,175,55,0.3); } +.hero h1 { font-size: 2.1rem; text-transform: uppercase; margin-top: 1rem; letter-spacing: 2px; } -/* — Layout — */ -main { - padding: 2rem 1rem 4rem; - max-width: 1200px; - margin: 0 auto; -} +main { padding: 2rem 1rem 4rem; max-width: 1200px; margin: 0 auto; } -/* — Post Grid — */ .latest h2 { - font-size: 1.3rem; - text-transform: uppercase; - border-top: 1px solid var(--border); - padding-top: 1rem; - margin-bottom: 2rem; - letter-spacing: 1px; + font-size: 1.3rem; text-transform: uppercase; letter-spacing: 1px; + border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 2rem; } .grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 2rem; + display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; } +.loading { color: var(--gold-soft); text-align: center; } + article { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 10px; - padding: 1.25rem; - transition: var(--transition); - cursor: pointer; -} -article:hover { - transform: scale(1.03); - box-shadow: 0 0 12px rgba(212,175,55,0.35); -} -.thumb { - width: 100%; - height: 140px; - background: var(--border); - margin-bottom: 1rem; - border-radius: 6px; -} -h3 { - font-size: 1.1rem; - margin: 0.5rem 0; - letter-spacing: 0.5px; -} -.date { - font-size: 0.8rem; - color: var(--gold-soft); - margin-bottom: 0.75rem; + background: var(--bg-card); border: 1px solid var(--border); + border-radius: 10px; padding: 1.25rem; transition: var(--transition); cursor: pointer; } +article:hover { transform: scale(1.03); box-shadow: 0 0 12px rgba(212,175,55,0.35); } +.thumb { width: 100%; height: 140px; background: var(--border); margin-bottom: 1rem; border-radius: 6px; } +h3 { font-size: 1.1rem; margin: 0.5rem 0; letter-spacing: 0.5px; } +.date { font-size: 0.8rem; color: var(--gold-soft); margin-bottom: 0.75rem; } -/* — Markdown Content — */ -.markdown { - max-width: 720px; - margin: 3rem auto; - line-height: 1.85; - font-size: 1rem; -} -.markdown h1, .markdown h2, .markdown h3 { - color: var(--gold); - margin-top: 2rem; - margin-bottom: 0.75rem; - line-height: 1.4; -} -.markdown h1 { - font-size: 2rem; -} -.markdown h2 { - font-size: 1.5rem; -} -.markdown h3 { - font-size: 1.2rem; -} -.markdown p { - margin-bottom: 1rem; -} -.markdown a { - border-bottom: 1px dashed var(--gold-soft); -} -.markdown a:hover { - border-bottom-color: var(--gold); - text-shadow: 0 0 4px var(--gold); -} +/* Markdown view */ +.markdown { max-width: 720px; margin: 3rem auto; line-height: 1.85; font-size: 1rem; } +.markdown h1, .markdown h2, .markdown h3 { color: var(--gold); margin: 2rem 0 0.75rem; line-height: 1.4; } +.markdown h1 { font-size: 2rem; } +.markdown h2 { font-size: 1.5rem; } +.markdown h3 { font-size: 1.2rem; } +.markdown p { margin-bottom: 1rem; } +.markdown a { border-bottom: 1px dashed var(--gold-soft); } +.markdown a:hover { border-bottom-color: var(--gold); text-shadow: 0 0 4px var(--gold); } -/* — Back link — */ -#back { - display: inline-block; - margin: 2rem 0 1rem; - color: var(--gold-soft); - font-size: 0.9rem; -} -#back:hover { - color: var(--gold); - text-shadow: 0 0 5px var(--gold); -} +/* Back link */ +#back { display: inline-block; margin: 2rem 0 1rem; color: var(--gold-soft); font-size: 0.9rem; } +#back:hover { color: var(--gold); text-shadow: 0 0 5px var(--gold); } -/* — Error & Utility — */ -.error { - color: var(--error); - text-align: center; - margin-top: 2rem; - font-style: italic; - letter-spacing: 1px; -} +/* Error */ +.error { color: var(--error); text-align: center; margin-top: 2rem; font-style: italic; letter-spacing: 1px; } -/* — Responsiveness — */ +/* Responsive tweaks */ @media (max-width: 600px) { - nav ul { - gap: 1rem; - } - .hero h1 { - font-size: 1.5rem; - } - .glyph { - width: 80px; - height: 80px; - } + nav ul { gap: 1rem; } + .hero h1 { font-size: 1.5rem; } + .glyph { width: 80px; height: 80px; } } \ No newline at end of file