diff --git a/themes/minimal/assets/css/main.css b/themes/minimal/assets/css/main.css index f17e2ab..9855740 100644 --- a/themes/minimal/assets/css/main.css +++ b/themes/minimal/assets/css/main.css @@ -1,145 +1,161 @@ :root { --bg-color: #ffffff; - --text-color: #333; - --link-color: #00e; --border-color: #222; - --strong-bg: #f0f0f0; --heading-border: #ccc; - --social-icon-bg: linear-gradient(145deg, #ffffff, #f5f5f5); - --social-icon-color: #111; + --link-color: #00e; --post-border: #ddd; --post-meta-color: #666; + --social-icon-bg: linear-gradient(145deg, #ffffff, #f5f5f5); + --social-icon-color: #111; + --strong-bg: #f0f0f0; + --text-color: #333; + --heart-color: #d64545; + --github-color: #24292e; + --linkedin-color: #0077b5; + --x-twitter-color: #000000; } [data-theme="dark"] { --bg-color: #1a1a1a; - --text-color: #e0e0e0; - --link-color: #66b3ff; --border-color: #444; - --strong-bg: #2d2d2d; --heading-border: #444; - --social-icon-bg: linear-gradient(145deg, #222, #1a1a1a); - --social-icon-color: #e0e0e0; + --link-color: #66b3ff; --post-border: #333; --post-meta-color: #999; + --social-icon-bg: linear-gradient(145deg, #222, #1a1a1a); + --social-icon-color: #e0e0e0; + --strong-bg: #2d2d2d; + --text-color: #e0e0e0; + --heart-color: #e06c6c; + --github-color: #f0f6fc; + --linkedin-color: #0077b5; + --x-twitter-color: #ffffff; } body { - color: var(--text-color); background-color: var(--bg-color); + color: var(--text-color); + display: flex; + flex-direction: column; font-family: "IBM Plex Sans", serif; - line-height: 1.45; font-size: 1.1rem; + line-height: 1.45; margin: 0 auto; - padding: 1rem; - text-align: justify; max-width: 768px; - display: flex; - flex-direction: column; min-height: 100vh; + padding: 1rem; + text-align: justify; transition: background-color 0.3s ease, color 0.3s ease; } -header { - margin-bottom: 1rem; - display: flex; - justify-content: space-between; - align-items: center; +a { + color: var(--link-color); + text-decoration: none; } -.header-title { - margin: 0; - font-size: 3rem; - font-weight: 600; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Roboto Slab", serif; + font-weight: 400; } -.header-title a { - color: inherit; +h1:not(.header-title):not(.post-title) { + border-bottom: 2px solid var(--heading-border); } -nav ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - gap: 1rem; - align-items: center; +strong { + background-color: var(--strong-bg); + border-radius: 3px; + font-weight: 500; + padding: 1px 4px; } -nav a { - color: var(--link-color); - font-weight: 400; - padding: 0.5rem 0; - position: relative; +header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; } main { flex: 1; } -strong { - font-weight: 500; - background-color: var(--strong-bg); - padding: 1px 4px; - border-radius: 3px; -} - footer { border-top: 1px solid var(--border-color); - text-align: center; - padding-bottom: 1rem; font-size: 0.9rem; + padding-bottom: 1rem; + text-align: center; } -.fa-heart { - color: #ff0000; +nav ul { + align-items: center; + display: flex; + gap: 2.5rem; + list-style: none; + margin: 0; + padding: 0; } -h1:not(.header-title):not(.post-title) { - border-bottom: 2px solid var(--heading-border); +nav a { + color: var(--link-color); + font-weight: 400; + padding: 0.5rem 0; + position: relative; } -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Roboto Slab", serif; - font-weight: 400; +.header-title { + font-size: 3rem; + font-weight: 600; + margin: 0; } -a { - color: var(--link-color); - text-decoration: none; +.header-title a { + color: inherit; } .social-icons { display: flex; - gap: 1rem; + gap: 1.25rem; justify-content: center; - margin: 2rem 0; + margin: 2.5rem 0; } .social-icons a { + align-items: center; + background: var(--social-icon-bg); + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); color: var(--social-icon-color); + display: flex; font-size: 1.4rem; - width: 3.2rem; height: 3.2rem; - display: flex; - align-items: center; justify-content: center; - border-radius: 8px; - background: var(--social-icon-bg); - border: 1px solid rgba(0, 0, 0, 0.05); - transition: all 0.2s ease-in-out; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 3.2rem; } .social-icons a:hover { - color: #000; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - border-color: rgba(0, 0, 0, 0.08); + border-color: transparent; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); + transform: translateY(-3px); +} + +.social-icons a:hover .fa-github { + color: var(--github-color); +} + +.social-icons a:hover .fa-linkedin-in { + color: var(--linkedin-color); +} + +.social-icons a:hover .fa-x-twitter { + color: var(--x-twitter-color); } .post-header { @@ -154,38 +170,42 @@ a { } .post-meta { + align-items: center; color: var(--post-meta-color); - font-size: 0.95rem; display: flex; + font-size: 0.95rem; justify-content: space-between; - align-items: center; } .post-meta small { margin-left: auto; } +.fa-heart { + color: var(--heart-color); +} + #theme-toggle { background: none; border: none; - cursor: pointer; - padding: 0.5rem; color: var(--text-color); + cursor: pointer; font-size: 1.2rem; + padding: 0.5rem; transition: transform 0.3s ease; } @media screen and (max-width: 768px) { header { - flex-direction: column; align-items: flex-start; + flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; } nav ul { - width: 100%; flex-wrap: wrap; gap: 2rem; + width: 100%; } }