Skip to content

Commit 111e6fa

Browse files
author
Philipp Eisen
committed
Add footer with credits
1 parent 28d0a9b commit 111e6fa

File tree

4 files changed

+378
-263
lines changed

4 files changed

+378
-263
lines changed

‎src/App.vue

Lines changed: 139 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -3,100 +3,158 @@
33
<header class="header">
44
<nav class="inner">
55
<router-link to="/" exact>
6-
<img class="logo" src="~public/logo-48.png" alt="logo">
6+
<img class="logo" src="~public/logo-48.png" alt="logo" />
77
</router-link>
88
<router-link to="/top">Top</router-link>
99
<router-link to="/new">New</router-link>
1010
<router-link to="/show">Show</router-link>
1111
<router-link to="/ask">Ask</router-link>
1212
<router-link to="/job">Jobs</router-link>
13-
<a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener">
14-
Built with Vue.js
15-
</a>
1613
</nav>
1714
</header>
1815
<transition name="fade" mode="out-in">
1916
<router-view class="view"></router-view>
2017
</transition>
18+
19+
<footer class="footer">
20+
<div class="container">
21+
<p>
22+
Built with ❤️ using
23+
<a
24+
class="github"
25+
href="https://github.com/UKPLab/sentence-transformers"
26+
target="_blank"
27+
rel="noopener"
28+
>sentence-transformers</a>,
29+
<a
30+
class="github"
31+
href="https://github.com/vuejs/vue-hackernews-2.0"
32+
target="_blank"
33+
rel="noopener"
34+
>Vue.js</a> and
35+
<a
36+
class="github"
37+
href="https://github.com/nmslib/hnswlib"
38+
target="_blank"
39+
rel="noopener"
40+
>hnswlib</a>
41+
</p>
42+
</div>
43+
</footer>
2144
</div>
2245
</template>
2346

2447
<style lang="stylus">
25-
body
26-
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
27-
font-size 15px
28-
background-color lighten(#eceef1, 30%)
29-
margin 0
30-
padding-top 55px
31-
color #34495e
32-
overflow-y scroll
33-
34-
a
35-
color #34495e
36-
text-decoration none
37-
38-
.header
39-
background-color #ff6600
40-
position fixed
41-
z-index 999
42-
height 55px
43-
top 0
44-
left 0
45-
right 0
46-
.inner
47-
max-width 800px
48-
box-sizing border-box
49-
margin 0px auto
50-
padding 15px 5px
51-
a
52-
color rgba(255, 255, 255, .8)
53-
line-height 24px
54-
transition color .15s ease
55-
display inline-block
56-
vertical-align middle
57-
font-weight 300
58-
letter-spacing .075em
59-
margin-right 1.8em
60-
&:hover
61-
color #fff
62-
&.router-link-active
63-
color #fff
64-
font-weight 400
65-
&:nth-child(6)
66-
margin-right 0
67-
.github
68-
color #fff
69-
font-size .9em
70-
margin 0
71-
float right
72-
73-
.logo
74-
width 24px
75-
margin-right 10px
76-
display inline-block
77-
vertical-align middle
78-
79-
.view
80-
max-width 800px
81-
margin 0 auto
82-
position relative
83-
84-
.fade-enter-active, .fade-leave-active
85-
transition all .2s ease
86-
87-
.fade-enter, .fade-leave-active
88-
opacity 0
89-
90-
@media (max-width 860px)
91-
.header .inner
92-
padding 15px 30px
93-
94-
@media (max-width 600px)
95-
.header
96-
.inner
97-
padding 15px
98-
a
99-
margin-right 1em
100-
.github
101-
display none
48+
body {
49+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
50+
font-size: 15px;
51+
background-color: lighten(#eceef1, 30%);
52+
margin: 0;
53+
padding-top: 55px;
54+
color: #34495e;
55+
overflow-y: scroll;
56+
}
57+
58+
footer {
59+
position: fixed;
60+
bottom: 0;
61+
width: 100%;
62+
background-color: #fff;
63+
height: 40x;
64+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
65+
text-align: center;
66+
67+
.github {
68+
text-decoration: underline;
69+
}
70+
}
71+
72+
a {
73+
color: #34495e;
74+
text-decoration: none;
75+
}
76+
77+
.header {
78+
background-color: #ff6600;
79+
position: fixed;
80+
z-index: 999;
81+
height: 55px;
82+
top: 0;
83+
left: 0;
84+
right: 0;
85+
86+
.inner {
87+
max-width: 800px;
88+
box-sizing: border-box;
89+
margin: 0px auto;
90+
padding: 15px 5px;
91+
}
92+
93+
a {
94+
color: rgba(255, 255, 255, 0.8);
95+
line-height: 24px;
96+
transition: color 0.15s ease;
97+
display: inline-block;
98+
vertical-align: middle;
99+
font-weight: 300;
100+
letter-spacing: 0.075em;
101+
margin-right: 1.8em;
102+
103+
&:hover {
104+
color: #fff;
105+
}
106+
107+
&.router-link-active {
108+
color: #fff;
109+
font-weight: 400;
110+
}
111+
112+
&:nth-child(6) {
113+
margin-right: 0;
114+
}
115+
}
116+
}
117+
118+
.logo {
119+
width: 24px;
120+
margin-right: 10px;
121+
display: inline-block;
122+
vertical-align: middle;
123+
}
124+
125+
.view {
126+
max-width: 800px;
127+
margin: 0 auto;
128+
position: relative;
129+
}
130+
131+
.fade-enter-active, .fade-leave-active {
132+
transition: all 0.2s ease;
133+
}
134+
135+
.fade-enter, .fade-leave-active {
136+
opacity: 0;
137+
}
138+
139+
@media (max-width: 860px) {
140+
.header .inner {
141+
padding: 15px 30px;
142+
}
143+
}
144+
145+
@media (max-width: 600px) {
146+
.header {
147+
.inner {
148+
padding: 15px;
149+
}
150+
151+
a {
152+
margin-right: 1em;
153+
}
154+
155+
.github {
156+
display: none;
157+
}
158+
}
159+
}
102160
</style>

‎src/index.template.html

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>{{ title }}</title>
5-
<meta charset="utf-8">
6-
<meta name="mobile-web-app-capable" content="yes">
7-
<meta name="apple-mobile-web-app-capable" content="yes">
8-
<meta name="apple-mobile-web-app-status-bar-style" content="default">
9-
<link rel="apple-touch-icon" sizes="120x120" href="/public/logo-120.png">
10-
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
11-
<link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
12-
<meta name="theme-color" content="#f60">
13-
<link rel="manifest" href="/manifest.json">
14-
<style>
15-
#skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
16-
#skip a:focus { position:static; width:auto; height:auto; }
17-
</style>
18-
</head>
19-
<body>
3+
4+
<head>
5+
<title>{{ title }}</title>
6+
<meta charset="utf-8">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="apple-mobile-web-app-status-bar-style" content="default">
10+
<link rel="apple-touch-icon" sizes="120x120" href="/public/logo-120.png">
11+
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
12+
<link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
13+
<meta name="theme-color" content="#f60">
14+
<link rel="manifest" href="/manifest.json">
15+
<style>
16+
#skip a {
17+
position: absolute;
18+
left: -10000px;
19+
top: auto;
20+
width: 1px;
21+
height: 1px;
22+
overflow: hidden;
23+
}
24+
25+
#skip a:focus {
26+
position: static;
27+
width: auto;
28+
height: auto;
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
2034
<div id="skip"><a href="#app">skip to content</a></div>
2135
<!--vue-ssr-outlet-->
22-
</body>
23-
</html>
36+
</body>
37+
38+
</html>

0 commit comments

Comments
 (0)