From 4ae255e3c3d4227ae2b69f0c1ac82f718e999de4 Mon Sep 17 00:00:00 2001 From: britea Date: Wed, 31 Oct 2018 16:03:29 +0000 Subject: [PATCH] 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 --- site/_sass/_header.scss | 120 ++++++++++++++++++++++++++++++++++++++++ site/_sass/main.scss | 4 +- 2 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 site/_sass/_header.scss 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";