Hey, I'm currently playing around with Flarum and tried styling it a bit. But now I'm a bit stuck.
Here is what I'm trying to achieve:
And here how it currently looks:
So I can achieve the first look by setting the height of #app to 100%. Sadly this won't work since it kills the scrolling behavior of the scrubber.
Does anybody knows a workaround for this?
Here's my current css:
html{
height: 100%
}
body{
background-image: linear-gradient(to bottom left, #009F50, #0B8700);
background-attachment: fixed;
height: 100%;
}
.scrolled.App:before {
-webkit-box-shadow: none;
box-shadow: none;
}
.App:before {
background: none;
}
.App-content {
border-top: none;
background: #fff;
border-radius: 55px;
margin-left: 20px;
margin-right: 20px;
box-shadow: 0px 0 20px rgba(0,0,0,0.5);
min-height: 100%;
height:auto !important;
}
.Header-title a{
color: #fff !important;
}
.Button{
color: #fff;
}
@media (min-width: 768px){
.affix .App-header {
position: absolute;
}}
.Hero{
border-top-left-radius: 55px;
border-top-right-radius: 55px;
}
```