This repository has been archived by the owner on Jun 4, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 334
/
_responsive.styl
202 lines (199 loc) · 6.69 KB
/
_responsive.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
/* ------------------------------------------------------------------------- *
* Style Fix : > 960px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 960px)
.nav-container-inner
display: block !important
/* ------------------------------------------------------------------------- *
* Toggle Sidebar s1 : 959px > 480px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 959px)
#header
padding-bottom: sidebar-toggle-width
.nav-container-inner
display: block !important
#main-nav
.main-nav-more > ul
.main-nav-list-child
position: relative
padding: 0px
.search-form-input
&:focus
width: 100px
.main-body
margin-top: - sidebar-toggle-width
.main-body-inner
if sidebar is right
padding-right: sidebar-toggle-width
background-position: -340px 0 !important
else
padding-left: sidebar-toggle-width
background-position: -290px 0 !important
#sidebar
clearfix()
if sidebar is right
right: 0
background: url(images/s-left.png) repeat-y right 0
else
left: 0
background: url(images/s-left.png) repeat-y left 0
margin: 0
height: 100%
position: absolute
overflow: hidden
width: sidebar-toggle-width
transition: width 0.2s ease-in 0.2s
.sidebar-toggle
display: block
padding: 6px
color: rgba(255,255,255,0.7)
text-align: center
height: sidebar-toggle-width
background: color-theme
box-sizing: border-box
.toggle
line-height: 38px
font-size: 38px
width: 38px
font-family: fontawesome
&:before
if sidebar is right
content: '\f100'
else
content: '\f101'
.sidebar-top
padding: 10px 30px
background: none
border-bottom: 1px solid color-border
p, a, i
color: #666
#article-nav, .widgets-container, .sidebar-top
opacity: 0
transition: opacity 0.2s ease-in
&.expend
width: sidebar-width
overflow-y: auto
z-index: 2
transition: width 0.2s ease-in
.toggle
&:before
content: '\f100'
#article-nav, .widgets-container, .sidebar-top
opacity: 1
transition: opacity 0.2s ease-in 0.2s
.sidebar-top
display: block
.social-links
.social-tooltip
&:after,
&:before
display: none
#main
.main-body-header,
.archive-year-wrap
padding: 12px 30px
/* ------------------------------------------------------------------------- *
* Mobile (Low Res) : 479px > 0 (320px)
/* ------------------------------------------------------------------------- */
@media only screen and (max-width: 479px)
.container
padding: 0px
#header
.logo-wrap
width: 100%
display: block
text-align: center
.logo
margin: 0 auto
.subtitle-wrap
display: block
width: 100%
margin-left: 0px
.nav-container
padding: 0px
#main-nav-toggle
float: none
display: block
.nav-container-inner
display: none
#main-nav
display: block
float: none
.main-nav-list-item,
.main-nav-list-link
clearfix()
display: block
float: none
box-shadow: none
box-sizing: border-box
font-size: font-size
.main-nav-list-item
&.top-level-menu
& > a
position: relative
&:after
display: none
&:hover > a
background: none
color: color-nav-foreground
& > a:hover
color: #fff
background: color-nav-hover-background
.main-nav-list-child
display: block !important
position: relative
width: 100%
padding: 0px
background: none
.main-nav-list-link
padding-left: 30px
a
border-bottom: 1px solid rgba(255,255,255,0.06)
#sub-nav
float: none
.search-form
&:before
font-size: font-size
.search-form-input
font-size: font-size
width: 90%
.main-body-inner
padding: 0px
background: none
#main
float: none
.main-body-header,
.archive-year-wrap
padding: 13px 15px 12px;
.main-body-content
.article-single,
#comments
padding: 15px
#page-nav
padding-right: 15px
box-sizing: border-box
.article-row
padding: 0 0 0 15px
border: none
.article-summary
width: 100%
.article-summary-inner
margin: 15px 15px 15px 0
#sidebar
float: none
margin: 0px
width: 100%
background: color-sidebar-background
.sidebar-top,
.widget-wrap
padding: 15px
.widgets-container
padding-bottom: 15px
#footer
margin-top: 0px
#back-to-top
box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05);
.logo
margin: 0 auto
.credit
text-align: center