Jesper Hess
384da3702e
Added a mixin for small/large screens to move the banner to the top when being shown on smaller displays.
38 lines
697 B
SCSS
38 lines
697 B
SCSS
@mixin large {
|
|
@media screen and (min-width: #{$large-breakpoint}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin small {
|
|
@media screen and (max-width: #{$large-breakpoint}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
.ribbonbanner {
|
|
@include large {
|
|
padding: 10px 55px;
|
|
transform: rotate(-45deg);
|
|
top: 28px;
|
|
left: -60px;
|
|
width: 250px;
|
|
}
|
|
|
|
@include small {
|
|
padding: 3px 0;
|
|
top: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
text-align: center;
|
|
position: absolute;
|
|
color: $header-heading-color;
|
|
background-color: $header-bg-color;
|
|
box-shadow: 0 0 3px rgba(0,0,0,0.3);
|
|
a {
|
|
color: $header-heading-color;
|
|
text-decoration: underline;
|
|
}
|
|
} |