xmpp.dk/website
1
0
Fork 0
Code Issues Releases Activity

Fix data.coop banner for small screens

Browse source 
Added a mixin for small/large screens to move the banner to the top when being shown on smaller displays.
This commit is contained in:
Jesper Hess 2017-01-29 10:28:23 +01:00
parent 9996a3036f
commit 384da3702e
Signed by: graffen
GPG key ID: 351A89E40D763F0F
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_includes/datacoopbanner.html
View file

@ -1,2 +1 @@
<div class="ribbonbanner shadow">Brought to you by <br />
<a href="https://data.coop">data.coop</a></div>
<div class="ribbonbanner">Brought to you by <a href="https://data.coop">data.coop</a></div>

33
_sass/banners.scss
View file

@ -1,13 +1,36 @@
@mixin large {
@media screen and (min-width: #{$large-breakpoint}) {
@content;
}
}
@mixin small {
@media screen and (max-width: #{$large-breakpoint}) {
@content;
}
}
.ribbonbanner {
padding: 10px 55px;
@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;
transform: rotate(-45deg);
top: 28px;
left: -60px;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
a {
color: $header-heading-color;
text-decoration: underline;