Improve header layout
This commit is contained in:
parent
72b82426c0
commit
4306889349
1 changed files with 30 additions and 15 deletions
|
@ -33,19 +33,25 @@ nav ul {
|
||||||
nav li {
|
nav li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 1vw;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav span {
|
nav li:first-child {
|
||||||
padding: 2vw;
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav span, nav a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
color: black;
|
color: black;
|
||||||
padding: 2vw;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover, nav a:focus {
|
nav a:hover, nav a:focus {
|
||||||
|
@ -64,6 +70,10 @@ that have a width less or equal than 500px*/
|
||||||
nav a {
|
nav a {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alignLeft, .alignRight {
|
||||||
|
border-top: 1px solid #000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 750px) {
|
@media only screen and (min-width: 750px) {
|
||||||
|
@ -75,8 +85,21 @@ that have a width less or equal than 500px*/
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alignLeft {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alignRight {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
@ -90,14 +113,6 @@ input[type=text] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alignLeft {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alignRight {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accentuated {
|
.accentuated {
|
||||||
color: #66351d;
|
color: #66351d;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue