added lightmode for footer, box shadows for header and paddings for main element
This commit is contained in:
parent
d7093ad4f0
commit
d355176be1
3 changed files with 43 additions and 7 deletions
27
index.css
27
index.css
|
@ -24,10 +24,14 @@ header {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
body.light-mode header {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
header.scrolled {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: white;
|
||||
|
@ -106,7 +110,13 @@ footer {
|
|||
background-color: rgb(27, 31, 34);
|
||||
padding: 48px 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #222222;
|
||||
}
|
||||
body.light-mode footer {
|
||||
background-color: #eeeeee;
|
||||
border-top: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
footer .links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -130,19 +140,34 @@ footer a {
|
|||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover {
|
||||
background-color: rgb(20, 23, 26);
|
||||
}
|
||||
body.light-mode footer a {
|
||||
background-color: rgb(231, 231, 231);
|
||||
color: rgb(29, 29, 29);
|
||||
}
|
||||
body.light-mode footer a:hover {
|
||||
background-color: rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: rgb(216, 216, 216);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
justify-self: center;
|
||||
}
|
||||
body.light-mode footer p {
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
/*
|
||||
MAIN
|
||||
*/
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 32px;
|
||||
margin: 72px auto 0 auto; /* Top margin matches header height */
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue