You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
2.4 KiB

2 years ago
/** {
2 years ago
box-sizing: border-box;
2 years ago
}
2 years ago
*/
2 years ago
2 years ago
body {
font-family: Arial;
margin: 0;
2 years ago
}
2 years ago
a:link { color: black; }
a:visited { color: black; }
2 years ago
/* HEADER --------------------------------------------*/
2 years ago
.header .title {
2 years ago
background-image: linear-gradient(to right, #ebebeb, cadetblue);
text-align: center;
padding: 60px;
color: #ebebeb;
2 years ago
}
2 years ago
.nav-left a:link { color: white; }
.nav-left a:visited { color: white; }
2 years ago
.nav-bar a:hover {
color: #555;
background-color: #ebebeb;
2 years ago
/*border: 10px solid #ebebeb;
2 years ago
border-radius: 25px;
2 years ago
font-size: 20px;*/
2 years ago
}
2 years ago
.nav-bar {
display: flex;
justify-content: space-between;
padding: 5px;
align-items: baseline;
background-color: #555;
2 years ago
position: sticky;
top: 0;
2 years ago
}
2 years ago
.nav-bar a {
padding: 5px 20px;
2 years ago
margin: 0 1px 0 1px;
2 years ago
text-align: center;
text-decoration: none;
2 years ago
border-radius: 10px;
2 years ago
transition:
2 years ago
/*border 300ms,
font-size 300ms,*/
2 years ago
background-color 300ms,
color 300ms;
2 years ago
}
2 years ago
.nav-left {
display: flex;
justify-content: flex-start;
align-items: baseline;
2 years ago
}
2 years ago
.nav-right {
display: flex;
justify-content: flex-end;
align-items: baseline;
2 years ago
}
.dropdown-menu {
2 years ago
color: white;
text-align: center;
width: 40px;
cursor: pointer;
}
#dd-menu {
position: absolute;
opacity: 0;
height: 0;
cursor: pointer;
}
.dropdown-menu-content {
display: none;
position: absolute;
right: 0;
2 years ago
height: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
2 years ago
transition: height 300ms;
}
.dropdown-menu-content a {
padding: 12px 16;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu-content a:hover {
background-color: #f1f1f1;
}
2 years ago
#dd-menu:checked + .dropdown-menu-content {
display: block;
2 years ago
height: 60px;
}
2 years ago
/* MAIN CONTENT --------------------------------------------*/
2 years ago
2 years ago
.main-content {
display: flex;
2 years ago
flex-direction: row;
}
2 years ago
.side {
flex: 20%;
background-color: #f1f1f1;
padding: 20px;
2 years ago
}
2 years ago
.main {
flex: 80%;
background-color: #ebebeb;
padding: 20px;
2 years ago
}
2 years ago
article {
border-bottom: 1px solid #555;
2 years ago
}
2 years ago
.title-link {
text-decoration: none;
color: black;
2 years ago
}
2 years ago
2 years ago
/* RESPONSIVE -----------------------------------------------------*/
2 years ago
2 years ago
@media screen and (max-width: 700px) {
.main-content, .nav-bar {
flex-direction: column;
}
2 years ago
}