Skip to content

Commit 20b15bb

Browse files
jamesdanielsjamesdaniels
committed
Branding updates
1 parent 2115299 commit 20b15bb

15 files changed

+57
-68
lines changed

‎frontend/assets/img/firebase-github.png‎

-7.24 KB
Loading

‎frontend/assets/img/firebase-icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎frontend/assets/img/guy-fireats.png‎

-42 KB
Loading

‎frontend/assets/img/oss-logo-icon-only.png‎

-2.67 KB
Binary file not shown.

‎frontend/assets/img/oss-logo-small.png‎

-9.4 KB
Binary file not shown.

‎frontend/assets/styles/global.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ body {
2121

2222
-webkit-font-smoothing: antialiased;
2323
-moz-osx-font-smoothing: grayscale;
24-
font-family: "Roboto", sans-serif;
24+
font-family: "Google Sans", Helvetica, Arial, sans-serif;
2525
}
2626

2727
h1,
@@ -297,7 +297,7 @@ blockquote {
297297

298298
span {
299299
color: #656565;
300-
font-family: Roboto, Helvetica, Arial, sans-serif;
300+
font-family: "Google Sans", Helvetica, Arial, sans-serif;
301301
}
302302

303303
button {

‎frontend/components/HeaderBar.vue‎

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,14 @@
1515
to="/"
1616
class="logo"
1717
>
18-
<img src="@/assets/img/oss-logo-small.png">
18+
<img src="@/assets/img/firebase-icon.svg" width="32" height="32">
19+
<span><strong>Firebase</strong> Open Source</span>
1920
</NuxtLink>
2021
</div>
2122

2223
<!-- Need to render this client-side only or Nuxt gets mad -->
2324
<div class="search">
24-
<client-only>
25-
<SearchInput />
26-
</client-only>
25+
<SearchInput />
2726
</div>
2827
</div>
2928
<div class="col_gutter" />
@@ -125,73 +124,27 @@ const headers = [{ id: 0 }, { id: 1, spacer: true }]
125124
grid-template-columns: 1fr fit-content(100%);
126125
justify-content: space-between;
127126
padding: 0px 20px;
128-
129-
@media (max-width: $phone) {
130-
grid-template-columns: fit-content(100%) 1fr;
131-
}
132127
}
133128
134129
.search {
135130
display: inline-flex;
136131
align-items: center;
137-
138132
margin-left: 16px;
139-
140-
.search-input {
141-
display: flex;
142-
align-items: center;
143-
border: 1px solid rgba(0,0,0,0.075);
144-
border-radius: 9999px;
145-
146-
padding-top: 2px;
147-
padding-bottom: 2px;
148-
padding-right: 4px;
149-
padding-left: 4px;
150-
151-
background: rgba(0,0,0,0.025);
152-
153-
transition: border 0.2s ease-out;
154-
transition: box-shadow 0.2s ease-out;
155-
}
156-
157-
.search-input:focus-within {
158-
border: 1px solid #039be5;
159-
box-shadow: 0px 0px 4px 1px rgba(3,155,229,0.37);
160-
161-
i {
162-
color: #039be5;
163-
}
164-
}
165-
166-
i {
167-
font-size: 1.2rem;
168-
margin-top: 1px;
169-
margin-left: 2px;
170-
margin-right: 2px;
171-
}
172-
173-
input {
174-
appearance: none;
175-
outline: none;
176-
border: none;
177-
background: none;
178-
font-size: .9rem;
179-
line-height: 1.5rem;
180-
}
181133
}
182134
183135
.title {
184136
a.logo {
185137
display: block;
186138
overflow: hidden;
139+
margin: 12px 0 12px -12px;
140+
span {
141+
font-size: $header-height - 16px;
142+
color: #5e5e5e;
143+
}
187144
}
188145
img {
189-
margin-top: 4px;
146+
margin: 0 4px -6px 0;
190147
height: $header-height - 8px;
191-
192-
@media (max-width: $phone) {
193-
content:url('../../../assets/img/oss-logo-icon-only.png')
194-
}
195148
}
196149
}
197150

‎frontend/components/SearchInput.vue‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
11
<template>
2-
<span class="algolia" />
2+
<span ref="search">
3+
<button type="button" aria-label="Search (Command+K)" class="DocSearch DocSearch-Button">
4+
<span class="DocSearch-Button-Container">
5+
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" class="DocSearch-Search-Icon">
6+
<path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
7+
</path>
8+
</svg>
9+
<span class="DocSearch-Button-Placeholder">Search</span>
10+
</span>
11+
<span class="DocSearch-Button-Keys">
12+
<kbd class="DocSearch-Button-Key">⌘</kbd>
13+
<kbd class="DocSearch-Button-Key">K</kbd>
14+
</span>
15+
</button>
16+
</span>
317
</template>
418

519
<script setup lang="ts">
620
import docsearch from '@docsearch/js'
7-
import '@docsearch/css'
21+
22+
const search = ref("search");
823
924
onMounted(() => {
1025
docsearch({
11-
container: '.algolia',
26+
container: search.value,
1227
appId: 'BH4D9OD16A',
1328
apiKey: '1f64b5546043241736496d3b1e0980a6',
1429
indexName: 'firebaseopensource',
30+
placeholder: 'Find a project',
1531
})
16-
})
32+
});
1733
</script>
34+
35+
<style lang="scss">
36+
@use "../node_modules/@docsearch/css/dist/style.scss";
37+
</style>

‎frontend/components/WelcomeCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
class="content welcomeCard"
99
>
1010
<div class="image">
11-
<img src="@/assets/img/firebase-github.png">
11+
<img src="@/assets/img/firebase-github.png" width="213" height="160">
1212
</div>
1313
<div class="body">
1414
<h1>Firebase ❤️ Open Source</h1>

‎frontend/nuxt.config.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,23 @@ export default async () => {
2323

2424
app: {
2525
head: {
26-
title: process.env.npm_package_name || 'Firebase Open Source',
26+
title: 'Firebase Open Source',
2727
link: [{
2828
rel: 'stylesheet',
29-
href: '//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700|Material+Icons&display=swap',
29+
href: '//fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400;1,700&family=Roboto+Mono:ital,wght@0,400;&display=swap',
30+
}, {
31+
rel: 'stylesheet',
32+
href: '//fonts.googleapis.com/css2?family=Material+Icons&display=block',
3033
}, {
3134
rel: 'icon',
3235
type: 'image/x-icon',
3336
href: '/favicon.ico',
37+
}, {
38+
rel: "shortcut icon",
39+
href: "https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/favicon.png",
40+
}, {
41+
rel: "apple-touch-icon",
42+
href: "https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/touchicon-180.png",
3443
}, {
3544
rel: 'preconnect',
3645
href: 'https://www.google-analytics.com',
@@ -52,13 +61,19 @@ gtag('config', 'UA-110728272-1');`,
5261
}, {
5362
name: 'viewport',
5463
content: 'width=device-width, initial-scale=1',
64+
}, {
65+
content: "https://firebase.google.com/images/social.png",
66+
name: "image"
5567
}, {
5668
hid: 'description',
5769
name: 'description',
5870
content: process.env.npm_package_description || '',
5971
}, {
6072
property: 'og:image',
61-
content: 'https://firebaseopensource.com/logo-small.png',
73+
content: 'https://firebase.google.com/images/social.png',
74+
}, {
75+
property: 'twitter:image',
76+
content: 'https://firebase.google.com/images/social.png',
6277
}, {
6378
property: 'og:site_name',
6479
content: 'Firebase Open Source',

0 commit comments

Comments
 (0)