Skip to content

Commit 7c18c3a

Browse files
shnhrrsnshnhrrsn
committed
Updated design to better reflect the official Grind site
1 parent c754118 commit 7c18c3a

File tree

15 files changed

+304
-91
lines changed

15 files changed

+304
-91
lines changed

‎resources/assets/babel/welcome.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import {Grind} from './_grind.js'
1+
import { Grind } from './_grind.js'
22

33
console.log('Welcome to', Grind)

‎resources/assets/img/button-chevron-right.svg

Lines changed: 3 additions & 0 deletions
Loading

‎resources/assets/img/logo.svg

Lines changed: 14 additions & 0 deletions
Loading

‎resources/assets/scss/_variables.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
$body-font-size: 16px;
22
$body-line-height: 1.428571429;
3-
$body-text-color: #4f5157;
3+
$body-text-color: #4b4a4f;
44
$body-background-color: #fff;
55

6-
$accent-color: #9077d3;
6+
$accent-color: #3a70f4;
77
$link-color: $accent-color;
88
$link-color-hover: darken($link-color, 5%);
99
$link-color-active: darken($link-color, 10%);
1010

1111
$font-weight-ultra-light: 100;
1212
$font-weight-light: 300;
1313
$font-weight-normal: 400;
14-
$font-weight-medium: 600;
14+
$font-weight-medium: 500;
1515
$font-weight-bold: 600;
1616

17-
$font-family-sans-serif: 'Source Sans Pro', sans-serif;
17+
$font-family-sans-serif: 'BentonSans', sans-serif;
1818

1919
$transition-duration: 0.2s;
2020
$transition-timing-function: ease-in-out;
2121
$transition-timing: $transition-duration $transition-timing-function;
2222

23-
$header-height: 160px;
23+
$header-height: 112px;
2424
$header-z-index: 10000;
2525
$header-background-color: rgba($body-background-color, 0.8);
2626

27-
$footer-height: 80px;
27+
$footer-height: 208px;
2828
$footer-z-index: $header-z-index - 1;
2929
$footer-background-color: rgba($body-background-color, 0.8);

‎resources/assets/scss/app.scss

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
@import 'common';
22
@import 'normalize';
33

4-
* { box-sizing: border-box; }
4+
* {
5+
-webkit-font-smoothing: antialiased;
6+
text-rendering: optimizeLegibility;
7+
box-sizing: border-box;
8+
}
59

610
html, body {
711
background: $body-background-color;
812
}
913

1014
body {
11-
padding: $header-height 0 $footer-height;
15+
min-width: 1070px;
16+
padding: 0;
1217

1318
font-family: $font-family-sans-serif;
1419
font-size: $body-font-size;
@@ -18,17 +23,31 @@ body {
1823

1924
a {
2025
color: $link-color;
26+
text-decoration: none;
2127
transition: color $transition-timing;
2228

2329
&:hover { color: $link-color-hover; }
2430
&:active { color: $link-color-hover; }
2531
}
2632

33+
.brand-logo {
34+
display: inline-block;
35+
width: 39px;
36+
height: 52px;
37+
38+
font-size: 1px;
39+
color: transparent;
40+
41+
background: transparent url(../img/logo.svg) no-repeat center center;
42+
filter: drop-shadow(0 1px 10px rgba(#000, 0.1));
43+
}
44+
2745
.container {
28-
width: 900px;
46+
width: 810px;
2947
margin: 0 auto;
3048
}
3149

3250
@import 'app/typography';
51+
@import 'app/buttons';
3352
@import 'app/header';
3453
@import 'app/footer';

‎resources/assets/scss/app/_buttons.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.btn {
2+
position: relative;
3+
4+
display: inline-block;
5+
height: 36px;
6+
padding: 0 15px;
7+
8+
font-size: 15px;
9+
font-weight: $font-weight-medium;
10+
line-height: 40px;
11+
color: #fff;
12+
cursor: pointer;
13+
14+
background-image: linear-gradient(-180deg, #4c82ff 0%, #3b70ed 100%);
15+
border-radius: 6px;
16+
box-shadow: 0 1px 2px 0 rgba(#000, 0.15);
17+
18+
&:hover, &:active {
19+
color: #fff;
20+
}
21+
}
22+
23+
.btn-info {
24+
background-image: linear-gradient(-180deg, #5c5c68 0%, #494851 100%);
25+
}
26+
27+
.btn-icon {
28+
display: inline-block;
29+
vertical-align: baseline;
30+
background: transparent none no-repeat center center;
31+
}
32+
33+
.btn-icon-chevron-right {
34+
width: 6px;
35+
height: 10px;
36+
margin-left: 10px;
37+
background-image: url(../img/button-chevron-right.svg);
38+
}

‎resources/assets/scss/app/_footer.scss

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,55 @@
11
.footer {
2-
position: fixed;
3-
bottom: 0;
4-
left: 0;
5-
62
display: block;
73
width: 100%;
8-
9-
background: $footer-background-color;
104
}
115

126
.footer-container {
137
height: $footer-height;
8+
padding: 50px 0;
9+
}
10+
11+
.footer-logo {
12+
position: relative;
13+
z-index: 1;
14+
15+
display: block;
16+
margin: 0 auto;
17+
}
18+
19+
.footer-content {
20+
position: relative;
21+
z-index: 0;
22+
23+
display: flex;
24+
align-items: center;
25+
padding-top: 34px;
26+
margin-top: -14px;
27+
28+
border-top: 1px solid rgba(#aeb2bf, 0.15);
29+
}
30+
31+
.footer-links {
32+
display: block;
33+
flex: 1;
34+
}
35+
36+
.footer-link {
37+
display: inline-block;
38+
39+
font-size: 15px;
40+
color: #494850;
41+
42+
& + & {
43+
margin-left: 20px;
44+
}
45+
}
46+
47+
.footer-text {
48+
display: block;
49+
height: 36px;
50+
max-width: 220px;
1451

15-
line-height: $footer-height;
16-
text-align: center;
52+
font-size: 11px;
53+
line-height: 18px;
54+
color: #aeb3bf;
1755
}

‎resources/assets/scss/app/_header.scss

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
11
$header-padding-top: 100px;
22

33
.header {
4-
position: fixed;
5-
top: 0;
6-
left: 0;
7-
84
display: block;
95
width: 100%;
10-
padding-top: $header-padding-top;
11-
12-
background: $header-background-color;
136
}
147

158
.header-container {
16-
height: $header-height - $header-padding-top;
17-
line-height: $header-height - $header-padding-top;
9+
position: relative;
10+
height: $header-height;
11+
padding: 0 15px;
12+
13+
font-weight: $font-weight-medium;
14+
line-height: $header-height;
1815
}
1916

2017
.header-logo, .header-link {
2118
text-decoration: none;
2219
}
2320

2421
.header-logo {
25-
font-size: 48px;
26-
font-weight: $font-weight-ultra-light;
22+
position: relative;
23+
z-index: 1;
24+
25+
margin-right: 50px;
26+
vertical-align: middle;
2727
}
2828

2929
.header-links {
30-
float: right;
30+
position: relative;
31+
z-index: 1;
32+
33+
display: inline-block;
34+
vertical-align: middle;
3135
}
3236

3337
.header-link {
34-
display: block;
35-
float: left;
38+
display: inline-block;
3639

37-
font-size: 20px;
38-
font-weight: $font-weight-light;
39-
color: $body-text-color;
40+
font-size: 15px;
41+
color: #494850;
4042

41-
+ .header-link {
43+
& + & {
4244
margin-left: 20px;
4345
}
4446
}

‎resources/assets/scss/app/_typography.scss

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
1-
p {
2-
font-size: 22px;
3-
font-weight: $font-weight-light;
1+
p, ul, ol {
2+
margin: 0;
3+
4+
font-size: 13px;
5+
font-weight: $font-weight-normal;
6+
line-height: 26px;
47
}
58

6-
h1 {
7-
font-size: 36px;
9+
li + li {
10+
margin-top: 2px;
11+
}
12+
13+
%header {
14+
margin: 0 0 20px;
15+
816
font-weight: $font-weight-medium;
17+
color: #1d1c1f;
18+
19+
&:first-child {
20+
margin-top: 0;
21+
}
22+
}
23+
24+
h1 {
25+
@extend %header;
26+
27+
margin-top: 60px;
28+
font-size: 20px;
29+
}
30+
31+
h2 {
32+
@extend %header;
33+
34+
margin-top: 50px;
35+
font-size: 17px;
936
}

‎resources/assets/scss/code.scss

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,23 @@
11
@import 'common';
22

3-
@font-face {
4-
$base: 'https://raw.githubusercontent.com/tonsky/FiraCode/master/distr';
5-
font-family: fira-code;
6-
font-style: normal;
7-
font-weight: 400;
8-
src: url(#{$base}/eot/FiraCode-Regular.eot) format('embedded-opentype'),
9-
url(#{$base}/woff2/FiraCode-Regular.woff2) format('woff2'),
10-
url(#{$base}/woff/FiraCode-Regular.woff) format('woff'),
11-
url(#{$base}/ttf/FiraCode-Regular.ttf) format('truetype');
12-
}
13-
143
pre, code {
15-
font-family: fira-code, monospace;
4+
margin: 0;
5+
font-family: 'Fira Code', monospace;
166
}
177

188
.code {
19-
padding: 6px 15px;
20-
21-
color: #625682;
22-
23-
background: #f9f9f9;
24-
border: 1px solid #eee;
25-
border-radius: 8px;
9+
padding: 30px;
10+
color: #555;
2611
}
2712

2813
.code-keyword {
29-
color: $accent-color;
14+
color: #5520ff;
3015
}
3116

32-
.code-func {
33-
color: #328eff;
17+
.code-func, .code-param, .code-object {
18+
color: #5d99ff;
3419
}
3520

3621
.code-string {
37-
color: #129c9a;
22+
color: #00d8ff;
3823
}

0 commit comments

Comments
 (0)