github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-11 21:16:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
e605860e89
framework/less/forum/hero.less

44 lines
672 B
Plaintext
Raw Normal View History

Responsive design baby! 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
2015-03-03 18:00:52 +08:00
.hero {
Fix bottom border on header
2015-03-05 09:34:10 +08:00
margin-top: -1px;
Responsive design baby! 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
2015-03-03 18:00:52 +08:00
background: @fl-body-hero-bg;
text-align: center;
padding: 20px 0;
Skin colour tweaks
2015-05-02 06:59:43 +08:00
&, & a {
Responsive design baby! 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
2015-03-03 18:00:52 +08:00
color: @fl-body-hero-color;
}
Skin colour tweaks
2015-05-02 06:59:43 +08:00
& .close {
float: right;
margin-top: -10px;
color: @fl-body-hero-muted-color;
}
Implement user hover cards and basic profile pages
2015-03-12 08:10:03 +08:00
& h2 {
margin: 0;
font-size: 16px;
font-weight: normal;
line-height: 1.5em;
}
Skin colour tweaks
2015-05-02 06:59:43 +08:00
& .subtitle {
margin: 8px 0 0;
line-height: 1.5em;
color: @fl-body-hero-muted-color;
Responsive design baby! 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
2015-03-03 18:00:52 +08:00
}
}
@media @phone {
.hero {
& .close {
margin-right: -10px;
}
}
}
@media @tablet, @desktop, @desktop-hd {
.hero {
Skin colour tweaks
2015-05-02 06:59:43 +08:00
padding: 40px 0 30px;
font-size: 15px;
Responsive design baby! 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
2015-03-03 18:00:52 +08:00
& h2 {
font-size: 22px;
}
}
}
Reference in New Issue Copy Permalink