hugo-theme-terminal/source/css/header.css

78 lines
1.3 KiB
CSS
Raw Normal View History

2019-01-28 00:11:02 +00:00
.header {
display: flex;
flex-direction: column;
position: relative;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo {
display: flex;
flex: 1;
&:after {
content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
display: block;
width: 100%;
right: 10px;
}
a {
flex: 0 0 auto;
max-width: 100%;
}
}
.menu {
margin: 20px 0;
@media (--phone) {
position: absolute;
background: var(--background);
border: 2px solid;
top: 50px;
right: 0;
margin: 0;
padding: 10px;
z-index: 99;
}
&__inner {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li {
&:not(:last-of-type) {
margin-right: 20px;
}
}
@media (--phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
&-trigger {
color: var(--accent);
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
}
}
}