mirror of
https://github.com/flarum/framework.git
synced 2025-02-05 02:23:23 +08:00
1d6616a419
Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
43 lines
589 B
Plaintext
43 lines
589 B
Plaintext
.hero {
|
|
background: @fl-body-hero-bg;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
|
|
&, & a, & .close {
|
|
color: @fl-body-hero-color;
|
|
}
|
|
& a, & .close {
|
|
opacity: 0.5;
|
|
}
|
|
& .close {
|
|
float: right;
|
|
margin-top: -10px;
|
|
}
|
|
& h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: 1.5em;
|
|
}
|
|
& p {
|
|
margin: 5px 0 0;
|
|
}
|
|
}
|
|
@media @phone {
|
|
.hero {
|
|
& .close {
|
|
margin-right: -10px;
|
|
}
|
|
}
|
|
}
|
|
@media @tablet, @desktop, @desktop-hd {
|
|
.hero {
|
|
padding: 30px 0;
|
|
font-size: 14px;
|
|
|
|
& h2 {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|