css-team: re: work on header
git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@18 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
parent
31cb2ec69d
commit
4ae255e3c3
120
site/_sass/_header.scss
Normal file
120
site/_sass/_header.scss
Normal file
|
@ -0,0 +1,120 @@
|
||||||
|
/*------- GLOBAL ------*/
|
||||||
|
|
||||||
|
*{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
z-index:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-size:16px;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
display:inline-block;
|
||||||
|
text-decoration:none;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
background-color:#000;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------ HEADER -----*/
|
||||||
|
|
||||||
|
.title{
|
||||||
|
color:green;
|
||||||
|
padding: 20px 55px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------- MENU ------*/
|
||||||
|
|
||||||
|
#menuMobile{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuTrigger{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuDesktop{
|
||||||
|
float:right;
|
||||||
|
text-align:right;
|
||||||
|
padding:20px;
|
||||||
|
font-size:2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem{
|
||||||
|
padding:10px 20px;
|
||||||
|
background-color:#000;
|
||||||
|
transition:500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem:hover{
|
||||||
|
background-color:#d2cfcf;
|
||||||
|
color:#000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuDesktop .menuItem:hover{
|
||||||
|
transform:translateY(10px);
|
||||||
|
-webkit-transform:translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
|
||||||
|
#menuDesktop{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuTriggerMobile{
|
||||||
|
cursor:pointer;
|
||||||
|
padding: 10px 20px;
|
||||||
|
transition:1000ms;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuMobile{
|
||||||
|
z-index:1;
|
||||||
|
display:block;
|
||||||
|
height:100%;
|
||||||
|
position:fixed;
|
||||||
|
transition:1000ms;
|
||||||
|
background-color:#000;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strip1, .strip2, .strip3 {
|
||||||
|
width:35px;
|
||||||
|
height:5px;
|
||||||
|
background-color:#4d0000;
|
||||||
|
transition:400ms;
|
||||||
|
margin:6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross .strip1 {
|
||||||
|
-webkit-transform:rotate(-45deg) translate(-9px, 6px);
|
||||||
|
transform:rotate(-45deg) translate(-9px, 6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross .strip2 {
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cross .strip3 {
|
||||||
|
-webkit-transform:rotate(45deg) translate(-8px, -8px);
|
||||||
|
transform:rotate(45deg) translate(-8px, -8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem{
|
||||||
|
padding:40px 20px;
|
||||||
|
width:calc(100% - 40px);
|
||||||
|
transition:500ms;
|
||||||
|
font-size:4.5vh;
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,4 +4,6 @@
|
||||||
|
|
||||||
@import "syntax-highlighting";
|
@import "syntax-highlighting";
|
||||||
|
|
||||||
@import "footer";
|
@import "footer";
|
||||||
|
|
||||||
|
@import "header";
|
||||||
|
|
Loading…
Reference in New Issue
Block a user