Skip to content

Commit 51ecf04

Browse files
fetisfetis
committed
twitter button in header; minor fixes
1 parent af42c66 commit 51ecf04

File tree

8 files changed

+148
-2115
lines changed

8 files changed

+148
-2115
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v10

‎builder/layouts/snippet.hbs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@
1919
<meta name="twitter:app:country" content="US">
2020
<meta name="twitter:app:name:iphone" content="Cannonball">
2121
{{>snippet}}
22-
{{> footer }}
2322

2423
<div class="mdl-card mdl-shadow--2dp card demo-card">
25-
<iframe src="https://codelab.fun/angular/playground?code={{codeToBase64 this}}" frameborder="0"></iframe>
24+
<iframe src="https://codelab.fun/angular/playground?code={{codeToBase64 this}}" frameborder="0">
2625
</div>
26+
27+
{{> footer }}

‎builder/partials/footer.hbs

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
</div>
2-
<style>
3-
.add-snippet-button {
4-
position: fixed;
5-
bottom: 20px;
6-
left: 84%;
7-
z-index: 10;
8-
}
9-
</style>
10-
<a href="/new">
11-
<button class="add-snippet-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
12-
<i class="material-icons">add</i>
13-
</button>
14-
</a>
1+
<footer>
2+
<style>
3+
.add-snippet-button {
4+
position: fixed;
5+
bottom: 20px;
6+
left: 84%;
7+
z-index: 10;
8+
}
9+
</style>
10+
<a href="/new">
11+
<button class="add-snippet-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
12+
<i class="material-icons">add</i>
13+
</button>
14+
</a>
15+
</footer>

‎builder/partials/head.hbs

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -14,114 +14,4 @@
1414
<script async src="http://localhost:35729/livereload.js"></script>
1515
{{/if}}
1616

17-
<style>
18-
.card, h2.group {
19-
margin: 0 auto;
20-
width: 80%;
21-
max-width: 1000px;
22-
min-width: 540px;
23-
margin-bottom: 20px;
24-
}
25-
26-
pre {
27-
background: #333;
28-
padding: 20px;
29-
color: #ddd;
30-
}
31-
32-
blockquote:before {
33-
content: "";
34-
display: none;
35-
}
36-
37-
38-
blockquote:after {
39-
content: "";
40-
display: none;
41-
}
42-
43-
blockquote {
44-
margin-left: 0;
45-
padding-left: 8px;
46-
border-left: 4px #333333 solid;
47-
min-height: 20px;
48-
}
49-
50-
.mdl-card__title a {
51-
color: #444;
52-
53-
}
54-
55-
.mdl-card__supporting-text {
56-
width: 96%;
57-
}
58-
59-
.mdl-card__supporting-text pre {
60-
white-space: pre-wrap;
61-
}
62-
63-
64-
.thirty-layout-transparent .mdl-layout__header,
65-
.thirty-layout-transparent .mdl-layout__drawer-button {
66-
/* This background is dark, so we set text to white. Use 87% black instead if
67-
your background is light. */
68-
color: #444444;
69-
}
70-
71-
.mdl-chip__text a {
72-
color: #333;
73-
text-decoration: none;
74-
}
75-
.mdl-chip__text a:hover {
76-
color: #000;
77-
text-decoration: underline;
78-
}
79-
80-
.footer {
81-
display: flex;
82-
justify-content: space-between;
83-
}
84-
85-
.footer .author {
86-
line-height: 36px;
87-
display: flex;
88-
align-items: center;
89-
}
90-
91-
.footer .author > iframe {
92-
margin-left: 16px;
93-
}
94-
95-
.mdl-card__actions {
96-
padding: 8px 16px;
97-
}
98-
99-
p > code {
100-
background: #eee;
101-
padding: 4px;
102-
}
103-
104-
.codelab-callout {
105-
text-align: center;
106-
padding: 16px;
107-
min-height: 0;
108-
background: #333;
109-
color: #dddddd;
110-
font-size: 14px;
111-
display: block;
112-
}
113-
114-
.header-card {
115-
flex-direction: row;
116-
min-height: 0;
117-
justify-content: space-between;
118-
align-items: center;
119-
padding-right: 16px;
120-
margin-bottom: 8px;
121-
}
122-
123-
h2.group {
124-
padding-left: 20px;
125-
}
126-
</style>
127-
17+
<link rel="stylesheet" href="public/css/style.css">

‎builder/partials/header.hbs

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
{{> head }}
22

3-
<div class="mdl-card mdl-shadow--2dp card header-card">
4-
<a href="index.html"><img src="public/logo.png" style="height: 100px;" alt="30 seconds of angular"></a>
3+
<header class="mdl-card mdl-shadow--2dp card header-card">
4+
<a href="/"><img src="public/logo.png" style="height: 100px;" alt="30 seconds of angular"></a>
5+
6+
<div class="header-card__buttons">
7+
<a class="twitter-follow-button" data-show-count="false" data-size="large"
8+
href="https://twitter.com/30sec_angular">Follow @30sec_angular</a>
59

6-
<div>
710
<!-- Place this tag where you want the button to render. -->
811
<a class="github-button"
912
href="https://github.com/nycJSorg/30-seconds-of-angular"
@@ -12,7 +15,7 @@
1215
Star
1316
</a>
1417
</div>
15-
</div>
18+
</header>
1619

1720
<div class="codelab-callout mdl-card card mdl-shadow--2dp">
1821
✨✨ New to Angular? Check out interactive

‎builder/public/css/style.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.card, h2.group {
2+
margin: 0 auto 20px;
3+
width: 80%;
4+
max-width: 1000px;
5+
min-width: 540px;
6+
}
7+
8+
h2.group {
9+
padding-left: 20px;
10+
}
11+
12+
pre {
13+
background: #333;
14+
padding: 20px;
15+
color: #ddd;
16+
}
17+
18+
blockquote:before {
19+
content: "";
20+
display: none;
21+
}
22+
23+
24+
blockquote:after {
25+
content: "";
26+
display: none;
27+
}
28+
29+
blockquote {
30+
margin-left: 0;
31+
padding-left: 8px;
32+
border-left: 4px #333333 solid;
33+
min-height: 20px;
34+
}
35+
36+
.mdl-card__title a {
37+
color: #444;
38+
39+
}
40+
41+
.mdl-card__supporting-text {
42+
width: 96%;
43+
}
44+
45+
.mdl-card__supporting-text pre {
46+
white-space: pre-wrap;
47+
}
48+
49+
50+
.thirty-layout-transparent .mdl-layout__header,
51+
.thirty-layout-transparent .mdl-layout__drawer-button {
52+
/* This background is dark, so we set text to white. Use 87% black instead if
53+
your background is light. */
54+
color: #444444;
55+
}
56+
57+
.mdl-chip__text a {
58+
color: #333;
59+
text-decoration: none;
60+
}
61+
.mdl-chip__text a:hover {
62+
color: #000;
63+
text-decoration: underline;
64+
}
65+
66+
.footer {
67+
display: flex;
68+
justify-content: space-between;
69+
}
70+
71+
.footer .author {
72+
line-height: 36px;
73+
display: flex;
74+
align-items: center;
75+
}
76+
77+
.footer .author > iframe {
78+
margin-left: 16px;
79+
}
80+
81+
.mdl-card__actions {
82+
padding: 8px 16px;
83+
}
84+
85+
p > code {
86+
background: #eee;
87+
padding: 4px;
88+
}
89+
90+
.codelab-callout {
91+
text-align: center;
92+
padding: 16px;
93+
min-height: 0;
94+
background: #333;
95+
color: #dddddd;
96+
font-size: 14px;
97+
display: block;
98+
}
99+
100+
/* Header */
101+
.header-card {
102+
flex-direction: row;
103+
min-height: 0;
104+
justify-content: space-between;
105+
align-items: center;
106+
padding-right: 16px;
107+
margin-bottom: 8px;
108+
}
109+
110+
.header-card__buttons {
111+
flex: 1;
112+
display: flex;
113+
justify-content: flex-end;
114+
align-items: center;
115+
}
116+
117+
.header-card__buttons > * {
118+
margin-left: 15px;
119+
}
120+

‎builder/serve.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ config(true)
1212
"${source}/**/*": true,
1313
"layouts/**/*": "**/*",
1414
"partials/**/*": "**/*",
15+
"public/css/**/*": "*.css",
1516
},
1617
livereload: true
1718
}))

0 commit comments

Comments
 (0)