Skip to content

Commit 677d9ff

Browse files
author
1138-4EB
committed
update logo; add banner; rework home and header
1 parent 10fc444 commit 677d9ff

File tree

10 files changed

+389
-118
lines changed

10 files changed

+389
-118
lines changed

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ email: hacdias@gmail.com
33
description: > # this means to ignore newlines until "baseurl:"
44
File Browser is a stylish and elegant web file manager you can use
55
as your own cloud or integrate on your own applications.
6-
baseurl: "/" # the subpath of your site, e.g. /blog
6+
baseurl: "" # the subpath of your site, e.g. /blog
77
url: "https://filebrowser.github.io"
88
twitter_username: hacdias
99
github_username: filebrowser
1010
google_analytics: UA-114347250-1
1111
markdown: kramdown
12-
kramdown:
12+
kramdown:
1313
syntax_highlighter_opts:
1414
disable : true
1515

‎_includes/head.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<meta http-equiv="X-UA-Compatible" content="IE=edge">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
6-
<meta name="author" content="Henrique Dias">
6+
<meta name="author" content="Henrique Dias [@hacdias]">
77
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
88
<meta property="og:url" content="{{ page.url | replace:'index.html','' | absolute_url }}">
99
<meta property="og:title" content="{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
@@ -17,8 +17,9 @@
1717
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
1818
<link rel="icon" href="{{ "/assets/images/favicon.png" | absolute_url }}" sizes="32x32">
1919
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
20+
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
2021
<link rel="stylesheet" href="{{ "/assets/main.css" | absolute_url }}">
2122
{% if jekyll.environment == 'production' and site.google_analytics %}
2223
{% include google-analytics.html %}
2324
{% endif %}
24-
</head>
25+
</head>

‎_includes/header.html‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎_layouts/default.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
{% include head.html %}
44
<body>
55
<div class="flex">
6-
{% include header.html %}
76
{{ content }}
87
</div>
98
{% include footer.html %}

‎_layouts/home.html‎

Lines changed: 53 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -5,142 +5,129 @@
55
<header class="hero is-info">
66
<div class="hero-body">
77
<div class="container">
8-
<h2 class="subtitle has-text-centered">A stylish file manager</h2>
9-
<figure class="image banner-header">
10-
<img src="assets/images/hero.png">
8+
<figure class="image home-banner">
9+
<img src="assets/images/banner.svg">
1110
</figure>
12-
13-
<div class="block has-text-centered">
14-
<a class="button is-medium is-primary is-inverted" href="{{ site.url }}{{ site.baseurl }}/quick-start/">
15-
Get Started
16-
</a>
17-
<a class="button is-medium is-primary is-inverted" href="https://github.com/filebrowser/filebrowser/">
18-
<span class="icon is-medium">
19-
<i class="fa fa-github"></i>
20-
</span>
21-
<span>Star</span>
22-
</a>
11+
<h2 class="subtitle has-text-centered has-text-dark">A stylish web-based file manager</h2>
12+
<div class="buttons is-centered">
13+
<a class="button is-medium is-link is-outlined" href="{{ site.url }}{{ site.baseurl }}/quick-start/">Quick Start</a>
14+
<a class="button is-medium is-link is-outlined" href="{{ site.url }}{{ site.baseurl }}/installation/">Installation</a>
15+
<a class="button is-medium is-link is-outlined" href="{{ site.url }}{{ site.baseurl }}/configuration/">Configuration</a>
2316
</div>
17+
<figure class="image home-hero">
18+
<img src="assets/images/hero.png">
19+
</figure>
2420
</div>
2521
</div>
2622
</header>
2723

2824
<section class="section" id="features">
2925
<div class="container">
30-
<h2 class="title is-2 is-spaced has-text-centered">Features</h2>
26+
<h2 class="has-text-primary title is-2 is-spaced has-text-centered">Features</h2>
3127
<div class="columns is-multiline">
3228
<div class="column is-one-third">
33-
<p class="heading has-text-centered">Cloud</p>
34-
<p class="has-text-centered">
29+
<div class="has-text-primary has-text-centered">
3530
<span class="icon is-large">
36-
<i class="fa fa-cloud"></i>
31+
<i class="fa fa-cloud fa-2x"></i>
3732
</span>
38-
</p>
33+
</div>
3934
<p>
40-
Create, edit, copy, move, download your files easily, everywhere, every time, use File Browser
41-
as your personal cloud.
35+
Create, edit, copy, move, download your files easily, everywhere, every time. Use File Browser
36+
as your <b>personal cloud</b>.
4237
</p>
4338
</div>
4439

4540
<div class="column is-one-third">
46-
<p class="heading has-text-centered">Search</p>
47-
<p class="has-text-centered">
41+
<div class="has-text-primary has-text-centered">
4842
<span class="icon is-large">
49-
<i class="fa fa-search"></i>
43+
<i class="fa fa-search fa-2x"></i>
5044
</span>
51-
</p>
45+
</div>
5246
<p>
53-
Search through your files and find the one instantly. Filter by type, by extension.
47+
<b>Search</b> through your files and find the one instantly. Filter by type, by extension...
5448
</p>
5549
</div>
5650

5751
<div class="column is-one-third">
58-
<p class="heading has-text-centered">Users</p>
59-
<p class="has-text-centered">
52+
<div class="has-text-primary has-text-centered">
6053
<span class="icon is-large">
61-
<i class="fa fa-users"></i>
54+
<i class="fa fa-users fa-2x"></i>
6255
</span>
63-
</p>
56+
</div>
6457
<p>
65-
You can have multiple users, each one with their own folder, permissions and access roles.
58+
<b>Multiple users</b> are supported, each one with their own folder, permissions and access roles.
6659
</p>
6760
</div>
6861

6962
<div class="column is-one-third">
70-
<p class="heading has-text-centered">Languages</p>
71-
<p class="has-text-centered">
63+
<div class="has-text-primary has-text-centered">
7264
<span class="icon is-large">
73-
<i class="fa fa-globe"></i>
65+
<i class="fa fa-globe fa-2x"></i>
7466
</span>
75-
</p>
67+
</div>
7668
<p>
77-
Available in multiple languages! It's not available in yours? You can contribute and translate it yourself
78-
for the community.
69+
Available in <b>multiple languages</b>! It's not <a href="https://github.com/filebrowser/frontend/tree/master/src/i18n">available</a> in yours?
70+
You can contribute and translate it yourself for the community.
7971
</p>
8072
</div>
8173

8274
<div class="column is-one-third">
83-
<p class="heading has-text-centered">Commands</p>
84-
<p class="has-text-centered">
75+
<div class="has-text-primary has-text-centered">
8576
<span class="icon is-large">
86-
<i class="fa fa-terminal"></i>
77+
<i class="fa fa-terminal fa-2x"></i>
8778
</span>
88-
</p>
79+
</div>
8980
<p>
90-
You can execute commands such as git, svn or hg on the web interface. They are configured by you
91-
so you can run whatever you want.
81+
<b>Execute commands</b> such as <code>git</code>, <code>svn</code>, <code>hg</code>, <code>gofmt</code>... on the web interface.
82+
They are <a href="{{ site.url }}{{ site.baseurl }}/configuration/">configured</a> by you so you can run whatever you want.
9283
</p>
9384
</div>
9485

9586
<div class="column is-one-third">
96-
<p class="heading has-text-centered">Static Binary</p>
97-
<p class="has-text-centered">
87+
<div class="has-text-primary has-text-centered">
9888
<span class="icon is-large">
99-
<i class="fa fa-archive"></i>
89+
<i class="fa fa-archive fa-2x"></i>
10090
</span>
101-
</p>
91+
</div>
10292
<p>
103-
File Browser is a single executable file with no dependencies. You just need to download
104-
it and add it to your PATH.
93+
File Browser is a <b>single executable file with no dependencies</b>. Just download
94+
it and add it to your <code>PATH</code>. See <a href="{{ site.url }}{{ site.baseurl }}/installation/">Installation</a>.
10595
</p>
10696
</div>
107-
97+
10898
<div class="column is-one-third">
109-
<p class="heading has-text-centered">Caddy</p>
110-
<p class="has-text-centered">
99+
<div class="has-text-primary has-text-centered">
111100
<span class="icon is-large">
112-
<i class="fa fa-lock"></i>
101+
<i class="fa fa-lock fa-2x"></i>
113102
</span>
114-
</p>
103+
</div>
115104
<p>
116-
File Browser is available as a <a href="/installation/#caddy">plugin</a> for Caddy,
117-
which is the HTTP/2 web server with automatic HTTPS.
105+
File Browser is available as a <a href="{{ site.url }}{{ site.baseurl }}/installation/#caddy">plugin</a> for <a href="https://caddyserver.com/">Caddy</a>
106+
(a HTTP/2 web server with automatic HTTPS).
118107
</p>
119108
</div>
120109

121110
<div class="column is-one-third">
122-
<p class="heading has-text-centered">Docker</p>
123-
<p class="has-text-centered">
111+
<div class="has-text-primary has-text-centered">
124112
<span class="icon is-large">
125113
<i class="fa">
126-
{% include docker.svg %}
114+
<img src="assets/images/docker.svg">
127115
</i>
128116
</span>
129-
</p>
117+
</div>
130118
<p>
131-
File Browser can be easily installed using Docker with <code>docker pull hacdias/filemanager</code>.
119+
File Browser can be easily installed using <a href="https://www.docker.com/">Docker</a> with <code>docker pull hacdias/filebrowser</code>.
132120
</p>
133121
</div>
134122

135123
<div class="column is-one-third">
136-
<p class="heading has-text-centered">Static Generators</p>
137-
<p class="has-text-centered">
124+
<div class="has-text-primary has-text-centered">
138125
<span class="icon is-large">
139-
<i class="fa fa-file-text"></i>
126+
<i class="fa fa-file-text fa-2x"></i>
140127
</span>
141-
</p>
128+
</div>
142129
<p>
143-
File Browser plays well with some static website generators, such as Jekyll and Hugo.
130+
File Browser plays well with <b>static website generators</b>, such as <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://gohugo.io/">Hugo</a>.
144131
</p>
145132
</div>
146133
</div>

‎_layouts/page.html‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,25 @@
22
layout: default
33
---
44

5-
<article>
6-
<header class="hero is-info">
7-
<div class="hero-body">
8-
<div class="container">
9-
<h1 class="title is-1 is-spaced">{{ page.title | escape }}</h1>
10-
</div>
5+
<header class="hero is-info">
6+
<div class="hero-body">
7+
<div class="container">
8+
<nav class="breadcrumb is-medium has-succeeds-separator has-text-primary has-text-weight-bold" aria-label="breadcrumbs">
9+
<ul>
10+
<li>
11+
<a class="logo" href="{{ "/" | absolute_url }}">
12+
<img src="https://github.com/filebrowser/logo/raw/master/icon_raw.png">
13+
File Browser
14+
</a>
15+
</li>
16+
<li class="is-active"><a href="#" aria-current="page">{{ page.title | escape }}</a></li>
17+
</ul>
18+
</nav>
1119
</div>
12-
</header>
20+
</div>
21+
</header>
1322

23+
<article>
1424
<div class="section">
1525
<div class="container">
1626
<div class="columns">

‎_sass/style.sass‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
// 1. Import the initial variables
22
@import "bulma/sass/utilities/initial-variables"
33

4+
$info: #bdeaff
45
$blue: #2979ff
56
$primary: $blue
7+
$breadcrumb-item-separator-color: $blue
68

79
@import "bulma/bulma"
810

@@ -14,32 +16,28 @@ body
1416
.flex
1517
flex: 1 0 auto
1618

17-
.container
18-
max-width: 960px !important
19-
width: 95%
19+
.breadcrumb img
20+
max-height: 1.75rem
21+
margin-right: .5rem
2022

21-
.is-transparent
22-
background-color: transparent
23+
.hero-body
24+
padding: 2rem 1.5rem
2325

24-
.hero.is-ocean
25-
background-color: #40c4ff
26-
27-
.logo
28-
color: #fff
29-
font-weight: bold
26+
.home-hero
27+
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
28+
border-radius: .1em
29+
margin: 2em auto
30+
max-width: 35em
3031

31-
.fa svg
32-
height: 42px
33-
fill: #4a4a4a
32+
.home-banner
33+
margin: 1em auto
34+
max-width: 40em
3435

3536
#features .icon.is-large
3637
margin-bottom: .5em
3738

38-
.banner-header
39-
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
40-
border-radius: .1em
41-
margin: 2em auto
42-
max-width: 50em
39+
.footer
40+
padding: 1.5rem
4341

4442
.shields
4543
margin-top: 10px

0 commit comments

Comments
 (0)