diff --git a/src/root/colors.css b/src/root/colors.css index c7d9035..d58c3f2 100644 --- a/src/root/colors.css +++ b/src/root/colors.css @@ -3,6 +3,7 @@ --background: #eee; --foreground: #222; --foreground-inactive: #777; + --accent: lightpink; /* Colors */ --color0: #0000ff; diff --git a/src/root/main.css b/src/root/main.css index ce8d3ae..33c1a9b 100644 --- a/src/root/main.css +++ b/src/root/main.css @@ -12,10 +12,21 @@ body { } .title { + position: relative; + + margin-top: 40px; margin-left: 80px; font-size: 1.4em; } +.title a { + transition: color 0.3s; +} + +.title a:hover { + color: lightpink; +} + h1 { font-size: var(--font-size); color: var(--color1); @@ -57,7 +68,7 @@ a.fsText { a.fsText:hover { background-color: var(--background); - color: var(--foreground); + color: var(--accent); transform: scale(1.1, 1); } @@ -137,17 +148,18 @@ a.fsText:hover { .socials i { font-size: 2em; margin-left: 4px; + color: var(--foreground-inactive); + transition: transform 0.3s, color 0.3s; +} +.socials i:hover { + color: var(--accent); + transform: translateY(-20%); } .socials a { - color: var(--foreground-inactive); text-decoration: none; transition: color 0.3s; } -.socials a:hover { - color: var(--foreground); -} - #include planets.css