|
40
|
40
|
|
|
|
41
|
41
|
|
/* Page header */
|
|
42
|
42
|
|
> .header
|
|
43
|
|
- |
@media screen and (max-width: 600px)
|
|
44
|
|
- |
display block
|
|
45
|
|
- |
text-align center
|
|
|
43
|
+ |
@media only screen and (max-width: 800px)
|
|
|
44
|
+ |
display grid
|
|
|
45
|
+ |
grid-template-columns auto
|
|
|
46
|
+ |
text-align center
|
|
46
|
47
|
|
|
|
47
|
48
|
|
> .title-large
|
|
48
|
49
|
|
display none
|
|
49
|
50
|
|
|
|
50
|
51
|
|
> .title-small
|
|
|
52
|
+ |
display grid
|
|
|
53
|
+ |
grid-template-columns max-content auto
|
|
|
54
|
+ |
text-align center
|
|
|
55
|
+ |
|
|
51
|
56
|
|
padding-bottom 1rem
|
|
52
|
57
|
|
|
|
53
|
|
- |
@media screen and (min-width: 600px)
|
|
|
58
|
+ |
@media only screen and (min-width: 800px)
|
|
54
|
59
|
|
display grid
|
|
55
|
60
|
|
grid-template-columns max-content auto
|
|
56
|
61
|
|
text-align center
|
|
61
|
66
|
|
padding 1rem 0
|
|
62
|
67
|
|
|
|
63
|
68
|
|
/* Menu under the logo */
|
|
64
|
|
- |
.menu
|
|
65
|
|
- |
border-bottom 1px solid transparent
|
|
66
|
|
- |
display flex
|
|
67
|
|
- |
flex-direction row
|
|
68
|
|
- |
flex-wrap wrap
|
|
69
|
|
- |
justify-content flex-start
|
|
70
|
|
- |
align-content flex-start
|
|
71
|
|
- |
align-items flex-end
|
|
|
69
|
+ |
@media only screen and (max-width: 800px)
|
|
|
70
|
+ |
.burger-icon
|
|
|
71
|
+ |
display inline-block
|
|
72
|
72
|
|
|
|
73
|
|
- |
> .flex-item
|
|
74
|
|
- |
flex 0 1 auto
|
|
75
|
|
- |
align-self auto
|
|
76
|
|
- |
order 0
|
|
|
73
|
+ |
.menu
|
|
|
74
|
+ |
border-bottom 2px dashed #aaa
|
|
|
75
|
+ |
display none
|
|
|
76
|
+ |
padding-bottom 1rem
|
|
77
|
77
|
|
|
|
78
|
|
- |
border 0
|
|
79
|
|
- |
border-bottom 1px solid #ccc
|
|
80
|
|
- |
color #000
|
|
81
|
|
- |
margin 0
|
|
82
|
|
- |
padding 0 .5rem .5rem .5rem
|
|
83
|
|
- |
|
|
84
|
|
- |
/* Highlight menu item of the current active page (Hot/New/Submit/...) */
|
|
85
|
|
- |
> .active_page
|
|
86
|
|
- |
border-bottom 3px solid #000
|
|
|
78
|
+ |
/* This class is toggled when the burger icon is clicked */
|
|
|
79
|
+ |
&.visible
|
|
|
80
|
+ |
display block
|
|
|
81
|
+ |
|
|
|
82
|
+ |
/* Every menu item */
|
|
|
83
|
+ |
> a
|
|
|
84
|
+ |
border 0
|
|
|
85
|
+ |
color #000
|
|
|
86
|
+ |
display block
|
|
|
87
|
+ |
margin 0
|
|
|
88
|
+ |
padding .5rem
|
|
|
89
|
+ |
text-align left
|
|
|
90
|
+ |
text-decoration none
|
|
|
91
|
+ |
|
|
|
92
|
+ |
/* Highlight menu item of the current active page (Hot/New/Submit/...) */
|
|
|
93
|
+ |
> .active_page
|
|
|
94
|
+ |
background-color #f8f8f8
|
|
|
95
|
+ |
border-right 4px solid black
|
|
|
96
|
+ |
font-weight bold
|
|
|
97
|
+ |
|
|
|
98
|
+ |
/* Highlight username if there are unread messages */
|
|
|
99
|
+ |
.new_messages
|
|
|
100
|
+ |
background-color rgb(255, 175, 50)
|
|
|
101
|
+ |
border-radius 4px
|
|
|
102
|
+ |
color #fff
|
|
|
103
|
+ |
font-weight bold
|
|
|
104
|
+ |
|
|
|
105
|
+ |
@media only screen and (min-width: 800px)
|
|
|
106
|
+ |
.burger-icon
|
|
|
107
|
+ |
display none
|
|
87
|
108
|
|
|
|
88
|
|
- |
/* Highlight username if there are unread messages */
|
|
89
|
|
- |
.new_messages
|
|
90
|
|
- |
background-color rgb(255, 175, 50)
|
|
91
|
|
- |
border 0
|
|
92
|
|
- |
border-radius 4px
|
|
93
|
|
- |
color #fff
|
|
94
|
|
- |
font-weight bold
|
|
95
|
|
- |
margin 0
|
|
96
|
|
- |
padding .5em .5em
|
|
97
|
|
- |
text-decoration none
|
|
98
|
|
- |
|
|
|
109
|
+ |
.menu
|
|
|
110
|
+ |
border-bottom 1px solid transparent
|
|
|
111
|
+ |
display flex
|
|
|
112
|
+ |
flex-direction row
|
|
|
113
|
+ |
flex-wrap wrap
|
|
|
114
|
+ |
justify-content flex-start
|
|
|
115
|
+ |
align-content flex-start
|
|
|
116
|
+ |
align-items flex-end
|
|
|
117
|
+ |
|
|
|
118
|
+ |
> .flex-item
|
|
|
119
|
+ |
flex 0 1 auto
|
|
|
120
|
+ |
align-self auto
|
|
|
121
|
+ |
order 0
|
|
|
122
|
+ |
|
|
|
123
|
+ |
border 0
|
|
|
124
|
+ |
border-bottom 1px solid #ccc
|
|
|
125
|
+ |
color #000
|
|
|
126
|
+ |
margin 0
|
|
|
127
|
+ |
padding 0 .5rem .5rem .5rem
|
|
|
128
|
+ |
|
|
|
129
|
+ |
/* Highlight menu item of the current active page (Hot/New/Submit/...) */
|
|
|
130
|
+ |
> .active_page
|
|
|
131
|
+ |
border-bottom 3px solid #000
|
|
|
132
|
+ |
|
|
|
133
|
+ |
/* Highlight username if there are unread messages */
|
|
|
134
|
+ |
.new_messages
|
|
|
135
|
+ |
background-color rgb(255, 175, 50)
|
|
|
136
|
+ |
border 0
|
|
|
137
|
+ |
border-radius 4px
|
|
|
138
|
+ |
color #fff
|
|
|
139
|
+ |
font-weight bold
|
|
|
140
|
+ |
margin 0
|
|
|
141
|
+ |
padding .5em .5em
|
|
|
142
|
+ |
text-decoration none
|
|
|
143
|
+ |
|
|
99
|
144
|
|
> .content
|
|
100
|
145
|
|
padding 1em 0
|
|
101
|
146
|
|
line-height 1.5em
|
|
280
|
325
|
|
|
|
281
|
326
|
|
/* Login page */
|
|
282
|
327
|
|
> .login
|
|
283
|
|
- |
@media screen and (min-width: 1024px)
|
|
|
328
|
+ |
@media only screen and (min-width: 1024px)
|
|
284
|
329
|
|
margin auto
|
|
285
|
330
|
|
max-width 40%
|
|
286
|
331
|
|
|
|
326
|
371
|
|
float left
|
|
327
|
372
|
|
margin 0 2em 0 0
|
|
328
|
373
|
|
|
|
329
|
|
- |
@media screen and (max-width: 600px)
|
|
|
374
|
+ |
@media only screen and (max-width: 1024px)
|
|
330
|
375
|
|
float none
|
|
331
|
376
|
|
margin 1rem 0
|