Changed footer buttons to feel more responsive
This commit is contained in:
parent
b24c8555a2
commit
95e7f8f333
1 changed files with 9 additions and 5 deletions
12
index.css
12
index.css
|
@ -127,7 +127,7 @@ footer .links {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
footer a {
|
footer a {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
@ -136,7 +136,7 @@ footer a {
|
||||||
|
|
||||||
background-color: rgb(39, 44, 48);
|
background-color: rgb(39, 44, 48);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -147,9 +147,13 @@ footer a:hover {
|
||||||
body.light-mode footer a {
|
body.light-mode footer a {
|
||||||
background-color: rgb(231, 231, 231);
|
background-color: rgb(231, 231, 231);
|
||||||
color: rgb(29, 29, 29);
|
color: rgb(29, 29, 29);
|
||||||
|
transition: color 0s;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
}
|
}
|
||||||
body.light-mode footer a:hover {
|
body.light-mode footer a:hover {
|
||||||
background-color: rgb(192, 192, 192);
|
color: white;
|
||||||
|
background-color: #5865f2;
|
||||||
|
transform: translateY(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p {
|
footer p {
|
||||||
|
@ -168,7 +172,7 @@ body.light-mode footer p {
|
||||||
main {
|
main {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
padding-top: 32px;
|
padding-top: 32px;
|
||||||
margin: 72px auto 0 auto; /* Top margin matches header height */
|
margin: 72px auto 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue