Skip to content

Commit 0a1efdc

Browse files
leebyronleebyron
committed
search improvements & front page content
1 parent 05dee5d commit 0a1efdc

File tree

3 files changed

+212
-180
lines changed

3 files changed

+212
-180
lines changed

‎site/_css/algolia.less

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,18 @@
1717
background: transparent url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E../img/search.svg%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E%3C/span%3E) no-repeat 10px center;
1818
background-color: rgba(255, 255, 255, 0.1);
1919
background-size: 16px 16px;
20-
border-radius: 4px;
20+
border-radius: 15px;
2121
border: solid 1px fadeout(@dark-color, 80%);
2222
height: 30px;
2323
margin-top: 9px;
2424
outline: none;
2525
padding: 0 10px 0 35px;
26-
width: 200px;
26+
width: 180px;
27+
transition: width 0.2s ease-out;
28+
29+
&:focus {
30+
width: 300px;
31+
}
2732
}
2833

2934
.algolia-autocomplete {
@@ -35,7 +40,7 @@
3540
.body-font(@size: 15px);
3641
margin-top: -10px;
3742
width: 600px;
38-
margin-left: -400px;
43+
margin-left: -300px;
3944
padding: 0;
4045
border: none;
4146
border-radius: 4px;

‎site/_css/index.less

Lines changed: 149 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -12,201 +12,184 @@ body.index {
1212
right: 0;
1313
}
1414
}
15-
}
16-
17-
.fixedSearch {
18-
position: fixed;
19-
right: 0;
20-
left: 0;
21-
z-index: 12;
22-
pointer-events: none;
23-
}
2415

25-
.hero {
26-
background: @dark-color;
27-
color: #f8f8f8;
28-
min-height: 500px;
29-
max-height: 1000px;
30-
height: 80vh;
31-
position: relative;
32-
z-index: 11;
33-
margin-top: -50px;
34-
padding-top: 50px;
35-
-webkit-font-smoothing: antialiased;
36-
-moz-osx-font-smoothing: grayscale;
37-
38-
header {
39-
background: linear-gradient(
40-
fadeout(@dark-color, 20%),
41-
fadeout(@dark-color, 100%)
42-
);
43-
box-shadow: none;
44-
min-height: 75px;
45-
max-height: 150px;
46-
height: 12vh;
47-
48-
nav > a {
49-
text-shadow: 0 1px 1px @dark-color, 0 0 3px @dark-color;
50-
51-
&:hover, &:focus {
52-
color: white;
53-
}
16+
.fixedSearch {
17+
position: fixed;
18+
right: 0;
19+
left: 0;
20+
z-index: 12;
21+
pointer-events: none;
22+
}
5423

55-
&:first-child {
56-
margin-left: -1em;
24+
.hero {
25+
background: @dark-color;
26+
color: #f8f8f8;
27+
min-height: 500px;
28+
max-height: 1000px;
29+
height: 70vh;
30+
position: relative;
31+
z-index: 11;
32+
margin-top: -50px;
33+
padding-top: 50px;
34+
-webkit-font-smoothing: antialiased;
35+
-moz-osx-font-smoothing: grayscale;
36+
37+
header {
38+
background: linear-gradient(
39+
fadeout(@dark-color, 20%),
40+
fadeout(@dark-color, 100%)
41+
);
42+
box-shadow: none;
43+
min-height: 75px;
44+
max-height: 150px;
45+
height: 12vh;
46+
47+
nav > a {
48+
text-shadow: 0 1px 1px @dark-color, 0 0 3px @dark-color;
49+
50+
&:hover, &:focus {
51+
color: white;
52+
}
53+
54+
&:first-child {
55+
margin-left: -1em;
56+
}
5757
}
5858
}
59-
}
60-
61-
.abs {
62-
display: flex;
63-
align-items: center;
64-
justify-content: center;
65-
flex-direction: column;
66-
position: absolute;
67-
top: 0;
68-
left: 0;
69-
bottom: 0;
70-
right: 0;
71-
clip: rect(0, auto, auto, 0);
72-
overflow: hidden;
73-
}
7459

75-
.content {
76-
text-align: center;
77-
margin: 30px;
78-
animation: fade 1.3s ease-in-out;
79-
animation-fill-mode: both;
80-
}
60+
.abs {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
flex-direction: column;
65+
position: absolute;
66+
top: 0;
67+
left: 0;
68+
bottom: 0;
69+
right: 0;
70+
clip: rect(0, auto, auto, 0);
71+
overflow: hidden;
72+
}
8173

82-
.main-logo {
83-
margin: 0 auto;
84-
display: block;
85-
}
74+
.content {
75+
text-align: center;
76+
margin: 30px;
77+
animation: fade 1.3s ease-in-out;
78+
animation-fill-mode: both;
79+
}
8680

87-
h1 {
88-
color: @rhodamine-color;
89-
margin: 0;
90-
}
81+
.main-logo {
82+
margin: 0 auto;
83+
display: block;
84+
}
9185

92-
h2, h3, h4 {
93-
color: white;
94-
margin: 1em 0;
95-
text-align: center;
96-
}
86+
h1 {
87+
color: @rhodamine-color;
88+
margin: 0;
89+
}
9790

98-
.prism {
99-
-webkit-font-smoothing: auto;
100-
-moz-osx-font-smoothing: auto;
101-
color: white;
102-
background: transparent;
103-
box-shadow: none;
104-
padding: 0;
105-
margin: 0;
106-
}
91+
h4 {
92+
color: white;
93+
margin: 1em 0;
94+
text-align: center;
95+
}
10796

108-
.marketing-col:last-child > .prism {
109-
margin-right: -20px;
110-
}
97+
.prism {
98+
-webkit-font-smoothing: auto;
99+
-moz-osx-font-smoothing: auto;
100+
color: white;
101+
background: transparent;
102+
box-shadow: none;
103+
padding: 0;
104+
margin: 0;
105+
}
111106

112-
.fadein-cols(3);
107+
.marketing-col:last-child > .prism {
108+
margin-right: -20px;
109+
}
113110

114-
.fadein-cols(@n) when (@n > 0) {
115-
.fadein-cols(@n - 1);
116-
.marketing-col:nth-child(@{n}) {
117-
animation: fade 1.1s 0.8s * @n ease-in-out;
118-
animation-fill-mode: both;
111+
.marketing-row {
112+
display: flex;
113+
justify-content: space-between;
119114
}
120-
}
121115

122-
@keyframes fade {
123-
from {
124-
opacity: 0;
125-
transform: translate(0, 30px);
116+
.marketing-col {
117+
flex: 1;
118+
width: 320px;
119+
text-align: center;
126120
}
127121

128-
to {
129-
opacity: 1;
130-
transform: translate(0, 0);
122+
.fadein-cols(3);
123+
124+
.fadein-cols(@n) when (@n > 0) {
125+
.fadein-cols(@n - 1);
126+
.marketing-col:nth-child(@{n}) {
127+
animation: fade 1.1s 0.8s * @n ease-in-out;
128+
animation-fill-mode: both;
129+
}
131130
}
132-
}
133-
}
134131

135-
.home-divider {
136-
border-top-color: #bbb;
137-
margin: 3em auto;
138-
width: 400px;
139-
@media screen and (max-width: 1020px) {
140-
display: none;
141-
}
142-
}
132+
@keyframes fade {
133+
from {
134+
opacity: 0;
135+
transform: translate(0, 30px);
136+
}
143137

144-
.marketing-row {
145-
display: flex;
146-
justify-content: space-between;
147-
}
138+
to {
139+
opacity: 1;
140+
transform: translate(0, 0);
141+
}
142+
}
143+
}
148144

149-
.marketing-col {
150-
flex: 1;
151-
width: 320px;
152-
@media screen and (max-width: 1020px) {
153-
margin-left: 0;
154-
float: none;
155-
margin-bottom: 30px;
145+
section.lead {
146+
.body-font(22px);
156147
text-align: center;
148+
max-width: 760px;
157149
}
158-
}
159-
160-
.home-bottom-section {
161-
margin-bottom: 100px;
162-
}
163150

164-
.home-content {
165-
width: 760px;
166-
}
167-
168-
.buttons-unit {
169-
margin-top: 60px;
170-
text-align: center;
151+
.home-divider {
152+
border-top-color: #bbb;
153+
margin: 3em auto;
154+
width: 400px;
155+
@media screen and (max-width: 1020px) {
156+
display: none;
157+
}
158+
}
171159

172-
.button {
173-
.body-font(@color: white);
174-
background: @rhodamine-color;
175-
transition: background 0.1s ease-out;
160+
.home-bottom-section {
161+
margin-bottom: 100px;
162+
}
176163

177-
&:hover, &:focus, &.active {
178-
background: lighten(@rhodamine-color, 10%);
179-
}
164+
.home-content {
165+
width: 760px;
180166
}
181-
}
182167

183-
.button {
184-
background: linear-gradient( #9a9a9a, #646464);
185-
border-radius: 4px;
186-
padding: 8px 16px;
187-
font-size: 18px;
188-
font-weight: 400;
189-
margin: 0 12px;
190-
display: inline-block;
191-
color: #fafafa;
192-
text-decoration: none;
193-
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
194-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
195-
text-decoration: none;
196-
}
168+
.buttons-unit {
169+
margin-top: 60px;
170+
text-align: center;
197171

198-
.button:hover, .button:focus {
199-
text-decoration: none;
200-
}
172+
.button {
173+
.headline-font(@size: 24px);
174+
line-height: 1.0;
175+
transition: background 0.1s ease-out, color 0.1s ease-out;
201176

202-
.button:active {
203-
box-shadow: none;
204-
}
177+
border: solid 1px @rhodamine-color;
178+
border-radius: 4px;
179+
padding: 0.5em 1.5em;
180+
margin: 0 16px;
181+
display: inline-block;
182+
text-decoration: none;
205183

206-
.hero .button {
207-
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
208-
}
184+
&:hover, &:focus, &:active {
185+
color: white;
186+
background: lighten(@rhodamine-color, 10%);
187+
text-decoration: none;
188+
}
209189

210-
.button.blue {
211-
background: linear-gradient( #77a3d2, #4783c2);
190+
&:active {
191+
box-shadow: none;
192+
}
193+
}
194+
}
212195
}

0 commit comments

Comments
 (0)