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

133 lines
2.2 KiB
CSS
Raw Normal View History

2019-01-31 21:06:54 +00:00
@define-mixin menu {
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
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 {
2019-01-31 21:06:54 +00:00
--shadow-color: color-mod(var(--background) a(80%));
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
2019-01-28 00:11:02 +00:00
margin: 20px 0;
@media (--phone) {
2019-01-31 21:06:54 +00:00
@mixin menu;
2019-01-28 00:11:02 +00:00
top: 50px;
right: 0;
}
&__inner {
display: flex;
2019-01-29 17:59:47 +00:00
flex-wrap: wrap;
2019-01-28 00:11:02 +00:00
list-style: none;
margin: 0;
padding: 0;
2019-01-31 21:06:54 +00:00
&--desktop {
@media (--phone) {
display: none;
}
}
&--mobile {
display: none;
@media (--phone) {
display: block;
}
}
2019-01-28 00:11:02 +00:00
li {
&:not(:last-of-type) {
margin-right: 20px;
2019-01-29 17:59:47 +00:00
margin-bottom: 10px;
flex: 0 0 auto;
2019-01-28 00:11:02 +00:00
}
}
@media (--phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
2019-01-31 21:06:54 +00:00
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@mixin menu;
top: 35px;
left: 0;
&-trigger {
color: var(--accent);
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
2019-01-28 00:11:02 +00:00
&-trigger {
color: var(--accent);
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
}
}
}