Skip to content

Commit 4e41ec6

Browse files
amiller-ghamiller-gh
committedApr 23, 2018
feat: Add footer to website. Improve website responsiveness.
·
v1.5.0v0.18.0
1 parent 5113d61 commit 4e41ec6

File tree

10 files changed

+219
-108
lines changed

10 files changed

+219
-108
lines changed
 

Diff for: ‎packages/@css-blocks/website/public/index.html

+108-87
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,115 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
43

5-
<link href="https://fonts.googleapis.com/css?family=Enriqueta|Lato" rel="stylesheet">
6-
<title>CSS Blocks</title>
7-
8-
<meta charset="utf-8">
9-
<meta name="description" content="Blazing fast CSS for your design systems and app components.">
10-
11-
<!-- Mobile Ready Meta Tags -->
12-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
13-
<meta name="HandheldFriendly" content="True">
14-
<meta name="MobileOptimized" content="320">
15-
<meta name="apple-mobile-web-app-capable" content="yes">
16-
<meta name="apple-mobile-web-app-status-bar-style" content="white">
17-
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimal-ui">
18-
<meta name="theme-color" content="#000000">
19-
20-
<link rel="stylesheet" href="%PUBLIC_URL%/lib/prismjs/prism.css">
21-
<script src="%PUBLIC_URL%/lib/prismjs/prism.js" data-manual></script>
22-
23-
<style>
24-
:root {
25-
--pink: #ed2651;
26-
--purple: #2e184a;
27-
--off-white: #f0eff3;
28-
--gray: #85818c;
4+
<head>
5+
6+
<link href="https://fonts.googleapis.com/css?family=Enriqueta|Lato" rel="stylesheet">
7+
<title>CSS Blocks</title>
8+
9+
<meta charset="utf-8">
10+
<meta name="description" content="Blazing fast CSS for your design systems and app components.">
11+
12+
<!-- Mobile Ready Meta Tags -->
13+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
14+
<meta name="HandheldFriendly" content="True">
15+
<meta name="MobileOptimized" content="320">
16+
<meta name="apple-mobile-web-app-capable" content="yes">
17+
<meta name="apple-mobile-web-app-status-bar-style" content="white">
18+
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimal-ui">
19+
<meta name="theme-color" content="#000000">
20+
21+
<link rel="stylesheet" href="%PUBLIC_URL%/lib/prismjs/prism.css">
22+
<script src="%PUBLIC_URL%/lib/prismjs/prism.js" data-manual></script>
23+
24+
<style>
25+
:root {
26+
--pink: #ed2651;
27+
--purple: #2e184a;
28+
--off-white: #f0eff3;
29+
--gray: #85818c;
30+
}
31+
32+
body,
33+
html {
34+
margin: 0;
35+
padding: 0;
36+
font-family: "Lato", sans-serif;
37+
font-size: 10px;
38+
}
39+
40+
p {
41+
font-size: 1.8rem;
42+
line-height: 2.8rem;
43+
margin: 0 0 1.4rem 0;
44+
}
45+
46+
h1,
47+
h2,
48+
h3,
49+
h4,
50+
h5,
51+
h6 {
52+
font-family: "Enriqueta", sans-serif;
53+
font-weight: 800;
54+
letter-spacing: 2px;
55+
margin: 0 0 1.2rem 0;
56+
}
57+
58+
.github-corner:hover .octo-arm {
59+
animation: octocat-wave 560ms ease-in-out
60+
}
61+
62+
@keyframes octocat-wave {
63+
0%,
64+
100% {
65+
transform: rotate(0)
2966
}
30-
body, html {
31-
margin: 0;
32-
padding: 0;
33-
font-family: "Lato", sans-serif;
34-
font-size: 10px;
67+
20%,
68+
60% {
69+
transform: rotate(-25deg)
3570
}
36-
p {
37-
font-size: 1.8rem;
38-
line-height: 2.8rem;
39-
margin: 0 0 1.4rem 0;
71+
40%,
72+
80% {
73+
transform: rotate(10deg)
4074
}
41-
h1, h2, h3, h4, h5, h6 {
42-
font-family: "Enriqueta", sans-serif;
43-
font-weight: 800;
44-
letter-spacing: 2px;
45-
margin: 0 0 1.2rem 0;
46-
}
47-
75+
}
76+
77+
@media (max-width:500px) {
4878
.github-corner:hover .octo-arm {
49-
animation: octocat-wave 560ms ease-in-out
79+
animation: none
5080
}
51-
52-
@keyframes octocat-wave {
53-
0%, 100% {
54-
transform: rotate(0)
55-
}
56-
20%, 60% {
57-
transform: rotate(-25deg)
58-
}
59-
40%, 80% {
60-
transform: rotate(10deg)
61-
}
81+
.github-corner .octo-arm {
82+
animation: octocat-wave 560ms ease-in-out
6283
}
63-
64-
@media (max-width:500px) {
65-
.github-corner:hover .octo-arm {
66-
animation: none
67-
}
68-
.github-corner .octo-arm {
69-
animation: octocat-wave 560ms ease-in-out
70-
}
84+
.github-corner svg {
85+
width: 56px;
86+
height: 56px;
7187
}
72-
73-
@media (max-width: 1280px) and (min-width: 421px) {
74-
body, html {
75-
font-size: 9px;
76-
}
88+
}
89+
90+
@media (max-width: 1280px) and (min-width: 421px) {
91+
body,
92+
html {
93+
font-size: 9px;
7794
}
78-
@media (max-width: 520px) {
79-
body, html {
80-
font-size: 8px;
81-
}
95+
}
96+
97+
@media (max-width: 520px) {
98+
body,
99+
html {
100+
font-size: 8px;
82101
}
83-
</style>
102+
}
103+
</style>
84104

85-
<!--
105+
<!--
86106
manifest.json provides metadata used when your web app is added to the
87107
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
88108
-->
89-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
90-
<link rel="shortcut icon" href="%PUBLIC_URL%/images/bug.png">
91-
<link href="%PUBLIC_URL%/css-blocks.css" rel="stylesheet">
92-
<!--
109+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
110+
<link rel="shortcut icon" href="%PUBLIC_URL%/images/bug.png">
111+
<link href="%PUBLIC_URL%/css-blocks.css" rel="stylesheet">
112+
<!--
93113
Notice the use of %PUBLIC_URL% in the tags above.
94114
It will be replaced with the URL of the `public` folder during the build.
95115
Only files inside the `public` folder can be referenced from the HTML.
@@ -99,25 +119,25 @@
99119
Learn how to configure a non-root public URL by running `npm run build`.
100120
-->
101121

102-
</head>
103-
<body>
104-
<noscript>
122+
</head>
123+
124+
<body>
125+
<noscript>
105126
You need to enable JavaScript to run this app.
106127
</noscript>
107128

108-
<a href="https://www.github.com/css-blocks" target="_blank" class="github-corner" aria-label="View source on Github">
109-
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgb(235, 95, 125); color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 999;"
110-
aria-hidden="true">
129+
<a href="https://www.github.com/css-blocks" target="_blank" class="github-corner" aria-label="View source on Github">
130+
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgb(235, 95, 125); color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 999;" aria-hidden="true">
111131
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
112132
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
113133
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
114134
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
115135
fill="currentColor" class="octo-body"></path>
116136
</svg>
117-
</a>
137+
</a>
118138

119-
<div id="root"></div>
120-
<!--
139+
<div id="root"></div>
140+
<!--
121141
This HTML file is a template.
122142
If you open it directly in the browser, you will see an empty page.
123143
@@ -127,5 +147,6 @@
127147
To begin the development, run `npm start` or `yarn start`.
128148
To create a production bundle, use `npm run build` or `yarn build`.
129149
-->
130-
</body>
131-
</html>
150+
</body>
151+
152+
</html>

Diff for: ‎packages/@css-blocks/website/public/lib/prismjs/prism.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -145,16 +145,17 @@ pre.line-numbers {
145145
}
146146

147147
pre.line-numbers > code {
148-
position: relative;
149-
white-space: inherit;
148+
position: static;
149+
white-space: inherit;
150150
}
151151

152152
.line-numbers .line-numbers-rows {
153153
position: absolute;
154154
pointer-events: none;
155-
top: 0;
155+
top: 8px;
156+
bottom: 8px;
156157
font-size: 100%;
157-
left: -3.8rem;
158+
left: 8px;
158159
width: 3rem; /* works for line-numbers below 1000 lines */
159160
letter-spacing: -1px;
160161
border-right: 1px solid #999;

Diff for: ‎packages/@css-blocks/website/src/App.block.css

+25-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
2-
:scope {
3-
4-
}
1+
:scope {}
52

63
.nav {
74
background-color: #222;
@@ -21,3 +18,27 @@
2118
.intro {
2219
font-size: large;
2320
}
21+
22+
.footer {
23+
background-color: var(--pink);
24+
font-size: 1.8rem;
25+
color: white;
26+
text-align: center;
27+
padding: 1.6rem;
28+
}
29+
30+
.footerLogo {
31+
height: 2.4rem;
32+
vertical-align: baseline;
33+
margin: 0 0 -4px 3px;
34+
}
35+
36+
.footerLink {
37+
color: white;
38+
text-decoration: none;
39+
}
40+
41+
.footerLink:hover, .footerLink:focus {
42+
border-bottom: 1px solid white;
43+
padding-bottom: 3px;
44+
}

Diff for: ‎packages/@css-blocks/website/src/App.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Home from "./pages/Home/index";
55
import Demo from "./pages/Demo";
66

77
import styles from "./App.block.css";
8+
import linkedinLogo from "./images/linkedin-logo.svg";
89

910
class App extends Component {
1011
render() {
@@ -21,6 +22,12 @@ class App extends Component {
2122
<Route exact path="/" component={Home} />
2223
<Route path="/demo" component={Demo} />
2324
</main>
25+
<footer className={styles.footer}>
26+
<a href="https://engineering.linkedin.com/open-source" className={styles.footerLink} target="_blank">
27+
{"Made with ♥ by "}
28+
<img src={linkedinLogo} className={styles.footerLogo}/>
29+
</a>
30+
</footer>
2431
</div>
2532
</BrowserRouter>
2633
);

Diff for: ‎packages/@css-blocks/website/src/images/linkedin-logo.svg

+44
Loading

Diff for: ‎packages/@css-blocks/website/src/pages/Home/Home.block.css

+19-9
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,10 @@
120120
position: relative;
121121
-webkit-touch-callout: none; /* iOS Safari */
122122
-webkit-user-select: none; /* Safari */
123-
-khtml-user-select: none; /* Konqueror HTML */
124-
-moz-user-select: none; /* Firefox */
125-
-ms-user-select: none; /* Internet Explorer/Edge */
126-
user-select: none; /* Non-prefixed version, currently
127-
supported by Chrome and Opera */
123+
-khtml-user-select: none; /* Konqueror HTML */
124+
-moz-user-select: none; /* Firefox */
125+
-ms-user-select: none; /* Internet Explorer/Edge */
126+
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
128127
}
129128

130129
.features {
@@ -140,16 +139,27 @@
140139
margin-bottom: 42px;
141140
}
142141

143-
@media (max-width: 1280px) and (min-width: 421px) {
142+
@media (max-width: 1280px) and (min-width: 521px) {
144143
.logo {
145144
margin-top: 24px;
146145
}
147146
}
147+
148+
@media (max-width: 760px) {
149+
.features {
150+
grid-template-columns: 100%;
151+
padding: 0;
152+
}
153+
}
154+
148155
@media (max-width: 520px) {
149156
.logo {
150-
margin-top: 48px;
157+
margin: 0;
151158
}
152159
.header {
153-
padding-bottom: 82px;
160+
padding-bottom: 32px;
154161
}
155-
}
162+
.buttonContainer {
163+
width: 100%;
164+
}
165+
}

Diff for: ‎packages/@css-blocks/website/src/pages/Home/components/CodeDemo/CodeDemo.block.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
width: 100%;
33
justify-content: space-between;
44
display: flex;
5-
margin-bottom: 24px;
5+
margin-bottom: 1.6rem;
66
position: relative;
77
-webkit-touch-callout: none; /* iOS Safari */
88
-webkit-user-select: none; /* Safari */

Diff for: ‎packages/@css-blocks/website/src/pages/Home/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class Home extends Component {
4545
<li>✨ Object Oriented Inheritance</li>
4646
</ul>
4747

48-
<div>
48+
<div className={styles.buttonContainer}>
4949
<a
5050
href="https://github.com/linkedin/css-blocks#%EF%B8%8F-supported-integrations"
5151
target="_blank"

Diff for: ‎packages/@css-blocks/website/src/shared/Prism/Prism.block.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
:scope {
1+
:scope {
22
width: 100%;
33
box-sizing: border-box;
44
border-radius: 3px;
5+
min-height: 712px; /* Magic number */
56
}
7+
8+
@media (max-width: 520px) {
9+
:scope {
10+
min-height: 0px;
11+
}
12+
}

Diff for: ‎packages/@css-blocks/website/src/styles/button.block.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
z-index: 0;
1414
overflow: hidden;
1515
box-sizing: border-box;
16-
margin-right: 18px;
16+
margin: 0 18px 16px 0;
1717
text-decoration: none;
1818
display: inline-block;
1919
vertical-align: middle;

0 commit comments

Comments
 (0)
Please sign in to comment.