maggicl/theshell.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

css team: review header

Browse source 
git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@29 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
britea 2018-11-05 09:52:30 +00:00
parent e6179c1569
commit 9064797f39
2 changed files with 43 additions and 38 deletions
site
_includes
header.html
_sass
_header.scss

41
site/_includes/header.html
View file

@ -1,30 +1,29 @@
<header>
<section class="desktop grow">
<h1 class="title">{{ site.title }}</h1>
</section>
<div class="menuDesktop">
<span class="boxTitle">
<h1 class="title">{{ site.title }}</h1>
</span>
<span class="boxItem">
<a href="">FILE SYSTEM</a>
<a href="">BASIC</a>
<a href="">INTERMEDIATE</a>
<a href="">ADVANCED</a>
<a href="">SCRIPTING</a>
</span>
</div>
<section class="menu desktop">
<a href="">FILE SYSTEM</a>
<a href="">BASIC</a>
<a href="">INTERMEDIATE</a>
<a href="">ADVANCED</a>
<a href="">SCRIPTING</a>
</section>
<span id="menuTriggerMobile" onclick="triggerMenu(this)">
<div class="strip1"></div>
<div class="strip2"></div>
<div class="strip3"></div>
</span>
<span id="menuTriggerMobile" onclick="triggerMenu(this)">
<div class="strip1"></div>
<div class="strip2"></div>
<div class="strip3"></div>
</span>
<div id="menuMobile" style="margin-left:-100%;">
<a class="menuItem selected" href="">FILE SYSTEM</a>
<div id="menuMobile" style="margin-left:-100%;">
<a class="menuItem" href="">FILE SYSTEM</a>
<a class="menuItem" href="">BASIC</a>
<a class="menuItem" href="">INTERMEDIATE</a>
<a class="menuItem" href="">ADVANCED</a>
<a class="menuItem" href="">SCRIPTING</a>
</div>
</header>
</div>
<!-- <nav class="navbar">
<div class="container">
<ul class="navbar-list">

40
site/_sass/_header.scss
View file

@ -1,22 +1,9 @@
/*------- GLOBAL ------*/
header {
color: white;
background-color: #000;
width: 100%;
display: flex;
flex-direction: row;
section.grow {
flex-grow: 1;
}
background-color: #333;
}
header .title {
padding: 1em;
text-transform: uppercase;
}
/*------- MENU ------*/
#menuMobile{
@ -27,7 +14,26 @@ header .title {
display:none;
}
header .menu.desktop {
.boxTitle{
background: #000;
width: 30%;
}
.boxItem{
width: 69%;
}
.boxItem a{
font-family: "Lato", sans-serif;
display: inline-block;
color: #6a6;
font-weight: bold;
text-decoration: none;
font-size: 2.3vh;
padding: 0 5px;
}
/*header .menu.desktop {
background: #333;
display: flex;
justify-content: center;
@ -49,11 +55,11 @@ header .menu.desktop {
a:visited {
color: #6a6;
}
}
}*/
@media screen and (max-width: 800px) {
header .desktop, header .main.desktop {
.menuDesktop {
display: none;
}