|
Author
|
zPlus <zplus@peers.community>
2018-07-23 05:43:11
|
|
Committer
|
zPlus <zplus@peers.community>
2018-07-23 05:43:11
|
|
Commit
|
f7e041c
(patch)
|
|
Tree
|
28e6f62
|
|
Parent(s)
|
|
Add CSS @media query to change header layout on smaller screens.
commits diff:
022590a..f7e041c
2 files changed,
31 insertions,
19 deletions
—
download
Diffstat
Diff options
+19/-12
M freepost/static/stylus/freepost.styl
|
40
|
40
|
|
|
|
41
|
41
|
|
/* Page header */
|
|
42
|
42
|
|
> .header
|
|
43
|
|
- |
display grid
|
|
44
|
|
- |
grid-template-columns max-content auto
|
|
45
|
|
- |
padding 1rem 0
|
|
46
|
|
- |
text-align center
|
|
|
43
|
+ |
@media screen and (max-width: 600px)
|
|
|
44
|
+ |
display block
|
|
|
45
|
+ |
text-align center
|
|
|
46
|
+ |
|
|
|
47
|
+ |
> .title-large
|
|
|
48
|
+ |
display none
|
|
|
49
|
+ |
|
|
|
50
|
+ |
> .title-small
|
|
|
51
|
+ |
padding-bottom 1rem
|
|
|
52
|
+ |
|
|
|
53
|
+ |
@media screen and (min-width: 600px)
|
|
|
54
|
+ |
display grid
|
|
|
55
|
+ |
grid-template-columns max-content auto
|
|
|
56
|
+ |
text-align center
|
|
|
57
|
+ |
|
|
|
58
|
+ |
> .title-small
|
|
|
59
|
+ |
display none
|
|
|
60
|
+ |
|
|
|
61
|
+ |
padding 1rem 0
|
|
47
|
62
|
|
|
|
48
|
63
|
|
/* Menu under the logo */
|
|
49
|
64
|
|
.menu
|
|
80
|
95
|
|
padding .5em .5em
|
|
81
|
96
|
|
text-decoration none
|
|
82
|
97
|
|
|
|
83
|
|
- |
.submenu
|
|
84
|
|
- |
display flex
|
|
85
|
|
- |
flex-direction row
|
|
86
|
|
- |
flex-wrap wrap
|
|
87
|
|
- |
justify-content flex-start
|
|
88
|
|
- |
align-content flex-start
|
|
89
|
|
- |
align-items flex-start
|
|
90
|
|
- |
|
|
91
|
98
|
|
> .content
|
|
92
|
99
|
|
padding 1em 0
|
|
93
|
100
|
|
line-height 1.5em
|
+12/-7
M freepost/templates/layout.html
|
15
|
15
|
|
<div class="container">
|
|
16
|
16
|
|
|
|
17
|
17
|
|
<div class="header">
|
|
18
|
|
- |
<div>
|
|
|
18
|
+ |
<div class="title-large">
|
|
19
|
19
|
|
{% if topic %}
|
|
20
|
20
|
|
<a href="{{ url ('topic', name=topic) }}" class="flex-item logo">
|
|
21
|
21
|
|
topic / {{ topic }}
|
|
31
|
31
|
|
</a>
|
|
32
|
32
|
|
</div>
|
|
33
|
33
|
|
|
|
34
|
|
- |
<div>
|
|
35
|
|
- |
<div class="menu">
|
|
36
|
|
- |
<a href="{{ url ('topic', name=topic) if topic else url ('homepage') }}" class="flex-item {{ 'active_page' if active_page == 'hot' }}">
|
|
37
|
|
- |
Hot
|
|
|
34
|
+ |
<div class="title-small">
|
|
|
35
|
+ |
{% if topic %}
|
|
|
36
|
+ |
<a href="{{ url ('topic', name=topic) }}" class="flex-item logo">
|
|
|
37
|
+ |
topic / {{ topic }}
|
|
38
|
38
|
|
</a>
|
|
39
|
|
- |
<a href="{{ url ('topic', name=topic) if topic else url ('homepage') }}?sort=new" class="flex-item {{ 'active_page' if active_page == 'new' }}">
|
|
40
|
|
- |
New
|
|
|
39
|
+ |
{% else %}
|
|
|
40
|
+ |
<a href="{{ url ('homepage') }}" class="flex-item logo">
|
|
|
41
|
+ |
free
|
|
|
42
|
+ |
<img alt="🐵 " title="freepost" src="/images/freepost.png" class="monkey" />
|
|
|
43
|
+ |
post
|
|
41
|
44
|
|
</a>
|
|
|
45
|
+ |
{% endif %}
|
|
|
46
|
+ |
</div>
|
|
42
|
47
|
|
|
|
43
|
48
|
|
{% if user %}
|
|
44
|
49
|
|
<a href="{{ url ('submit') }}{{ '?topic=' ~ topic if topic }}" class="flex-item {{ 'active_page' if active_page == 'submit' }}">
|