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
25 lines
445 B
Plaintext
25 lines
445 B
Plaintext
.avatar-size(@size) {
|
|
width: @size;
|
|
height: @size;
|
|
border-radius: @size / 2;
|
|
font-size: @size / 2;
|
|
line-height: @size;
|
|
}
|
|
.avatar {
|
|
display: inline-block;
|
|
color: @fl-body-bg;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
background-color: @fl-body-control-bg;
|
|
.avatar-size(48px);
|
|
|
|
& img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
vertical-align: top;
|
|
}
|
|
}
|