phantasma/app/static/css/partials/_menu.scss
2021-11-24 10:03:30 +01:00

79 lines
1.4 KiB
SCSS
Executable file

.topnav {
background-color: #333e;
position: relative;
height: 68px;
padding: var(--spacing-2);
box-sizing: border-box;
z-index: 110;
.item-title {
position: absolute;
width: 100%;
text-align: center;
h1 {
font-size: inherit;
margin: 0;
padding: 0;
}
}
@media screen and (max-width: 799px) {
padding-top: calc(var(--spacing) * 1.6);
height: 98px;
.item-title {
display: none
}
}
@media screen and (min-width: 800px) {
display: flex;
align-items: flex-end;
}
nav {
display: block;
text-align: right;
@media screen and (max-width: 799px) {
text-align: center;
width: 100%;
margin-top: var(--spacing);
}
@media screen and (min-width: 800px) {
margin-left: auto;
}
}
a {
color: var(--color-link);
text-decoration: none;
font-size: 17px;
margin-left: var(--spacing);
font-weight: bold;
&.title {
font-size: 34px;
font-weight: bold;
font-family: "wrong font";
color: #ddd;
}
@media screen and (max-width: 799px) {
&.title {
display: block;
text-align: center;
}
div {
display: inline-block;
}
}
}
}
.title-text {
@media screen and (min-width: 800px) {
font-weight: 700;
padding-bottom: calc(var(--spacing) / 2);
}
}