diff --git a/site/_sass/_header.scss b/site/_sass/_header.scss new file mode 100644 index 0000000..044b57b --- /dev/null +++ b/site/_sass/_header.scss @@ -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; + } +} \ No newline at end of file diff --git a/site/_sass/main.scss b/site/_sass/main.scss index ee4ca4e..31ee9ee 100644 --- a/site/_sass/main.scss +++ b/site/_sass/main.scss @@ -4,4 +4,6 @@ @import "syntax-highlighting"; -@import "footer"; \ No newline at end of file +@import "footer"; + +@import "header";