Skip to content

Commit 4f90e2e

Browse files
yyx990803yyx990803
committed
responsive css
1 parent 23990de commit 4f90e2e

File tree

4 files changed

+133
-88
lines changed

4 files changed

+133
-88
lines changed

‎themes/vue/layout/index.ejs

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
<div class="sidebar">
2+
<ul class="main-menu">
3+
<%- partial('partials/main_menu', { context: 'sidebar' }) %>
4+
</ul>
5+
</div>
6+
17
<div id="hero">
28
<div class="inner">
39
<div class="left">
410
<img class="hero-logo" src="/images/logo.png">
511
</div><div class="right">
612
<h1>
7-
Make Web Development<br>
8-
Fun Again.
13+
The Progressive<br>JavaScript Framework
914
</h1>
1015
<p>
1116
<a class="button" href="/guide/">GET STARTED</a>
@@ -27,13 +32,13 @@
2732
</div>
2833

2934
<div class="point">
30-
<h2>Approachable</h2>
31-
<p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
35+
<h2>Versatile</h2>
36+
<p>Lean, minimal core with a feature-rich, incrementally adoptable ecosystem.</p>
3237
</div>
3338

3439
<div class="point">
35-
<h2>Progressive</h2>
36-
<p>Lean, minimal core with a feature-rich, incrementally adoptable ecosystem.</p>
40+
<h2>Approachable</h2>
41+
<p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
3742
</div>
3843
</div>
3944
</div>
@@ -51,3 +56,6 @@
5156
Released under the <a href="https://opensource.org/licenses/MIT" href="_blank">MIT License</a><br>
5257
Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You
5358
</div>
59+
60+
<script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
61+
<script src="/js/common.js"></script>

‎themes/vue/source/css/_sidebar.styl

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import "_settings"
2+
3+
.sidebar
4+
position absolute
5+
z-index 10
6+
top 0
7+
left 60px
8+
bottom 0
9+
padding 2.2em 0
10+
width 260px
11+
margin-right 20px
12+
overflow-x hidden
13+
overflow-y auto
14+
-webkit-overflow-scrolling touch
15+
-ms-overflow-style none
16+
h2
17+
margin-top .2em
18+
ul
19+
list-style-type none
20+
margin 0
21+
line-height 1.8em
22+
padding-left 1em
23+
.version-select
24+
vertical-align middle
25+
margin-left 5px
26+
.menu-root
27+
padding-left 0
28+
.menu-sub
29+
font-size .85em
30+
.sidebar-link
31+
color $light
32+
&.current
33+
font-weight 600
34+
color $green
35+
&.new
36+
&:after
37+
content "NEW"
38+
display inline-block
39+
font-size 10px
40+
font-weight 600
41+
color #fff
42+
background-color $green
43+
line-height 14px
44+
padding 0 4px
45+
border-radius 3px
46+
margin-left 5px
47+
vertical-align middle
48+
position relative
49+
top -1px
50+
&:hover
51+
border-bottom 2px solid $green
52+
.section-link
53+
&.active
54+
font-weight bold
55+
color $green
56+
.main-menu
57+
margin-bottom 20px
58+
display none
59+
padding-left 0
60+
61+
@media screen and (max-width: 720px)
62+
.sidebar
63+
position fixed
64+
z-index 8
65+
background-color #f9f9f9
66+
height 100%
67+
top 0
68+
left 0
69+
padding 60px 30px 20px
70+
box-shadow 0 0 10px rgba(0,0,0,.2)
71+
box-sizing border-box
72+
transition all .4s cubic-bezier(0.4, 0, 0, 1)
73+
-webkit-transform translate(-280px, 0)
74+
transform translate(-280px, 0)
75+
.search-query
76+
width 200px
77+
margin-bottom 10px
78+
.main-menu
79+
display block
80+
&.open
81+
-webkit-transform translate(0, 0)
82+
transform translate(0, 0)

‎themes/vue/source/css/index.styl

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "_common"
22
@import "_header"
3+
@import "_search"
4+
@import '_sidebar'
35

46
$width = 900px
57
$space = 50px
@@ -8,7 +10,7 @@ body
810
background-color darken($light, 10%)
911

1012
#hero
11-
padding $space 0
13+
padding $space 40px
1214
background-color #fff
1315
.inner
1416
max-width $width
@@ -34,7 +36,8 @@ body
3436
font-size 1.05em
3537
font-weight 600
3638
letter-spacing .1em
37-
margin-right 1em
39+
&:first-child
40+
margin-right 1em
3841
.social-buttons
3942
list-style-type none
4043
padding 0
@@ -60,12 +63,14 @@ body
6063
color $green
6164
font-size 1.5em
6265
font-weight 400
66+
margin 0
67+
padding .5em 0
6368
p
6469
color $light
6570

6671
#sponsors
6772
text-align center
68-
padding 35px 30px 45px
73+
padding 35px 40px 45px
6974
background-color #f6f6f6
7075
.inner
7176
max-width 700px
@@ -102,7 +107,33 @@ body
102107
color #fff
103108

104109
@media screen and (max-width: $width)
110+
body
111+
-webkit-text-size-adjust none
112+
font-size 14px
105113
#header
106114
display none
107115
#mobile-bar
108116
display block
117+
#hero
118+
padding $space 40px 30px
119+
.hero-logo
120+
float none
121+
margin 30px 0 15px
122+
width 140px
123+
height 140px
124+
.left, .right
125+
text-align center
126+
width 100%
127+
h1
128+
font-size 2em
129+
.button
130+
font-size .9em
131+
#highlights
132+
.point
133+
display block
134+
margin 0 auto
135+
width 300px
136+
padding 0 40px 30px
137+
&:before
138+
content "—"
139+
color $green

‎themes/vue/source/css/page.styl

Lines changed: 3 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,69 +4,13 @@
44
@import "_search"
55
@import "_sponsor"
66
@import "_migration"
7+
@import "_sidebar"
78

89
#header
910
box-shadow 0 0 4px rgba(0,0,0,.25)
1011

11-
.sidebar
12-
position absolute
13-
z-index 10
14-
top 0
15-
left 60px
16-
bottom 0
17-
padding 2.2em 0
18-
width 260px
19-
margin-right 20px
20-
overflow-x hidden
21-
overflow-y auto
22-
-webkit-overflow-scrolling touch
23-
-ms-overflow-style none
24-
h2
25-
margin-top .2em
26-
ul
27-
list-style-type none
28-
margin 0
29-
line-height 1.8em
30-
padding-left 1em
31-
.version-select
32-
vertical-align middle
33-
margin-left 5px
34-
.menu-root
35-
padding-left 0
36-
.menu-sub
37-
font-size .85em
38-
.sidebar-link
39-
color $light
40-
&.current
41-
font-weight 600
42-
color $green
43-
&.new
44-
&:after
45-
content "NEW"
46-
display inline-block
47-
font-size 10px
48-
font-weight 600
49-
color #fff
50-
background-color $green
51-
line-height 14px
52-
padding 0 4px
53-
border-radius 3px
54-
margin-left 5px
55-
vertical-align middle
56-
position relative
57-
top -1px
58-
&:hover
59-
border-bottom 2px solid $green
60-
.section-link
61-
&.active
62-
font-weight bold
63-
color $green
64-
.main-menu
65-
margin-bottom 20px
66-
display none
67-
padding-left 0
68-
6912
.content
13+
position relative
7014
padding 2.2em 0
7115
max-width 600px
7216
margin 0 auto
@@ -180,7 +124,7 @@
180124
.content.with-sidebar
181125
margin-left 290px
182126
#ad
183-
z-index 8
127+
z-index 7
184128
position relative
185129
width 100%
186130
padding 0
@@ -212,32 +156,12 @@
212156
padding-bottom 1px
213157
&:hover, &.current
214158
border-bottom 2px solid $green
215-
.search-query
216-
width 200px
217-
margin-bottom 10px
218159
#mobile-bar
219160
display block
220161
#main
221162
padding 2em 1.4em 0
222163
.highlight pre
223164
padding 1.2em 1em
224-
.sidebar
225-
position fixed
226-
background-color #f9f9f9
227-
height 100%
228-
top 0
229-
left 0
230-
padding 60px 30px 20px
231-
box-shadow 0 0 10px rgba(0,0,0,.2)
232-
box-sizing border-box
233-
transition all .4s cubic-bezier(0.4, 0, 0, 1)
234-
-webkit-transform translate(-280px, 0)
235-
transform translate(-280px, 0)
236-
.main-menu
237-
display block
238-
&.open
239-
-webkit-transform translate(0, 0)
240-
transform translate(0, 0)
241165
.content
242166
&.with-sidebar
243167
margin-left 0

0 commit comments

Comments
 (0)